Animation

Author: hammadmeer-dev

index.html

@@ -52,7 +52,7 @@
     />
 
     <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/mogo.svg" />
 
     <!-- JSON-LD Schema.org Person -->
     <script type="application/ld+json">

public/mogo.svg

@@ -65,7 +65,8 @@ const Aboutme = () => {
                 href={item.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-xl font-bold pr-4 hover:text-sky-600"
+                className="text-xl font-bold pr-4 hover:text-sky-600 animate-float"
+      style={{ animationDelay: `${index * 0.3}s` }} // stagger effect
               >
                 {item.icon}
                 <span className="sr-only">

public/mono.gif

@@ -37,7 +37,8 @@ function Hero() {
               href={item.link}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xl font-bold hover:text-sky-600 pr-4"
+              className="text-xl font-bold hover:text-sky-600 pr-4 animate-float"
+      style={{ animationDelay: `${index * 0.3}s` }} // stagger effect
             >
               {item.icon}
               <span className="sr-only">

src/Components/About-Me.jsx

@@ -0,0 +1,7 @@
+export default function HeaderLogo({ logo }) {
+  return (
+    <span className="w-10 inline-block animate-jump">
+      <img src={logo} alt="Logo" className="w-full h-auto" />
+    </span>
+  );
+}

src/Components/Hero.jsx

@@ -4,6 +4,8 @@ import { CiDark } from "react-icons/ci";
 import resume from "../assets/Hammad_Farooq_Meer.pdf";
 import { IoIosMenu } from "react-icons/io";
 import { RxCross1 } from "react-icons/rx";
+import logo from "../assets/logo.svg";
+import HeaderLogo from "./Logo";
 function Navbar({ handleNightMode, nightMode }) {
   const [isMenu, setIsMenu] = useState(false);
   const handleMenu = (e) => {
@@ -20,6 +22,7 @@ function Navbar({ handleNightMode, nightMode }) {
       <div className="flex justify-between p-2 sm:p-8">
         <div className="w-1/2 md:w-1/3">
           <h1 className="flex text-left text-lg font-bold items-center pl-2">
+            <HeaderLogo logo={logo}/>
             Hammad Meer
           </h1>
         </div>
@@ -32,7 +35,10 @@ function Navbar({ handleNightMode, nightMode }) {
         <div className="gap-3 hidden md:flex">
           <ul className="flex border-r-2 gap-14 md:gap-8 pr-4">
             {navItems.map((item, index) => (
-              <li key={index} className="flex justify-center items-center hover:text-sky-600 ">
+              <li
+                key={index}
+                className="flex justify-center items-center hover:text-sky-600 "
+              >
                 <a href={`#${item.link}`}>{item.name}</a>
               </li>
             ))}

src/Components/Logo.jsx

@@ -1,11 +1,34 @@
 export default {
-  darkMode: "class", 
+  darkMode: "class",
   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-
-    extend: {},
+    extend: {
+      keyframes: {
+        bounceRotate: {
+          "0%":   { transform: "translateY(0) rotate(0deg) scale(1)" },
+          "20%":  { transform: "translateY(-20%) rotate(-8deg) scale(1.05)" },
+          "40%":  { transform: "translateY(0) rotate(5deg) scale(0.95)" },
+          "60%":  { transform: "translateY(-15%) rotate(10deg) scale(1.1)" },
+          "80%":  { transform: "translateY(0) rotate(-6deg) scale(1.02)" },
+          "100%": { transform: "translateY(0) rotate(0deg) scale(1)" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0) rotate(0deg)" },
+          "25%": { transform: "translateY(-8px) rotate(-3deg)" },
+          "50%": { transform: "translateY(0) rotate(2deg)" },
+          "75%": { transform: "translateY(-6px) rotate(3deg)" },
+        },
+        jump: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-25%)" },
+        },
+      },
+      animation: {
+        bounceRotate: "bounceRotate 2s ease-in-out infinite",
+        float: "float 3s ease-in-out infinite",
+        jump: "jump 0.6s ease-in-out infinite",
+      },
+    },
   },
   plugins: [],
 }
-
-