Clean up intro code

amrabed · Sep 7, 2024 · 210dc3c · 210dc3c
1 parent 8537ef3
commit 210dc3c
Showing 1 changed file with 42 additions and 51 deletions.
diff --git a/src/components/intro.jsx b/src/components/intro.jsx
@@ -1,8 +1,6 @@
 "use client";
 
-import Head from "next/head";
-
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TypeAnimation } from "react-type-animation";
 
 const Intro = () => {
@@ -43,57 +41,50 @@ const Intro = () => {
   }, [homeRef, isHome]);
 
   return (
-    <Fragment>
-      <Head>
-        <title>Amr Abed</title>
-      </Head>
-      <section id="home">
+    <section id="home">
+      <div
+        className="min-h-[100vh] overflow-x-hidden px-[20px] md:px-[50px] lg:px-[100px] xl:px-[200px] 2xl:px-[400px] md:flex content-center items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm"
+        ref={homeRef}
+      >
         <div
-          className="min-h-[100vh] overflow-x-hidden px-[20px] md:px-[50px] lg:px-[100px] xl:px-[200px] 2xl:px-[400px] md:flex content-center items-center justify-between shadow-zinc-300 dark:shadow-zinc-700 shadow-sm"
-          ref={homeRef}
-        >
-          <div
-            className={
-              "translate-x-[500px] transition-all opacity-0 duration-700 w-[300px] h-[300px] md:w-[400px] md:h-[400px] bg-cover m-auto md:m-0 mt-[40px] md:mt-0 bg-no-repeat rounded-full"
-            }
-            ref={profileRef}
-            style={{
-              backgroundImage:
-                "url(https://avatars.githubusercontent.com/u/3361565?v=4)",
-            }}
-          />
+          className={
+            "translate-x-[500px] transition-all opacity-0 duration-700 w-[300px] h-[300px] md:w-[400px] md:h-[400px] bg-cover m-auto md:m-0 mt-[40px] md:mt-0 bg-no-repeat rounded-full"
+          }
+          ref={profileRef}
+          style={{
+            backgroundImage:
+              "url(https://avatars.githubusercontent.com/u/3361565?v=4)",
+          }}
+        />
 
-          <div
-            className="translate-x-[-500px] transition-all duration-700 opacity-0"
-            ref={introRef}
-          >
-            {/* Profile Name */}
-            <p className="text-2xl md:text-4xl py-2 font-sans text-center text-nowrap">
-              I&apos;m
-              <span className="text-primary">
-                {" a"}
-                <TypeAnimation
-                  sequence={[
-                    "n ENGINEER",
-                    2000,
-                    " RESEARCHER",
-                    2000,
-                    "n INSTRUCTOR",
-                    2000,
-                    " CREATOR",
-                    2000,
-                  ]}
-                  wrapper="span"
-                  speed={10}
-                  // style={{ className="text-primary dark:text-primary-dark" }}
-                  repeat={Infinity}
-                />
-              </span>
-            </p>
-          </div>
+        <div
+          className="translate-x-[-500px] transition-all duration-700 opacity-0"
+          ref={introRef}
+        >
+          <p className="text-2xl md:text-4xl py-2 font-sans text-center text-nowrap">
+            I&apos;m
+            <span className="text-primary">
+              {" a"}
+              <TypeAnimation
+                sequence={[
+                  "n ENGINEER",
+                  2000,
+                  " RESEARCHER",
+                  2000,
+                  "n INSTRUCTOR",
+                  2000,
+                  " CREATOR",
+                  2000,
+                ]}
+                wrapper="span"
+                speed={10}
+                repeat={Infinity}
+              />
+            </span>
+          </p>
         </div>
-      </section>
-    </Fragment>
+      </div>
+    </section>
   );
 };