Hugging Face's logo

Spaces:
gaur3009
/
web3333
Running

App Files Community
gaur3009 commited on
Commit
91699a0
·
verified ·
1 Parent(s): f2aa260

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +205 -337
index.html CHANGED
@@ -177,17 +177,16 @@
177
 
178
  <h3 class="text-xl font-semibold mt-8 mb-4">Connect With Me</h3>
179
  <div class="flex space-x-4">
180
- <a href="https://github.com/gaur3009-p" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
181
- <i class="fab fa-github text-gray-700"></i>
182
- </a>
183
- <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
184
- <i class="fab fa-linkedin-in text-gray-700"></i>
185
- </a>
186
- <a href="https://huggingface.co/gaur3009" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
187
- <i class="fas fa-robot text-gray-700"></i>
188
- </a>
189
- </div>
190
-
191
  </div>
192
  </div>
193
 
@@ -217,43 +216,6 @@
217
  <div>
218
  <div class="flex justify-between mb-1">
219
  <span>TypeScript/JavaScript</span>
220
- <span>80%</span>
221
- </div>
222
- <div class="skill-bar">
223
- <div class="skill-progress" style="width: 80%"></div>
224
- </div>
225
- </div>
226
- </div>
227
- </div>
228
- <div>
229
- <h4 class="font-medium mb-2">AI & ML</h4>
230
- <div class="space-y-3">
231
- <div>
232
- <div class="flex justify-between mb-1">
233
- <span>PyTorch</span>
234
- <span>85%</span>
235
- </div>
236
- <div class="skill-bar">
237
- <div class="skill-progress" style="width: 85%"></div>
238
- </div>
239
- </div>
240
- <div>
241
- <div class="flex justify-between mb-1">
242
- <span>OpenCV/YOLOv8</span>
243
- <span>80%</span>
244
- </div>
245
- <div class="skill-bar">
246
- <div class="skill-progress" style="width: 80%"></div>
247
- </div>
248
- </div>
249
- </div>
250
- </div>
251
- <div>
252
- <h4 class="font-medium mb-2">Web Technologies</h4>
253
- <div class="space-y-3">
254
- <div>
255
- <div class="flex justify-between mb-1">
256
- <span>ReactJS</span>
257
  <span>75%</span>
258
  </div>
259
  <div class="skill-bar">
@@ -262,7 +224,7 @@
262
  </div>
263
  <div>
264
  <div class="flex justify-between mb-1">
265
- <span>Django/Flask</span>
266
  <span>70%</span>
267
  </div>
268
  <div class="skill-bar">
@@ -272,11 +234,11 @@
272
  </div>
273
  </div>
274
  <div>
275
- <h4 class="font-medium mb-2">Tools & Platforms</h4>
276
  <div class="space-y-3">
277
  <div>
278
  <div class="flex justify-between mb-1">
279
- <span>Gradio/Hugging Face</span>
280
  <span>85%</span>
281
  </div>
282
  <div class="skill-bar">
@@ -285,11 +247,20 @@
285
  </div>
286
  <div>
287
  <div class="flex justify-between mb-1">
288
- <span>AWS/Google Cloud</span>
289
- <span>70%</span>
290
  </div>
291
  <div class="skill-bar">
292
- <div class="skill-progress" style="width: 70%"></div>
 
 
 
 
 
 
 
 
 
293
  </div>
294
  </div>
295
  </div>
@@ -298,14 +269,10 @@
298
  </div>
299
 
300
  <div>
301
- <h3 class="text-2xl font-semibold mb-4">Soft Skills</h3>
302
- <div class="flex flex-wrap gap-2">
303
- <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full">Problem-Solving</span>
304
- <span class="px-4 py-2 bg-green-100 text-green-800 rounded-full">Analytical Thinking</span>
305
- <span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full">Leadership</span>
306
- <span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full">Team Collaboration</span>
307
- <span class="px-4 py-2 bg-pink-100 text-pink-800 rounded-full">Research & Innovation</span>
308
- <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full">Effective Communication</span>
309
  </div>
310
  </div>
311
  </div>
