Hugging Face's logo

Spaces:
Somesh000001
/
anycoder-6dcec983
Running

App Files Community
Somesh000001 commited on
Commit
42c6554
·
verified ·
1 Parent(s): d16d684

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1126 -1025
index.html CHANGED
@@ -1,1039 +1,1140 @@
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>BMW M Series - The Ultimate Driving Machine</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <style>
9
- :root {
10
- --primary-blue: #0066b1;
11
- --m-blue: #1c69d4;
12
- --dark-blue: #00447c;
13
- --light-blue: #e8f4fd;
14
- --black: #000000;
15
- --white: #ffffff;
16
- --gray: #f5f5f5;
17
- --dark-gray: #333333;
18
- --accent-red: #d4001a;
19
- --gradient: linear-gradient(135deg, #0066b1 0%, #1c69d4 100%);
20
- --shadow: 0 10px 30px rgba(0,0,0,0.1);
21
- --shadow-hover: 0 20px 40px rgba(0,0,0,0.2);
22
- }
23
-
24
- * {
25
- margin: 0;
26
- padding: 0;
27
- box-sizing: border-box;
28
- }
29
-
30
- body {
31
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
32
- line-height: 1.6;
33
- color: var(--dark-gray);
34
- overflow-x: hidden;
35
- }
36
-
37
- /* Scrollbar Styling */
38
- ::-webkit-scrollbar {
39
- width: 10px;
40
- }
41
-
42
- ::-webkit-scrollbar-track {
43
- background: var(--gray);
44
- }
45
-
46
- ::-webkit-scrollbar-thumb {
47
- background: var(--m-blue);
48
- border-radius: 5px;
49
- }
50
-
51
- ::-webkit-scrollbar-thumb:hover {
52
- background: var(--dark-blue);
53
- }
54
-
55
- /* Header Navigation */
56
- header {
57
- position: fixed;
58
- top: 0;
59
- width: 100%;
60
- background: rgba(255, 255, 255, 0.95);
61
- backdrop-filter: blur(10px);
62
- z-index: 1000;
63
- box-shadow: 0 2px 20px rgba(0,0,0,0.1);
64
- transition: all 0.3s ease;
65
- }
66
-
67
- nav {
68
- display: flex;
69
- justify-content: space-between;
70
- align-items: center;
71
- padding: 1rem 5%;
72
- max-width: 1400px;
73
- margin: 0 auto;
74
- }
75
-
76
- .logo {
77
- display: flex;
78
- align-items: center;
79
- font-size: 1.5rem;
80
- font-weight: bold;
81
- color: var(--primary-blue);
82
- text-decoration: none;
83
- }
84
-
85
- .logo i {
86
- margin-right: 10px;
87
- font-size: 2rem;
88
- }
89
-
90
- .nav-links {
91
- display: flex;
92
- list-style: none;
93
- gap: 2rem;
94
- }
95
-
96
- .nav-links a {
97
- color: var(--dark-gray);
98
- text-decoration: none;
99
- font-weight: 500;
100
- transition: color 0.3s ease;
101
- position: relative;
102
- }
103
-
104
- .nav-links a::after {
105
- content: '';
106
- position: absolute;
107
- bottom: -5px;
108
- left: 0;
109
- width: 0;
110
- height: 2px;
111
- background: var(--m-blue);
112
- transition: width 0.3s ease;
113
- }
114
-
115
- .nav-links a:hover::after {
116
- width: 100%;
117
- }
118
-
119
- .menu-toggle {
120
- display: none;
121
- font-size: 1.5rem;
122
- cursor: pointer;
123
- color: var(--primary-blue);
124
- }
125
-
126
- /* Hero Section */
127
- .hero {
128
- margin-top: 80px;
129
- height: 100vh;
130
- background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://picsum.photos/seed/bmwhero/1920/1080.jpg');
131
- background-size: cover;
132
- background-position: center;
133
- display: flex;
134
- align-items: center;
135
- justify-content: center;
136
- position: relative;
137
- overflow: hidden;
138
- }
139
-
140
- .hero-content {
141
- text-align: center;
142
- color: var(--white);
143
- z-index: 2;
144
- animation: fadeInUp 1s ease;
145
- }
146
-
147
- .hero h1 {
148
- font-size: clamp(2.5rem, 8vw, 5rem);
149
- margin-bottom: 1rem;
150
- text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
151
- letter-spacing: 2px;
152
- }
153
-
154
- .hero .subtitle {
155
- font-size: clamp(1rem, 3vw, 1.5rem);
156
- margin-bottom: 2rem;
157
- font-weight: 300;
158
- letter-spacing: 1px;
159
- }
160
-
161
- .cta-button {
162
- display: inline-block;
163
- padding: 15px 40px;
164
- background: var(--gradient);
165
- color: var(--white);
166
- text-decoration: none;
167
- border-radius: 50px;
168
- font-weight: bold;
169
- transition: all 0.3s ease;
170
- box-shadow: 0 4px 15px rgba(0,0,0,0.2);
171
- margin: 10px;
172
- }
173
-
174
- .cta-button:hover {
175
- transform: translateY(-3px);
176
- box-shadow: 0 6px 20px rgba(0,0,0,0.3);
177
- }
178
-
179
- .cta-button.outline {
180
- background: transparent;
181
- border: 2px solid var(--white);
182
- }
183
-
184
- .cta-button.outline:hover {
185
- background: var(--white);
186
- color: var(--primary-blue);
187
- }
188
-
189
- /* Filter Section */
190
- .filter-section {
191
- padding: 3rem 5%;
192
- background: var(--gray);
193
- }
194
-
195
- .filter-container {
196
- max-width: 1400px;
197
- margin: 0 auto;
198
- }
199
-
200
- .filter-title {
201
- text-align: center;
202
- font-size: 2rem;
203
- margin-bottom: 2rem;
204
- color: var(--dark-blue);
205
- }
206
-
207
- .filter-buttons {
208
- display: flex;
209
- justify-content: center;
210
- flex-wrap: wrap;
211
- gap: 1rem;
212
- }
213
-
214
- .filter-btn {
215
- padding: 10px 25px;
216
- background: var(--white);
217
- border: 2px solid var(--m-blue);
218
- color: var(--m-blue);
219
- border-radius: 25px;
220
- cursor: pointer;
221
- transition: all 0.3s ease;
222
- font-weight: 600;
223
- }
224
-
225
- .filter-btn:hover,
226
- .filter-btn.active {
227
- background: var(--m-blue);
228
- color: var(--white);
229
- transform: scale(1.05);
230
- }
231
-
232
- /* Car Grid */
233
- .car-showcase {
234
- padding: 4rem 5%;
235
- max-width: 1400px;
236
- margin: 0 auto;
237
- }
238
-
239
- .car-grid {
240
- display: grid;
241
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
242
- gap: 2rem;
243
- animation: fadeIn 1s ease;
244
- }
245
-
246
- .car-card {
247
- background: var(--white);
248
- border-radius: 15px;
249
- overflow: hidden;
250
- box-shadow: var(--shadow);
251
- transition: all 0.3s ease;
252
- cursor: pointer;
253
- position: relative;
254
- }
255
-
256
- .car-card:hover {
257
- transform: translateY(-10px);
258
- box-shadow: var(--shadow-hover);
259
- }
260
-
261
- .car-badge {
262
- position: absolute;
263
- top: 20px;
264
- right: 20px;
265
- background: var(--accent-red);
266
- color: var(--white);
267
- padding: 5px 15px;
268
- border-radius: 20px;
269
- font-size: 0.9rem;
270
- font-weight: bold;
271
- z-index: 1;
272
- }
273
-
274
- .car-image {
275
- width: 100%;
276
- height: 250px;
277
- object-fit: cover;
278
- transition: transform 0.3s ease;
279
- }
280
-
281
- .car-card:hover .car-image {
282
- transform: scale(1.1);
283
- }
284
-
285
- .car-details {
286
- padding: 1.5rem;
287
- }
288
-
289
- .car-name {
290
- font-size: 1.5rem;
291
- font-weight: bold;
292
- color: var(--dark-blue);
293
- margin-bottom: 0.5rem;
294
- }
295
-
296
- .car-series {
297
- color: var(--m-blue);
298
- font-size: 0.9rem;
299
- margin-bottom: 1rem;
300
- }
301
-
302
- .car-specs {
303
- display: grid;
304
- grid-template-columns: repeat(2, 1fr);
305
- gap: 1rem;
306
- margin: 1rem 0;
307
- }
308
-
309
- .spec-item {
310
- display: flex;
311
- align-items: center;
312
- gap: 0.5rem;
313
- }
314
-
315
- .spec-item i {
316
- color: var(--m-blue);
317
- font-size: 1.2rem;
318
- }
319
-
320
- .spec-label {
321
- font-size: 0.85rem;
322
- color: #666;
323
- }
324
-
325
- .spec-value {
326
- font-weight: bold;
327
- color: var(--dark-gray);
328
- }
329
-
330
- .car-price {
331
- font-size: 1.3rem;
332
- font-weight: bold;
333
- color: var(--primary-blue);
334
- margin-top: 1rem;
335
- }
336
-
337
- .view-details {
338
- display: inline-block;
339
- margin-top: 1rem;
340
- padding: 8px 20px;
341
- background: var(--gradient);
342
- color: var(--white);
343
- text-decoration: none;
344
- border-radius: 20px;
345
- transition: all 0.3s ease;
346
- }
347
-
348
- .view-details:hover {
349
- transform: translateX(5px);
350
- }
351
-
352
- /* Modal */
353
- .modal {
354
- display: none;
355
- position: fixed;
356
- top: 0;
357
- left: 0;
358
- width: 100%;
359
- height: 100%;
360
- background: rgba(0,0,0,0.9);
361
- z-index: 2000;
362
- overflow-y: auto;
363
- }
364
-
365
- .modal-content {
366
- background: var(--white);
367
- max-width: 900px;
368
- margin: 5% auto;
369
- border-radius: 20px;
370
- overflow: hidden;
371
- position: relative;
372
- animation: slideIn 0.3s ease;
373
- }
374
-
375
- .close-modal {
376
- position: absolute;
377
- top: 20px;
378
- right: 20px;
379
- font-size: 2rem;
380
- cursor: pointer;
381
- color: var(--white);
382
- background: rgba(0,0,0,0.5);
383
- width: 40px;
384
- height: 40px;
385
- border-radius: 50%;
386
- display: flex;
387
- align-items: center;
388
- justify-content: center;
389
- z-index: 1;
390
- transition: all 0.3s ease;
391
- }
392
-
393
- .close-modal:hover {
394
- background: var(--accent-red);
395
- transform: rotate(90deg);
396
- }
397
-
398
- .modal-header {
399
- position: relative;
400
- height: 400px;
401
- overflow: hidden;
402
- }
403
-
404
- .modal-image {
405
- width: 100%;
406
- height: 100%;
407
- object-fit: cover;
408
- }
409
-
410
- .modal-body {
411
- padding: 2rem;
412
- }
413
-
414
- .modal-title {
415
- font-size: 2rem;
416
- color: var(--dark-blue);
417
- margin-bottom: 1rem;
418
- }
419
-
420
- .modal-specs {
421
- display: grid;
422
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
423
- gap: 1.5rem;
424
- margin: 2rem 0;
425
- }
426
-
427
- .modal-spec-item {
428
- text-align: center;
429
- padding: 1rem;
430
- background: var(--gray);
431
- border-radius: 10px;
432
- }
433
-
434
- .modal-spec-item i {
435
- font-size: 2rem;
436
- color: var(--m-blue);
437
- margin-bottom: 0.5rem;
438
- }
439
-
440
- .modal-spec-value {
441
- font-size: 1.5rem;
442
- font-weight: bold;
443
- color: var(--dark-gray);
444
- }
445
-
446
- .modal-spec-label {
447
- font-size: 0.9rem;
448
- color: #666;
449
- }
450
-
451
- /* Features Section */
452
- .features {
453
- padding: 4rem 5%;
454
- background: var(--gradient);
455
- color: var(--white);
456
- }
457
-
458
- .features-container {
459
- max-width: 1400px;
460
- margin: 0 auto;
461
- }
462
-
463
- .features-title {
464
- text-align: center;
465
- font-size: 2.5rem;
466
- margin-bottom: 3rem;
467
- }
468
-
469
- .features-grid {
470
- display: grid;
471
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
472
- gap: 2rem;
473
- }
474
-
475
- .feature-card {
476
- text-align: center;
477
- padding: 2rem;
478
- background: rgba(255,255,255,0.1);
479
- border-radius: 15px;
480
- backdrop-filter: blur(10px);
481
- transition: all 0.3s ease;
482
- }
483
-
484
- .feature-card:hover {
485
- background: rgba(255,255,255,0.2);
486
- transform: translateY(-5px);
487
- }
488
-
489
- .feature-icon {
490
- font-size: 3rem;
491
- margin-bottom: 1rem;
492
- }
493
-
494
- .feature-title {
495
- font-size: 1.3rem;
496
- margin-bottom: 0.5rem;
497
- }
498
-
499
- .feature-description {
500
- font-size: 0.95rem;
501
- opacity: 0.9;
502
- }
503
 
504
- /* Footer */
505
- footer {
506
- background: var(--black);
507
- color: var(--white);
508
- padding: 3rem 5%;
509
- text-align: center;
510
- }
511
-
512
- .footer-content {
513
- max-width: 1400px;
514
- margin: 0 auto;
515
- }
516
-
517
- .social-links {
518
- display: flex;
519
- justify-content: center;
520
- gap: 2rem;
521
- margin: 2rem 0;
522
- }
523
-
524
- .social-links a {
525
- color: var(--white);
526
- font-size: 1.5rem;
527
- transition: all 0.3s ease;
528
- }
529
-
530
- .social-links a:hover {
531
- color: var(--m-blue);
532
- transform: translateY(-3px);
533
- }
534
-
535
- .made-by {
536
- margin-top: 2rem;
537
- padding-top: 2rem;
538
- border-top: 1px solid #333;
539
- font-size: 0.9rem;
540
- opacity: 0.8;
541
- }
542
-
543
- .made-by a {
544
- color: var(--m-blue);
545
- text-decoration: none;
546
- font-weight: bold;
547
- }
548
-
549
- /* Animations */
550
- @keyframes fadeInUp {
551
- from {
552
- opacity: 0;
553
- transform: translateY(30px);
554
- }
555
- to {
556
- opacity: 1;
557
- transform: translateY(0);
558
- }
559
- }
560
-
561
- @keyframes fadeIn {
562
- from {
563
- opacity: 0;
564
- }
565
- to {
566
- opacity: 1;
567
- }
568
- }
569
-
570
- @keyframes slideIn {
571
- from {
572
- transform: translateY(-100px);
573
- opacity: 0;
574
- }
575
- to {
576
- transform: translateY(0);
577
- opacity: 1;
578
- }
579
- }
580
-
581
- /* Responsive Design */
582
- @media (max-width: 768px) {
583
- .nav-links {
584
- display: none;
585
- position: absolute;
586
- top: 100%;
587
- left: 0;
588
- width: 100%;
589
- background: var(--white);
590
- flex-direction: column;
591
- padding: 2rem;
592
- box-shadow: var(--shadow);
593
- }
594
-
595
- .nav-links.active {
596
- display: flex;
597
- }
598
-
599
- .menu-toggle {
600
- display: block;
601
- }
602
-
603
- .hero h1 {
604
- font-size: 2.5rem;
605
- }
606
-
607
- .car-grid {
608
- grid-template-columns: 1fr;
609
- }
610
-
611
- .modal-content {
612
- margin: 0;
613
- border-radius: 0;
614
- min-height: 100vh;
615
- }
616
-
617
- .features-grid {
618
- grid-template-columns: 1fr;
619
- }
620
- }
621
-
622
- @media (max-width: 480px) {
623
- .filter-buttons {
624
- flex-direction: column;
625
- align-items: stretch;
626
- }
627
-
628
- .filter-btn {
629
- width: 100%;
630
- }
631
-
632
- .car-specs {
633
- grid-template-columns: 1fr;
634
- }
635
- }
636
-
637
- /* Loading Animation */
638
- .loading {
639
- display: inline-block;
640
- width: 20px;
641
- height: 20px;
642
- border: 3px solid rgba(255,255,255,0.3);
643
- border-radius: 50%;
644
- border-top-color: var(--white);
645
- animation: spin 1s ease-in-out infinite;
646
- }
647
-
648
- @keyframes spin {
649
- to { transform: rotate(360deg); }
650
- }
651
-
652
- /* Parallax Effect */
653
- .parallax {
654
- background-attachment: fixed;
655
- background-position: center;
656
- background-repeat: no-repeat;
657
- background-size: cover;
658
- }
659
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
660
  </head>
 
661
  <body>
662
- <!-- Header Navigation -->
663
- <header id="header">
664
- <nav>
665
- <a href="#" class="logo">
666
- <i class="fas fa-car"></i>
667
- BMW M Series
668
- </a>
669
- <ul class="nav-links" id="navLinks">
670
- <li><a href="#home">Home</a></li>
671
- <li><a href="#models">Models</a></li>
672
- <li><a href="#features">Features</a></li>
673
- <li><a href="#contact">Contact</a></li>
674
- </ul>
675
- <div class="menu-toggle" id="menuToggle">
676
- <i class="fas fa-bars"></i>
677
- </div>
678
- </nav>
679
- </header>
680
-
681
- <!-- Hero Section -->
682
- <section class="hero parallax" id="home">
683
- <div class="hero-content">
684
- <h1>BMW M SERIES</h1>
685
- <p class="subtitle">The Ultimate Driving Machine</p>
686
- <a href="#models" class="cta-button">Explore Models</a>
687
- <a href="#features" class="cta-button outline">Learn More</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
688
  </div>
689
- </section>
690
-
691
- <!-- Filter Section -->
692
- <section class="filter-section" id="filters">
693
- <div class="filter-container">
694
- <h2 class="filter-title">Choose Your M Series</h2>
695
- <div class="filter-buttons">
696
- <button class="filter-btn active" data-filter="all">All Models</button>
697
- <button class="filter-btn" data-filter="sedan">Sedan</button>
698
- <button class="filter-btn" data-filter="suv">SUV</button>
699
- <button class="filter-btn" data-filter="coupe">Coupe</button>
700
- <button class="filter-btn" data-filter="convertible">Convertible</button>
701
- </div>
702
  </div>
703
- </section>
704
-
705
- <!-- Car Showcase -->
706
- <section class="car-showcase" id="models">
707
- <div class="car-grid" id="carGrid">
708
- <!-- Cars will be dynamically inserted here -->
 
 
709
  </div>
710
- </section>
711
-
712
- <!-- Features Section -->
713
- <section class="features" id="features">
714
- <div class="features-container">
715
- <h2 class="features-title">Why Choose BMW M Series?</h2>
716
- <div class="features-grid">
717
- <div class="feature-card">
718
- <div class="feature-icon">
719
- <i class="fas fa-tachometer-alt"></i>
720
- </div>
721
- <h3 class="feature-title">Unmatched Performance</h3>
722
- <p class="feature-description">Experience the thrill of race-bred engineering with powerful engines and precision handling.</p>
723
- </div>
724
- <div class="feature-card">
725
- <div class="feature-icon">
726
- <i class="fas fa-cogs"></i>
727
- </div>
728
- <h3 class="feature-title">Advanced Technology</h3>
729
- <p class="feature-description">Cutting-edge innovations including M xDrive, adaptive suspension, and intelligent driver assistance.</p>
730
- </div>
731
- <div class="feature-card">
732
- <div class="feature-icon">
733
- <i class="fas fa-palette"></i>
734
- </div>
735
- <h3 class="feature-title">Exclusive Design</h3>
736
- <p class="feature-description">Aerodynamic styling with distinctive M design elements and premium materials throughout.</p>
737
- </div>
738
- <div class="feature-card">
739
- <div class="feature-icon">
740
- <i class="fas fa-trophy"></i>
741
- </div>
742
- <h3 class="feature-title">Racing Heritage</h3>
743
- <p class="feature-description">Born from motorsport, every M vehicle carries decades of racing DNA and championship pedigree.</p>
744
- </div>
745
- </div>
746
  </div>
747
- </section>
748
-
749
- <!-- Modal -->
750
- <div class="modal" id="carModal">
751
- <div class="modal-content">
752
- <span class="close-modal" id="closeModal">&times;</span>
753
- <div class="modal-header">
754
- <img class="modal-image" id="modalImage" src="" alt="">
755
- </div>
756
- <div class="modal-body">
757
- <h2 class="modal-title" id="modalTitle"></h2>
758
- <p class="car-series" id="modalSeries"></p>
759
- <div class="car-price" id="modalPrice"></div>
760
- <div class="modal-specs" id="modalSpecs"></div>
761
- <div class="cta-button" style="width: 100%; text-align: center; margin-top: 2rem;">
762
- <i class="fas fa-phone"></i> Schedule Test Drive
763
- </div>
764
- </div>
 
 
 
 
 
 
765
  </div>
 
766
  </div>
767
-
768
- <!-- Footer -->
769
- <footer id="contact">
770
- <div class="footer-content">
771
- <h3>Connect With BMW M Series</h3>
772
- <p>Experience the pinnacle of automotive engineering</p>
773
- <div class="social-links">
774
- <a href="#"><i class="fab fa-facebook"></i></a>
775
- <a href="#"><i class="fab fa-twitter"></i></a>
776
- <a href="#"><i class="fab fa-instagram"></i></a>
777
- <a href="#"><i class="fab fa-youtube"></i></a>
778
- <a href="#"><i class="fab fa-linkedin"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
779
  </div>
780
- <div class="made-by">
781
- Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
 
 
782
  </div>
 
783
  </div>
784
- </footer>
785
-
786
- <script>
787
- // BMW M Series Data
788
- const bmwMCars = [
789
- {
790
- id: 1,
791
- name: "M3 Sedan",
792
- series: "G80 Generation",
793
- category: "sedan",
794
- price: "$73,900",
795
- image: "https://picsum.photos/seed/m3sedan/400/300.jpg",
796
- specs: {
797
- power: "473 HP",
798
- engine: "3.0L TwinPower Turbo",
799
- acceleration: "0-60 in 4.1s",
800
- topSpeed: "180 mph"
801
- },
802
- detailedSpecs: [
803
- { icon: "fa-horse-power", label: "Power", value: "473 HP" },
804
- { icon: "fa-gas-pump", label: "Engine", value: "3.0L TwinPower Turbo" },
805
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "4.1 seconds" },
806
- { icon: "fa-road", label: "Top Speed", value: "180 mph" },
807
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
808
- { icon: "fa-weight", label: "Drivetrain", value: "RWD / M xDrive" }
809
- ]
810
- },
811
- {
812
- id: 2,
813
- name: "M4 Competition",
814
- series: "G82 Generation",
815
- category: "coupe",
816
- price: "$75,700",
817
- image: "https://picsum.photos/seed/m4coupe/400/300.jpg",
818
- specs: {
819
- power: "503 HP",
820
- engine: "3.0L TwinPower Turbo",
821
- acceleration: "0-60 in 3.8s",
822
- topSpeed: "180 mph"
823
- },
824
- detailedSpecs: [
825
- { icon: "fa-horse-power", label: "Power", value: "503 HP" },
826
- { icon: "fa-gas-pump", label: "Engine", value: "3.0L TwinPower Turbo" },
827
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.8 seconds" },
828
- { icon: "fa-road", label: "Top Speed", value: "180 mph" },
829
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
830
- { icon: "fa-weight", label: "Drivetrain", value: "RWD / M xDrive" }
831
- ]
832
- },
833
- {
834
- id: 3,
835
- name: "M5 Competition",
836
- series: "F90 Generation",
837
- category: "sedan",
838
- price: "$104,500",
839
- image: "https://picsum.photos/seed/m5sedan/400/300.jpg",
840
- specs: {
841
- power: "617 HP",
842
- engine: "4.4L TwinPower Turbo V8",
843
- acceleration: "0-60 in 3.1s",
844
- topSpeed: "190 mph"
845
- },
846
- detailedSpecs: [
847
- { icon: "fa-horse-power", label: "Power", value: "617 HP" },
848
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8" },
849
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.1 seconds" },
850
- { icon: "fa-road", label: "Top Speed", value: "190 mph" },
851
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
852
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
853
- ]
854
- },
855
- {
856
- id: 4,
857
- name: "M8 Competition",
858
- series: "F92 Generation",
859
- category: "coupe",
860
- price: "$131,995",
861
- image: "https://picsum.photos/seed/m8coupe/400/300.jpg",
862
- specs: {
863
- power: "617 HP",
864
- engine: "4.4L TwinPower Turbo V8",
865
- acceleration: "0-60 in 3.0s",
866
- topSpeed: "190 mph"
867
- },
868
- detailedSpecs: [
869
- { icon: "fa-horse-power", label: "Power", value: "617 HP" },
870
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8" },
871
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.0 seconds" },
872
- { icon: "fa-road", label: "Top Speed", value: "190 mph" },
873
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
874
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
875
- ]
876
- },
877
- {
878
- id: 5,
879
- name: "X5 M Competition",
880
- series: "F95 Generation",
881
- category: "suv",
882
- price: "$106,495",
883
- image: "https://picsum.photos/seed/x5m/400/300.jpg",
884
- specs: {
885
- power: "617 HP",
886
- engine: "4.4L TwinPower Turbo V8",
887
- acceleration: "0-60 in 3.8s",
888
- topSpeed: "177 mph"
889
- },
890
- detailedSpecs: [
891
- { icon: "fa-horse-power", label: "Power", value: "617 HP" },
892
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8" },
893
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.8 seconds" },
894
- { icon: "fa-road", label: "Top Speed", value: "177 mph" },
895
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
896
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
897
- ]
898
- },
899
- {
900
- id: 6,
901
- name: "X6 M Competition",
902
- series: "F96 Generation",
903
- category: "suv",
904
- price: "$109,495",
905
- image: "https://picsum.photos/seed/x6m/400/300.jpg",
906
- specs: {
907
- power: "617 HP",
908
- engine: "4.4L TwinPower Turbo V8",
909
- acceleration: "0-60 in 3.8s",
910
- topSpeed: "177 mph"
911
- },
912
- detailedSpecs: [
913
- { icon: "fa-horse-power", label: "Power", value: "617 HP" },
914
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8" },
915
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.8 seconds" },
916
- { icon: "fa-road", label: "Top Speed", value: "177 mph" },
917
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
918
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
919
- ]
920
- },
921
- {
922
- id: 7,
923
- name: "M440i Convertible",
924
- series: "G23 Generation",
925
- category: "convertible",
926
- price: "$61,295",
927
- image: "https://picsum.photos/seed/m440conv/400/300.jpg",
928
- specs: {
929
- power: "382 HP",
930
- engine: "3.0L TwinPower Turbo",
931
- acceleration: "0-60 in 5.0s",
932
- topSpeed: "155 mph"
933
- },
934
- detailedSpecs: [
935
- { icon: "fa-horse-power", label: "Power", value: "382 HP" },
936
- { icon: "fa-gas-pump", label: "Engine", value: "3.0L TwinPower Turbo" },
937
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "5.0 seconds" },
938
- { icon: "fa-road", label: "Top Speed", value: "155 mph" },
939
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed Steptronic" },
940
- { icon: "fa-weight", label: "Drivetrain", value: "RWD / xDrive" }
941
- ]
942
- },
943
- {
944
- id: 8,
945
- name: "M8 Competition Convertible",
946
- series: "F93 Generation",
947
- category: "convertible",
948
- price: "$142,495",
949
- image: "https://picsum.photos/seed/m8conv/400/300.jpg",
950
- specs: {
951
- power: "617 HP",
952
- engine: "4.4L TwinPower Turbo V8",
953
- acceleration: "0-60 in 3.3s",
954
- topSpeed: "190 mph"
955
- },
956
- detailedSpecs: [
957
- { icon: "fa-horse-power", label: "Power", value: "617 HP" },
958
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8" },
959
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "3.3 seconds" },
960
- { icon: "fa-road", label: "Top Speed", value: "190 mph" },
961
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
962
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
963
- ]
964
- },
965
- {
966
- id: 9,
967
- name: "XM",
968
- series: "G09 Generation",
969
- category: "suv",
970
- price: "$159,000",
971
- image: "https://picsum.photos/seed/xm/400/300.jpg",
972
- specs: {
973
- power: "738 HP",
974
- engine: "4.4L TwinPower Turbo V8 Hybrid",
975
- acceleration: "0-60 in 4.1s",
976
- topSpeed: "168 mph"
977
- },
978
- detailedSpecs: [
979
- { icon: "fa-horse-power", label: "Power", value: "738 HP" },
980
- { icon: "fa-gas-pump", label: "Engine", value: "4.4L TwinPower Turbo V8 Hybrid" },
981
- { icon: "fa-tachometer-alt", label: "0-60 mph", value: "4.1 seconds" },
982
- { icon: "fa-road", label: "Top Speed", value: "168 mph" },
983
- { icon: "fa-cogs", label: "Transmission", value: "8-Speed M Steptronic" },
984
- { icon: "fa-weight", label: "Drivetrain", value: "M xDrive AWD" }
985
- ]
986
- }
987
- ];
988
-
989
- // DOM Elements
990
- const carGrid = document.getElementById('carGrid');
991
- const filterButtons = document.querySelectorAll('.filter-btn');
992
- const modal = document.getElementById('carModal');
993
- const closeModal = document.getElementById('closeModal');
994
- const menuToggle = document.getElementById('menuToggle');
995
- const navLinks = document.getElementById('navLinks');
996
-
997
- // Initialize
998
- let currentFilter = 'all';
999
-
1000
- // Render Cars
1001
- function renderCars(filter = 'all') {
1002
- const filteredCars = filter === 'all'
1003
- ? bmwMCars
1004
- : bmwMCars.filter(car => car.category === filter);
1005
-
1006
- carGrid.innerHTML = filteredCars.map(car => `
1007
- <div class="car-card" data-id="${car.id}">
1008
- ${car.price.includes('$159') ? '<span class="car-badge">NEW</span>' : ''}
1009
- <img src="${car.image}" alt="${car.name}" class="car-image">
1010
- <div class="car-details">
1011
- <h3 class="car-name">${car.name}</h3>
1012
- <p class="car-series">${car.series}</p>
1013
- <div class="car-specs">
1014
- <div class="spec-item">
1015
- <i class="fas fa-horse-power"></i>
1016
- <div>
1017
- <div class="spec-label">Power</div>
1018
- <div class="spec-value">${car.specs.power}</div>
1019
- </div>
1020
- </div>
1021
- <div class="spec-item">
1022
- <i class="fas fa-gas-pump"></i>
1023
- <div>
1024
- <div class="spec-label">Engine</div>
1025
- <div class="spec-value">${car.specs.engine}</div>
1026
- </div>
1027
- </div>
1028
- <div class="spec-item">
1029
- <i class="fas fa-tachometer-alt"></i>
1030
- <div>
1031
- <div class="spec-label">0-60</div>
1032
- <div class="spec-value">${car.specs.acceleration}</div>
1033
- </div>
1034
- </div>
1035
- <div class="spec-item">
1036
- <i class="fas fa-road"></i>
1037
- <div>
1038
- <div class="spec-label">Top Speed</div>
1039
- <div class="spec-value">${car.specs.top
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Portfolio - Creative Developer & Designer</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary-color: #667eea;
12
+ --secondary-color: #764ba2;
13
+ --accent-color: #f093fb;
14
+ --dark-color: #1a202c;
15
+ --light-color: #f7fafc;
16
+ --gray-color: #718096;
17
+ --white: #ffffff;
18
+ --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ --gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
20
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
21
+ --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.2);
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ body {
31
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
32
+ line-height: 1.6;
33
+ color: var(--dark-color);
34
+ overflow-x: hidden;
35
+ background: var(--light-color);
36
+ }
37
+
38
+ /* Scrollbar Styling */
39
+ ::-webkit-scrollbar {
40
+ width: 10px;
41
+ }
42
+
43
+ ::-webkit-scrollbar-track {
44
+ background: var(--light-color);
45
+ }
46
+
47
+ ::-webkit-scrollbar-thumb {
48
+ background: var(--primary-color);
49
+ border-radius: 5px;
50
+ }
51
+
52
+ ::-webkit-scrollbar-thumb:hover {
53
+ background: var(--secondary-color);
54
+ }
55
+
56
+ /* Header Navigation */
57
+ header {
58
+ position: fixed;
59
+ top: 0;
60
+ width: 100%;
61
+ background: rgba(255, 255, 255, 0.95);
62
+ backdrop-filter: blur(10px);
63
+ z-index: 1000;
64
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
65
+ transition: all 0.3s ease;
66
+ }
67
+
68
+ nav {
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ padding: 1rem 5%;
73
+ max-width: 1400px;
74
+ margin: 0 auto;
75
+ }
76
+
77
+ .logo {
78
+ display: flex;
79
+ align-items: center;
80
+ font-size: 1.5rem;
81
+ font-weight: bold;
82
+ background: var(--gradient);
83
+ -webkit-background-clip: text;
84
+ -webkit-text-fill-color: transparent;
85
+ text-decoration: none;
86
+ }
87
+
88
+ .logo i {
89
+ margin-right: 10px;
90
+ font-size: 2rem;
91
+ background: var(--gradient);
92
+ -webkit-background-clip: text;
93
+ -webkit-text-fill-color: transparent;
94
+ }
95
+
96
+ .nav-links {
97
+ display: flex;
98
+ list-style: none;
99
+ gap: 2rem;
100
+ }
101
+
102
+ .nav-links a {
103
+ color: var(--dark-color);
104
+ text-decoration: none;
105
+ font-weight: 500;
106
+ transition: color 0.3s ease;
107
+ position: relative;
108
+ }
109
+
110
+ .nav-links a::after {
111
+ content: '';
112
+ position: absolute;
113
+ bottom: -5px;
114
+ left: 0;
115
+ width: 0;
116
+ height: 2px;
117
+ background: var(--gradient);
118
+ transition: width 0.3s ease;
119
+ }
120
+
121
+ .nav-links a:hover::after {
122
+ width: 100%;
123
+ }
124
+
125
+ .menu-toggle {
126
+ display: none;
127
+ font-size: 1.5rem;
128
+ cursor: pointer;
129
+ background: var(--gradient);
130
+ -webkit-background-clip: text;
131
+ -webkit-text-fill-color: transparent;
132
+ }
133
+
134
+ /* Hero Section */
135
+ .hero {
136
+ margin-top: 80px;
137
+ height: 100vh;
138
+ background: linear-gradient(rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)), url('https://picsum.photos/seed/portfoliohero/1920/1080.jpg');
139
+ background-size: cover;
140
+ background-position: center;
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: center;
144
+ position: relative;
145
+ overflow: hidden;
146
+ }
147
+
148
+ .hero-content {
149
+ text-align: center;
150
+ color: var(--white);
151
+ z-index: 2;
152
+ animation: fadeInUp 1s ease;
153
+ }
154
+
155
+ .hero h1 {
156
+ font-size: clamp(2.5rem, 8vw, 5rem);
157
+ margin-bottom: 1rem;
158
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
159
+ letter-spacing: 2px;
160
+ }
161
+
162
+ .hero .subtitle {
163
+ font-size: clamp(1rem, 3vw, 1.5rem);
164
+ margin-bottom: 2rem;
165
+ font-weight: 300;
166
+ letter-spacing: 1px;
167
+ }
168
+
169
+ .hero .typing-text {
170
+ font-size: clamp(1.2rem, 4vw, 2rem);
171
+ margin-bottom: 2rem;
172
+ min-height: 40px;
173
+ }
174
+
175
+ .cta-button {
176
+ display: inline-block;
177
+ padding: 15px 40px;
178
+ background: var(--white);
179
+ color: var(--primary-color);
180
+ text-decoration: none;
181
+ border-radius: 50px;
182
+ font-weight: bold;
183
+ transition: all 0.3s ease;
184
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
185
+ margin: 10px;
186
+ }
187
+
188
+ .cta-button:hover {
189
+ transform: translateY(-3px);
190
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
191
+ }
192
+
193
+ .cta-button.outline {
194
+ background: transparent;
195
+ border: 2px solid var(--white);
196
+ color: var(--white);
197
+ }
198
+
199
+ .cta-button.outline:hover {
200
+ background: var(--white);
201
+ color: var(--primary-color);
202
+ }
203
+
204
+ /* Filter Section */
205
+ .filter-section {
206
+ padding: 3rem 5%;
207
+ background: var(--white);
208
+ }
209
+
210
+ .filter-container {
211
+ max-width: 1400px;
212
+ margin: 0 auto;
213
+ }
214
+
215
+ .filter-title {
216
+ text-align: center;
217
+ font-size: 2rem;
218
+ margin-bottom: 2rem;
219
+ background: var(--gradient);
220
+ -webkit-background-clip: text;
221
+ -webkit-text-fill-color: transparent;
222
+ }
223
+
224
+ .filter-buttons {
225
+ display: flex;
226
+ justify-content: center;
227
+ flex-wrap: wrap;
228
+ gap: 1rem;
229
+ }
230
+
231
+ .filter-btn {
232
+ padding: 10px 25px;
233
+ background: var(--white);
234
+ border: 2px solid var(--primary-color);
235
+ color: var(--primary-color);
236
+ border-radius: 25px;
237
+ cursor: pointer;
238
+ transition: all 0.3s ease;
239
+ font-weight: 600;
240
+ }
241
+
242
+ .filter-btn:hover,
243
+ .filter-btn.active {
244
+ background: var(--gradient);
245
+ color: var(--white);
246
+ border-color: transparent;
247
+ transform: scale(1.05);
248
+ }
249
+
250
+ /* Project Grid */
251
+ .project-showcase {
252
+ padding: 4rem 5%;
253
+ max-width: 1400px;
254
+ margin: 0 auto;
255
+ }
256
+
257
+ .project-grid {
258
+ display: grid;
259
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
260
+ gap: 2rem;
261
+ animation: fadeIn 1s ease;
262
+ }
263
+
264
+ .project-card {
265
+ background: var(--white);
266
+ border-radius: 15px;
267
+ overflow: hidden;
268
+ box-shadow: var(--shadow);
269
+ transition: all 0.3s ease;
270
+ cursor: pointer;
271
+ position: relative;
272
+ }
273
+
274
+ .project-card:hover {
275
+ transform: translateY(-10px);
276
+ box-shadow: var(--shadow-hover);
277
+ }
278
+
279
+ .project-badge {
280
+ position: absolute;
281
+ top: 20px;
282
+ right: 20px;
283
+ background: var(--gradient-alt);
284
+ color: var(--white);
285
+ padding: 5px 15px;
286
+ border-radius: 20px;
287
+ font-size: 0.9rem;
288
+ font-weight: bold;
289
+ z-index: 1;
290
+ }
291
+
292
+ .project-image {
293
+ width: 100%;
294
+ height: 250px;
295
+ object-fit: cover;
296
+ transition: transform 0.3s ease;
297
+ }
298
+
299
+ .project-card:hover .project-image {
300
+ transform: scale(1.1);
301
+ }
302
+
303
+ .project-details {
304
+ padding: 1.5rem;
305
+ }
306
+
307
+ .project-name {
308
+ font-size: 1.5rem;
309
+ font-weight: bold;
310
+ background: var(--gradient);
311
+ -webkit-background-clip: text;
312
+ -webkit-text-fill-color: transparent;
313
+ margin-bottom: 0.5rem;
314
+ }
315
+
316
+ .project-category {
317
+ color: var(--gray-color);
318
+ font-size: 0.9rem;
319
+ margin-bottom: 1rem;
320
+ }
321
+
322
+ .project-tech {
323
+ display: flex;
324
+ flex-wrap: wrap;
325
+ gap: 0.5rem;
326
+ margin: 1rem 0;
327
+ }
328
+
329
+ .tech-tag {
330
+ padding: 5px 12px;
331
+ background: var(--light-color);
332
+ border-radius: 15px;
333
+ font-size: 0.85rem;
334
+ color: var(--primary-color);
335
+ font-weight: 500;
336
+ }
337
+
338
+ .project-description {
339
+ color: var(--gray-color);
340
+ font-size: 0.95rem;
341
+ margin: 1rem 0;
342
+ line-height: 1.6;
343
+ }
344
+
345
+ .project-links {
346
+ display: flex;
347
+ gap: 1rem;
348
+ margin-top: 1rem;
349
+ }
350
+
351
+ .project-link {
352
+ display: inline-flex;
353
+ align-items: center;
354
+ gap: 0.5rem;
355
+ padding: 8px 20px;
356
+ background: var(--gradient);
357
+ color: var(--white);
358
+ text-decoration: none;
359
+ border-radius: 20px;
360
+ transition: all 0.3s ease;
361
+ font-size: 0.9rem;
362
+ }
363
+
364
+ .project-link:hover {
365
+ transform: translateX(5px);
366
+ }
367
+
368
+ /* Modal */
369
+ .modal {
370
+ display: none;
371
+ position: fixed;
372
+ top: 0;
373
+ left: 0;
374
+ width: 100%;
375
+ height: 100%;
376
+ background: rgba(0, 0, 0, 0.9);
377
+ z-index: 2000;
378
+ overflow-y: auto;
379
+ }
380
+
381
+ .modal-content {
382
+ background: var(--white);
383
+ max-width: 900px;
384
+ margin: 5% auto;
385
+ border-radius: 20px;
386
+ overflow: hidden;
387
+ position: relative;
388
+ animation: slideIn 0.3s ease;
389
+ }
390
+
391
+ .close-modal {
392
+ position: absolute;
393
+ top: 20px;
394
+ right: 20px;
395
+ font-size: 2rem;
396
+ cursor: pointer;
397
+ color: var(--white);
398
+ background: rgba(0, 0, 0, 0.5);
399
+ width: 40px;
400
+ height: 40px;
401
+ border-radius: 50%;
402
+ display: flex;
403
+ align-items: center;
404
+ justify-content: center;
405
+ z-index: 1;
406
+ transition: all 0.3s ease;
407
+ }
408
+
409
+ .close-modal:hover {
410
+ background: var(--accent-color);
411
+ transform: rotate(90deg);
412
+ }
413
+
414
+ .modal-header {
415
+ position: relative;
416
+ height: 400px;
417
+ overflow: hidden;
418
+ }
419
+
420
+ .modal-image {
421
+ width: 100%;
422
+ height: 100%;
423
+ object-fit: cover;
424
+ }
425
+
426
+ .modal-body {
427
+ padding: 2rem;
428
+ }
429
+
430
+ .modal-title {
431
+ font-size: 2rem;
432
+ background: var(--gradient);
433
+ -webkit-background-clip: text;
434
+ -webkit-text-fill-color: transparent;
435
+ margin-bottom: 1rem;
436
+ }
437
+
438
+ .modal-category {
439
+ color: var(--gray-color);
440
+ font-size: 1rem;
441
+ margin-bottom: 1rem;
442
+ }
443
+
444
+ .modal-description {
445
+ color: var(--dark-color);
446
+ line-height: 1.8;
447
+ margin-bottom: 2rem;
448
+ }
449
+
450
+ .modal-tech {
451
+ display: flex;
452
+ flex-wrap: wrap;
453
+ gap: 0.5rem;
454
+ margin: 1rem 0;
455
+ }
456
+
457
+ .modal-tech-tag {
458
+ padding: 8px 16px;
459
+ background: var(--gradient);
460
+ color: var(--white);
461
+ border-radius: 20px;
462
+ font-size: 0.9rem;
463
+ font-weight: 500;
464
+ }
465
+
466
+ .modal-features {
467
+ display: grid;
468
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
469
+ gap: 1.5rem;
470
+ margin: 2rem 0;
471
+ }
472
+
473
+ .modal-feature-item {
474
+ text-align: center;
475
+ padding: 1rem;
476
+ background: var(--light-color);
477
+ border-radius: 10px;
478
+ }
479
+
480
+ .modal-feature-item i {
481
+ font-size: 2rem;
482
+ background: var(--gradient);
483
+ -webkit-background-clip: text;
484
+ -webkit-text-fill-color: transparent;
485
+ margin-bottom: 0.5rem;
486
+ }
487
+
488
+ .modal-feature-title {
489
+ font-size: 1rem;
490
+ font-weight: bold;
491
+ color: var(--dark-color);
492
+ }
493
+
494
+ /* Skills Section */
495
+ .skills {
496
+ padding: 4rem 5%;
497
+ background: var(--gradient);
498
+ color: var(--white);
499
+ }
500
+
501
+ .skills-container {
502
+ max-width: 1400px;
503
+ margin: 0 auto;
504
+ }
505
+
506
+ .skills-title {
507
+ text-align: center;
508
+ font-size: 2.5rem;
509
+ margin-bottom: 3rem;
510
+ }
511
+
512
+ .skills-grid {
513
+ display: grid;
514
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
515
+ gap: 2rem;
516
+ }
517
+
518
+ .skill-card {
519
+ text-align: center;
520
+ padding: 2rem;
521
+ background: rgba(255, 255, 255, 0.1);
522
+ border-radius: 15px;
523
+ backdrop-filter: blur(10px);
524
+ transition: all 0.3s ease;
525
+ }
526
+
527
+ .skill-card:hover {
528
+ background: rgba(255, 255, 255, 0.2);
529
+ transform: translateY(-5px);
530
+ }
531
+
532
+ .skill-icon {
533
+ font-size: 3rem;
534
+ margin-bottom: 1rem;
535
+ }
536
+
537
+ .skill-title {
538
+ font-size: 1.3rem;
539
+ margin-bottom: 0.5rem;
540
+ }
541
+
542
+ .skill-level {
543
+ width: 100%;
544
+ height: 8px;
545
+ background: rgba(255, 255, 255, 0.3);
546
+ border-radius: 4px;
547
+ margin-top: 1rem;
548
+ overflow: hidden;
549
+ }
550
+
551
+ .skill-progress {
552
+ height: 100%;
553
+ background: var(--white);
554
+ border-radius: 4px;
555
+ transition: width 1s ease;
556
+ }
557
+
558
+ /* Footer */
559
+ footer {
560
+ background: var(--dark-color);
561
+ color: var(--white);
562
+ padding: 3rem 5%;
563
+ text-align: center;
564
+ }
565
+
566
+ .footer-content {
567
+ max-width: 1400px;
568
+ margin: 0 auto;
569
+ }
570
+
571
+ .social-links {
572
+ display: flex;
573
+ justify-content: center;
574
+ gap: 2rem;
575
+ margin: 2rem 0;
576
+ }
577
+
578
+ .social-links a {
579
+ color: var(--white);
580
+ font-size: 1.5rem;
581
+ transition: all 0.3s ease;
582
+ }
583
+
584
+ .social-links a:hover {
585
+ background: var(--gradient);
586
+ -webkit-background-clip: text;
587
+ -webkit-text-fill-color: transparent;
588
+ transform: translateY(-3px);
589
+ }
590
+
591
+ .made-by {
592
+ margin-top: 2rem;
593
+ padding-top: 2rem;
594
+ border-top: 1px solid #333;
595
+ font-size: 0.9rem;
596
+ opacity: 0.8;
597
+ }
598
+
599
+ .made-by a {
600
+ background: var(--gradient);
601
+ -webkit-background-clip: text;
602
+ -webkit-text-fill-color: transparent;
603
+ text-decoration: none;
604
+ font-weight: bold;
605
+ }
606
+
607
+ /* Animations */
608
+ @keyframes fadeInUp {
609
+ from {
610
+ opacity: 0;
611
+ transform: translateY(30px);
612
+ }
613
+
614
+ to {
615
+ opacity: 1;
616
+ transform: translateY(0);
617
+ }
618
+ }
619
+
620
+ @keyframes fadeIn {
621
+ from {
622
+ opacity: 0;
623
+ }
624
+
625
+ to {
626
+ opacity: 1;
627
+ }
628
+ }
629
+
630
+ @keyframes slideIn {
631
+ from {
632
+ transform: translateY(-100px);
633
+ opacity: 0;
634
+ }
635
+
636
+ to {
637
+ transform: translateY(0);
638
+ opacity: 1;
639
+ }
640
+ }
641
+
642
+ @keyframes typing {
643
+ from {
644
+ width: 0;
645
+ }
646
+
647
+ to {
648
+ width: 100%;
649
+ }
650
+ }
651
+
652
+ /* Responsive Design */
653
+ @media (max-width: 768px) {
654
+ .nav-links {
655
+ display: none;
656
+ position: absolute;
657
+ top: 100%;
658
+ left: 0;
659
+ width: 100%;
660
+ background: var(--white);
661
+ flex-direction: column;
662
+ padding: 2rem;
663
+ box-shadow: var(--shadow);
664
+ }
665
+
666
+ .nav-links.active {
667
+ display: flex;
668
+ }
669
+
670
+ .menu-toggle {
671
+ display: block;
672
+ }
673
+
674
+ .hero h1 {
675
+ font-size: 2.5rem;
676
+ }
677
+
678
+ .project-grid {
679
+ grid-template-columns: 1fr;
680
+ }
681
+
682
+ .modal-content {
683
+ margin: 0;
684
+ border-radius: 0;
685
+ min-height: 100vh;
686
+ }
687
+
688
+ .skills-grid {
689
+ grid-template-columns: 1fr;
690
+ }
691
+ }
692
+
693
+ @media (max-width: 480px) {
694
+ .filter-buttons {
695
+ flex-direction: column;
696
+ align-items: stretch;
697
+ }
698
+
699
+ .filter-btn {
700
+ width: 100%;
701
+ }
702
+
703
+ .project-tech {
704
+ justify-content: center;
705
+ }
706
+ }
707
+
708
+ /* Loading Animation */
709
+ .loading {
710
+ display: inline-block;
711
+ width: 20px;
712
+ height: 20px;
713
+ border: 3px solid rgba(255, 255, 255, 0.3);
714
+ border-radius: 50%;
715
+ border-top-color: var(--white);
716
+ animation: spin 1s ease-in-out infinite;
717
+ }
718
+
719
+ @keyframes spin {
720
+ to {
721
+ transform: rotate(360deg);
722
+ }
723
+ }
724
+
725
+ /* Parallax Effect */
726
+ .parallax {
727
+ background-attachment: fixed;
728
+ background-position: center;
729
+ background-repeat: no-repeat;
730
+ background-size: cover;
731
+ }
732
+ </style>
733
  </head>
734
+
735
  <body>
736
+ <!-- Header Navigation -->
737
+ <header id="header">
738
+ <nav>
739
+ <a href="#" class="logo">
740
+ <i class="fas fa-code"></i>
741
+ Portfolio
742
+ </a>
743
+ <ul class="nav-links" id="navLinks">
744
+ <li><a href="#home">Home</a></li>
745
+ <li><a href="#projects">Projects</a></li>
746
+ <li><a href="#skills">Skills</a></li>
747
+ <li><a href="#contact">Contact</a></li>
748
+ </ul>
749
+ <div class="menu-toggle" id="menuToggle">
750
+ <i class="fas fa-bars"></i>
751
+ </div>
752
+ </nav>
753
+ </header>
754
+
755
+ <!-- Hero Section -->
756
+ <section class="hero parallax" id="home">
757
+ <div class="hero-content">
758
+ <h1>Creative Developer</h1>
759
+ <div class="typing-text" id="typingText"></div>
760
+ <p class="subtitle">Building Digital Experiences with Passion</p>
761
+ <a href="#projects" class="cta-button">View Projects</a>
762
+ <a href="#contact" class="cta-button outline">Get In Touch</a>
763
+ </div>
764
+ </section>
765
+
766
+ <!-- Filter Section -->
767
+ <section class="filter-section" id="filters">
768
+ <div class="filter-container">
769
+ <h2 class="filter-title">Explore My Work</h2>
770
+ <div class="filter-buttons">
771
+ <button class="filter-btn active" data-filter="all">All Projects</button>
772
+ <button class="filter-btn" data-filter="web">Web Design</button>
773
+ <button class="filter-btn" data-filter="app">Applications</button>
774
+ <button class="filter-btn" data-filter="ui">UI/UX</button>
775
+ <button class="filter-btn" data-filter="branding">Branding</button>
776
+ </div>
777
+ </div>
778
+ </section>
779
+
780
+ <!-- Project Showcase -->
781
+ <section class="project-showcase" id="projects">
782
+ <div class="project-grid" id="projectGrid">
783
+ <!-- Projects will be dynamically inserted here -->
784
+ </div>
785
+ </section>
786
+
787
+ <!-- Skills Section -->
788
+ <section class="skills" id="skills">
789
+ <div class="skills-container">
790
+ <h2 class="skills-title">Technical Expertise</h2>
791
+ <div class="skills-grid">
792
+ <div class="skill-card">
793
+ <div class="skill-icon">
794
+ <i class="fab fa-html5"></i>
795
+ </div>
796
+ <h3 class="skill-title">Frontend Development</h3>
797
+ <div class="skill-level">
798
+ <div class="skill-progress" style="width: 90%"></div>
799
+ </div>
800
  </div>
801
+ <div class="skill-card">
802
+ <div class="skill-icon">
803
+ <i class="fab fa-node-js"></i>
804
+ </div>
805
+ <h3 class="skill-title">Backend Development</h3>
806
+ <div class="skill-level">
807
+ <div class="skill-progress" style="width: 85%"></div>
808
+ </div>
 
 
 
 
 
809
  </div>
810
+ <div class="skill-card">
811
+ <div class="skill-icon">
812
+ <i class="fas fa-paint-brush"></i>
813
+ </div>
814
+ <h3 class="skill-title">UI/UX Design</h3>
815
+ <div class="skill-level">
816
+ <div class="skill-progress" style="width: 88%"></div>
817
+ </div>
818
  </div>
819
+ <div class="skill-card">
820
+ <div class="skill-icon">
821
+ <i class="fas fa-mobile-alt"></i>
822
+ </div>
823
+ <h3 class="skill-title">Mobile Development</h3>
824
+ <div class="skill-level">
825
+ <div class="skill-progress" style="width: 75%"></div>
826
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
827
  </div>
828
+ </div>
829
+ </div>
830
+ </section>
831
+
832
+ <!-- Modal -->
833
+ <div class="modal" id="projectModal">
834
+ <div class="modal-content">
835
+ <span class="close-modal" id="closeModal">&times;</span>
836
+ <div class="modal-header">
837
+ <img class="modal-image" id="modalImage" src="" alt="">
838
+ </div>
839
+ <div class="modal-body">
840
+ <h2 class="modal-title" id="modalTitle"></h2>
841
+ <p class="modal-category" id="modalCategory"></p>
842
+ <p class="modal-description" id="modalDescription"></p>
843
+ <div class="modal-tech" id="modalTech"></div>
844
+ <div class="modal-features" id="modalFeatures"></div>
845
+ <div class="project-links" style="justify-content: center; margin-top: 2rem;">
846
+ <a href="#" class="project-link" id="modalLiveLink">
847
+ <i class="fas fa-external-link-alt"></i> Live Demo
848
+ </a>
849
+ <a href="#" class="project-link" id="modalGithubLink">
850
+ <i class="fab fa-github"></i> View Code
851
+ </a>
852
  </div>
853
+ </div>
854
  </div>
855
+ </div>
856
+
857
+ <!-- Footer -->
858
+ <footer id="contact">
859
+ <div class="footer-content">
860
+ <h3>Let's Connect</h3>
861
+ <p>Feel free to reach out for collaborations or just a friendly hello!</p>
862
+ <div class="social-links">
863
+ <a href="#"><i class="fab fa-github"></i></a>
864
+ <a href="#"><i class="fab fa-linkedin"></i></a>
865
+ <a href="#"><i class="fab fa-twitter"></i></a>
866
+ <a href="#"><i class="fab fa-dribbble"></i></a>
867
+ <a href="#"><i class="fab fa-behance"></i></a>
868
+ </div>
869
+ <div class="made-by">
870
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
871
+ </div>
872
+ </div>
873
+ </footer>
874
+
875
+ <script>
876
+ // Portfolio Projects Data
877
+ const portfolioProjects = [
878
+ {
879
+ id: 1,
880
+ name: "E-Commerce Platform",
881
+ category: "web",
882
+ categoryName: "Web Development",
883
+ price: "Featured",
884
+ image: "https://picsum.photos/seed/ecommerce/400/300.jpg",
885
+ description: "A modern e-commerce platform with advanced features including real-time inventory management, secure payment processing, and personalized user recommendations.",
886
+ tech: ["React", "Node.js", "MongoDB", "Stripe API"],
887
+ features: [
888
+ { icon: "fa-shopping-cart", title: "Shopping Cart" },
889
+ { icon: "fa-credit-card", title: "Payment Gateway" },
890
+ { icon: "fa-user", title: "User Authentication" },
891
+ { icon: "fa-chart-line", title: "Analytics Dashboard" }
892
+ ],
893
+ liveLink: "#",
894
+ githubLink: "#"
895
+ },
896
+ {
897
+ id: 2,
898
+ name: "Task Management App",
899
+ category: "app",
900
+ categoryName: "Application Development",
901
+ price: "Popular",
902
+ image: "https://picsum.photos/seed/taskapp/400/300.jpg",
903
+ description: "A comprehensive task management application with team collaboration features, project tracking, and deadline reminders.",
904
+ tech: ["Vue.js", "Express", "PostgreSQL", "Socket.io"],
905
+ features: [
906
+ { icon: "fa-tasks", title: "Task Management" },
907
+ { icon: "fa-users", title: "Team Collaboration" },
908
+ { icon: "fa-calendar", title: "Calendar Integration" },
909
+ { icon: "fa-bell", title: "Notifications" }
910
+ ],
911
+ liveLink: "#",
912
+ githubLink: "#"
913
+ },
914
+ {
915
+ id: 3,
916
+ name: "Banking Dashboard",
917
+ category: "ui",
918
+ categoryName: "UI/UX Design",
919
+ price: "Award Winner",
920
+ image: "https://picsum.photos/seed/bankingui/400/300.jpg",
921
+ description: "A sleek and intuitive banking dashboard design focusing on user experience and data visualization for financial management.",
922
+ tech: ["Figma", "Adobe XD", "Principle", "After Effects"],
923
+ features: [
924
+ { icon: "fa-chart-pie", title: "Data Visualization" },
925
+ { icon: "fa-lock", title: "Security Features" },
926
+ { icon: "fa-mobile", title: "Responsive Design" },
927
+ { icon: "fa-palette", title: "Modern UI" }
928
+ ],
929
+ liveLink: "#",
930
+ githubLink: "#"
931
+ },
932
+ {
933
+ id: 4,
934
+ name: "Social Media Analytics",
935
+ category: "web",
936
+ categoryName: "Web Development",
937
+ price: "New",
938
+ image: "https://picsum.photos/seed/socialmedia/400/300.jpg",
939
+ description: "Real-time social media analytics platform with comprehensive reporting and engagement tracking across multiple platforms.",
940
+ tech: ["Angular", "Python", "TensorFlow", "Redis"],
941
+ features: [
942
+ { icon: "fa-chart-bar", title: "Analytics Dashboard" },
943
+ { icon: "fa-sync", title: "Real-time Data" },
944
+ { icon: "fa-download", title: "Export Reports" },
945
+ { icon: "fa-share-alt", title: "Multi-platform" }
946
+ ],
947
+ liveLink: "#",
948
+ githubLink: "#"
949
+ },
950
+ {
951
+ id: 5,
952
+ name: "Fitness Tracker",
953
+ category: "app",
954
+ categoryName: "Application Development",
955
+ price: "Trending",
956
+ image: "https://picsum.photos/seed/fitnessapp/400/300.jpg",
957
+ description: "A comprehensive fitness tracking application with workout plans, nutrition tracking, and progress monitoring features.",
958
+ tech: ["React Native", "Firebase", "GraphQL", "HealthKit"],
959
+ features: [
960
+ { icon: "fa-running", title: "Workout Plans" },
961
+ { icon: "fa-apple-alt", title: "Nutrition Tracking" },
962
+ { icon: "fa-trophy", title: "Achievements" },
963
+ { icon: "fa-heartbeat", title: "Health Monitoring" }
964
+ ],
965
+ liveLink: "#",
966
+ githubLink: "#"
967
+ },
968
+ {
969
+ id: 6,
970
+ name: "Brand Identity Design",
971
+ category: "branding",
972
+ categoryName: "Branding",
973
+ price: "Featured",
974
+ image: "https://picsum.photos/seed/branding/400/300.jpg",
975
+ description: "Complete brand identity package including logo design, color palette, typography, and brand guidelines for a tech startup.",
976
+ tech: ["Adobe Illustrator", "Photoshop", "InDesign", "Sketch"],
977
+ features: [
978
+ { icon: "fa-certificate", title: "Logo Design" },
979
+ { icon: "fa-paint-roller", title: "Color Palette" },
980
+ { icon: "fa-font", title: "Typography" },
981
+ { icon: "fa-book", title: "Brand Guidelines" }
982
+ ],
983
+ liveLink: "#",
984
+ githubLink: "#"
985
+ },
986
+ {
987
+ id: 7,
988
+ name: "Learning Management System",
989
+ category: "web",
990
+ categoryName: "Web Development",
991
+ price: "Educational",
992
+ image: "https://picsum.photos/seed/lms/400/300.jpg",
993
+ description: "An interactive learning management system with video courses, quizzes, assignments, and progress tracking for online education.",
994
+ tech: ["Django", "React", "AWS", "WebRTC"],
995
+ features: [
996
+ { icon: "fa-video", title: "Video Streaming" },
997
+ { icon: "fa-graduation-cap", title: "Course Management" },
998
+ { icon: "fa-clipboard-check", title: "Assessments" },
999
+ { icon: "fa-certificate", title: "Certificates" }
1000
+ ],
1001
+ liveLink: "#",
1002
+ githubLink: "#"
1003
+ },
1004
+ {
1005
+ id: 8,
1006
+ name: "Restaurant Booking App",
1007
+ category: "app",
1008
+ categoryName: "Application Development",
1009
+ price: "Popular",
1010
+ image: "https://picsum.photos/seed/restaurant/400/300.jpg",
1011
+ description: "A modern restaurant reservation system with table booking, menu viewing, and order management capabilities.",
1012
+ tech: ["Flutter", "Node.js", "MySQL", "Google Maps API"],
1013
+ features: [
1014
+ { icon: "fa-utensils", title: "Menu Viewing" },
1015
+ { icon: "fa-calendar-check", title: "Reservations" },
1016
+ { icon: "fa-map-marker-alt", title: "Location Services" },
1017
+ { icon: "fa-star", title: "Reviews & Ratings" }
1018
+ ],
1019
+ liveLink: "#",
1020
+ githubLink: "#"
1021
+ },
1022
+ {
1023
+ id: 9,
1024
+ name: "Corporate Website Design",
1025
+ category: "ui",
1026
+ categoryName: "UI/UX Design",
1027
+ price: "Professional",
1028
+ image: "https://picsum.photos/seed/corporate/400/300.jpg",
1029
+ description: "Elegant corporate website design showcasing company services, team, and portfolio with a focus on professionalism and credibility.",
1030
+ tech: ["Figma", "Webflow", "GSAP", "Lottie"],
1031
+ features: [
1032
+ { icon: "fa-building", title: "Corporate Design" },
1033
+ { icon: "fa-users", title: "Team Section" },
1034
+ { icon: "fa-briefcase", title: "Services Showcase" },
1035
+ { icon: "fa-envelope", title: "Contact Forms" }
1036
+ ],
1037
+ liveLink: "#",
1038
+ githubLink: "#"
1039
+ }
1040
+ ];
1041
+
1042
+ // DOM Elements
1043
+ const projectGrid = document.getElementById('projectGrid');
1044
+ const filterButtons = document.querySelectorAll('.filter-btn');
1045
+ const modal = document.getElementById('projectModal');
1046
+ const closeModal = document.getElementById('closeModal');
1047
+ const menuToggle = document.getElementById('menuToggle');
1048
+ const navLinks = document.getElementById('navLinks');
1049
+ const typingText = document.getElementById('typingText');
1050
+
1051
+ // Initialize
1052
+ let currentFilter = 'all';
1053
+
1054
+ // Typing Animation
1055
+ const roles = ['Full Stack Developer', 'UI/UX Designer', 'Creative Thinker', 'Problem Solver'];
1056
+ let roleIndex = 0;
1057
+ let charIndex = 0;
1058
+ let isDeleting = false;
1059
+
1060
+ function typeWriter() {
1061
+ const currentRole = roles[roleIndex];
1062
+
1063
+ if (!isDeleting) {
1064
+ typingText.textContent = currentRole.substring(0, charIndex + 1);
1065
+ charIndex++;
1066
+
1067
+ if (charIndex === currentRole.length) {
1068
+ isDeleting = true;
1069
+ setTimeout(typeWriter, 2000);
1070
+ return;
1071
+ }
1072
+ } else {
1073
+ typingText.textContent = currentRole.substring(0, charIndex - 1);
1074
+ charIndex--;
1075
+
1076
+ if (charIndex === 0) {
1077
+ isDeleting = false;
1078
+ roleIndex = (roleIndex + 1) % roles.length;
1079
+ }
1080
+ }
1081
+
1082
+ setTimeout(typeWriter, isDeleting ? 50 : 100);
1083
+ }
1084
+
1085
+ typeWriter();
1086
+
1087
+ // Render Projects
1088
+ function renderProjects(filter = 'all') {
1089
+ const filteredProjects = filter === 'all'
1090
+ ? portfolioProjects
1091
+ : portfolioProjects.filter(project => project.category === filter);
1092
+
1093
+ projectGrid.innerHTML = filteredProjects.map(project => `
1094
+ <div class="project-card" data-id="${project.id}">
1095
+ <span class="project-badge">${project.price}</span>
1096
+ <img src="${project.image}" alt="${project.name}" class="project-image">
1097
+ <div class="project-details">
1098
+ <h3 class="project-name">${project.name}</h3>
1099
+ <p class="project-category">${project.categoryName}</p>
1100
+ <p class="project-description">${project.description.substring(0, 100)}...</p>
1101
+ <div class="project-tech">
1102
+ ${project.tech.map(tech => `<span class="tech-tag">${tech}</span>`).join('')}
1103
  </div>
1104
+ <div class="project-links">
1105
+ <a href="#" class="project-link" onclick="openModal(${project.id}); return false;">
1106
+ <i class="fas fa-eye"></i> View Details
1107
+ </a>
1108
  </div>
1109
+ </div>
1110
  </div>
1111
+ `).join('');
1112
+
1113
+ // Add click event to project cards
1114
+ document.querySelectorAll('.project-card').forEach(card => {
1115
+ card.addEventListener('click', function(e) {
1116
+ if (!e.target.closest('.project-link')) {
1117
+ openModal(parseInt(this.dataset.id));
1118
+ }
1119
+ });
1120
+ });
1121
+ }
1122
+
1123
+ // Open Modal
1124
+ function openModal(projectId) {
1125
+ const project = portfolioProjects.find(p => p.id === projectId);
1126
+ if (!project) return;
1127
+
1128
+ document.getElementById('modalImage').src = project.image;
1129
+ document.getElementById('modalTitle').textContent = project.name;
1130
+ document.getElementById('modalCategory').textContent = project.categoryName;
1131
+ document.getElementById('modalDescription').textContent = project.description;
1132
+
1133
+ document.getElementById('modalTech').innerHTML = project.tech.map(tech =>
1134
+ `<span class="modal-tech-tag">${tech}</span>`
1135
+ ).join('');
1136
+
1137
+ document.getElementById('modalFeatures').innerHTML = project.features.map(feature => `
1138
+ <div class="modal-feature-item">
1139
+ <i class="fas ${feature.icon}"></i>
1140
+ <div class="modal-feature-title">${feature.title