feat: Add animated hover and glitch effects to contributor cards

saurabhkun · saurabhkun · commit df1206f9137b · 2025-06-25T09:41:51.000Z
diff --git a/contributors.json b/contributors.json
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 </head>
 <body>
   <header>
-    <h1>$ dev-scope<span class="cursor">█</span></h1>
+    <h1 class="glitch" data-text="$ dev-scope">$ dev-scope<span class="cursor">█</span></h1>
     <p class="sub">[ GitHub Contributors ]</p>
   </header>
 
diff --git a/script.js b/script.js
@@ -1,6 +1,7 @@
 const grid = document.getElementById("devGrid");
 const searchInput = document.getElementById("search");
 
+// Fetch contributors list
 fetch("../contributors.json")
   .then((res) => res.json())
   .then((usernames) => {
@@ -13,35 +14,33 @@ fetch("../contributors.json")
             return;
           }
 
+          // Fetch user repos to determine top languages
           fetch(user.repos_url)
             .then((res) => res.json())
             .then((repos) => {
               if (!Array.isArray(repos)) {
-                console.warn(
-                  `Repo data for ${username} is not an array:`,
-                  repos,
-                );
+                console.warn(`Repo data for ${username} is not an array:`, repos);
                 return;
               }
 
               const langCount = {};
               repos.forEach((repo) => {
                 if (repo.language) {
-                  langCount[repo.language] =
-                    (langCount[repo.language] || 0) + 1;
+                  langCount[repo.language] = (langCount[repo.language] || 0) + 1;
                 }
               });
 
               const topLangs =
                 Object.entries(langCount)
                   .sort((a, b) => b[1] - a[1])
                   .slice(0, 3)
-                  .map((entry) => entry[0])
+                  .map(([lang]) => lang)
                   .join(", ") || "N/A";
 
+              // Create user card
               const card = document.createElement("div");
               card.className = "card";
-              card.style.animationDelay = `${index * 0.1}s`; // staggered animation
+              card.style.animationDelay = `${index * 0.1}s`; // stagger effect for fade-up
 
               card.innerHTML = `
                 <img src="${user.avatar_url}" alt="${user.login}">
@@ -50,20 +49,21 @@ fetch("../contributors.json")
                 <p><strong>Top Languages:</strong> ${topLangs}</p>
                 <a href="${user.html_url}" target="_blank">View GitHub</a>
               `;
+
               grid.appendChild(card);
             })
             .catch((err) =>
-              console.error(`Error fetching repos for ${username}:`, err),
+              console.error(`Error fetching repos for ${username}:`, err)
             );
         })
         .catch((err) =>
-          console.error(`Failed to load user data for ${username}:`, err),
+          console.error(`Failed to load user data for ${username}:`, err)
         );
     });
   })
   .catch((err) => console.error("Error loading contributors.json:", err));
 
-// 🔍 Live Search
+// 🔍 Live Search Filtering
 searchInput.addEventListener("input", (e) => {
   const value = e.target.value.toLowerCase();
   Array.from(grid.children).forEach((card) => {
diff --git a/style.css b/style.css
@@ -41,7 +41,7 @@ h1 {
   gap: 20px;
 }
 
-/* 🔥 Updated Card Styling */
+/* 🔥 Animated Cards */
 .card {
   background-color: #1a1a1a;
   border: 1px solid #00ff88;
@@ -65,7 +65,16 @@ h1 {
   }
 }
 
-/* 🔁 Hover Effects */
+/* 💥 Glitch on hover */
+@keyframes glitch {
+  0% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+  60% { transform: translate(-1px, 1px); }
+  80% { transform: translate(1px, -1px); }
+  100% { transform: translate(0); }
+}
+
 .card::before {
   content: '';
   position: absolute;
@@ -84,9 +93,14 @@ h1 {
 }
 
 .card:hover {
-  transform: scale(1.05);
+  transform: scale(1.03);
   border-color: #00ffaa;
-  box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
+  box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33;
+  animation: glitch 0.3s steps(2, end) infinite;
+}
+
+.card h3:hover {
+  animation: glitch 0.3s steps(2, end) infinite;
 }
 
 .card img {
@@ -119,40 +133,3 @@ footer {
   font-size: 0.8rem;
   color: #00cc66;
 }
-
-@keyframes glitch {
-  0% {
-    transform: translate(0);
-  }
-
-  20% {
-    transform: translate(-2px, 2px);
-  }
-
-  40% {
-    transform: translate(2px, -2px);
-  }
-
-  60% {
-    transform: translate(-1px, 1px);
-  }
-
-  80% {
-    transform: translate(1px, -1px);
-  }
-
-  100% {
-    transform: translate(0);
-  }
-}
-
-.card:hover {
-  transform: scale(1.03);
-  border-color: #00ffaa;
-  box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33;
-  animation: glitch 0.3s steps(2, end) infinite;
-}
-
-.card h3:hover {
-  animation: glitch 0.3s steps(2, end) infinite;
-}