@@ -319,165 +286,63 @@
319
  <h2 class="text-3xl font-bold text-center mb-12">Work <span class="gradient-text">Experience</span></h2>
320
 
321
  <div class="relative max-w-3xl mx-auto">
322
- <div class="absolute left-1/2 w-1 h-full bg-gray-200 transform -translate-x-1/2"></div>
 
323
 
 
324
  <div class="space-y-8">
325
- <!-- Experience 1 -->
326
- <div class="relative pl-8 md:pl-16 animate-on-scroll">
327
- <div class="timeline-item">
328
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
329
- <div class="flex justify-between items-start mb-2">
330
- <h3 class="text-xl font-semibold">AI Engineer (Part-Time)</h3>
331
- <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Jan 2024 – Present</span>
332
- </div>
333
- <h4 class="text-gray-600 font-medium mb-4">Rookus.in</h4>
334
- <ul class="list-disc pl-5 space-y-2 text-gray-600">
335
- <li>Spearheaded AI-driven design generation models for fashion</li>
336
- <li>Integrated deep learning techniques for realistic fabric warping</li>
337
- <li>Developed scalable GenAI B2B SaaS solutions with Gradio & PyTorch</li>
338
- </ul>
339
- <div class="mt-4 flex flex-wrap gap-2">
340
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">PyTorch</span>
341
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Gradio</span>
342
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">StyleGAN</span>
343
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">TypeScript</span>
344
- </div>
345
- </div>
346
- </div>
347
- </div>
348
-
349
- <!-- Experience 2 -->
350
- <div class="relative pl-8 md:pl-16 animate-on-scroll">
351
- <div class="timeline-item">
352
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
353
- <div class="flex justify-between items-start mb-2">
354
- <h3 class="text-xl font-semibold">NLP Engineer</h3>
355
- <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Aug 2023 – Nov 2023</span>
356
- </div>
357
- <h4 class="text-gray-600 font-medium mb-4">Metaverse Ventures Pvt Ltd, Bengaluru</h4>
358
- <ul class="list-disc pl-5 space-y-2 text-gray-600">
359
- <li>Designed RNN-LSTM architecture for NLP</li>
360
- <li>Built OpenCV-based body measurement models</li>
361
- <li>Contributed to LLM development using encoder-decoder architectures like BERT</li>
362
- </ul>
363
- <div class="mt-4 flex flex-wrap gap-2">
364
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">NLP</span>
365
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">OpenCV</span>
366
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">YOLOv8</span>
367
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">PyTorch</span>
368
- </div>
369
- </div>
370
- </div>
371
- </div>
372
-
373
- <!-- Experience 3 -->
374
- <div class="relative pl-8 md:pl-16 animate-on-scroll">
375
- <div class="timeline-item">
376
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
377
- <div class="flex justify-between items-start mb-2">
378
- <h3 class="text-xl font-semibold">Data Analyst Virtual Internship</h3>
379
- <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Jul 2023 – Sep 2023</span>
380
- </div>
381
- <h4 class="text-gray-600 font-medium mb-4">KPMG (Remote)</h4>
382
- <ul class="list-disc pl-5 space-y-2 text-gray-600">
383
- <li>Performed data-driven insights using Python, Pandas, and SQL</li>
384
- <li>Analyzed large datasets and visualized business insights</li>
385
- </ul>
386
- <div class="mt-4 flex flex-wrap gap-2">
387
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Python</span>
388
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Pandas</span>
389
- <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">SQL</span>
390
- </div>
391
- </div>
392
- </div>
393
- </div>
394
-
395
- <!-- Experience 4 -->
396
- <div class="relative pl-8 md:pl-16 animate-on-scroll">
397
- <div class="timeline-item">
398
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
399
- <div class="flex justify-between items-start mb-2">
400
- <h3 class="text-xl font-semibold">Subject Matter Expert</h3>
401
- <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">May 2023 – Aug 2023</span>
402
- </div>
403
- <h4 class="text-gray-600 font-medium mb-4">Edu Solutions Consultancy Pvt Ltd, Mumbai</h4>
404
- <ul class="list-disc pl-5 space-y-2 text-gray-600">
405
- <li>Provided expertise in Mathematics & Computing</li>
406
- <li>Developed content for competitive exams</li>
407
- </ul>
408
- </div>
409
- </div>
410
- </div>
411
- </div>
412
- </div>
413
-
414
- <!-- Education -->
415
- <div class="mt-20">
416
- <h2 class="text-3xl font-bold text-center mb-12">Education & <span class="gradient-text">Achievements</span></h2>
417
-
418
- <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
419
- <!-- Education 1 -->
420
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
421
- <div class="flex items-center mb-4">
422
- <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
423
- <i class="fas fa-university text-blue-500 text-xl"></i>
424
- </div>
425
- <div>
426
- <h3 class="font-semibold">Birla Institute of Technology, Mesra</h3>
427
- <p class="text-gray-600">2021 - 2026</p>
428
  </div>
 
 
 
 
 
 
 
