Skip to content

Commit df1206f

Browse files
committed
feat: Add animated hover and glitch effects to contributor cards
1 parent c219899 commit df1206f

File tree

4 files changed

+30
-53
lines changed

4 files changed

+30
-53
lines changed
File renamed without changes.

src/index.html renamed to index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>$ dev-scope<span class="cursor"></span></h1>
11+
<h1 class="glitch" data-text="$ dev-scope">$ dev-scope<span class="cursor"></span></h1>
1212
<p class="sub">[ GitHub Contributors ]</p>
1313
</header>
1414

src/script.js renamed to script.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const grid = document.getElementById("devGrid");
22
const searchInput = document.getElementById("search");
33

4+
// Fetch contributors list
45
fetch("../contributors.json")
56
.then((res) => res.json())
67
.then((usernames) => {
@@ -13,35 +14,33 @@ fetch("../contributors.json")
1314
return;
1415
}
1516

17+
// Fetch user repos to determine top languages
1618
fetch(user.repos_url)
1719
.then((res) => res.json())
1820
.then((repos) => {
1921
if (!Array.isArray(repos)) {
20-
console.warn(
21-
`Repo data for ${username} is not an array:`,
22-
repos,
23-
);
22+
console.warn(`Repo data for ${username} is not an array:`, repos);
2423
return;
2524
}
2625

2726
const langCount = {};
2827
repos.forEach((repo) => {
2928
if (repo.language) {
30-
langCount[repo.language] =
31-
(langCount[repo.language] || 0) + 1;
29+
langCount[repo.language] = (langCount[repo.language] || 0) + 1;
3230
}
3331
});
3432

3533
const topLangs =
3634
Object.entries(langCount)
3735
.sort((a, b) => b[1] - a[1])
3836
.slice(0, 3)
39-
.map((entry) => entry[0])
37+
.map(([lang]) => lang)
4038
.join(", ") || "N/A";
4139

40+
// Create user card
4241
const card = document.createElement("div");
4342
card.className = "card";
44-
card.style.animationDelay = `${index * 0.1}s`; // staggered animation
43+
card.style.animationDelay = `${index * 0.1}s`; // stagger effect for fade-up
4544

4645
card.innerHTML = `
4746
<img src="${user.avatar_url}" alt="${user.login}">
@@ -50,20 +49,21 @@ fetch("../contributors.json")
5049
<p><strong>Top Languages:</strong> ${topLangs}</p>
5150
<a href="${user.html_url}" target="_blank">View GitHub</a>
5251
`;
52+
5353
grid.appendChild(card);
5454
})
5555
.catch((err) =>
56-
console.error(`Error fetching repos for ${username}:`, err),
56+
console.error(`Error fetching repos for ${username}:`, err)
5757
);
5858
})
5959
.catch((err) =>
60-
console.error(`Failed to load user data for ${username}:`, err),
60+
console.error(`Failed to load user data for ${username}:`, err)
6161
);
6262
});
6363
})
6464
.catch((err) => console.error("Error loading contributors.json:", err));
6565

66-
// 🔍 Live Search
66+
// 🔍 Live Search Filtering
6767
searchInput.addEventListener("input", (e) => {
6868
const value = e.target.value.toLowerCase();
6969
Array.from(grid.children).forEach((card) => {

src/style.css renamed to style.css

Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ h1 {
4141
gap: 20px;
4242
}
4343

44-
/* 🔥 Updated Card Styling */
44+
/* 🔥 Animated Cards */
4545
.card {
4646
background-color: #1a1a1a;
4747
border: 1px solid #00ff88;
@@ -65,7 +65,16 @@ h1 {
6565
}
6666
}
6767

68-
/* 🔁 Hover Effects */
68+
/* 💥 Glitch on hover */
69+
@keyframes glitch {
70+
0% { transform: translate(0); }
71+
20% { transform: translate(-2px, 2px); }
72+
40% { transform: translate(2px, -2px); }
73+
60% { transform: translate(-1px, 1px); }
74+
80% { transform: translate(1px, -1px); }
75+
100% { transform: translate(0); }
76+
}
77+
6978
.card::before {
7079
content: '';
7180
position: absolute;
@@ -84,9 +93,14 @@ h1 {
8493
}
8594

8695
.card:hover {
87-
transform: scale(1.05);
96+
transform: scale(1.03);
8897
border-color: #00ffaa;
89-
box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
98+
box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33;
99+
animation: glitch 0.3s steps(2, end) infinite;
100+
}
101+
102+
.card h3:hover {
103+
animation: glitch 0.3s steps(2, end) infinite;
90104
}
91105

92106
.card img {
@@ -119,40 +133,3 @@ footer {
119133
font-size: 0.8rem;
120134
color: #00cc66;
121135
}
122-
123-
@keyframes glitch {
124-
0% {
125-
transform: translate(0);
126-
}
127-
128-
20% {
129-
transform: translate(-2px, 2px);
130-
}
131-
132-
40% {
133-
transform: translate(2px, -2px);
134-
}
135-
136-
60% {
137-
transform: translate(-1px, 1px);
138-
}
139-
140-
80% {
141-
transform: translate(1px, -1px);
142-
}
143-
144-
100% {
145-
transform: translate(0);
146-
}
147-
}
148-
149-
.card:hover {
150-
transform: scale(1.03);
151-
border-color: #00ffaa;
152-
box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33;
153-
animation: glitch 0.3s steps(2, end) infinite;
154-
}
155-
156-
.card h3:hover {
157-
animation: glitch 0.3s steps(2, end) infinite;
158-
}

0 commit comments

Comments
 (0)