Merge pull request #124 from 0xkev21/Kev

🔥 build(profile): add kev profile

content/profile/kev.mdx

@@ -0,0 +1,95 @@
+---
+name: Kev
+description: I'm just a Beginner who is learning FrontEnd Development and passionate about Programming
+image: "https://avatars.githubusercontent.com/u/87592672?v=4"
+tags:
+  - HTML
+  - CSS
+  - JavaScript
+  - Frontend
+---
+
+<div className="relative w-full h-screen overflow-hidden bg-transparent flex flex-col justify-center items-center gap-11">
+
+    <div className="relative group peer">
+
+        <div className="overflow-hidden relative z-40 bg-white w-28 h-28 rounded-full group-hover:-translate-y-16 group-hover:translate-x-16 group-hover:scale-150 duration-1000">
+            <img className="w-full" src="https://my-demo-portfolio-woad.vercel.app/profile.jpg"/>
+        </div>
+
+        <div id="blue-group" className="absolute w-32 h-32 -top-2 -left-2 origin-center animate-spin [animation-duration:4s] group-hover:[animation-play-state:paused]">
+            <div id="circle-b" className="absolute w-32 h-32 left-0 top-0 rounded-full border-blue-400 border-2 group-hover:scale-0 duration-1000"></div>
+            <div id="dot-b" className="z-10 w-2 aspect-square bg-blue-500 rounded-full absolute -top-1 left-1/2 group-hover:-translate-x-1/3 group-hover:-translate-y-1/3 group-hover:w-screen group-hover:h-auto duration-1000"></div>
+        </div>
+
+        <div id="green-group" className="absolute w-40 h-40 -left-6 -top-6 origin-center animate-spin [animation-duration:2s] group-hover:[animation-play-state:paused]">
+            <div id="circle-g" className="absolute w-40 h-40 left-0 top-0 rounded-full border-green-400 border-2 group-hover:scale-0 duration-1000"></div>
+            <div id="dot-g" className="z-20 w-2 aspect-square bg-green-500 rounded-full absolute -top-1 left-1/2 group-hover:-translate-x-2/3 group-hover:-translate-y-2/3 group-hover:w-screen group-hover:h-auto duration-1000"></div>
+        </div>
+
+        <div id="yellow-group" className="absolute w-36 h-36 -left-4 -top-4 origin-center animate-spin [animation-duration:3s] group-hover:[animation-play-state:paused]">
+            <div id="circle-y" className="absolute w-36 h-36 left-0 top-0 rounded-full border-yellow-400 border-2 group-hover:scale-0 duration-1000"></div>
+            <div id="dot-y" className="z-30 w-2 aspect-square bg-yellow-500 rounded-full absolute -top-1 left-1/2 group-hover:-translate-x-1/4 group-hover:-translate-y-1/4 group-hover:w-screen group-hover:h-auto duration-1000"></div>
+        </div>
+
+    </div>
+
+    <div className="peer-hover:opacity-0 duration-500">
+        <h2 className="text-lg">↗️ Hover on Profile to see more about me</h2>
+
+        <div className="container">
+        * Reach me via 
+        <a href="https://www.facebook.com/0xkev" className="underline">Facebook</a> || 
+        <a href="https://www.linkedin.com/in/0xkev/" className="underline">LinkedIn</a> ||
+        <a href="mailto:[email protected]" className="underline">Email </a>
+        </div>
+
+        <div className="container">
+        * Track my Progress on 
+        <a href="https://github.com/0xkev21" className="underline">Github</a> || 
+        <a href="https://codepen.io/0xKev" className="underline">CodePen</a>
+        </div>
+    </div>
+
+    <div id="content-container" className="absolute top-0 left-3 h-full p-4 z-0 duration-1000 delay-200 opacity-0 peer-hover:opacity-100 peer-hover:z-50 pointer-events-none">
+
+        <div id="content" className="text-white flex flex-col justify-between z-50 relative h-full">
+
+            <div>
+                <h2 className="text-lg">It's me, Kev</h2>
+                <p className="text-sm">A person who is passionate about Programming</p>
+            </div>
+
+            <div>
+                <p className="text-sm">
+                I'm currently learning FrontEnd Development with Javascript and <br/>
+                Trying to be good as much as I can before entering this field.
+                </p>
+            </div>
+
+            <div className="text-sm self-start">
+
+                <p>I love to create cool things and find my peace in</p>
+
+                <ul className="text-sm">
+
+                    <li>- CSS Animations and Transitions</li>
+                    <li>- SVG Animations</li>
+                    <li>- JS Particles</li>
+                    <li>- Scroll Animations</li>
+
+                </ul>
+
+            </div>
+
+            <div className="text-sm">
+
+                <p>Fun Fact: I used tailwind for the first time without learning to build this</p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>