429
  </div>
430
- <p class="text-gray-600 mb-2">Integrated BS-MS in Mathematics and Computing</p>
431
- <p class="font-medium">GPA: 8.14</p>
432
  </div>
433
 
434
- <!-- Education 2 -->
435
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
436
- <div class="flex items-center mb-4">
437
- <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
438
- <i class="fas fa-school text-green-500 text-xl"></i>
439
- </div>
440
- <div>
441
- <h3 class="font-semibold">Air Force School</h3>
442
- <p class="text-gray-600">Completed 2019</p>
443
- </div>
444
- </div>
445
- <div class="grid grid-cols-2 gap-4">
446
- <div>
447
- <p class="text-gray-600">10th Grade</p>
448
- <p class="font-medium">91.2%</p>
449
- </div>
450
- <div>
451
- <p class="text-gray-600">12th Grade</p>
452
- <p class="font-medium">90.6%</p>
453
  </div>
 
 
 
 
 
 
 
454
  </div>
 
455
  </div>
456
 
457
- <!-- Achievements -->
458
- <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
459
- <div class="flex items-center mb-4">
460
- <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
461
- <i class="fas fa-trophy text-purple-500 text-xl"></i>
462
- </div>
463
- <div>
464
- <h3 class="font-semibold">Achievements</h3>
465
  </div>
 
 
 
 
 
 
 
466
  </div>
467
- <ul class="space-y-3">
468
- <li class="flex items-start">
469
- <i class="fas fa-medal text-yellow-500 mt-1 mr-2"></i>
470
- <span>4th Rank (College Level) - Smart India Hackathon</span>
471
- </li>
472
- <li class="flex items-start">
473
- <i class="fas fa-star text-blue-500 mt-1 mr-2"></i>
474
- <span>Selected for BIT Nishan (Top Tech Competition)</span>
475
- </li>
476
- <li class="flex items-start">
477
- <i class="fas fa-award text-green-500 mt-1 mr-2"></i>
478
- <span>BIG Accelerator Program - Recognized for AI Innovation at Rookus</span>
479
- </li>
480
- </ul>
481
  </div>
482
  </div>
483
  </div>
@@ -489,52 +354,64 @@
489
  <div class="container mx-auto px-6">
490
  <h2 class="text-3xl font-bold text-center mb-12">Featured <span class="gradient-text">Projects</span></h2>
491
 
492
- <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
493
  <!-- Project 1 -->
494
  <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
495
- <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
496
- <i class="fas fa-briefcase text-white text-6xl"></i>
497
  </div>
498
  <div class="p-6">
499
- <h3 class="text-xl font-semibold mb-2">Job Board GPT</h3>
500
- <p class="text-gray-600 mb-4">AI-powered job board using NLP and PyTorch for context-aware job recommendations.</p>
501
- <ul class="list-disc pl-5 space-y-1 text-gray-600 mb-4">
502
- <li>Integrated Django & Flask backend with ReactJS & Firebase</li>
503
- <li>Enhanced job matching accuracy through semantic search</li>
504
- <li>Implemented transformer-based ranking and chatbot</li>
505
- </ul>
506
- <div class="flex flex-wrap gap-2">
507
- <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PyTorch</span>
508
- <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">NLP</span>
509
- <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Firebase</span>
510
- <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">ReactJS</span>
511
- <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Django/Flask</span>
512
  </div>
 
