Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
467 lines (436 loc) · 32.6 KB
/
Copy pathindex.html
File metadata and controls
467 lines (436 loc) · 32.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>50 WebDev Mini Projects — Showcase</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
},
},
};
</script>
<style>
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }
/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }
/* Card entrance animation */
@keyframes cardIn {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-enter { animation: cardIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
/* Hero gradient animation */
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animated-gradient {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899, #f59e0b, #10b981, #06b6d4);
background-size: 300% 300%;
animation: gradientShift 8s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Floating blobs */
@keyframes blobFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
.blob { animation: blobFloat 12s ease-in-out infinite; }
/* Card hover lift */
.project-card { transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease, border-color 0.35s ease; }
.project-card:hover { transform: translateY(-10px); }
.project-card:hover .card-thumb { transform: scale(1.08); }
.project-card:hover .card-thumb-icon { transform: scale(1.15) rotate(5deg); }
.card-thumb { transition: transform 0.4s ease; }
.card-thumb-icon { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
/* View button arrow */
.view-btn .arrow { transition: transform 0.25s ease; }
.view-btn:hover .arrow { transform: translateX(5px); }
/* Filter button active glow */
.filter-active {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}
/* No results */
.no-results { animation: fadeInUp 0.4s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
</style>
</head>
<body class="bg-slate-50 dark:bg-[#0a0a0f] text-slate-900 dark:text-slate-100 transition-colors duration-500 min-h-screen">
<!-- Decorative blobs -->
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
<div class="blob absolute top-[-10%] left-[-5%] w-[400px] h-[400px] rounded-full bg-indigo-500/10 dark:bg-indigo-500/20 blur-3xl"></div>
<div class="blob absolute top-[30%] right-[-10%] w-[350px] h-[350px] rounded-full bg-pink-500/10 dark:bg-pink-500/15 blur-3xl" style="animation-delay: -4s;"></div>
<div class="blob absolute bottom-[-10%] left-[30%] w-[300px] h-[300px] rounded-full bg-amber-500/10 dark:bg-amber-500/10 blur-3xl" style="animation-delay: -8s;"></div>
</div>
<!-- Navbar -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-16 mt-2 px-4 rounded-2xl backdrop-blur-xl bg-white/60 dark:bg-white/5 border border-slate-200/60 dark:border-white/10 transition-all duration-300">
<a href="#" class="flex items-center gap-2 font-extrabold text-lg">
<span class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30">
<i class="fa-solid fa-code text-sm"></i>
</span>
<span class="hidden sm:inline">WebDev<span class="text-indigo-500">Projects</span></span>
</a>
<div class="flex items-center gap-2 sm:gap-3">
<a href="#projects" class="hidden sm:inline-block text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors px-3 py-2">Projects</a>
<a href="#tech" class="hidden sm:inline-block text-sm font-semibold text-slate-600 dark:text-slate-300 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors px-3 py-2">Tech Stack</a>
<a href="https://github.com/ashutoshpalhare" target="_blank" rel="noopener" class="w-9 h-9 rounded-xl bg-slate-200/60 dark:bg-white/5 border border-slate-300/50 dark:border-white/10 flex items-center justify-center hover:bg-slate-300/60 dark:hover:bg-white/10 transition-all duration-200 hover:scale-105">
<i class="fa-brands fa-github text-sm"></i>
</a>
<button id="themeToggle" class="w-9 h-9 rounded-xl bg-slate-200/60 dark:bg-white/5 border border-slate-300/50 dark:border-white/10 flex items-center justify-center hover:bg-slate-300/60 dark:hover:bg-white/10 transition-all duration-200 hover:scale-105">
<i class="fa-solid fa-moon text-sm dark:hidden"></i>
<i class="fa-solid fa-sun text-sm hidden dark:block"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero -->
<section class="relative pt-32 pb-16 px-4 sm:px-6">
<div class="max-w-5xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 dark:bg-indigo-500/15 border border-indigo-500/20 text-indigo-600 dark:text-indigo-400 text-sm font-semibold mb-6 card-enter">
<span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
50 Projects · HTML · CSS · JavaScript
</div>
<h1 class="text-5xl sm:text-6xl md:text-7xl font-black tracking-tight mb-6 card-enter" style="animation-delay: 0.05s;">
<span class="animated-gradient">50 WebDev</span><br />
<span class="text-slate-900 dark:text-white">Mini Projects</span>
</h1>
<p class="text-lg sm:text-xl text-slate-500 dark:text-slate-400 max-w-2xl mx-auto mb-10 card-enter" style="animation-delay: 0.1s;">
A curated collection of modern, responsive mini projects built with pure HTML, CSS, and vanilla JavaScript. No frameworks, no build tools — just open and run.
</p>
<div class="flex items-center justify-center gap-4 card-enter" style="animation-delay: 0.15s;">
<a href="#projects" class="px-6 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-500 text-white font-bold shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/50 hover:-translate-y-0.5 transition-all duration-200">
<i class="fa-solid fa-grid-2 mr-2"></i> Browse Projects
</a>
<a href="https://github.com/ashutoshpalhare/WebDev-Projects/tree/main" target="_blank" rel="noopener" class="px-6 py-3 rounded-xl bg-slate-200 dark:bg-white/5 border border-slate-300 dark:border-white/10 font-bold hover:bg-slate-300 dark:hover:bg-white/10 hover:-translate-y-0.5 transition-all duration-200">
<i class="fa-brands fa-github mr-2"></i> View Source
</a>
</div>
<!-- Stats -->
<div class="grid grid-cols-3 gap-4 max-w-lg mx-auto mt-12 card-enter" style="animation-delay: 0.2s;">
<div class="text-center">
<div class="text-3xl font-black text-indigo-500 dark:text-indigo-400">50</div>
<div class="text-xs text-slate-500 dark:text-slate-400 font-semibold mt-1">Projects</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-pink-500 dark:text-pink-400">3</div>
<div class="text-xs text-slate-500 dark:text-slate-400 font-semibold mt-1">Technologies</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-amber-500 dark:text-amber-400">0</div>
<div class="text-xs text-slate-500 dark:text-slate-400 font-semibold mt-1">Dependencies</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="px-4 sm:px-6 pb-20">
<div class="max-w-7xl mx-auto">
<!-- Search & Filters -->
<div class="sticky top-20 z-30 mb-8">
<div class="backdrop-blur-xl bg-white/70 dark:bg-white/5 border border-slate-200/60 dark:border-white/10 rounded-2xl p-4 shadow-lg">
<div class="flex flex-col md:flex-row gap-4 items-stretch md:items-center">
<!-- Search -->
<div class="relative flex-1">
<i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
<input
type="text"
id="searchInput"
placeholder="Search projects..."
class="w-full pl-11 pr-4 py-2.5 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-transparent transition-all duration-200"
/>
</div>
<!-- Filter buttons -->
<div class="flex gap-2 flex-wrap">
<button class="filter-btn filter-active px-4 py-2.5 rounded-xl text-sm font-bold bg-gradient-to-r from-indigo-500 to-violet-500 text-white transition-all duration-200" data-filter="all">
All <span class="ml-1 opacity-70" id="count-all">50</span>
</button>
<button class="filter-btn px-4 py-2.5 rounded-xl text-sm font-bold bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-white/10 transition-all duration-200" data-filter="beginner">
<i class="fa-solid fa-seedling mr-1 text-green-500"></i> Beginner <span class="ml-1 opacity-60" id="count-beginner">0</span>
</button>
<button class="filter-btn px-4 py-2.5 rounded-xl text-sm font-bold bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-white/10 transition-all duration-200" data-filter="intermediate">
<i class="fa-solid fa-fire mr-1 text-orange-500"></i> Intermediate <span class="ml-1 opacity-60" id="count-intermediate">0</span>
</button>
<button class="filter-btn px-4 py-2.5 rounded-xl text-sm font-bold bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-white/10 transition-all duration-200" data-filter="advanced">
<i class="fa-solid fa-rocket mr-1 text-red-500"></i> Advanced <span class="ml-1 opacity-60" id="count-advanced">0</span>
</button>
</div>
</div>
</div>
</div>
<!-- Project Grid -->
<div id="projectGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"></div>
<!-- No results -->
<div id="noResults" class="no-results hidden text-center py-20">
<i class="fa-solid fa-folder-open text-6xl text-slate-300 dark:text-slate-600 mb-4"></i>
<p class="text-xl font-bold text-slate-500 dark:text-slate-400">No projects found</p>
<p class="text-sm text-slate-400 dark:text-slate-500 mt-1">Try a different search or filter</p>
</div>
</div>
</section>
<!-- Tech Stack Section -->
<section id="tech" class="px-4 sm:px-6 pb-20">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-black text-center mb-2">Built With</h2>
<p class="text-center text-slate-500 dark:text-slate-400 mb-10">Pure web technologies — no frameworks, no bundlers</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div class="text-center p-8 rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:-translate-y-2 hover:shadow-xl transition-all duration-300">
<div class="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-orange-500 to-amber-500 flex items-center justify-center mb-4 shadow-lg shadow-orange-500/30">
<i class="fa-brands fa-html5 text-3xl text-white"></i>
</div>
<h3 class="font-bold text-lg">HTML5</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Semantic markup structure</p>
</div>
<div class="text-center p-8 rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:-translate-y-2 hover:shadow-xl transition-all duration-300">
<div class="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30">
<i class="fa-brands fa-css3-alt text-3xl text-white"></i>
</div>
<h3 class="font-bold text-lg">CSS3</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Modern styling & animations</p>
</div>
<div class="text-center p-8 rounded-2xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:-translate-y-2 hover:shadow-xl transition-all duration-300">
<div class="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center mb-4 shadow-lg shadow-yellow-500/30">
<i class="fa-brands fa-js text-3xl text-white"></i>
</div>
<h3 class="font-bold text-lg">JavaScript</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Vanilla ES6+ interactivity</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-slate-200 dark:border-white/10 px-4 sm:px-6 py-10">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<span class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center text-white">
<i class="fa-solid fa-code text-xs"></i>
</span>
<span class="font-bold">WebDev Projects</span>
</div>
<div class="flex items-center gap-4">
<a href="https://github.com/ashutoshpalhare" target="_blank" rel="noopener" class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-white/10 hover:scale-110 transition-all duration-200">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://twitter.com/ashutoshpalhare" target="_blank" rel="noopener" class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-white/10 hover:scale-110 transition-all duration-200">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://linkedin.com/in/ashutoshpalhare" target="_blank" rel="noopener" class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-white/10 hover:scale-110 transition-all duration-200">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="mt-6 pt-6 border-t border-slate-200 dark:border-white/10 text-center text-sm text-slate-500 dark:text-slate-400">
<p>Built with <i class="fa-solid fa-heart text-red-500"></i> using HTML, CSS & JavaScript — No frameworks, no build tools.</p>
<!-- Footer -->
<div class="max-w-7xl mx-auto px-6 py-8 text-center text-[var(--muted)] text-sm">
© 2026. All rights reserved by
<a
href="https://devculture4you.com/"
target="_blank"
rel="noopener noreferrer"
class="text-cyan-400 hover:text-cyan-300 transition-colors"
>
Dev Culture
</a>
· Developed by
<a
href="https://ashutoshpalhare.github.io/"
target="_blank"
rel="noopener noreferrer"
class="mono text-cyan-400 hover:text-cyan-300 transition-colors"
>
Ashutosh Palhare
</a>
</div>
</div>
</div>
</footer>
<!-- Back to top -->
<button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-500 text-white shadow-lg shadow-indigo-500/40 flex items-center justify-center opacity-0 pointer-events-none hover:scale-110 transition-all duration-300 z-40">
<i class="fa-solid fa-arrow-up"></i>
</button>
<script>
const repoBase = 'https://github.com/ashutoshpalhare/WebDev-Projects/tree/main';
const projects = [
{ name: 'Profile Card', desc: 'Sleek user profile card with social links', folder: 'profile-card', icon: 'fa-id-card', gradient: 'from-indigo-500 to-violet-500', level: 'beginner' },
{ name: 'Calculator', desc: 'Functional calculator with keyboard support', folder: 'calculator', icon: 'fa-calculator', gradient: 'from-blue-500 to-cyan-500', level: 'beginner' },
{ name: 'Portfolio', desc: 'Modern personal portfolio website', folder: 'portfolio', icon: 'fa-briefcase', gradient: 'from-violet-500 to-purple-500', level: 'intermediate' },
{ name: 'Todo App', desc: 'Task manager with local storage persistence', folder: 'todo-app', icon: 'fa-list-check', gradient: 'from-pink-500 to-rose-500', level: 'beginner' },
{ name: 'Image Carousel', desc: 'Responsive slider with auto-play & touch', folder: 'image-carousel', icon: 'fa-images', gradient: 'from-amber-500 to-orange-500', level: 'intermediate' },
{ name: 'Digital Clock', desc: 'Live digital clock with 12/24-hour toggle', folder: 'digital-clock', icon: 'fa-clock', gradient: 'from-slate-600 to-slate-800', level: 'beginner' },
{ name: 'Password Generator', desc: 'Secure passwords with strength meter', folder: 'password-generator', icon: 'fa-shield-halved', gradient: 'from-emerald-500 to-teal-500', level: 'beginner' },
{ name: 'Color Flipper', desc: 'Background color changer with history', folder: 'color-flipper', icon: 'fa-palette', gradient: 'from-fuchsia-500 to-pink-500', level: 'beginner' },
{ name: 'BMI Calculator', desc: 'Calculate Body Mass Index with units', folder: 'bmi-calculator', icon: 'fa-weight-scale', gradient: 'from-cyan-500 to-blue-500', level: 'beginner' },
{ name: 'Countdown Timer', desc: 'Countdown to a target date with presets', folder: 'countdown-timer', icon: 'fa-hourglass-half', gradient: 'from-violet-600 to-indigo-600', level: 'beginner' },
{ name: 'Quiz App', desc: 'Interactive quiz with score tracking', folder: 'quiz-app', icon: 'fa-brain', gradient: 'from-purple-500 to-pink-500', level: 'intermediate' },
{ name: 'Notes App', desc: 'Note-taking app with search & storage', folder: 'notes-app', icon: 'fa-note-sticky', gradient: 'from-amber-500 to-yellow-500', level: 'intermediate' },
{ name: 'Weather App', desc: 'Weather display UI with 5-day forecast', folder: 'weather-app', icon: 'fa-cloud-sun', gradient: 'from-sky-500 to-indigo-500', level: 'intermediate' },
{ name: 'Expense Tracker', desc: 'Track income & expenses with balance', folder: 'expense-tracker', icon: 'fa-wallet', gradient: 'from-teal-500 to-cyan-600', level: 'intermediate' },
{ name: 'Tic-Tac-Toe', desc: 'Classic two-player game with win detection', folder: 'tic-tac-toe', icon: 'fa-hashtag', gradient: 'from-indigo-600 to-blue-600', level: 'beginner' },
{ name: 'Memory Game', desc: 'Card-matching game with timer & moves', folder: 'memory-game', icon: 'fa-clone', gradient: 'from-violet-500 to-blue-500', level: 'intermediate' },
{ name: 'Music Player', desc: 'Music player UI with playlist & controls', folder: 'music-player', icon: 'fa-music', gradient: 'from-rose-500 to-amber-500', level: 'intermediate' },
{ name: 'E-Commerce Product Page', desc: 'Product page with gallery & cart drawer', folder: 'ecommerce-product-page', icon: 'fa-cart-shopping', gradient: 'from-amber-600 to-orange-600', level: 'advanced' },
{ name: 'Drawing App', desc: 'Canvas drawing pad with undo/redo', folder: 'drawing-app', icon: 'fa-paintbrush', gradient: 'from-slate-700 to-slate-900', level: 'advanced' },
{ name: 'Kanban Board', desc: 'Drag-and-drop task board with columns', folder: 'kanban-board', icon: 'fa-table-columns', gradient: 'from-indigo-500 to-violet-600', level: 'advanced' },
{ name: 'Movie Search App', desc: 'Browse & filter movie cards', folder: 'movie-search-app', icon: 'fa-film', gradient: 'from-amber-500 to-red-500', level: 'intermediate' },
{ name: 'Recipe Finder', desc: 'Search recipes & view full details', folder: 'recipe-finder', icon: 'fa-utensils', gradient: 'from-orange-500 to-amber-500', level: 'intermediate' },
{ name: 'Chat UI', desc: 'Modern chat interface with auto-reply', folder: 'chat-ui', icon: 'fa-comments', gradient: 'from-indigo-500 to-blue-500', level: 'advanced' },
{ name: 'Multi-Step Form', desc: '4-step form with validation & summary', folder: 'multi-step-form', icon: 'fa-list-ol', gradient: 'from-cyan-500 to-indigo-500', level: 'advanced' },
{ name: 'Infinite Scroll Gallery', desc: 'Gallery that loads images on scroll', folder: 'infinite-scroll-gallery', icon: 'fa-image', gradient: 'from-slate-600 to-indigo-600', level: 'intermediate' },
{ name: 'Snake Game', desc: 'Classic snake with high score persistence', folder: 'snake-game', icon: 'fa-gamepad', gradient: 'from-green-600 to-emerald-700', level: 'intermediate' },
{ name: 'Rock Paper Scissors', desc: 'Play against the computer', folder: 'rock-paper-scissors', icon: 'fa-hand-rock', gradient: 'from-violet-500 to-blue-500', level: 'beginner' },
{ name: 'Age Calculator', desc: 'Exact age in years, months & days', folder: 'age-calculator', icon: 'fa-cake-candles', gradient: 'from-rose-500 to-amber-500', level: 'beginner' },
{ name: 'Tip Calculator', desc: 'Calculate tip & split bills easily', folder: 'tip-calculator', icon: 'fa-receipt', gradient: 'from-teal-500 to-emerald-500', level: 'beginner' },
{ name: 'Animated Navigation', desc: 'Smooth animated nav with theme toggle', folder: 'animated-navigation', icon: 'fa-compass', gradient: 'from-indigo-500 to-violet-500', level: 'intermediate' },
{ name: 'Form Validator', desc: 'Real-time form validation with error messages', folder: 'form-validator', icon: 'fa-circle-check', gradient: 'from-emerald-500 to-green-600', level: 'beginner' },
{ name: 'Currency Converter', desc: 'Convert currencies with live exchange rates', folder: 'currency-converter', icon: 'fa-money-bill-transfer', gradient: 'from-green-500 to-teal-600', level: 'intermediate' },
{ name: 'Pomodoro Timer', desc: 'Focus timer with work/break cycles & SVG progress', folder: 'pomodoro-timer', icon: 'fa-clock-rotate-left', gradient: 'from-rose-500 to-red-600', level: 'intermediate' },
{ name: 'Weather Dashboard', desc: 'Multi-city weather dashboard with detailed metrics', folder: 'weather-dashboard', icon: 'fa-cloud-bolt', gradient: 'from-sky-500 to-blue-700', level: 'intermediate' },
{ name: 'GitHub Profile Card', desc: 'Search GitHub users & view profile stats', folder: 'github-profile-card', icon: 'fa-brands fa-github', gradient: 'from-slate-700 to-slate-900', level: 'intermediate' },
{ name: 'URL Shortener UI', desc: 'Shorten URLs with copy & history tracking', folder: 'url-shortener-ui', icon: 'fa-link', gradient: 'from-indigo-500 to-blue-600', level: 'beginner' },
{ name: 'Flashcard App', desc: 'Study flashcards with 3D flip & deck management', folder: 'flashcard-app', icon: 'fa-layer-group', gradient: 'from-violet-500 to-fuchsia-600', level: 'intermediate' },
{ name: 'Poll Voting App', desc: 'Create polls & vote with live results', folder: 'poll-voting-app', icon: 'fa-square-poll-vertical', gradient: 'from-amber-500 to-orange-600', level: 'intermediate' },
{ name: 'File Uploader UI', desc: 'Drag-and-drop file upload with preview', folder: 'file-uploader-ui', icon: 'fa-cloud-arrow-up', gradient: 'from-cyan-500 to-sky-600', level: 'intermediate' },
{ name: 'Testimonial Slider', desc: 'Auto-playing testimonial carousel', folder: 'testimonial-slider', icon: 'fa-quote-right', gradient: 'from-pink-500 to-rose-600', level: 'beginner' },
{ name: 'Calendar App', desc: 'Monthly calendar with event management', folder: 'calendar-app', icon: 'fa-calendar-days', gradient: 'from-blue-500 to-indigo-600', level: 'advanced' },
{ name: 'Markdown Preview', desc: 'Live markdown editor with custom parser', folder: 'markdown-preview', icon: 'fa-markdown', gradient: 'from-slate-600 to-gray-800', level: 'advanced' },
{ name: 'Code Editor UI', desc: 'Write & run JavaScript with console capture', folder: 'code-editor-ui', icon: 'fa-code', gradient: 'from-yellow-500 to-amber-600', level: 'advanced' },
{ name: 'Virtual Keyboard', desc: 'On-screen keyboard with sound & themes', folder: 'virtual-keyboard', icon: 'fa-keyboard', gradient: 'from-teal-500 to-cyan-600', level: 'intermediate' },
{ name: 'Maze Game', desc: 'Procedurally generated maze with timer', folder: 'maze-game', icon: 'fa-puzzle-piece', gradient: 'from-red-500 to-rose-700', level: 'advanced' },
{ name: 'Flappy Bird Clone', desc: 'Canvas game with pipes & score tracking', folder: 'flappy-bird-clone', icon: 'fa-dove', gradient: 'from-cyan-400 to-sky-600', level: 'advanced' },
{ name: 'Sorting Visualizer', desc: 'Visualize 5 sorting algorithms in real-time', folder: 'sorting-visualizer', icon: 'fa-chart-column', gradient: 'from-indigo-500 to-blue-700', level: 'advanced' },
{ name: 'Sudoku Solver', desc: 'Solve any puzzle with backtracking algorithm', folder: 'sudoku-solver', icon: 'fa-table-cells', gradient: 'from-violet-500 to-purple-700', level: 'advanced' },
{ name: 'Text to Speech', desc: 'Convert text to speech with voice options', folder: 'text-to-speech', icon: 'fa-volume-high', gradient: 'from-sky-500 to-cyan-700', level: 'intermediate' },
{ name: 'Voice Recorder', desc: 'Record audio with MediaRecorder API', folder: 'voice-recorder', icon: 'fa-microphone', gradient: 'from-rose-500 to-red-700', level: 'intermediate' },
];
const grid = document.getElementById('projectGrid');
const noResults = document.getElementById('noResults');
const searchInput = document.getElementById('searchInput');
const filterBtns = document.querySelectorAll('.filter-btn');
const themeToggle = document.getElementById('themeToggle');
const backToTop = document.getElementById('backToTop');
const navbar = document.getElementById('navbar');
let currentFilter = 'all';
let currentSearch = '';
// Update filter counts
const counts = { all: projects.length, beginner: 0, intermediate: 0, advanced: 0 };
projects.forEach(p => counts[p.level]++);
document.getElementById('count-all').textContent = counts.all;
document.getElementById('count-beginner').textContent = counts.beginner;
document.getElementById('count-intermediate').textContent = counts.intermediate;
document.getElementById('count-advanced').textContent = counts.advanced;
function renderCards() {
const filtered = projects.filter(p => {
const matchFilter = currentFilter === 'all' || p.level === currentFilter;
const matchSearch = p.name.toLowerCase().includes(currentSearch) || p.desc.toLowerCase().includes(currentSearch);
return matchFilter && matchSearch;
});
if (filtered.length === 0) {
grid.innerHTML = '';
noResults.classList.remove('hidden');
return;
}
noResults.classList.add('hidden');
grid.innerHTML = filtered.map((p, i) => `
<article class="project-card card-enter group relative rounded-2xl overflow-hidden bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-indigo-400 dark:hover:border-indigo-500/50 hover:shadow-2xl hover:shadow-indigo-500/10" style="animation-delay: ${i * 0.03}s;">
<!-- Thumbnail -->
<div class="card-thumb relative h-36 overflow-hidden bg-gradient-to-br ${p.gradient}">
<div class="absolute inset-0 flex items-center justify-center">
<i class="fa-solid ${p.icon} card-thumb-icon text-5xl text-white/80"></i>
</div>
<div class="absolute top-3 right-3">
<span class="px-2.5 py-1 rounded-full text-xs font-bold bg-white/20 backdrop-blur-md text-white border border-white/20">
${p.level.charAt(0).toUpperCase() + p.level.slice(1)}
</span>
</div>
<div class="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-black/30 to-transparent"></div>
</div>
<!-- Body -->
<div class="p-4">
<h3 class="font-bold text-base mb-1 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">${p.name}</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mb-3 leading-snug">${p.desc}</p>
<!-- Tags -->
<div class="flex gap-1.5 mb-4">
<span class="px-2 py-0.5 rounded-md text-xs font-semibold bg-orange-100 dark:bg-orange-500/10 text-orange-600 dark:text-orange-400">HTML</span>
<span class="px-2 py-0.5 rounded-md text-xs font-semibold bg-blue-100 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400">CSS</span>
<span class="px-2 py-0.5 rounded-md text-xs font-semibold bg-yellow-100 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">JS</span>
</div>
<!-- Buttons -->
<div class="flex gap-2">
<a href="./${p.folder}/index.html" target="_blank" rel="noopener" class="view-btn flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-500 text-white text-sm font-bold hover:shadow-lg hover:shadow-indigo-500/30 hover:-translate-y-0.5 transition-all duration-200">
<i class="fa-solid fa-eye text-xs"></i> Live Preview
</a>
<a href="${repoBase}/${p.folder}" target="_blank" rel="noopener" class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-sm font-bold hover:bg-slate-200 dark:hover:bg-white/10 hover:-translate-y-0.5 transition-all duration-200">
<i class="fa-brands fa-github text-xs"></i> View Code
</a>
</div>
</div>
</article>
`).join('');
}
// Search
searchInput.addEventListener('input', (e) => {
currentSearch = e.target.value.toLowerCase().trim();
renderCards();
});
// Filters
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => {
b.classList.remove('filter-active', 'from-indigo-500', 'to-violet-500', 'text-white');
b.classList.add('bg-slate-100', 'dark:bg-white/5', 'border', 'border-slate-200', 'dark:border-white/10', 'text-slate-600', 'dark:text-slate-300');
});
btn.classList.add('filter-active', 'from-indigo-500', 'to-violet-500', 'text-white');
btn.classList.remove('bg-slate-100', 'dark:bg-white/5', 'border', 'border-slate-200', 'dark:border-white/10', 'text-slate-600', 'dark:text-slate-300');
currentFilter = btn.dataset.filter;
renderCards();
});
});
// Theme toggle
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
// Navbar shadow on scroll
window.addEventListener('scroll', () => {
if (window.scrollY > 20) {
navbar.classList.add('shadow-lg');
} else {
navbar.classList.remove('shadow-lg');
}
if (window.scrollY > 400) {
backToTop.classList.remove('opacity-0', 'pointer-events-none');
backToTop.classList.add('opacity-100');
} else {
backToTop.classList.add('opacity-0', 'pointer-events-none');
backToTop.classList.remove('opacity-100');
}
});
// Back to top
backToTop.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Initial render
renderCards();
</script>
</body>
</html>