i did some work

src/components/infobelowmain/index.tsx

@@ -0,0 +1,46 @@
+import Icon from "../static/Icons";
+
+export default function InfogramBelowMain() {
+    return <div className="mt-20 ml-20 container">
+        <h1 className="ml-25 font-bold text-3xl">
+            Some basic stuff about <span className="text-highlight">me</span>
+            </h1>
+            <p>
+            I started programming during the Covid Pandemic in 2020.
+            <br />
+              <br />I am fluent in new like programming languages such as
+              <i>
+                <b className='text-highlight'>
+                  {' '}
+                  <Icon icon="css"/> CSS , <Icon icon="html" /> HTML, <Icon icon="javascript" />Javascript and <Icon icon="typescript" />Typescript.{' '}
+                </b>
+              </i>
+              <br />
+              <br /> My field of Interest's are building new &nbsp;
+              <i>
+                <b className='text-highlight '>
+                  Web Technologies and Products{' '}
+                </b>{' '}
+                and also in areas related to{' '}
+                <b className='text-highlight '>
+                  Backend Services, CLI Services
+                </b>
+              </i>
+              <br />
+              <br />
+              Whenever possible, I also apply my passion for developing products
+              with <b className='text-highlight '><Icon icon="nodejs" /> Node.js</b> and
+              <i>
+                <b className='text-highlight '>
+                  {' '}
+                  Modern Javascript Library and Frameworks
+                </b>
+              </i>
+              &nbsp; like
+              <i>
+                <b className='text-highlight '>  <Icon icon="reactjs" />React.js</b>
+              </i>
+            </p>
+        <br />
+    </div>
+}

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'
+    }}
+    />
+}

src/components/navbar/index.tsx

@@ -0,0 +1,32 @@
+import "./nav.css"
+function NavLinks() {
+return <>
+<li><a>About</a></li>
+        <li><a>Projects</a></li>
+<li><a>Contact</a></li>
+</>
+}
+export default function Navbar() {
+    return <div className="navbar" style={{ zIndex: 9999, background: "var(--base)", position: "fixed",  }}>
+    <div className="navbar-start">
+      <div className="dropdown">
+        <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
+        </div>
+        <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 nav-links">
+       <NavLinks />
+      </ul>
+      </div>
+      <a className="btn btn-ghost text-xl">saahild.com</a>
+    
+      <div className="navbar-center hidden lg:flex">
+      <ul className="menu menu-horizontal px-1 nav-links">
+        <NavLinks />
+      </ul>
+    </div>
+    </div>
+    <div className="navbar-end">
+      {/* <a className="btn">Button</a> */}
+    </div>
+  </div>
+}

src/components/navbar/nav.css

@@ -0,0 +1,4 @@
+.nav-links {
+    font-size:medium;
+    @apply font-bold;
+}

src/components/static/Icons.tsx

@@ -0,0 +1,17 @@
+import cssIcon from "../../assets/icons/css.svg"
+import htmlIcon from "../../assets/icons/html.svg"
+import reactjs from "../../assets/icons/reactjs.svg"
+import nodejs from "../../assets/icons/nodejs.svg"
+import typescript from "../../assets/icons/typescript.svg"
+import javascript from "../../assets/icons/javascript.svg"
+const icons:any = {
+    "css": cssIcon,
+    "html": htmlIcon,
+    "reactjs": reactjs,
+    "nodejs":    nodejs,
+    "typescript": typescript,
+    javascript
+}
+export default function Icon({ icon, className }: { icon: string, className?: string }) {
+    return <img  src={icons[icon]} className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")} />
+}