513
  </div>
514
  </div>
515
 
516
  <!-- Project 2 -->
517
  <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
518
- <div class="h-48 bg-gradient-to-r from-pink-400 to-purple-600 flex items-center justify-center">
519
- <i class="fas fa-tshirt text-white text-6xl"></i>
520
  </div>
521
  <div class="p-6">
522
- <h3 class="text-xl font-semibold mb-2">AI Fashion (AI-Generated Design Model)</h3>
523
- <p class="text-gray-600 mb-4">Advanced AI-driven fashion design model integrating artwork and text onto clothing & phone covers.</p>
524
- <ul class="list-disc pl-5 space-y-1 text-gray-600 mb-4">
525
- <li>Ensured realistic fabric warping & texture adaptation</li>
526
- <li>Leveraged PyTorch & StyleGAN for fabric analysis</li>
527
- <li>Analyzed fabric folds, lighting, and material properties</li>
528
- </ul>
529
- <div class="flex flex-wrap gap-2">
530
- <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PyTorch</span>
531
- <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">Gradio</span>
532
- <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">TypeScript</span>
533
- <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">StyleGAN</span>
534
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
  </div>
536
  </div>
537
  </div>
 
 
 
 
 
 
538
  </div>
539
  </section>
540
 
@@ -543,80 +420,102 @@
543
  <div class="container mx-auto px-6">
544
  <h2 class="text-3xl font-bold text-center mb-12">Get In <span class="gradient-text">Touch</span></h2>
545
 
546
- <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm overflow-hidden">
547
- <div class="md:flex">
548
- <div class="md:w-1/2 bg-gradient-to-br from-blue-500 to-green-500 p-8 text-white">
549
- <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
550
- <div class="space-y-6">
551
- <div class="flex items-start">
552
- <i class="fas fa-map-marker-alt mt-1 mr-4 text-xl"></i>
553
- <div>
554
- <h4 class="font-medium">Location</h4>
555
- <p>Kanpur, India</p>
556
- </div>
557
- </div>
558
- <div class="flex items-start">
559
- <i class="fas fa-envelope mt-1 mr-4 text-xl"></i>
560
- <div>
561
- <h4 class="font-medium">Email</h4>
562
- <p>[email protected]</p>
563
- </div>
564
  </div>
565
- <div class="flex items-start">
566
- <i class="fas fa-share-alt mt-1 mr-4 text-xl"></i>
567
- <div>
568
- <h4 class="font-medium">Social Profiles</h4>
569
- <div class="flex space-x-4 mt-2">
570
- <a href="https://github.com/gaur3009-p" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
571
- <i class="fab fa-github"></i>
572
- </a>
573
- <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
574
- <i class="fab fa-linkedin-in"></i>
575
- </a>
576
- <a href="https://huggingface.co/gaur3009" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
577
- <i class="fas fa-robot"></i>
578
- </a>
579
- </div>
580
- </div>
581
  </div>
582
  </div>
583
- </div>
584
-
585
- <div class="md:w-1/2 p-8">
586
- <form class="space-y-6">
587
- <div>
588
- <label for="name" class="block text-gray-700 mb-2">Your Name</label>
589
- <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
590
  </div>
591
  <div>
592
- <label for="email" class="block text-gray-700 mb-2">Your Email</label>
593
- <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
594
  </div>
595
- <div>
596
- <label for="subject" class="block text-gray-700 mb-2">Subject</label>
597
- <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
 
 
598
  </div>
599
  <div>
600
- <label for="message" class="block text-gray-700 mb-2">Message</label>
601
- <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300"></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
602
  </div>
603
- <button type="submit" class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition duration-300">Send Message</button>
604
- </form>
605
  </div>
606
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
607
  </div>
608
  </div>
609
  </section>
610
 
611
  <!-- Footer -->
