Merge pull request #15 from gractwo/9-add-about-me-section

9 add about me section

src/app/about/page.tsx

@@ -1,10 +1,25 @@
 import Stars from "@/components/stars";
 import React from "react";
+import FramerTextAnimate from "@/components/framer/framerTextAnimate";
+
+const aboutMeText =
+  "I am a one-person studio with over 1.5 years of experience in organic 3D modeling and resin 3D printing. My work primarily focuses on themes of alien/cosmic horror, although I often strain towards classic themes of daemonic fiends and monsters from high fantasy. Most of conceptual work is done in Blender, while i tend to incorporate ZBRUSH for the rest of the process.";
 
 const page = () => {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
+      <div className="fixed w-3/4 top-1/4 flex justify-center items-center self-center text-white text-justify">
+        <FramerTextAnimate
+          styles={
+            "w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed"
+          }
+          duration={15}
+          delay={0}
+        >
+          {aboutMeText}
+        </FramerTextAnimate>
+      </div>
     </main>
   );
 };

src/app/contact/page.tsx

@@ -5,6 +5,7 @@ const page = () => {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
+      <div className="fixed top-1/2"></div>
     </main>
   );
 };

src/app/page.tsx

@@ -1,21 +1,50 @@
 import Stars from "@/components/stars";
 import Skeleton from "@/components/mesh/skeleton";
 import Link from "next/link";
-import { Suspense } from "react";
+import FramerTextAnimate from "@/components/framer/framerTextAnimate";
+
+const about = "ABOUT ME";
+const models = "MY MODELS";
+const contact = "CONTACT ME";
 
 export default function Home() {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
-      <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 gap-5 text-white">
-        <Link className="text-5xl  hover:text-shadow" href={"/about"}>
-          ABOUT ME
+
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white">
+        <Link href={"/about"}>
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={0.5}
+          >
+            {about}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/models"}>
-          MY MODELS
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1}
+          >
+            {models}
+          </FramerTextAnimate>
         </Link>
         <Link className="text-5xl hover:text-shadow" href={"/contact"}>
-          CONTACT
+          <FramerTextAnimate
+            styles={
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+            }
+            duration={2}
+            delay={1.5}
+          >
+            {contact}
+          </FramerTextAnimate>
         </Link>
         <div className=" fixed h-screen w-1/2 right-0 top-0">
           <Skeleton />

src/components/framer/framerTextAnimate.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import { Special_Elite } from "next/font/google";
+import React, { useEffect } from "react";
+
+const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
+
+type props = {
+  children: string;
+  styles: string;
+  duration: number;
+  delay: number;
+};
+
+const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
+  const count = useMotionValue(0);
+  const baseText = children as string;
+
+  const rounded = useTransform(count, (latest) => Math.round(latest));
+  const displayText = useTransform(rounded, (latest) =>
+    baseText.slice(0, latest)
+  );
+
+  useEffect(() => {
+    // Delay the animation start
+    const delayTimeout = setTimeout(() => {
+      const controls = animate(count, baseText.length, {
+        duration: duration,
+        ease: "easeInOut",
+      });
+      return () => controls.stop();
+    }, delay * 1000);
+
+    // Clear the timeout on unmount to prevent memory leaks
+    return () => clearTimeout(delayTimeout);
+  }, []);
+
+  return (
+    <>
+      <motion.span className={`${special_elite.className} ${styles}`}>
+        {displayText}
+      </motion.span>
+    </>
+  );
+};
+
+export default FramerTextAnimate;