Init v2

src/components/main/avatar.css

@@ -0,0 +1,32 @@
+@keyframes float {
+    0% {
+       /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
+        transform: translatey(0px);
+   }
+    50% {
+       /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
+        transform: translatey(-20px);
+   }
+    100% {
+        /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
+        transform: translatey(0px);
+   }
+}
+.avatar {
+    width: 150px;
+    height: 150px;
+    box-sizing: border-box;  /* Not needed */
+  /*   
+    border: 5px white solid;
+    border-radius: 50%;
+    */ 
+background: transparent;
+  overflow: hidden;
+   /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
+    transform: translatey(0px);
+    animation: float 6s ease-in-out infinite;
+}
+.avatar img {
+    width: 100%;
+    height: auto;
+}

src/components/main/index.tsx

@@ -0,0 +1,25 @@
+import './avatar.css'
+import ScrollAnimation from 'react-animate-on-scroll'
+import Tilt from 'react-parallax-tilt'
+// import 'animate.css/animate.css'
+export default function Main() {
+    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='avatar'>
+          <Tilt glareEnable glareColor={'#f9e2af'}>
+            <img src={'favicon.png'} />
+          </Tilt>
+        </div>
+
+        <div style={{ zIndex: 9999 }}>
+
+          <h1 className='text-5xl font-bold zeon-word' >Saahild.com</h1>
+          <p>WIP.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+    )
+}