612
- <footer class="bg-gray-800 text-white py-8">
613
- <div class="container mx-auto px-6 text-center">
614
- <p>© 2024 Aditya Singh Gaur. All rights reserved.</p>
615
- <div class="flex justify-center space-x-6 mt-4">
616
- <a href="https://github.com/gaur3009-p" class="hover:text-blue-300 transition duration-300"><i class="fab fa-github"></i></a>
617
- <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="hover:text-blue-300 transition duration-300"><i class="fab fa-linkedin-in"></i></a>
618
- <a href="https://huggingface.co/gaur3009" class="hover:text-blue-300 transition duration-300"><i class="fas fa-robot"></i></a>
619
- </div
 
 
 
 
 
 
 
 
 
 
 
 
 
 
620
  </div>
621
  </footer>
622
 
@@ -626,7 +525,7 @@
626
  const menu = document.getElementById('mobile-menu');
627
  menu.classList.toggle('hidden');
628
  });
629
-
630
  // Smooth scrolling for navigation links
631
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
632
  anchor.addEventListener('click', function(e) {
@@ -636,67 +535,36 @@
636
  const targetElement = document.querySelector(targetId);
637
 
638
  if (targetElement) {
 
 
 
 
639
  window.scrollTo({
640
  top: targetElement.offsetTop - 80,
641
  behavior: 'smooth'
642
  });
643
-
644
- // Close mobile menu if open
645
- const mobileMenu = document.getElementById('mobile-menu');
646
- if (!mobileMenu.classList.contains('hidden')) {
647
- mobileMenu.classList.add('hidden');
648
- }
649
  }
650
  });
651
  });
652
-
653
  // Animation on scroll
654
  function checkScroll() {
655
  const elements = document.querySelectorAll('.animate-on-scroll');
656
 
657
  elements.forEach(element => {
658
- const elementPosition = element.getBoundingClientRect().top;
659
  const windowHeight = window.innerHeight;
660
 
661
- if (elementPosition < windowHeight - 100) {
662
  element.classList.add('visible');
663
  }
664
  });
665
  }
666
-
667
  // Initial check
668
  window.addEventListener('load', checkScroll);
669
  // Check on scroll
670
  window.addEventListener('scroll', checkScroll);
671
-
672
- // Animate skill bars on scroll
673
- function animateSkillBars() {
674
- const skillBars = document.querySelectorAll('.skill-progress');
675
-
676
- skillBars.forEach(bar => {
677
- const width = bar.style.width;
678
- bar.style.width = '0';
679
-
680
- setTimeout(() => {
681
- bar.style.width = width;
682
- }, 100);
683
- });
684
- }
685
-
686
- // Intersection Observer for skill bars
687
- const skillsSection = document.querySelector('#about');
688
- const observer = new IntersectionObserver((entries) => {
689
- entries.forEach(entry => {
690
- if (entry.isIntersecting) {
691
- animateSkillBars();
692
- observer.unobserve(entry.target);
693
- }
694
- });
695
- }, { threshold: 0.2 });
696
-
697
- if (skillsSection) {
698
- observer.observe(skillsSection);
699
- }
700
  </script>
701
  </body>
702
  </html>
 
177
 
178
  <h3 class="text-xl font-semibold mt-8 mb-4">Connect With Me</h3>
179
  <div class="flex space-x-4">
180
+ <a href="https://github.com/gaur3009-p" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
181
+ <i class="fab fa-github text-gray-700"></i>
182
+ </a>
183
+ <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
184
+ <i class="fab fa-linkedin-in text-gray-700"></i>
185
+ </a>
186
+ <a href="https://huggingface.co/gaur3009" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
187
+ <i class="fas fa-robot text-gray-700"></i>
188
+ </a>
189
+ </div>
 
190
  </div>
191
  </div>
192
 
 
216
  <div>
217
  <div class="flex justify-between mb-1">
218
  <span>TypeScript/JavaScript</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
219
  <span>75%</span>
220
  </div>
221
  <div class="skill-bar">
 
224
  </div>
225
  <div>
226
  <div class="flex justify-between mb-1">
227
+ <span>C++</span>
228
  <span>70%</span>
229
  </div>
230
  <div class="skill-bar">
 
