perf: Updated pre-renders for Hero component. Divided Hero into Conta…

…ctMeBtn component
LakioLive · Feb 2, 2025 · 8cd69ea · 8cd69ea
1 parent a9252be
commit 8cd69ea
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 32 deletions.
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -23,19 +23,12 @@
 html {
     scroll-behavior: smooth;
 
-    &.dark {
-        body {
-            background-color: #000;
-            color: #fff;
-        }
+    body {
+        background-color: #000;
+        color: #fff;
     }
 }
 
-body {
-    background-color: #fff;
-    color: #000;
-}
-
 @property --border-angle {
     inherits: false;
     initial-value: 0deg;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,3 @@
-import { Suspense } from "react";
 import Navbar from "@/components/layout/navbar/Navbar";
 import Hero from "@/components/layout/hero/Hero";
 import AboutMe from "@/components/layout/aboutMe/AboutMe";
@@ -9,14 +8,12 @@ import Footer from "@/components/layout/footer/Footer";
 export default function Home() {
     return (
         <>
-            {/* <Suspense fallback={<>LOADING...</>}> */}
             <Navbar />
             <Hero />
             <AboutMe />
             <Skills />
             <Projects />
             <Footer />
-            {/* </Suspense> */}
         </>
     );
 }
diff --git a/src/components/layout/hero/Hero.tsx b/src/components/layout/hero/Hero.tsx
@@ -1,11 +1,7 @@
-"use client";
-
-import { Link } from "react-scroll";
-import { motion } from "motion/react";
-import { FaArrowDown } from "react-icons/fa";
+import * as motion from "motion/react-client";
 import { BackgroundBeamsWithCollision } from "@/components/ui/backgroundBeamsWithCollision/BackgroundBeamsWithCollision";
 import { TextGenerateEffect } from "@/components/ui/textGenerateEffect/TextGenerateEffect";
-import { HoverBorderGradient } from "@/components/ui/hoverBorderGradient/HoverBorderGradient";
+import ContactMeBtn from "@/components/ui/contactMeBtn/ContactMeBtn";
 
 export default function Hero() {
     const duration = 1.5;
@@ -25,7 +21,10 @@ export default function Hero() {
     };
 
     return (
-        <section id="home" className="relative w-full h-screen rounded-lg">
+        <section
+            id="home"
+            className="relative w-full text-white bg-black h-screen rounded-lg"
+        >
             <BackgroundBeamsWithCollision className="flex justify-center items-center w-full h-screen bg-black bg-grid-light-blue/[0.4]">
                 <div className="absolute inset-0 flex justify-center items-center bg-black [mask-image:linear-gradient(0deg,_rgba(0,0,0,1)_30%,_rgba(255,255,255,0)_100%)]"></div>
                 <div className="relative grid place-items-center z-10">
@@ -51,18 +50,7 @@ export default function Hero() {
                         animate="visible"
                         variants={variants}
                     >
-                        <HoverBorderGradient containerClassName="mt-4">
-                            <Link
-                                spy={true}
-                                smooth={true}
-                                duration={500}
-                                to="contactme"
-                                className="flex gap-2 items-center xl:text-2xl md:text-xl text-lg font-semibold z-20"
-                            >
-                                Contact me{" "}
-                                <FaArrowDown className="xl:text-xl md:text-base text-sm" />
-                            </Link>
-                        </HoverBorderGradient>
+                        <ContactMeBtn />
                     </motion.div>
                 </div>
             </BackgroundBeamsWithCollision>

diff --git a/src/components/ui/contactMeBtn/ContactMeBtn.tsx b/src/components/ui/contactMeBtn/ContactMeBtn.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Link } from "react-scroll";
+import { FaArrowDown } from "react-icons/fa";
+import { HoverBorderGradient } from "@/components/ui/hoverBorderGradient/HoverBorderGradient";
+
+export default function ContactMeBtn() {
+    return (
+        <HoverBorderGradient containerClassName="mt-4">
+            <Link
+                spy={true}
+                smooth={true}
+                duration={500}
+                to="contactme"
+                className="flex gap-2 items-center xl:text-2xl md:text-xl text-lg font-semibold z-20"
+            >
+                Contact me{" "}
+                <FaArrowDown className="xl:text-xl md:text-base text-sm" />
+            </Link>
+        </HoverBorderGradient>
+    );
+}
diff --git a/src/components/ui/textGenerateEffect/TextGenerateEffect.tsx b/src/components/ui/textGenerateEffect/TextGenerateEffect.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { useEffect } from "react";
 import { motion, stagger, useAnimate } from "motion/react";
 import { cn } from "@/lib/utils";