Hugging Face's logo

Spaces:
pranit144
/
PRANIT_CHILBULE
Running

App Files Community
pranit144 commited on
Commit
5d81b15
·
verified ·
1 Parent(s): 8ed1c0f

Update achievements.html

Browse files
Files changed (1) hide show
  1. achievements.html +595 -593
achievements.html CHANGED
@@ -1,594 +1,596 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Achievements & Blog - Pranit Chilbule</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- :root {
16
- --bg-primary: #0d1117;
17
- --bg-secondary: #010409;
18
- --bg-card: #21262d;
19
- --text-primary: #c9d1d9;
20
- --text-secondary: rgba(201, 209, 217, 0.8);
21
- --accent-blue: #58a6ff;
22
- --accent-green: #10a37f;
23
- --accent-gold: #ffd700;
24
- --accent-silver: #c0c0c0;
25
- --header-bg: rgba(0, 0, 0, 0.6);
26
- --border-color: #30363d;
27
- }
28
-
29
- body {
30
- font-family: 'Inter', sans-serif;
31
- background: var(--bg-primary);
32
- color: var(--text-primary);
33
- line-height: 1.6;
34
- overflow-x: hidden;
35
- }
36
-
37
- /* Header */
38
- header {
39
- position: fixed;
40
- top: 0;
41
- width: 100%;
42
- background: var(--header-bg);
43
- backdrop-filter: blur(10px);
44
- z-index: 1000;
45
- border-bottom: 1px solid var(--border-color);
46
- }
47
-
48
- nav {
49
- display: flex;
50
- justify-content: space-between;
51
- align-items: center;
52
- padding: 1rem 2rem;
53
- max-width: 1200px;
54
- margin: 0 auto;
55
- }
56
-
57
- .logo {
58
- font-family: 'Roboto Mono', monospace;
59
- font-size: 1.5rem;
60
- font-weight: 700;
61
- color: var(--accent-blue);
62
- }
63
-
64
- .nav-links {
65
- display: flex;
66
- list-style: none;
67
- gap: 2rem;
68
- }
69
-
70
- .nav-links a {
71
- color: var(--text-primary);
72
- text-decoration: none;
73
- transition: color 0.3s ease;
74
- }
75
-
76
- .nav-links a:hover {
77
- color: var(--accent-blue);
78
- }
79
-
80
- /* Main Content */
81
- main {
82
- max-width: 1200px;
83
- margin: 0 auto;
84
- padding: 120px 2rem 2rem;
85
- }
86
-
87
- section {
88
- margin-bottom: 4rem;
89
- }
90
-
91
- h2 {
92
- font-size: 2.5rem;
93
- margin-bottom: 2rem;
94
- color: var(--accent-blue);
95
- text-align: center;
96
- position: relative;
97
- }
98
-
99
- h2::after {
100
- content: '';
101
- position: absolute;
102
- bottom: -10px;
103
- left: 50%;
104
- transform: translateX(-50%);
105
- width: 80px;
106
- height: 3px;
107
- background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
108
- border-radius: 2px;
109
- }
110
-
111
- /* Achievement Cards */
112
- .achievements-grid {
113
- display: grid;
114
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
115
- gap: 2rem;
116
- padding: 2rem 0;
117
- }
118
-
119
- .achievement-card {
120
- background: var(--bg-card);
121
- border-radius: 16px;
122
- padding: 2rem;
123
- border: 1px solid var(--border-color);
124
- transition: all 0.4s ease;
125
- cursor: pointer;
126
- position: relative;
127
- overflow: hidden;
128
- }
129
-
130
- .achievement-card::before {
131
- content: '';
132
- position: absolute;
133
- top: 0;
134
- left: -100%;
135
- width: 100%;
136
- height: 100%;
137
- background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.1), transparent);
138
- transition: left 0.6s ease;
139
- }
140
-
141
- .achievement-card:hover::before {
142
- left: 100%;
143
- }
144
-
145
- .achievement-card:hover {
146
- transform: translateY(-8px);
147
- box-shadow: 0 15px 40px rgba(88, 166, 255, 0.2);
148
- border-color: var(--accent-blue);
149
- }
150
-
151
- .achievement-icon {
152
- font-size: 3rem;
153
- margin-bottom: 1.5rem;
154
- display: block;
155
- }
156
-
157
- .achievement-title {
158
- color: var(--accent-blue);
159
- font-size: 1.3rem;
160
- font-weight: 600;
161
- margin-bottom: 1rem;
162
- }
163
-
164
- .achievement-description {
165
- color: var(--text-secondary);
166
- font-size: 1rem;
167
- line-height: 1.6;
168
- }
169
-
170
- .achievement-stats {
171
- display: flex;
172
- gap: 1rem;
173
- margin-top: 1rem;
174
- font-size: 0.9rem;
175
- color: var(--accent-green);
176
- }
177
-
178
- .stat-item {
179
- background: rgba(16, 163, 127, 0.1);
180
- padding: 0.3rem 0.8rem;
181
- border-radius: 12px;
182
- border: 1px solid rgba(16, 163, 127, 0.3);
183
- }
184
-
185
- /* Blog Section */
186
- .blog-container {
187
- overflow-x: auto;
188
- padding: 2rem 0;
189
- -ms-overflow-style: none;
190
- scrollbar-width: none;
191
- }
192
-
193
- .blog-container::-webkit-scrollbar {
194
- display: none;
195
- }
196
-
197
- .blog-grid {
198
- display: flex;
199
- gap: 2rem;
200
- padding: 0.5rem;
201
- }
202
-
203
- .blog-card {
204
- min-width: 350px;
205
- max-width: 400px;
206
- background: var(--bg-card);
207
- border-radius: 16px;
208
- overflow: hidden;
209
- border: 1px solid var(--border-color);
210
- transition: all 0.4s ease;
211
- position: relative;
212
- }
213
-
214
- .blog-card:hover {
215
- transform: translateY(-8px);
216
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
217
- border-color: var(--accent-blue);
218
- }
219
-
220
- .blog-image {
221
- width: 100%;
222
- height: 220px;
223
- background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
224
- display: flex;
225
- align-items: center;
226
- justify-content: center;
227
- font-size: 3rem;
228
- color: white;
229
- }
230
-
231
- .blog-content {
232
- padding: 2rem;
233
- }
234
-
235
- .blog-date {
236
- color: var(--accent-green);
237
- font-size: 0.9rem;
238
- margin-bottom: 0.8rem;
239
- font-weight: 500;
240
- }
241
-
242
- .blog-title {
243
- color: var(--text-primary);
244
- font-size: 1.3rem;
245
- font-weight: 600;
246
- margin-bottom: 1rem;
247
- line-height: 1.4;
248
- }
249
-
250
- .blog-excerpt {
251
- color: var(--text-secondary);
252
- font-size: 1rem;
253
- margin-bottom: 1.5rem;
254
- line-height: 1.6;
255
- display: -webkit-box;
256
- -webkit-line-clamp: 3;
257
- -webkit-box-orient: vertical;
258
- overflow: hidden;
259
- }
260
-
261
- .blog-link {
262
- color: var(--accent-blue);
263
- text-decoration: none;
264
- font-weight: 500;
265
- display: inline-flex;
266
- align-items: center;
267
- gap: 0.5rem;
268
- transition: all 0.3s ease;
269
- }
270
-
271
- .blog-link:hover {
272
- color: var(--accent-green);
273
- transform: translateX(5px);
274
- }
275
-
276
- /* Footer */
277
- footer {
278
- background: var(--bg-secondary);
279
- padding: 3rem 2rem 2rem;
280
- border-top: 1px solid var(--border-color);
281
- text-align: center;
282
- }
283
-
284
- .footer-content {
285
- max-width: 1200px;
286
- margin: 0 auto;
287
- }
288
-
289
- .social-links {
290
- display: flex;
291
- justify-content: center;
292
- gap: 2rem;
293
- margin-bottom: 2rem;
294
- }
295
-
296
- .social-links a {
297
- color: var(--text-secondary);
298
- font-size: 1.5rem;
299
- transition: color 0.3s ease;
300
- }
301
-
302
- .social-links a:hover {
303
- color: var(--accent-blue);
304
- }
305
-
306
- .footer-text {
307
- color: var(--text-secondary);
308
- font-size: 0.9rem;
309
- }
310
-
311
- /* Animations */
312
- .fade-in {
313
- opacity: 0;
314
- transform: translateY(30px);
315
- animation: fadeInUp 0.8s ease forwards;
316
- }
317
-
318
- @keyframes fadeInUp {
319
- to {
320
- opacity: 1;
321
- transform: translateY(0);
322
- }
323
- }
324
-
325
- .fade-in:nth-child(1) { animation-delay: 0.1s; }
326
- .fade-in:nth-child(2) { animation-delay: 0.2s; }
327
- .fade-in:nth-child(3) { animation-delay: 0.3s; }
328
- .fade-in:nth-child(4) { animation-delay: 0.4s; }
329
- .fade-in:nth-child(5) { animation-delay: 0.5s; }
330
- .fade-in:nth-child(6) { animation-delay: 0.6s; }
331
-
332
- /* Mobile Responsiveness */
333
- @media (max-width: 768px) {
334
- .nav-links {
335
- display: none;
336
- }
337
-
338
- main {
339
- padding: 100px 1rem 2rem;
340
- }
341
-
342
- h2 {
343
- font-size: 2rem;
344
- }
345
-
346
- .achievements-grid {
347
- grid-template-columns: 1fr;
348
- gap: 1.5rem;
349
- }
350
-
351
- .achievement-card {
352
- padding: 1.5rem;
353
- }
354
-
355
- .blog-card {
356
- min-width: 280px;
357
- }
358
- }
359
- </style>
360
- </head>
361
- <body>
362
- <!-- Header -->
363
- <header>
364
- <nav>
365
- <div class="logo">Pranit Chilbule</div>
366
- <ul class="nav-links">
367
- <li><a href="index.html">Home</a></li>
368
- <li><a href="about.html">About</a></li>
369
- <li><a href="projects.html">Projects</a></li>
370
- <li><a href="achievements.html">Achievements</a></li>
371
- <li><a href="contact.html">Contact</a></li>
372
- </ul>
373
- </nav>
374
- </header>
375
-
376
- <main>
377
- <!-- Achievements Section -->
378
- <section id="achievements">
379
- <h2 class="fade-in">Achievements</h2>
380
- <div class="achievements-grid">
381
- <div class="achievement-card fade-in">
382
- <div class="achievement-icon">🏆</div>
383
- <h3 class="achievement-title">3× Hackathon Winner</h3>
384
- <p class="achievement-description">First place victories at Cavista, Solvex, and Agri Tech hackathons, delivering innovative solutions across healthcare, agriculture, and engineering domains.</p>
385
- <div class="achievement-stats">
386
- <span class="stat-item">3 Wins</span>
387
- <span class="stat-item">Multiple Domains</span>
388
- </div>
389
- </div>
390
-
391
- <div class="achievement-card fade-in">
392
- <div class="achievement-icon">🥈</div>
393
- <h3 class="achievement-title">Runner-Up & Finalist</h3>
394
- <p class="achievement-description">Runner-up at Smart India Hackathon 2024 and Agri AI Hackathon 2025. Finalist at 8+ hackathons with 20+ total participations, consistently applying AI to solve real-world challenges.</p>
395
- <div class="achievement-stats">
396
- <span class="stat-item">2 Runner-ups</span>
397
- <span class="stat-item">8+ Finals</span>
398
- <span class="stat-item">20+ Participations</span>
399
- </div>
400
- </div>
401
-
402
- <div class="achievement-card fade-in">
403
- <div class="achievement-icon">📑</div>
404
- <h3 class="achievement-title">Research Publications</h3>
405
- <p class="achievement-description">Research papers presented at the Maitri Conference and ICCICN, with publications indexed in prestigious Scopus and Springer databases.</p>
406
- <div class="achievement-stats">
407
- <span class="stat-item">Scopus Indexed</span>
408
- <span class="stat-item">Springer</span>
409
- </div>
410
- </div>
411
-
412
- <div class="achievement-card fade-in">
413
- <div class="achievement-icon">🏅</div>
414
- <h3 class="achievement-title">Best Project Award</h3>
415
- <p class="achievement-description">Best Project Award for Plant Disease Detection System at college level, recognized for innovation among 120+ participants.</p>
416
- <div class="achievement-stats">
417
- <span class="stat-item">120+ Participants</span>
418
- <span class="stat-item">AI/ML Project</span>
419
- </div>
420
- </div>
421
-
422
- <div class="achievement-card fade-in">
423
- <div class="achievement-icon">👥</div>
424
- <h3 class="achievement-title">Innovsphere Club Founder</h3>
425
- <p class="achievement-description">Founded and serve as Tech Lead of Innovsphere Club, a community-driven technology club fostering collaboration among students and industry professionals.</p>
426
- <div class="achievement-stats">
427
- <span class="stat-item">Founder</span>
428
- <span class="stat-item">Tech Lead</span>
429
- </div>
430
- </div>
431
-
432
- <div class="achievement-card fade-in">
433
- <div class="achievement-icon">🌟</div>
434
- <h3 class="achievement-title">Continuous Contributor</h3>
435
- <p class="achievement-description">Actively contributing to data science and AI through open-source projects, technical blog posts, and ongoing academic and industry collaborations.</p>
436
- <div class="achievement-stats">
437
- <span class="stat-item">Open Source</span>
438
- <span class="stat-item">Tech Blogs</span>
439
- <span class="stat-item">Collaborations</span>
440
- </div>
441
- </div>
442
- </div>
443
- </section>
444
-
445
- <!-- Blog Section -->
446
- <section id="blog">
447
- <h2 class="fade-in">Technical Blog</h2>
448
- <div class="blog-container">
449
- <div class="blog-grid">
450
- <!-- Blog Post 1 -->
451
- <article class="blog-card fade-in">
452
- <div class="blog-image">🧠</div>
453
- <div class="blog-content">
454
- <div class="blog-date">December 15, 2024</div>
455
- <h3 class="blog-title">Implementing GANs for Audio Generation</h3>
456
- <p class="blog-excerpt">Exploring the architecture and implementation of Generative Adversarial Networks for creating realistic audio samples with deep learning techniques.</p>
457
- <a href="#" class="blog-link">
458
- Read More
459
- <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
460
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
461
- </svg>
462
- </a>
463
- </div>
464
- </article>
465
-
466
- <!-- Blog Post 2 -->
467
- <article class="blog-card fade-in">
468
- <div class="blog-image">🌱</div>
469
- <div class="blog-content">
470
- <div class="blog-date">November 28, 2024</div>
471
- <h3 class="blog-title">AI in Agriculture: Plant Disease Detection</h3>
472
- <p class="blog-excerpt">Deep dive into computer vision techniques for early detection of plant diseases, featuring CNN architectures and real-world deployment strategies.</p>
473
- <a href="#" class="blog-link">
474
- Read More
475
- <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
476
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
477
- </svg>
478
- </a>
479
- </div>
480
- </article>
481
-
482
- <!-- Blog Post 3 -->
483
- <article class="blog-card fade-in">
484
- <div class="blog-image">⚡</div>
485
- <div class="blog-content">
486
- <div class="blog-date">October 10, 2024</div>
487
- <h3 class="blog-title">Building Scalable ML Pipelines</h3>
488
- <p class="blog-excerpt">Best practices for designing and implementing machine learning pipelines that can handle production workloads with MLOps principles.</p>
489
- <a href="#" class="blog-link">
490
- Read More
491
- <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
492
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
493
- </svg>
494
- </a>
495
- </div>
496
- </article>
497
-
498
- <!-- Blog Post 4 -->
499
- <article class="blog-card fade-in">
500
- <div class="blog-image">🔬</div>
501
- <div class="blog-content">
502
- <div class="blog-date">September 22, 2024</div>
503
- <h3 class="blog-title">Research Paper Insights: AI Ethics</h3>
504
- <p class="blog-excerpt">Key findings from recent research publications on ethical AI development and responsible machine learning practices in industry applications.</p>
505
- <a href="#" class="blog-link">
506
- Read More
507
- <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
508
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
509
- </svg>
510
- </a>
511
- </div>
512
- </article>
513
- </div>
514
- </div>
515
- </section>
516
- </main>
517
-
518
- <!-- Footer -->
519
- <footer>
520
- <div class="footer-content">
521
- <div class="social-links">
522
- <a href="#" aria-label="LinkedIn">📧</a>
523
- <a href="#" aria-label="GitHub">💻</a>
524
- <a href="#" aria-label="Twitter">🐦</a>
525
- <a href="#" aria-label="Medium">📝</a>
526
- </div>
527
- <p class="footer-text">© 2024 Pranit Chilbule. All rights reserved.</p>
528
- </div>
529
- </footer>
530
-
531
- <script>
532
- // Smooth scrolling for navigation links
533
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
534
- anchor.addEventListener('click', function (e) {
535
- e.preventDefault();
536
- const target = document.querySelector(this.getAttribute('href'));
537
- if (target) {
538
- target.scrollIntoView({
539
- behavior: 'smooth',
540
- block: 'start'
541
- });
542
- }
543
- });
544
- });
545
-
546
- // Intersection Observer for animations
547
- const observerOptions = {
548
- threshold: 0.1,
549
- rootMargin: '0px 0px -50px 0px'
550
- };
551
-
552
- const observer = new IntersectionObserver((entries) => {
553
- entries.forEach(entry => {
554
- if (entry.isIntersecting) {
555
- entry.target.style.animationPlayState = 'running';
556
- }
557
- });
558
- }, observerOptions);
559
-
560
- // Observe all elements with fade-in class
561
- document.querySelectorAll('.fade-in').forEach(el => {
562
- observer.observe(el);
563
- });
564
-
565
- // Add click effects to achievement cards
566
- document.querySelectorAll('.achievement-card').forEach(card => {
567
- card.addEventListener('click', function() {
568
- this.style.transform = 'scale(0.98)';
569
- setTimeout(() => {
570
- this.style.transform = '';
571
- }, 150);
572
- });
573
- });
574
-
575
- // Header background on scroll
576
- window.addEventListener('scroll', () => {
577
- const header = document.querySelector('header');
578
- if (window.scrollY > 100) {
579
- header.style.background = 'rgba(0, 0, 0, 0.9)';
580
- } else {
581
- header.style.background = 'rgba(0, 0, 0, 0.6)';
582
- }
583
- });
584
-
585
- // Initialize animations
586
- document.addEventListener('DOMContentLoaded', () => {
587
- const fadeElements = document.querySelectorAll('.fade-in');
588
- fadeElements.forEach((el, index) => {
589
- el.style.animationDelay = `${index * 0.1}s`;
590
- });
591
- });
592
- </script>
593
- </body>
 
 
594
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Achievements & Blog - Pranit Chilbule</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
9
+
10
+ <style>
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ :root {
18
+ --bg-primary: #0d1117;
19
+ --bg-secondary: #010409;
20
+ --bg-card: #21262d;
21
+ --text-primary: #c9d1d9;
22
+ --text-secondary: rgba(201, 209, 217, 0.8);
23
+ --accent-blue: #58a6ff;
24
+ --accent-green: #10a37f;
25
+ --accent-gold: #ffd700;
26
+ --accent-silver: #c0c0c0;
27
+ --header-bg: rgba(0, 0, 0, 0.6);
28
+ --border-color: #30363d;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ background: var(--bg-primary);
34
+ color: var(--text-primary);
35
+ line-height: 1.6;
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ /* Header */
40
+ header {
41
+ position: fixed;
42
+ top: 0;
43
+ width: 100%;
44
+ background: var(--header-bg);
45
+ backdrop-filter: blur(10px);
46
+ z-index: 1000;
47
+ border-bottom: 1px solid var(--border-color);
48
+ }
49
+
50
+ nav {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ padding: 1rem 2rem;
55
+ max-width: 1200px;
56
+ margin: 0 auto;
57
+ }
58
+
59
+ .logo {
60
+ font-family: 'Roboto Mono', monospace;
61
+ font-size: 1.5rem;
62
+ font-weight: 700;
63
+ color: var(--accent-blue);
64
+ }
65
+
66
+ .nav-links {
67
+ display: flex;
68
+ list-style: none;
69
+ gap: 2rem;
70
+ }
71
+
72
+ .nav-links a {
73
+ color: var(--text-primary);
74
+ text-decoration: none;
75
+ transition: color 0.3s ease;
76
+ }
77
+
78
+ .nav-links a:hover {
79
+ color: var(--accent-blue);
80
+ }
81
+
82
+ /* Main Content */
83
+ main {
84
+ max-width: 1200px;
85
+ margin: 0 auto;
86
+ padding: 120px 2rem 2rem;
87
+ }
88
+
89
+ section {
90
+ margin-bottom: 4rem;
91
+ }
92
+
93
+ h2 {
94
+ font-size: 2.5rem;
95
+ margin-bottom: 2rem;
96
+ color: var(--accent-blue);
97
+ text-align: center;
98
+ position: relative;
99
+ }
100
+
101
+ h2::after {
102
+ content: '';
103
+ position: absolute;
104
+ bottom: -10px;
105
+ left: 50%;
106
+ transform: translateX(-50%);
107
+ width: 80px;
108
+ height: 3px;
109
+ background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
110
+ border-radius: 2px;
111
+ }
112
+
113
+ /* Achievement Cards */
114
+ .achievements-grid {
115
+ display: grid;
116
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
117
+ gap: 2rem;
118
+ padding: 2rem 0;
119
+ }
120
+
121
+ .achievement-card {
122
+ background: var(--bg-card);
123
+ border-radius: 16px;
124
+ padding: 2rem;
125
+ border: 1px solid var(--border-color);
126
+ transition: all 0.4s ease;
127
+ cursor: pointer;
128
+ position: relative;
129
+ overflow: hidden;
130
+ }
131
+
132
+ .achievement-card::before {
133
+ content: '';
134
+ position: absolute;
135
+ top: 0;
136
+ left: -100%;
137
+ width: 100%;
138
+ height: 100%;
139
+ background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.1), transparent);
140
+ transition: left 0.6s ease;
141
+ }
142
+
143
+ .achievement-card:hover::before {
144
+ left: 100%;
145
+ }
146
+
147
+ .achievement-card:hover {
148
+ transform: translateY(-8px);
149
+ box-shadow: 0 15px 40px rgba(88, 166, 255, 0.2);
150
+ border-color: var(--accent-blue);
151
+ }
152
+
153
+ .achievement-icon {
154
+ font-size: 3rem;
155
+ margin-bottom: 1.5rem;
156
+ display: block;
157
+ }
158
+
159
+ .achievement-title {
160
+ color: var(--accent-blue);
161
+ font-size: 1.3rem;
162
+ font-weight: 600;
163
+ margin-bottom: 1rem;
164
+ }
165
+
166
+ .achievement-description {
167
+ color: var(--text-secondary);
168
+ font-size: 1rem;
169
+ line-height: 1.6;
170
+ }
171
+
172
+ .achievement-stats {
173
+ display: flex;
174
+ gap: 1rem;
175
+ margin-top: 1rem;
176
+ font-size: 0.9rem;
177
+ color: var(--accent-green);
178
+ }
179
+
180
+ .stat-item {
181
+ background: rgba(16, 163, 127, 0.1);
182
+ padding: 0.3rem 0.8rem;
183
+ border-radius: 12px;
184
+ border: 1px solid rgba(16, 163, 127, 0.3);
185
+ }
186
+
187
+ /* Blog Section */
188
+ .blog-container {
189
+ overflow-x: auto;
190
+ padding: 2rem 0;
191
+ -ms-overflow-style: none;
192
+ scrollbar-width: none;
193
+ }
194
+
195
+ .blog-container::-webkit-scrollbar {
196
+ display: none;
197
+ }
198
+
199
+ .blog-grid {
200
+ display: flex;
201
+ gap: 2rem;
202
+ padding: 0.5rem;
203
+ }
204
+
205
+ .blog-card {
206
+ min-width: 350px;
207
+ max-width: 400px;
208
+ background: var(--bg-card);
209
+ border-radius: 16px;
210
+ overflow: hidden;
211
+ border: 1px solid var(--border-color);
212
+ transition: all 0.4s ease;
213
+ position: relative;
214
+ }
215
+
216
+ .blog-card:hover {
217
+ transform: translateY(-8px);
218
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
219
+ border-color: var(--accent-blue);
220
+ }
221
+
222
+ .blog-image {
223
+ width: 100%;
224
+ height: 220px;
225
+ background: linear-gradient(135deg, var(--accent-blue), var(--accent-green));
226
+ display: flex;
227
+ align-items: center;
228
+ justify-content: center;
229
+ font-size: 3rem;
230
+ color: white;
231
+ }
232
+
233
+ .blog-content {
234
+ padding: 2rem;
235
+ }
236
+
237
+ .blog-date {
238
+ color: var(--accent-green);
239
+ font-size: 0.9rem;
240
+ margin-bottom: 0.8rem;
241
+ font-weight: 500;
242
+ }
243
+
244
+ .blog-title {
245
+ color: var(--text-primary);
246
+ font-size: 1.3rem;
247
+ font-weight: 600;
248
+ margin-bottom: 1rem;
249
+ line-height: 1.4;
250
+ }
251
+
252
+ .blog-excerpt {
253
+ color: var(--text-secondary);
254
+ font-size: 1rem;
255
+ margin-bottom: 1.5rem;
256
+ line-height: 1.6;
257
+ display: -webkit-box;
258
+ -webkit-line-clamp: 3;
259
+ -webkit-box-orient: vertical;
260
+ overflow: hidden;
261
+ }
262
+
263
+ .blog-link {
264
+ color: var(--accent-blue);
265
+ text-decoration: none;
266
+ font-weight: 500;
267
+ display: inline-flex;
268
+ align-items: center;
269
+ gap: 0.5rem;
270
+ transition: all 0.3s ease;
271
+ }
272
+
273
+ .blog-link:hover {
274
+ color: var(--accent-green);
275
+ transform: translateX(5px);
276
+ }
277
+
278
+ /* Footer */
279
+ footer {
280
+ background: var(--bg-secondary);
281
+ padding: 3rem 2rem 2rem;
282
+ border-top: 1px solid var(--border-color);
283
+ text-align: center;
284
+ }
285
+
286
+ .footer-content {
287
+ max-width: 1200px;
288
+ margin: 0 auto;
289
+ }
290
+
291
+ .social-links {
292
+ display: flex;
293
+ justify-content: center;
294
+ gap: 2rem;
295
+ margin-bottom: 2rem;
296
+ }
297
+
298
+ .social-links a {
299
+ color: var(--text-secondary);
300
+ font-size: 1.5rem;
301
+ transition: color 0.3s ease;
302
+ }
303
+
304
+ .social-links a:hover {
305
+ color: var(--accent-blue);
306
+ }
307
+
308
+ .footer-text {
309
+ color: var(--text-secondary);
310
+ font-size: 0.9rem;
311
+ }
312
+
313
+ /* Animations */
314
+ .fade-in {
315
+ opacity: 0;
316
+ transform: translateY(30px);
317
+ animation: fadeInUp 0.8s ease forwards;
318
+ }
319
+
320
+ @keyframes fadeInUp {
321
+ to {
322
+ opacity: 1;
323
+ transform: translateY(0);
324
+ }
325
+ }
326
+
327
+ .fade-in:nth-child(1) { animation-delay: 0.1s; }
328
+ .fade-in:nth-child(2) { animation-delay: 0.2s; }
329
+ .fade-in:nth-child(3) { animation-delay: 0.3s; }
330
+ .fade-in:nth-child(4) { animation-delay: 0.4s; }
331
+ .fade-in:nth-child(5) { animation-delay: 0.5s; }
332
+ .fade-in:nth-child(6) { animation-delay: 0.6s; }
333
+
334
+ /* Mobile Responsiveness */
335
+ @media (max-width: 768px) {
336
+ .nav-links {
337
+ display: none;
338
+ }
339
+
340
+ main {
341
+ padding: 100px 1rem 2rem;
342
+ }
343
+
344
+ h2 {
345
+ font-size: 2rem;
346
+ }
347
+
348
+ .achievements-grid {
349
+ grid-template-columns: 1fr;
350
+ gap: 1.5rem;
351
+ }
352
+
353
+ .achievement-card {
354
+ padding: 1.5rem;
355
+ }
356
+
357
+ .blog-card {
358
+ min-width: 280px;
359
+ }
360
+ }
361
+ </style>
362
+ </head>
363
+ <body>
364
+ <!-- Header -->
365
+ <header>
366
+ <nav>
367
+ <div class="logo">Pranit Chilbule</div>
368
+ <ul class="nav-links" id="navLinks">
369
+ <li><a href="index.html"><i class="fas fa-house"></i> Home</a></li>
370
+ <li><a href="about.html"><i class="fas fa-user"></i> About</a></li>
371
+ <li><a href="projects.html"><i class="fas fa-code"></i> Projects</a></li>
372
+ <li><a href="achievements.html"><i class="fas fa-trophy"></i> Achievements</a></li>
373
+ <li><a href="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>
374
+ </ul>
375
+ </nav>
376
+ </header>
377
+
378
+ <main>
379
+ <!-- Achievements Section -->
380
+ <section id="achievements">
381
+ <h2 class="fade-in">Achievements</h2>
382
+ <div class="achievements-grid">
383
+ <div class="achievement-card fade-in">
384
+ <div class="achievement-icon">🏆</div>
385
+ <h3 class="achievement-title">4× Hackathon Winner</h3>
386
+ <p class="achievement-description">First place victories at Cavista, Solvex, and Agri Tech hackathons, delivering innovative solutions across healthcare, agriculture, and engineering domains.</p>
387
+ <div class="achievement-stats">
388
+ <span class="stat-item">4 Wins</span>
389
+ <span class="stat-item">Multiple Domains</span>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="achievement-card fade-in">
394
+ <div class="achievement-icon">🥈</div>
395
+ <h3 class="achievement-title">Runner-Up & Finalist</h3>
396
+ <p class="achievement-description">Runner-up at Smart India Hackathon 2024 and Agri AI Hackathon 2025. Finalist at 8+ hackathons with 20+ total participations, consistently applying AI to solve real-world challenges.</p>
397
+ <div class="achievement-stats">
398
+ <span class="stat-item">2 Runner-ups</span>
399
+ <span class="stat-item">8+ Finals</span>
400
+ <span class="stat-item">20+ Participations</span>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="achievement-card fade-in">
405
+ <div class="achievement-icon">📑</div>
406
+ <h3 class="achievement-title">Research Publications</h3>
407
+ <p class="achievement-description">Research papers presented at the Maitri Conference and ICCICN, with publications indexed in prestigious Scopus and Springer databases.</p>
408
+ <div class="achievement-stats">
409
+ <span class="stat-item">Scopus Indexed</span>
410
+ <span class="stat-item">Springer</span>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="achievement-card fade-in">
415
+ <div class="achievement-icon">🏅</div>
416
+ <h3 class="achievement-title">Best Project Award</h3>
417
+ <p class="achievement-description">Best Project Award for Plant Disease Detection System at college level, recognized for innovation among 120+ participants.</p>
418
+ <div class="achievement-stats">
419
+ <span class="stat-item">120+ Participants</span>
420
+ <span class="stat-item">AI/ML Project</span>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="achievement-card fade-in">
425
+ <div class="achievement-icon">👥</div>
426
+ <h3 class="achievement-title">Innovsphere Club Founder</h3>
427
+ <p class="achievement-description">Founded and serve as Tech Lead of Innovsphere Club, a community-driven technology club fostering collaboration among students and industry professionals.</p>
428
+ <div class="achievement-stats">
429
+ <span class="stat-item">Founder</span>
430
+ <span class="stat-item">Tech Lead</span>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="achievement-card fade-in">
435
+ <div class="achievement-icon">🌟</div>
436
+ <h3 class="achievement-title">Continuous Contributor</h3>
437
+ <p class="achievement-description">Actively contributing to data science and AI through open-source projects, technical blog posts, and ongoing academic and industry collaborations.</p>
438
+ <div class="achievement-stats">
439
+ <span class="stat-item">Open Source</span>
440
+ <span class="stat-item">Tech Blogs</span>
441
+ <span class="stat-item">Collaborations</span>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </section>
446
+
447
+ <!-- Blog Section -->
448
+ <section id="blog">
449
+ <h2 class="fade-in">Technical Blog</h2>
450
+ <div class="blog-container">
451
+ <div class="blog-grid">
452
+ <!-- Blog Post 1 -->
453
+ <article class="blog-card fade-in">
454
+ <div class="blog-image">🧠</div>
455
+ <div class="blog-content">
456
+ <div class="blog-date">December 15, 2024</div>
457
+ <h3 class="blog-title">Implementing GANs for Audio Generation</h3>
458
+ <p class="blog-excerpt">Exploring the architecture and implementation of Generative Adversarial Networks for creating realistic audio samples with deep learning techniques.</p>
459
+ <a href="#" class="blog-link">
460
+ Read More
461
+ <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
462
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
463
+ </svg>
464
+ </a>
465
+ </div>
466
+ </article>
467
+
468
+ <!-- Blog Post 2 -->
469
+ <article class="blog-card fade-in">
470
+ <div class="blog-image">🌱</div>
471
+ <div class="blog-content">
472
+ <div class="blog-date">November 28, 2024</div>
473
+ <h3 class="blog-title">AI in Agriculture: Plant Disease Detection</h3>
474
+ <p class="blog-excerpt">Deep dive into computer vision techniques for early detection of plant diseases, featuring CNN architectures and real-world deployment strategies.</p>
475
+ <a href="#" class="blog-link">
476
+ Read More
477
+ <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
478
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
479
+ </svg>
480
+ </a>
481
+ </div>
482
+ </article>
483
+
484
+ <!-- Blog Post 3 -->
485
+ <article class="blog-card fade-in">
486
+ <div class="blog-image">⚡</div>
487
+ <div class="blog-content">
488
+ <div class="blog-date">October 10, 2024</div>
489
+ <h3 class="blog-title">Building Scalable ML Pipelines</h3>
490
+ <p class="blog-excerpt">Best practices for designing and implementing machine learning pipelines that can handle production workloads with MLOps principles.</p>
491
+ <a href="#" class="blog-link">
492
+ Read More
493
+ <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
494
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
495
+ </svg>
496
+ </a>
497
+ </div>
498
+ </article>
499
+
500
+ <!-- Blog Post 4 -->
501
+ <article class="blog-card fade-in">
502
+ <div class="blog-image">🔬</div>
503
+ <div class="blog-content">
504
+ <div class="blog-date">September 22, 2024</div>
505
+ <h3 class="blog-title">Research Paper Insights: AI Ethics</h3>
506
+ <p class="blog-excerpt">Key findings from recent research publications on ethical AI development and responsible machine learning practices in industry applications.</p>
507
+ <a href="#" class="blog-link">
508
+ Read More
509
+ <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
510
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
511
+ </svg>
512
+ </a>
513
+ </div>
514
+ </article>
515
+ </div>
516
+ </div>
517
+ </section>
518
+ </main>
519
+
520
+ <!-- Footer -->
521
+ <footer>
522
+ <div class="footer-content">
523
+ <div class="social-links">
524
+ <a href="#" aria-label="LinkedIn">📧</a>
525
+ <a href="#" aria-label="GitHub">💻</a>
526
+ <a href="#" aria-label="Twitter">🐦</a>
527
+ <a href="#" aria-label="Medium">📝</a>
528
+ </div>
529
+ <p class="footer-text">© 2024 Pranit Chilbule. All rights reserved.</p>
530
+ </div>
531
+ </footer>
532
+
533
+ <script>
534
+ // Smooth scrolling for navigation links
535
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
536
+ anchor.addEventListener('click', function (e) {
537
+ e.preventDefault();
538
+ const target = document.querySelector(this.getAttribute('href'));
539
+ if (target) {
540
+ target.scrollIntoView({
541
+ behavior: 'smooth',
542
+ block: 'start'
543
+ });
544
+ }
545
+ });
546
+ });
547
+
548
+ // Intersection Observer for animations
549
+ const observerOptions = {
550
+ threshold: 0.1,
551
+ rootMargin: '0px 0px -50px 0px'
552
+ };
553
+
554
+ const observer = new IntersectionObserver((entries) => {
555
+ entries.forEach(entry => {
556
+ if (entry.isIntersecting) {
557
+ entry.target.style.animationPlayState = 'running';
558
+ }
559
+ });
560
+ }, observerOptions);
561
+
562
+ // Observe all elements with fade-in class
563
+ document.querySelectorAll('.fade-in').forEach(el => {
564
+ observer.observe(el);
565
+ });
566
+
567
+ // Add click effects to achievement cards
568
+ document.querySelectorAll('.achievement-card').forEach(card => {
569
+ card.addEventListener('click', function() {
570
+ this.style.transform = 'scale(0.98)';
571
+ setTimeout(() => {
572
+ this.style.transform = '';
573
+ }, 150);
574
+ });
575
+ });
576
+
577
+ // Header background on scroll
578
+ window.addEventListener('scroll', () => {
579
+ const header = document.querySelector('header');
580
+ if (window.scrollY > 100) {
581
+ header.style.background = 'rgba(0, 0, 0, 0.9)';
582
+ } else {
583
+ header.style.background = 'rgba(0, 0, 0, 0.6)';
584
+ }
585
+ });
586
+
587
+ // Initialize animations
588
+ document.addEventListener('DOMContentLoaded', () => {
589
+ const fadeElements = document.querySelectorAll('.fade-in');
590
+ fadeElements.forEach((el, index) => {
591
+ el.style.animationDelay = `${index * 0.1}s`;
592
+ });
593
+ });
594
+ </script>
595
+ </body>
596
  </html>