234
  </div>
235
  </div>
236
  <div>
237
+ <h4 class="font-medium mb-2">AI/ML</h4>
238
  <div class="space-y-3">
239
  <div>
240
  <div class="flex justify-between mb-1">
241
+ <span>PyTorch</span>
242
  <span>85%</span>
243
  </div>
244
  <div class="skill-bar">
 
247
  </div>
248
  <div>
249
  <div class="flex justify-between mb-1">
250
+ <span>TensorFlow</span>
251
+ <span>75%</span>
252
  </div>
253
  <div class="skill-bar">
254
+ <div class="skill-progress" style="width: 75%"></div>
255
+ </div>
256
+ </div>
257
+ <div>
258
+ <div class="flex justify-between mb-1">
259
+ <span>OpenCV</span>
260
+ <span>80%</span>
261
+ </div>
262
+ <div class="skill-bar">
263
+ <div class="skill-progress" style="width: 80%"></div>
264
  </div>
265
  </div>
266
  </div>
 
269
  </div>
270
 
271
  <div>
272
+ <h3 class="text-2xl font-semibold mb-4">Languages</h3>
273
+ <div class="flex flex-wrap gap-4">
274
+ <div class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full">English (Fluent)</div>
275
+ <div class="px-4 py-2 bg-green-100 text-green-800 rounded-full">Hindi (Native)</div>
 
 
 
 
276
  </div>
277
  </div>
278
  </div>
 
286
  <h2 class="text-3xl font-bold text-center mb-12">Work <span class="gradient-text">Experience</span></h2>
287
 
288
  <div class="relative max-w-3xl mx-auto">
289
+ <!-- Timeline line -->
290
+ <div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-gradient-to-b from-blue-400 to-green-400 transform -translate-x-1/2"></div>
291
 
292
+ <!-- Timeline items -->
293
  <div class="space-y-8">
294
+ <!-- Item 1 -->
295
+ <div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
296
+ <div class="md:w-5/12"></div>
297
+ <div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
298
+ <div class="flex items-center mb-2">
299
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
300
+ <span class="text-sm text-gray-500">2023 - Present</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
301
  </div>
302
+ <h3 class="text-xl font-semibold mb-2">AI Engineer</h3>
303
+ <h4 class="text-lg text-blue-600 mb-3">FashNova AI</h4>
304
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
305
+ <li>Developed AI-driven fashion technology solutions using StyleGAN and YOLOv8</li>
306
+ <li>Implemented virtual try-on systems with 95% accuracy</li>
307
+ <li>Optimized models for real-time performance on edge devices</li>
308
+ </ul>
309
  </div>
 
 
310
  </div>
311
 
312
+ <!-- Item 2 -->
313
+ <div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
314
+ <div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
315
+ <div class="flex items-center mb-2">
316
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
317
+ <span class="text-sm text-gray-500">2022 - 2023</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  </div>
319
+ <h3 class="text-xl font-semibold mb-2">Machine Learning Engineer</h3>
320
+ <h4 class="text-lg text-blue-600 mb-3">JobMatch AI</h4>
321
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
322
+ <li>Built NLP models for resume parsing and job matching</li>
323
+ <li>Developed recommendation systems with 85% match accuracy</li>
324
+ <li>Reduced candidate screening time by 70%</li>
325
+ </ul>
326
  </div>
327
+ <div class="md:w-5/12"></div>
328
  </div>
329
 
330
+ <!-- Item 3 -->
331
+ <div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
332
+ <div class="md:w-5/12"></div>
333
+ <div class="md:w-5/12 bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
334
+ <div class="flex items-center mb-2">
335
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
336
+ <span class="text-sm text-gray-500">2021 - 2022</span>
 
337
  </div>
338
+ <h3 class="text-xl font-semibold mb-2">AI Research Intern</h3>
339
+ <h4 class="text-lg text-blue-600 mb-3">MetaVerse Labs</h4>
340
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
341
+ <li>Researched generative models for virtual avatar creation</li>
342
+ <li>Published paper on "Real-time Emotion Transfer for Virtual Characters"</li>
343
+ <li>Improved rendering performance by 40%</li>
344
+ </ul>
345
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  </div>
347
  </div>
