feat: Add hover card glow effect and glitch effect

Author: saurabhkun

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "http-server": "^14.1.1"
+  }
+}

package.json

@@ -1,4 +1,5 @@
 [
+  "saurabhkun",
   "sanjanamutkiri",
   "komal",
   "SotaKabasawa",

script.js

@@ -0,0 +1,73 @@
+const grid = document.getElementById("devGrid");
+const searchInput = document.getElementById("search");
+
+fetch("../contributors.json")
+  .then((res) => res.json())
+  .then((usernames) => {
+    usernames.forEach((username, index) => {
+      fetch(`https://api.github.com/users/${username}`)
+        .then((res) => res.json())
+        .then((user) => {
+          if (!user || user.message === "Not Found") {
+            console.warn(`User ${username} not found.`);
+            return;
+          }
+
+          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,
+                );
+                return;
+              }
+
+              const langCount = {};
+              repos.forEach((repo) => {
+                if (repo.language) {
+                  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])
+                  .join(", ") || "N/A";
+
+              const card = document.createElement("div");
+              card.className = "card";
+              card.style.animationDelay = `${index * 0.1}s`; // staggered animation
+
+              card.innerHTML = `
+                <img src="${user.avatar_url}" alt="${user.login}">
+                <h3>${user.name || user.login}</h3>
+                <p>@${user.login}</p>
+                <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),
+            );
+        })
+        .catch((err) =>
+          console.error(`Failed to load user data for ${username}:`, err),
+        );
+    });
+  })
+  .catch((err) => console.error("Error loading contributors.json:", err));
+
+// 🔍 Live Search
+searchInput.addEventListener("input", (e) => {
+  const value = e.target.value.toLowerCase();
+  Array.from(grid.children).forEach((card) => {
+    const username = card.querySelector("p").textContent.toLowerCase();
+    card.style.display = username.includes(value) ? "block" : "none";
+  });
+});

contributors.json renamed to src/contributors.json

@@ -0,0 +1,158 @@
+body {
+  background-color: #0f0f0f;
+  color: #00ff88;
+  font-family: 'Courier New', Courier, monospace;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+.cursor {
+  animation: blink 1s step-start infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.sub {
+  font-size: 1rem;
+  margin: 8px 0 20px 0;
+  color: #00cc66;
+}
+
+#search {
+  width: 100%;
+  padding: 10px;
+  background-color: #1c1c1c;
+  border: 1px solid #00ff88;
+  color: #00ff88;
+  margin-bottom: 20px;
+  border-radius: 5px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+/* 🔥 Updated Card Styling */
+.card {
+  background-color: #1a1a1a;
+  border: 1px solid #00ff88;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  /* Fade-in effect */
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUp 0.6s ease forwards;
+}
+
+@keyframes fadeUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 🔁 Hover Effects */
+.card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(0, 255, 170, 0.2) 0%, transparent 60%);
+  transform: rotate(25deg);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.card:hover::before {
+  opacity: 1;
+}
+
+.card:hover {
+  transform: scale(1.05);
+  border-color: #00ffaa;
+  box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
+}
+
+.card img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+  border: 2px solid #00ff88;
+}
+
+.card h3 {
+  margin: 5px 0;
+  color: #ffffff;
+}
+
+.card p {
+  font-size: 0.85rem;
+  margin: 3px 0;
+}
+
+.card a {
+  text-decoration: none;
+  color: #00ffaa;
+  font-weight: bold;
+}
+
+footer {
+  margin-top: 40px;
+  text-align: center;
+  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;
+}