Hugging Face's logo

Spaces:
jaskaransingh
/
rupinder
Running

App Files Community
jaskaransingh commited on
Commit
70658ea
·
verified ·
1 Parent(s): 6dc51a5

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +232 -18
index.html CHANGED
@@ -13,6 +13,7 @@
13
  font-family: 'Poppins', sans-serif;
14
  background-color: #f8fafc;
15
  color: #1e293b;
 
16
  }
17
 
18
  .gradient-text {
@@ -35,10 +36,17 @@
35
  .project-card {
36
  transition: all 0.3s ease;
37
  transform-style: preserve-3d;
 
 
 
 
 
 
 
38
  }
39
 
40
  .project-card:hover {
41
- transform: translateY(-10px) scale(1.02);
42
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
43
  }
44
 
@@ -95,6 +103,22 @@
95
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
96
  border-radius: 2px;
97
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </style>
99
  </head>
100
  <body class="antialiased">
@@ -109,12 +133,26 @@
109
  <a href="#projects" class="nav-link font-medium">Projects</a>
110
  <a href="#contact" class="nav-link font-medium">Contact</a>
111
  </div>
112
- <button class="md:hidden text-xl">
113
  <i class="fas fa-bars"></i>
114
  </button>
115
  </div>
116
  </nav>
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  <!-- Hero Section -->
119
  <section id="home" class="min-h-screen flex items-center pt-20 pb-16 px-6 md:px-12">
120
  <div class="container mx-auto grid md:grid-cols-2 gap-12 items-center">
@@ -322,8 +360,8 @@
322
  alt="Chat App" class="w-full h-full object-cover">
323
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
324
  <div class="absolute bottom-4 left-4">
325
- <span class="bg-indigo-500 text-white text-xs px-2 py-1 rounded">React.js</span>
326
- <span class="bg-purple-500 text-white text-xs px-2 py-1 rounded ml-1">Firebase</span>
327
  </div>
328
  </div>
329
  <div class="p-6">
@@ -331,6 +369,20 @@
331
  <p class="text-slate-600 mb-4">
332
  Built a real-time chat application with user registration, login, online user management, and one-to-one messaging.
333
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
334
  <div class="flex justify-between items-center">
335
  <a href="https://free-api-chat.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
336
  View Project <i class="fas fa-external-link-alt ml-2"></i>
@@ -349,8 +401,8 @@
349
  alt="Rider App" class="w-full h-full object-cover">
350
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
351
  <div class="absolute bottom-4 left-4">
352
- <span class="bg-indigo-500 text-white text-xs px-2 py-1 rounded">React.js</span>
353
- <span class="bg-green-500 text-white text-xs px-2 py-1 rounded ml-1">Context API</span>
354
  </div>
355
  </div>
356
  <div class="p-6">
@@ -358,6 +410,20 @@
358
  <p class="text-slate-600 mb-4">
359
  Designed an app with React.js for ordering food and drinks, with a dynamic list showing selected items and quantities.
360
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
361
  <div class="flex justify-between items-center">
362
  <a href="https://rider-app-ebf3.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
363
  View Project <i class="fas fa-external-link-alt ml-2"></i>
@@ -376,8 +442,8 @@
376
  alt="Weather App" class="w-full h-full object-cover">
377
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
378
  <div class="absolute bottom-4 left-4">
379
- <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">JavaScript</span>
380
- <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded ml-1">API Integration</span>
381
  </div>
382
  </div>
383
  <div class="p-6">
@@ -385,6 +451,20 @@
385
  <p class="text-slate-600 mb-4">
386
  Developed a weather application using HTML, CSS, and JavaScript integrated with a third-party weather API.
387
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
388
  <div class="flex justify-between items-center">
389
  <a href="https://weather-app-e62t.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
390
  View Project <i class="fas fa-external-link-alt ml-2"></i>
@@ -395,12 +475,129 @@
395
  </div>
396
  </div>
397
  </div>
398
- </div>
399
-
400
- <div class="mt-12 text-center">
401
- <a href="#" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
402
- View All Projects <i class="fas fa-arrow-right ml-2"></i>
403
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
404
  </div>
405
  </div>
406
  </section>
@@ -498,6 +695,26 @@
498
  </footer>
499
 
500
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  // Smooth scrolling for navigation links
502
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
503
  anchor.addEventListener('click', function (e) {
@@ -517,15 +734,12 @@
517
  const observer = new IntersectionObserver((entries) => {
518
  entries.forEach(entry => {
519
  if (entry.isIntersecting) {
520
- entry.target.style.opacity = '1';
521
- entry.target.style.transform = 'translateY(0)';
522
  }
523
  });
524
  }, observerOptions);
525
 
526
  document.querySelectorAll('.project-card').forEach(card => {
527
- card.style.opacity = '0';
528
- card.style.transform = 'translateY(20px)';
529
  card.style.transition = 'all 0.6s ease';
530
  observer.observe(card);
531
  });
 
13
  font-family: 'Poppins', sans-serif;
14
  background-color: #f8fafc;
15
  color: #1e293b;
16
+ scroll-behavior: smooth;
17
  }
18
 
19
  .gradient-text {
 
36
  .project-card {
37
  transition: all 0.3s ease;
38
  transform-style: preserve-3d;
39
+ opacity: 0;
40
+ transform: translateY(20px);
41
+ }
42
+
43
+ .project-card.visible {
44
+ opacity: 1;
45
+ transform: translateY(0);
46
  }
47
 
48
  .project-card:hover {
49
+ transform: translateY(-10px) scale(1.02) !important;
50
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
51
  }
52
 
 
103
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
104
  border-radius: 2px;
105
  }
106
+
107
+ .project-tag {
108
+ font-size: 0.75rem;
109
+ padding: 0.25rem 0.5rem;
110
+ border-radius: 0.25rem;
111
+ font-weight: 600;
112
+ }
113
+
114
+ .mobile-menu {
115
+ transform: translateX(100%);
116
+ transition: transform 0.3s ease;
117
+ }
118
+
119
+ .mobile-menu.open {
120
+ transform: translateX(0);
121
+ }
122
  </style>
123
  </head>
124
  <body class="antialiased">
 
133
  <a href="#projects" class="nav-link font-medium">Projects</a>
134
  <a href="#contact" class="nav-link font-medium">Contact</a>
135
  </div>
136
+ <button id="menu-toggle" class="md:hidden text-xl">
137
  <i class="fas fa-bars"></i>
138
  </button>
139
  </div>
140
  </nav>
141
 
142
+ <!-- Mobile Menu -->
143
+ <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-white z-40 pt-20 px-6 md:hidden">
144
+ <div class="flex flex-col space-y-6">
145
+ <a href="#home" class="text-xl font-medium py-2 border-b border-gray-100">Home</a>
146
+ <a href="#about" class="text-xl font-medium py-2 border-b border-gray-100">About</a>
147
+ <a href="#skills" class="text-xl font-medium py-2 border-b border-gray-100">Skills</a>
148
+ <a href="#projects" class="text-xl font-medium py-2 border-b border-gray-100">Projects</a>
149
+ <a href="#contact" class="text-xl font-medium py-2 border-b border-gray-100">Contact</a>
150
+ </div>
151
+ <button id="menu-close" class="absolute top-6 right-6 text-2xl">
152
+ <i class="fas fa-times"></i>
153
+ </button>
154
+ </div>
155
+
156
  <!-- Hero Section -->
157
  <section id="home" class="min-h-screen flex items-center pt-20 pb-16 px-6 md:px-12">
158
  <div class="container mx-auto grid md:grid-cols-2 gap-12 items-center">
 
360
  alt="Chat App" class="w-full h-full object-cover">
361
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
362
  <div class="absolute bottom-4 left-4">
363
+ <span class="project-tag bg-indigo-500 text-white">React.js</span>
364
+ <span class="project-tag bg-purple-500 text-white ml-1">Firebase</span>
365
  </div>
366
  </div>
367
  <div class="p-6">
 
369
  <p class="text-slate-600 mb-4">
370
  Built a real-time chat application with user registration, login, online user management, and one-to-one messaging.
371
  </p>
372
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
373
+ <li class="flex items-start">
374
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
375
+ <span>User authentication system</span>
376
+ </li>
377
+ <li class="flex items-start">
378
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
379
+ <span>Real-time messaging</span>
380
+ </li>
381
+ <li class="flex items-start">
382
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
383
+ <span>Online status indicators</span>
384
+ </li>
385
+ </ul>
386
  <div class="flex justify-between items-center">
387
  <a href="https://free-api-chat.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
388
  View Project <i class="fas fa-external-link-alt ml-2"></i>
 
401
  alt="Rider App" class="w-full h-full object-cover">
402
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
403
  <div class="absolute bottom-4 left-4">
404
+ <span class="project-tag bg-indigo-500 text-white">React.js</span>
405
+ <span class="project-tag bg-green-500 text-white ml-1">Context API</span>
406
  </div>
407
  </div>
408
  <div class="p-6">
 
410
  <p class="text-slate-600 mb-4">
411
  Designed an app with React.js for ordering food and drinks, with a dynamic list showing selected items and quantities.
412
  </p>
413
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
414
+ <li class="flex items-start">
415
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
416
+ <span>Interactive menu system</span>
417
+ </li>
418
+ <li class="flex items-start">
419
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
420
+ <span>Dynamic cart functionality</span>
421
+ </li>
422
+ <li class="flex items-start">
423
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
424
+ <span>State management with Context API</span>
425
+ </li>
426
+ </ul>
427
  <div class="flex justify-between items-center">
428
  <a href="https://rider-app-ebf3.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
429
  View Project <i class="fas fa-external-link-alt ml-2"></i>
 
442
  alt="Weather App" class="w-full h-full object-cover">
443
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
444
  <div class="absolute bottom-4 left-4">
445
+ <span class="project-tag bg-blue-500 text-white">JavaScript</span>
446
+ <span class="project-tag bg-yellow-500 text-white ml-1">API Integration</span>
447
  </div>
448
  </div>
449
  <div class="p-6">
 
451
  <p class="text-slate-600 mb-4">
452
  Developed a weather application using HTML, CSS, and JavaScript integrated with a third-party weather API.
453
  </p>
454
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
455
+ <li class="flex items-start">
456
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
457
+ <span>Real-time weather data</span>
458
+ </li>
459
+ <li class="flex items-start">
460
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
461
+ <span>Location-based forecasts</span>
462
+ </li>
463
+ <li class="flex items-start">
464
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
465
+ <span>Responsive design</span>
466
+ </li>
467
+ </ul>
468
  <div class="flex justify-between items-center">
469
  <a href="https://weather-app-e62t.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
470
  View Project <i class="fas fa-external-link-alt ml-2"></i>
 
475
  </div>
476
  </div>
477
  </div>
478
+
479
+ <!-- Quiz App -->
480
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
481
+ <div class="relative h-48 overflow-hidden">
482
+ <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
483
+ alt="Quiz App" class="w-full h-full object-cover">
484
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
485
+ <div class="absolute bottom-4 left-4">
486
+ <span class="project-tag bg-blue-500 text-white">JavaScript</span>
487
+ <span class="project-tag bg-red-500 text-white ml-1">DOM Manipulation</span>
488
+ </div>
489
+ </div>
490
+ <div class="p-6">
491
+ <h3 class="text-xl font-bold mb-2">Quiz Application</h3>
492
+ <p class="text-slate-600 mb-4">
493
+ Created a multiple-choice quiz application using JavaScript with score tracking and instant feedback.
494
+ </p>
495
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
496
+ <li class="flex items-start">
497
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
498
+ <span>Multiple question types</span>
499
+ </li>
500
+ <li class="flex items-start">
501
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
502
+ <span>Score tracking</span>
503
+ </li>
504
+ <li class="flex items-start">
505
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
506
+ <span>Final result display</span>
507
+ </li>
508
+ </ul>
509
+ <div class="flex justify-between items-center">
510
+ <a href="https://quizz-app-rosy.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
511
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
512
+ </a>
513
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
514
+ <i class="fab fa-github"></i>
515
+ </a>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Random Color App -->
521
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
522
+ <div class="relative h-48 overflow-hidden">
523
+ <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
524
+ alt="Random Color App" class="w-full h-full object-cover">
525
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
526
+ <div class="absolute bottom-4 left-4">
527
+ <span class="project-tag bg-blue-500 text-white">JavaScript</span>
528
+ <span class="project-tag bg-pink-500 text-white ml-1">DOM Manipulation</span>
529
+ </div>
530
+ </div>
531
+ <div class="p-6">
532
+ <h3 class="text-xl font-bold mb-2">Random Color Generator</h3>
533
+ <p class="text-slate-600 mb-4">
534
+ Developed a dynamic web application to generate random background and text colors with real-time updates.
535
+ </p>
536
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
537
+ <li class="flex items-start">
538
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
539
+ <span>Random color generation</span>
540
+ </li>
541
+ <li class="flex items-start">
542
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
543
+ <span>Real-time DOM updates</span>
544
+ </li>
545
+ <li class="flex items-start">
546
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
547
+ <span>Clean, responsive interface</span>
548
+ </li>
549
+ </ul>
550
+ <div class="flex justify-between items-center">
551
+ <a href="https://random-color-sandy.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
552
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
553
+ </a>
554
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
555
+ <i class="fab fa-github"></i>
556
+ </a>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Image Slider -->
562
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
563
+ <div class="relative h-48 overflow-hidden">
564
+ <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
565
+ alt="Image Slider" class="w-full h-full object-cover">
566
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
567
+ <div class="absolute bottom-4 left-4">
568
+ <span class="project-tag bg-blue-500 text-white">JavaScript</span>
569
+ <span class="project-tag bg-orange-500 text-white ml-1">Responsive</span>
570
+ </div>
571
+ </div>
572
+ <div class="p-6">
573
+ <h3 class="text-xl font-bold mb-2">Image Slider</h3>
574
+ <p class="text-slate-600 mb-4">
575
+ Developed a responsive image slider with smooth transitions and navigation controls.
576
+ </p>
577
+ <ul class="text-sm text-slate-500 mb-4 space-y-1">
578
+ <li class="flex items-start">
579
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
580
+ <span>Smooth transitions</span>
581
+ </li>
582
+ <li class="flex items-start">
583
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
584
+ <span>Navigation controls</span>
585
+ </li>
586
+ <li class="flex items-start">
587
+ <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
588
+ <span>Fully responsive</span>
589
+ </li>
590
+ </ul>
591
+ <div class="flex justify-between items-center">
592
+ <a href="https://image-slider-eta.vercel.app" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
593
+ View Project <i class="fas fa-external-link-alt ml-2"></i>
594
+ </a>
595
+ <a href="#" class="text-slate-400 hover:text-indigo-600">
596
+ <i class="fab fa-github"></i>
597
+ </a>
598
+ </div>
599
+ </div>
600
+ </div>
601
  </div>
602
  </div>
603
  </section>
 
695
  </footer>
696
 
697
  <script>
698
+ // Mobile menu toggle
699
+ const menuToggle = document.getElementById('menu-toggle');
700
+ const menuClose = document.getElementById('menu-close');
701
+ const mobileMenu = document.getElementById('mobile-menu');
702
+
703
+ menuToggle.addEventListener('click', () => {
704
+ mobileMenu.classList.add('open');
705
+ });
706
+
707
+ menuClose.addEventListener('click', () => {
708
+ mobileMenu.classList.remove('open');
709
+ });
710
+
711
+ // Close menu when clicking on a link
712
+ document.querySelectorAll('#mobile-menu a').forEach(link => {
713
+ link.addEventListener('click', () => {
714
+ mobileMenu.classList.remove('open');
715
+ });
716
+ });
717
+
718
  // Smooth scrolling for navigation links
719
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
720
  anchor.addEventListener('click', function (e) {
 
734
  const observer = new IntersectionObserver((entries) => {
735
  entries.forEach(entry => {
736
  if (entry.isIntersecting) {
737
+ entry.target.classList.add('visible');
 
738
  }
739
  });
740
  }, observerOptions);
741
 
742
  document.querySelectorAll('.project-card').forEach(card => {
 
 
743
  card.style.transition = 'all 0.6s ease';
744
  observer.observe(card);
745
  });