348
  </div>
 
354
  <div class="container mx-auto px-6">
355
  <h2 class="text-3xl font-bold text-center mb-12">Featured <span class="gradient-text">Projects</span></h2>
356
 
357
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
358
  <!-- Project 1 -->
359
  <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
360
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-green-400 flex items-center justify-center">
361
+ <i class="fas fa-tshirt text-white text-6xl"></i>
362
  </div>
363
  <div class="p-6">
364
+ <h3 class="text-xl font-semibold mb-2">FashionGAN</h3>
365
+ <p class="text-gray-600 mb-4">Generative AI system for creating unique fashion designs using StyleGAN2 with custom modifications.</p>
366
+ <div class="flex flex-wrap gap-2 mb-4">
367
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">PyTorch</span>
368
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">StyleGAN2</span>
369
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Computer Vision</span>
 
 
 
 
 
 
 
370
  </div>
371
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Project →</a>
372
  </div>
373
  </div>
374
 
375
  <!-- Project 2 -->
376
  <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
377
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center">
378
+ <i class="fas fa-language text-white text-6xl"></i>
379
  </div>
380
  <div class="p-6">
381
+ <h3 class="text-xl font-semibold mb-2">Polyglot NLP</h3>
382
+ <p class="text-gray-600 mb-4">Multilingual transformer model for low-resource languages with novel transfer learning techniques.</p>
383
+ <div class="flex flex-wrap gap-2 mb-4">
384
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">HuggingFace</span>
385
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Transformers</span>
386
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">NLP</span>
 
 
 
 
 
 
387
  </div>
388
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Project →</a>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Project 3 -->
393
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
394
+ <div class="h-48 bg-gradient-to-r from-orange-400 to-red-400 flex items-center justify-center">
395
+ <i class="fas fa-vr-cardboard text-white text-6xl"></i>
396
+ </div>
397
+ <div class="p-6">
398
+ <h3 class="text-xl font-semibold mb-2">MetaVision</h3>
399
+ <p class="text-gray-600 mb-4">Real-time object detection and segmentation for augmented reality applications in virtual spaces.</p>
400
+ <div class="flex flex-wrap gap-2 mb-4">
401
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">YOLOv8</span>
402
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">OpenCV</span>
403
+ <span class="px-3 py-1 bg-red-100 text-red-800 text-sm rounded-full">AR</span>
404
+ </div>
405
+ <a href="#" class="text-blue-500 font-medium hover:text-blue-700">View Project →</a>
406
  </div>
407
  </div>
408
  </div>
409
+
410
+ <div class="text-center mt-12">
411
+ <a href="#" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition duration-300 inline-flex items-center">
412
+ <i class="fab fa-github mr-2"></i> View All Projects on GitHub
413
+ </a>
414
+ </div>
415
  </div>
416
  </section>
417
 
 
420
  <div class="container mx-auto px-6">
421
  <h2 class="text-3xl font-bold text-center mb-12">Get In <span class="gradient-text">Touch</span></h2>
422
 
423
+ <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
424
+ <div class="animate-on-scroll">
425
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
426
+ <div class="space-y-6">
427
+ <div class="flex items-start">
428
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4">
429
+ <i class="fas fa-envelope text-blue-500"></i>
 
 
 
 
 
 
 
 
 
 
 
430
  </div>
431
+ <div>
432
+ <h4 class="font-medium">Email</h4>
433
+ <p class="text-gray-600">[email protected]</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
434
  </div>
435
  </div>
436
+
437
+ <div class="flex items-start">
438
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
439
+ <i class="fas fa-map-marker-alt text-green-500"></i>
 
 
 
440
  </div>
441
  <div>
442
+ <h4 class="font-medium">Location</h4>
443
+ <p class="text-gray-600">Kanpur, India</p>
444
  </div>
445
+ </div>
446
+
447
+ <div class="flex items-start">
448
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
449
+ <i class="fas fa-globe text-purple-500"></i>
450
  </div>
451
  <div>
