feat: add a component for random text hover effect

src/App.jsx

@@ -3,7 +3,7 @@ import { About, Contact, Experience, Home, Projects, Skills } from "./sections";
 
 const App = () => {
   return (
-    <main className="relative flex min-h-screen w-full flex-col overflow-x-hidden bg-white font-space-grotesk transition-colors duration-500 dark:bg-[#100E34]">
+    <main className="relative flex min-h-screen w-full flex-col overflow-x-hidden scroll-smooth bg-white font-space-grotesk transition-colors duration-500 dark:bg-[#100E34]">
       <Header />
       <Home />
       <About />

src/components/Footer.jsx

@@ -1,17 +1,18 @@
 import { FaXTwitter } from "react-icons/fa6";
 import { FiGithub, FiLinkedin } from "react-icons/fi";
 import { MdOutlineEmail } from "react-icons/md";
+import ScrambleText from "./ScrambleText";
 
 const Footer = () => {
   const year = new Date().getFullYear();
   return (
     <footer className="mt-auto flex h-80 w-full flex-col items-center bg-black px-5 pt-5 text-white md:h-60 md:pt-0">
       <div className="flex w-full justify-between gap-4 md:mt-6 lg:w-7/12">
         <div className="mt-10 md:mt-4">
-          <h1 className="font-rajdhani text-3xl font-extrabold md:text-4xl">
-            Kiran Mahajan
-            <span className="text-yellow dark:text-violet">.</span>
-          </h1>
+          <div className="flex font-rajdhani text-3xl font-extrabold md:text-4xl">
+            <ScrambleText text="Kiran Mahajan" />
+            <span className="ml-auto text-yellow dark:text-violet">.</span>
+          </div>
           <h3 className="text-sm text-gray-200 md:text-base">
             Software Development Engineer
           </h3>

src/components/ScrambleText.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+
+const letters =
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%";
+
+const ScrambleText = ({ text }) => {
+  const intervalRef = useRef(null);
+  const h1Ref = useRef(null);
+
+  useEffect(() => {
+    const handleMouseOver = (event) => {
+      let iteration = 0;
+
+      clearInterval(intervalRef.current);
+
+      intervalRef.current = setInterval(() => {
+        event.target.innerText = event.target.innerText
+          .split("")
+          .map((letter, index) => {
+            if (index < iteration) {
+              return event.target.dataset.value[index];
+            }
+
+            return letters[Math.floor(Math.random() * letters.length)];
+          })
+          .join("");
+
+        if (iteration >= event.target.dataset.value.length) {
+          clearInterval(intervalRef.current);
+        }
+
+        iteration += 1 / 3;
+      }, 30);
+    };
+
+    const h1Element = h1Ref.current;
+    h1Element.addEventListener("mouseover", handleMouseOver);
+
+    return () => {
+      h1Element.removeEventListener("mouseover", handleMouseOver);
+      clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  return (
+    <h1 ref={h1Ref} data-value={text}>
+      {text}
+    </h1>
+  );
+};
+
+export default ScrambleText;

src/components/index.js

@@ -1,2 +1,3 @@
 export { default as Header } from "./Header";
 export { default as Footer } from "./Footer";
+export { default as ScrambleText } from "./ScrambleText";

src/sections/About.jsx

@@ -1,5 +1,11 @@
+import { ScrambleText } from "../components";
+
 const About = () => {
-  return <section id="about">About</section>;
+  return (
+    <section id="about" className="h-96">
+      <ScrambleText text="Kiran Mahajan" />
+    </section>
+  );
 };
 
 export default About;