i did some work

src/components/main/avatar.css

@@ -30,3 +30,38 @@ background: transparent;
     width: 100%;
     height: auto;
 }
+.wave {
+    animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
+    animation-duration: 2.5s; /* Change to speed up or slow down */
+    animation-iteration-count: infinite; 
+    transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
+    display: inline-block;
+  }
+  
+  @keyframes wave-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    10% {
+      transform: rotate(14deg);
+    } /* The following five values can be played with to make the waving more or less extreme */
+    20% {
+      transform: rotate(-8deg);
+    }
+    30% {
+      transform: rotate(14deg);
+    }
+    40% {
+      transform: rotate(-4deg);
+    }
+    50% {
+      transform: rotate(10deg);
+    }
+    60% {
+      transform: rotate(0deg);
+    } /* Reset for the last half to pause */
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  

src/components/main/index.tsx

@@ -1,22 +1,33 @@
 import './avatar.css'
+import avatar from '../../assets/avatar.png'
 import ScrollAnimation from 'react-animate-on-scroll'
 import Tilt from 'react-parallax-tilt'
+import Typewriter from './type'
+import { useEffect, useRef } from 'react'
 // import 'animate.css/animate.css'
 export default function Main() {
+  const mainEl = useRef(null)
+  // useEffect(() => {
+  //   if (document.activeElement !== mainEl.current) {
+  //     // do something
+  //     mainEl.current.className 
+  //   }
+  // })
     return (
-        <div className='hero min-h-screen ' >
-    <div style={{ animation: "fadeInDown", animationDuration: "1.5s", zIndex: 9999 }} className='animate__animated animate__fadeIn' >
-      <div className='hero-content flex-col lg:flex-row max-w-xl' style={{ zIndex: 9999 }}>
+        <div className={'hero min-h-screen'} ref={mainEl}>
+    <div style={{ animation: "fadeInDown", animationDuration: "1.5s", zIndex: 5 }} className={ 'animate__animated animate__fadeIn' } >
+      <div className='hero-content flex-col lg:flex-row max-w-xl' style={{ zIndex: 5 }}>
         <div className='avatar'>
           <Tilt glareEnable glareColor={'#f9e2af'}>
-            <img src={'favicon.png'} />
+            <img src={avatar} />
           </Tilt>
         </div>
 
         <div style={{ zIndex: 9999 }}>
 
-          <h1 className='text-5xl font-bold zeon-word' >Saahild.com</h1>
-          <p>WIP.</p>
+          <h1 className='text-5xl font-bold'><span className={'wave'}>👋🏾 </span> Hi im <span className='text-highlight'>Saahil</span></h1>
+          <p>Welcome to my site.</p>
+          <Typewriter  />
         </div>
       </div>
     </div>

src/components/main/type.tsx

@@ -0,0 +1,14 @@
+import Typewriter from 'typewriter-effect'
+export default function typewriter() {
+    return <Typewriter 
+    options={{
+        strings: ['Developer', 'Gamer', 'Builder'],
+        autoStart: true,
+        loop: true,
+        deleteSpeed: 100,
+        wrapperClassName: 'text-highlight',
+        cursor: ' |',
+        devMode: process.env.NODE_ENV !== 'production'
+    }}
+    />
+}