452
+ <h4 class="font-medium">Online Profiles</h4>
453
+ <div class="mt-2 space-y-2">
454
+ <p class="text-gray-600">
455
+ <i class="fab fa-github mr-2"></i>
456
+ <a href="https://www.github.com/gaur3009-p" class="hover:underline">https://www.github.com/gaur3009-p</a>
457
+ </p>
458
+ <p class="text-gray-600">
459
+ <i class="fab fa-linkedin mr-2"></i>
460
+ <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="hover:underline">https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/</a>
461
+ </p>
462
+ <p class="text-gray-600">
463
+ <i class="fas fa-robot mr-2"></i>
464
+ <a href="https://www.huggingface.co/gaur3009" class="hover:underline">https://www.huggingface.co/gaur3009</a>
465
+ </p>
466
+ </div>
467
  </div>
468
+ </div>
 
469
  </div>
470
  </div>
471
+
472
+ <div class="animate-on-scroll">
473
+ <h3 class="text-2xl font-semibold mb-6">Send Me a Message</h3>
474
+ <form class="space-y-4">
475
+ <div>
476
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
477
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
478
+ </div>
479
+ <div>
480
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
481
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
482
+ </div>
483
+ <div>
484
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
485
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
486
+ </div>
487
+ <button type="submit" class="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">
488
+ Send Message
489
+ </button>
490
+ </form>
491
+ </div>
492
  </div>
493
  </div>
494
  </section>
495
 
496
  <!-- Footer -->
497
+ <footer class="py-8 bg-gray-800 text-white">
498
+ <div class="container mx-auto px-6">
499
+ <div class="flex flex-col md:flex-row justify-between items-center">
500
+ <div class="mb-4 md:mb-0">
501
+ <a href="#" class="text-2xl font-bold gradient-text">Aditya Gaur</a>
502
+ <p class="text-gray-400 mt-2">AI Engineer & Deep Learning Specialist</p>
503
+ </div>
504
+ <div class="flex space-x-6">
505
+ <a href="https://github.com/gaur3009-p" class="text-gray-400 hover:text-white transition duration-300">
506
+ <i class="fab fa-github text-xl"></i>
507
+ </a>
508
+ <a href="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" class="text-gray-400 hover:text-white transition duration-300">
509
+ <i class="fab fa-linkedin-in text-xl"></i>
510
+ </a>
511
+ <a href="https://huggingface.co/gaur3009" class="text-gray-400 hover:text-white transition duration-300">
512
+ <i class="fas fa-robot text-xl"></i>
513
+ </a>
514
+ </div>
515
+ </div>
516
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
517
+ <p>&copy; 2023 Aditya Singh Gaur. All rights reserved.</p>
518
+ </div>
519
  </div>
520
  </footer>
521
 
 
525
  const menu = document.getElementById('mobile-menu');
526
  menu.classList.toggle('hidden');
527
  });
528
+
529
  // Smooth scrolling for navigation links
530
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
531
  anchor.addEventListener('click', function(e) {
 
535
  const targetElement = document.querySelector(targetId);
536
 
537
  if (targetElement) {
538
+ // Close mobile menu if open
539
+ document.getElementById('mobile-menu').classList.add('hidden');
540
+
541
+ // Scroll to target
542
  window.scrollTo({
543
  top: targetElement.offsetTop - 80,
544
  behavior: 'smooth'
545
  });
 
 
 
 
 
 
546
  }
547
  });
548
  });
549
+
550
  // Animation on scroll
551
  function checkScroll() {
552
  const elements = document.querySelectorAll('.animate-on-scroll');
553
 
554
  elements.forEach(element => {
555
+ const elementTop = element.getBoundingClientRect().top;
556
  const windowHeight = window.innerHeight;
557
 
558
+ if (elementTop < windowHeight - 100) {
559
  element.classList.add('visible');
560
  }
561
  });
562
  }
563
+
564
  // Initial check
565
  window.addEventListener('load', checkScroll);
566
  // Check on scroll
567
  window.addEventListener('scroll', checkScroll);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
568
  </script>
569
  </body>
570
  </html>