added animated about me description

src/app/about/page.tsx

@@ -1,10 +1,17 @@
 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>{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/components/framer/framerTextAnimate.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Center } from "@react-three/drei";
+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 };
+
+const FramerTextAnimate = ({ children }: 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(() => {
+    const controls = animate(count, baseText.length, {
+      //   type: "tween", // Not really needed because adding a duration will force "tween"
+      duration: 15,
+      ease: "easeInOut",
+    });
+    return controls.stop;
+  }, []);
+
+  return (
+    <>
+      <motion.span
+        className={`${special_elite.className} w-1/2 flex justify-between whitespace-normal tracking-wide text-3xl leading-relaxed`}
+      >
+        {displayText}
+      </motion.span>
+    </>
+  );
+};
+
+export default FramerTextAnimate;