Hugging Face's logo

Spaces:
Biana
/
anycoder-b0c7ba82
Running

App Files Community
Biana commited on
Commit
dd8d7fe
·
verified ·
1 Parent(s): 3d2ca0f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1017 -19
index.html CHANGED
@@ -1,19 +1,1017 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tariq Ahmed - Portfolio</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-color: #4a6fa5;
11
+ --secondary-color: #166088;
12
+ --accent-color: #4fc3f7;
13
+ --dark-color: #1a1a2e;
14
+ --light-color: #f8f9fa;
15
+ --success-color: #4caf50;
16
+ --warning-color: #ff9800;
17
+ --danger-color: #f44336;
18
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19
+ --transition: all 0.3s ease;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
30
+ line-height: 1.6;
31
+ color: #333;
32
+ background-color: var(--light-color);
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ /* Header */
37
+ header {
38
+ background-color: var(--dark-color);
39
+ color: white;
40
+ padding: 1rem 0;
41
+ position: fixed;
42
+ width: 100%;
43
+ top: 0;
44
+ z-index: 1000;
45
+ box-shadow: var(--shadow);
46
+ }
47
+
48
+ .container {
49
+ width: 90%;
50
+ max-width: 1200px;
51
+ margin: 0 auto;
52
+ }
53
+
54
+ .header-content {
55
+ display: flex;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ }
59
+
60
+ .logo {
61
+ font-size: 1.5rem;
62
+ font-weight: 700;
63
+ color: var(--accent-color);
64
+ text-decoration: none;
65
+ }
66
+
67
+ .logo span {
68
+ color: white;
69
+ }
70
+
71
+ nav ul {
72
+ display: flex;
73
+ list-style: none;
74
+ }
75
+
76
+ nav ul li {
77
+ margin-left: 1.5rem;
78
+ }
79
+
80
+ nav ul li a {
81
+ color: white;
82
+ text-decoration: none;
83
+ font-weight: 500;
84
+ transition: var(--transition);
85
+ position: relative;
86
+ padding: 0.5rem 0;
87
+ }
88
+
89
+ nav ul li a:hover {
90
+ color: var(--accent-color);
91
+ }
92
+
93
+ nav ul li a::after {
94
+ content: '';
95
+ position: absolute;
96
+ bottom: 0;
97
+ left: 0;
98
+ width: 0;
99
+ height: 2px;
100
+ background-color: var(--accent-color);
101
+ transition: var(--transition);
102
+ }
103
+
104
+ nav ul li a:hover::after {
105
+ width: 100%;
106
+ }
107
+
108
+ .mobile-menu-btn {
109
+ display: none;
110
+ background: none;
111
+ border: none;
112
+ color: white;
113
+ font-size: 1.5rem;
114
+ cursor: pointer;
115
+ }
116
+
117
+ /* Hero Section */
118
+ .hero {
119
+ height: 100vh;
120
+ display: flex;
121
+ align-items: center;
122
+ background: linear-gradient(135deg, rgba(22, 96, 136, 0.8), rgba(74, 111, 165, 0.8)),
123
+ url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
124
+ background-size: cover;
125
+ background-position: center;
126
+ color: white;
127
+ text-align: center;
128
+ padding-top: 60px;
129
+ }
130
+
131
+ .hero-content h1 {
132
+ font-size: 3rem;
133
+ margin-bottom: 1rem;
134
+ animation: fadeInDown 1s ease;
135
+ }
136
+
137
+ .hero-content p {
138
+ font-size: 1.2rem;
139
+ margin-bottom: 2rem;
140
+ max-width: 700px;
141
+ margin-left: auto;
142
+ margin-right: auto;
143
+ animation: fadeInUp 1s ease;
144
+ }
145
+
146
+ .btn {
147
+ display: inline-block;
148
+ background-color: var(--accent-color);
149
+ color: white;
150
+ padding: 0.8rem 1.5rem;
151
+ border-radius: 5px;
152
+ text-decoration: none;
153
+ font-weight: 600;
154
+ transition: var(--transition);
155
+ border: none;
156
+ cursor: pointer;
157
+ }
158
+
159
+ .btn:hover {
160
+ background-color: var(--primary-color);
161
+ transform: translateY(-3px);
162
+ }
163
+
164
+ .btn-primary {
165
+ background-color: var(--primary-color);
166
+ }
167
+
168
+ .btn-primary:hover {
169
+ background-color: var(--secondary-color);
170
+ }
171
+
172
+ /* About Section */
173
+ .section {
174
+ padding: 5rem 0;
175
+ }
176
+
177
+ .section-title {
178
+ text-align: center;
179
+ margin-bottom: 3rem;
180
+ position: relative;
181
+ }
182
+
183
+ .section-title h2 {
184
+ font-size: 2.5rem;
185
+ color: var(--dark-color);
186
+ margin-bottom: 1rem;
187
+ }
188
+
189
+ .section-title::after {
190
+ content: '';
191
+ position: absolute;
192
+ bottom: 0;
193
+ left: 50%;
194
+ transform: translateX(-50%);
195
+ width: 80px;
196
+ height: 4px;
197
+ background-color: var(--accent-color);
198
+ border-radius: 2px;
199
+ }
200
+
201
+ .about-content {
202
+ display: grid;
203
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
204
+ gap: 2rem;
205
+ align-items: center;
206
+ }
207
+
208
+ .about-img {
209
+ border-radius: 10px;
210
+ overflow: hidden;
211
+ box-shadow: var(--shadow);
212
+ transition: var(--transition);
213
+ }
214
+
215
+ .about-img:hover {
216
+ transform: scale(1.03);
217
+ }
218
+
219
+ .about-img img {
220
+ width: 100%;
221
+ height: auto;
222
+ display: block;
223
+ }
224
+
225
+ .about-text {
226
+ padding: 1rem;
227
+ }
228
+
229
+ .about-text h3 {
230
+ font-size: 1.8rem;
231
+ margin-bottom: 1rem;
232
+ color: var(--primary-color);
233
+ }
234
+
235
+ .skills {
236
+ margin-top: 2rem;
237
+ }
238
+
239
+ .skills-container {
240
+ display: grid;
241
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
242
+ gap: 1rem;
243
+ }
244
+
245
+ .skill {
246
+ background-color: white;
247
+ padding: 1rem;
248
+ border-radius: 5px;
249
+ text-align: center;
250
+ box-shadow: var(--shadow);
251
+ transition: var(--transition);
252
+ }
253
+
254
+ .skill:hover {
255
+ transform: translateY(-5px);
256
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
257
+ }
258
+
259
+ .skill i {
260
+ font-size: 2rem;
261
+ color: var(--accent-color);
262
+ margin-bottom: 0.5rem;
263
+ }
264
+
265
+ /* Projects Section */
266
+ .projects-grid {
267
+ display: grid;
268
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
269
+ gap: 2rem;
270
+ margin-top: 2rem;
271
+ }
272
+
273
+ .project-card {
274
+ background-color: white;
275
+ border-radius: 10px;
276
+ overflow: hidden;
277
+ box-shadow: var(--shadow);
278
+ transition: var(--transition);
279
+ display: flex;
280
+ flex-direction: column;
281
+ }
282
+
283
+ .project-card:hover {
284
+ transform: translateY(-10px);
285
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
286
+ }
287
+
288
+ .project-img {
289
+ height: 200px;
290
+ overflow: hidden;
291
+ }
292
+
293
+ .project-img img {
294
+ width: 100%;
295
+ height: 100%;
296
+ object-fit: cover;
297
+ transition: var(--transition);
298
+ }
299
+
300
+ .project-card:hover .project-img img {
301
+ transform: scale(1.05);
302
+ }
303
+
304
+ .project-info {
305
+ padding: 1.5rem;
306
+ flex-grow: 1;
307
+ }
308
+
309
+ .project-info h3 {
310
+ margin-bottom: 0.5rem;
311
+ color: var(--primary-color);
312
+ }
313
+
314
+ .project-info p {
315
+ color: #666;
316
+ margin-bottom: 1rem;
317
+ flex-grow: 1;
318
+ }
319
+
320
+ .project-links {
321
+ display: flex;
322
+ gap: 0.5rem;
323
+ }
324
+
325
+ .project-links a {
326
+ display: inline-flex;
327
+ align-items: center;
328
+ justify-content: center;
329
+ width: 30px;
330
+ height: 30px;
331
+ border-radius: 50%;
332
+ background-color: var(--accent-color);
333
+ color: white;
334
+ transition: var(--transition);
335
+ }
336
+
337
+ .project-links a:hover {
338
+ background-color: var(--primary-color);
339
+ transform: scale(1.1);
340
+ }
341
+
342
+ /* Contact Section */
343
+ .contact-container {
344
+ display: grid;
345
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
346
+ gap: 2rem;
347
+ }
348
+
349
+ .contact-info {
350
+ background-color: white;
351
+ padding: 2rem;
352
+ border-radius: 10px;
353
+ box-shadow: var(--shadow);
354
+ }
355
+
356
+ .contact-info h3 {
357
+ margin-bottom: 1.5rem;
358
+ color: var(--primary-color);
359
+ font-size: 1.8rem;
360
+ }
361
+
362
+ .contact-item {
363
+ display: flex;
364
+ align-items: center;
365
+ margin-bottom: 1rem;
366
+ }
367
+
368
+ .contact-item i {
369
+ font-size: 1.5rem;
370
+ color: var(--accent-color);
371
+ margin-right: 1rem;
372
+ width: 40px;
373
+ height: 40px;
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ background-color: rgba(79, 195, 247, 0.1);
378
+ border-radius: 50%;
379
+ }
380
+
381
+ .contact-form {
382
+ background-color: white;
383
+ padding: 2rem;
384
+ border-radius: 10px;
385
+ box-shadow: var(--shadow);
386
+ }
387
+
388
+ .form-group {
389
+ margin-bottom: 1.5rem;
390
+ }
391
+
392
+ .form-group label {
393
+ display: block;
394
+ margin-bottom: 0.5rem;
395
+ font-weight: 500;
396
+ }
397
+
398
+ .form-group input,
399
+ .form-group textarea {
400
+ width: 100%;
401
+ padding: 0.8rem;
402
+ border: 1px solid #ddd;
403
+ border-radius: 5px;
404
+ font-family: inherit;
405
+ transition: var(--transition);
406
+ }
407
+
408
+ .form-group input:focus,
409
+ .form-group textarea:focus {
410
+ outline: none;
411
+ border-color: var(--accent-color);
412
+ box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
413
+ }
414
+
415
+ .form-group textarea {
416
+ height: 150px;
417
+ resize: vertical;
418
+ }
419
+
420
+ /* Footer */
421
+ footer {
422
+ background-color: var(--dark-color);
423
+ color: white;
424
+ padding: 3rem 0 1rem;
425
+ }
426
+
427
+ .footer-content {
428
+ display: grid;
429
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
430
+ gap: 2rem;
431
+ margin-bottom: 2rem;
432
+ }
433
+
434
+ .footer-column h3 {
435
+ font-size: 1.2rem;
436
+ margin-bottom: 1rem;
437
+ color: var(--accent-color);
438
+ }
439
+
440
+ .footer-column ul {
441
+ list-style: none;
442
+ }
443
+
444
+ .footer-column ul li {
445
+ margin-bottom: 0.5rem;
446
+ }
447
+
448
+ .footer-column ul li a {
449
+ color: #ccc;
450
+ text-decoration: none;
451
+ transition: var(--transition);
452
+ }
453
+
454
+ .footer-column ul li a:hover {
455
+ color: var(--accent-color);
456
+ }
457
+
458
+ .social-links {
459
+ display: flex;
460
+ gap: 1rem;
461
+ }
462
+
463
+ .social-links a {
464
+ display: flex;
465
+ align-items: center;
466
+ justify-content: center;
467
+ width: 40px;
468
+ height: 40px;
469
+ border-radius: 50%;
470
+ background-color: rgba(255, 255, 255, 0.1);
471
+ color: white;
472
+ transition: var(--transition);
473
+ }
474
+
475
+ .social-links a:hover {
476
+ background-color: var(--accent-color);
477
+ transform: translateY(-3px);
478
+ }
479
+
480
+ .footer-bottom {
481
+ text-align: center;
482
+ padding-top: 2rem;
483
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
484
+ color: #ccc;
485
+ font-size: 0.9rem;
486
+ }
487
+
488
+ .footer-bottom a {
489
+ color: var(--accent-color);
490
+ text-decoration: none;
491
+ }
492
+
493
+ /* Animations */
494
+ @keyframes fadeInDown {
495
+ from {
496
+ opacity: 0;
497
+ transform: translateY(-30px);
498
+ }
499
+ to {
500
+ opacity: 1;
501
+ transform: translateY(0);
502
+ }
503
+ }
504
+
505
+ @keyframes fadeInUp {
506
+ from {
507
+ opacity: 0;
508
+ transform: translateY(30px);
509
+ }
510
+ to {
511
+ opacity: 1;
512
+ transform: translateY(0);
513
+ }
514
+ }
515
+
516
+ /* Responsive Design */
517
+ @media (max-width: 768px) {
518
+ .header-content {
519
+ flex-direction: column;
520
+ text-align: center;
521
+ }
522
+
523
+ nav ul {
524
+ margin-top: 1rem;
525
+ flex-direction: column;
526
+ align-items: center;
527
+ }
528
+
529
+ nav ul li {
530
+ margin: 0 0.5rem;
531
+ }
532
+
533
+ .hero-content h1 {
534
+ font-size: 2.5rem;
535
+ }
536
+
537
+ .hero-content p {
538
+ font-size: 1rem;
539
+ }
540
+
541
+ .about-content {
542
+ grid-template-columns: 1fr;
543
+ }
544
+
545
+ .mobile-menu-btn {
546
+ display: block;
547
+ }
548
+
549
+ .nav-menu {
550
+ display: none;
551
+ }
552
+
553
+ .nav-menu.active {
554
+ display: flex;
555
+ flex-direction: column;
556
+ position: absolute;
557
+ top: 100%;
558
+ left: 0;
559
+ width: 100%;
560
+ background-color: var(--dark-color);
561
+ padding: 1rem 0;
562
+ }
563
+ }
564
+
565
+ /* Built with anycoder */
566
+ .built-with {
567
+ position: fixed;
568
+ bottom: 10px;
569
+ right: 10px;
570
+ background-color: rgba(0, 0, 0, 0.7);
571
+ color: white;
572
+ padding: 0.5rem 1rem;
573
+ border-radius: 5px;
574
+ font-size: 0.8rem;
575
+ z-index: 1000;
576
+ text-decoration: none;
577
+ transition: var(--transition);
578
+ }
579
+
580
+ .built-with:hover {
581
+ background-color: rgba(0, 0, 0, 0.9);
582
+ }
583
+ </style>
584
+ </head>
585
+ <body>
586
+ <!-- Header -->
587
+ <header>
588
+ <div class="container header-content">
589
+ <a href="#" class="logo">Tariq <span>Ahmed</span></a>
590
+ <button class="mobile-menu-btn" aria-label="Toggle menu">
591
+ <i class="fas fa-bars"></i>
592
+ </button>
593
+ <nav class="nav-menu">
594
+ <ul>
595
+ <li><a href="#home">Home</a></li>
596
+ <li><a href="#about">About</a></li>
597
+ <li><a href="#projects">Projects</a></li>
598
+ <li><a href="#skills">Skills</a></li>
599
+ <li><a href="#contact">Contact</a></li>
600
+ </ul>
601
+ </nav>
602
+ </div>
603
+ </header>
604
+
605
+ <!-- Hero Section -->
606
+ <section class="hero" id="home">
607
+ <div class="container hero-content">
608
+ <h1>Hi, I'm Tariq Ahmed</h1>
609
+ <p>Full Stack Developer | Open Source Enthusiast | Problem Solver</p>
610
+ <a href="#projects" class="btn">View My Work</a>
611
+ </div>
612
+ </section>
613
+
614
+ <!-- About Section -->
615
+ <section class="section" id="about">
616
+ <div class="container">
617
+ <div class="section-title">
618
+ <h2>About Me</h2>
619
+ </div>
620
+ <div class="about-content">
621
+ <div class="about-img">
622
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Tariq Ahmed">
623
+ </div>
624
+ <div class="about-text">
625
+ <h3>Passionate Developer</h3>
626
+ <p>I'm a full stack developer with expertise in building modern web applications. With over 5 years of experience in the industry, I've worked with various technologies and frameworks to create scalable and efficient solutions.</p>
627
+ <p>My journey in programming started when I was in high school, and since then, I've been continuously learning and improving my skills. I love solving complex problems and turning ideas into reality through code.</p>
628
+ <p>When I'm not coding, you can find me contributing to open source projects, writing technical articles, or exploring new technologies.</p>
629
+ <a href="#contact" class="btn btn-primary">Get In Touch</a>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Skills Section -->
634
+ <div class="section-title" id="skills">
635
+ <h2>My Skills</h2>
636
+ </div>
637
+ <div class="skills">
638
+ <div class="skills-container">
639
+ <div class="skill">
640
+ <i class="fab fa-html5"></i>
641
+ <h4>HTML5</h4>
642
+ </div>
643
+ <div class="skill">
644
+ <i class="fab fa-css3-alt"></i>
645
+ <h4>CSS3</h4>
646
+ </div>
647
+ <div class="skill">
648
+ <i class="fab fa-js"></i>
649
+ <h4>JavaScript</h4>
650
+ </div>
651
+ <div class="skill">
652
+ <i class="fab fa-react"></i>
653
+ <h4>React</h4>
654
+ </div>
655
+ <div class="skill">
656
+ <i class="fab fa-node-js"></i>
657
+ <h4>Node.js</h4>
658
+ </div>
659
+ <div class="skill">
660
+ <i class="fas fa-database"></i>
661
+ <h4>MongoDB</h4>
662
+ </div>
663
+ <div class="skill">
664
+ <i class="fab fa-git-alt"></i>
665
+ <h4>Git</h4>
666
+ </div>
667
+ <div class="skill">
668
+ <i class="fab fa-python"></i>
669
+ <h4>Python</h4>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </section>
675
+
676
+ <!-- Projects Section -->
677
+ <section class="section" id="projects">
678
+ <div class="container">
679
+ <div class="section-title">
680
+ <h2>My Projects</h2>
681
+ </div>
682
+ <div class="projects-grid">
683
+ <div class="project-card">
684
+ <div class="project-img">
685
+ <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="E-commerce Platform">
686
+ </div>
687
+ <div class="project-info">
688
+ <h3>E-commerce Platform</h3>
689
+ <p>A full-featured e-commerce solution with product management, shopping cart, and secure checkout.</p>
690
+ <div class="project-links">
691
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
692
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
693
+ </div>
694
+ </div>
695
+ </div>
696
+
697
+ <div class="project-card">
698
+ <div class="project-img">
699
+ <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Task Management App">
700
+ </div>
701
+ <div class="project-info">
702
+ <h3>Task Management App</h3>
703
+ <p>A productivity application for managing tasks, projects, and team collaboration with real-time updates.</p>
704
+ <div class="project-links">
705
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
706
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
707
+ </div>
708
+ </div>
709
+ </div>
710
+
711
+ <div class="project-card">
712
+ <div class="project-img">
713
+ <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Weather Dashboard">
714
+ </div>
715
+ <div class="project-info">
716
+ <h3>Weather Dashboard</h3>
717
+ <p>An interactive weather application that provides real-time weather data and forecasts using API integration.</p>
718
+ <div class="project-links">
719
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
720
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
721
+ </div>
722
+ </div>
723
+ </div>
724
+
725
+ <div class="project-card">
726
+ <div class="project-img">
727
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Portfolio Generator">
728
+ </div>
729
+ <div class="project-info">
730
+ <h3>Portfolio Generator</h3>
731
+ <p>A tool that helps developers create professional portfolios quickly with customizable templates.</p>
732
+ <div class="project-links">
733
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
734
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="project-card">
740
+ <div class="project-img">
741
+ <img src="https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Chat Application">
742
+ </div>
743
+ <div class="project-info">
744
+ <h3>Real-time Chat App</h3>
745
+ <p>A modern chat application with real-time messaging, user authentication, and message history.</p>
746
+ <div class="project-links">
747
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
748
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
749
+ </div>
750
+ </div>
751
+ </div>
752
+
753
+ <div class="project-card">
754
+ <div class="project-img">
755
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Blog Platform">
756
+ </div>
757
+ <div class="project-info">
758
+ <h3>Blog Platform</h3>
759
+ <p>A content management system for creating and managing blog posts with user comments and categories.</p>
760
+ <div class="project-links">
761
+ <a href="#" aria-label="View project"><i class="fas fa-eye"></i></a>
762
+ <a href="#" aria-label="GitHub repository"><i class="fab fa-github"></i></a>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ </section>
769
+
770
+ <!-- Contact Section -->
771
+ <section class="section" id="contact">
772
+ <div class="container">
773
+ <div class="section-title">
774
+ <h2>Get In Touch</h2>
775
+ </div>
776
+ <div class="contact-container">
777
+ <div class="contact-info">
778
+ <h3>Contact Information</h3>
779
+ <div class="contact-item">
780
+ <i class="fas fa-map-marker-alt"></i>
781
+ <div>
782
+ <h4>Location</h4>
783
+ <p>New York, USA</p>
784
+ </div>
785
+ </div>
786
+ <div class="contact-item">
787
+ <i class="fas fa-envelope"></i>
788
+ <div>
789
+ <h4>Email</h4>
790
+ <p>tariq@example.com</p>
791
+ </div>
792
+ </div>
793
+ <div class="contact-item">
794
+ <i class="fas fa-phone"></i>
795
+ <div>
796
+ <h4>Phone</h4>
797
+ <p>+1 (555) 123-4567</p>
798
+ </div>
799
+ </div>
800
+ <div class="contact-item">
801
+ <i class="fas fa-globe"></i>
802
+ <div>
803
+ <h4>Website</h4>
804
+ <p>tariqahmed.dev</p>
805
+ </div>
806
+ </div>
807
+
808
+ <div class="social-links">
809
+ <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
810
+ <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
811
+ <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
812
+ <a href="#" aria-label="Codepen"><i class="fab fa-codepen"></i></a>
813
+ </div>
814
+ </div>
815
+
816
+ <div class="contact-form">
817
+ <h3>Send Message</h3>
818
+ <form id="contactForm">
819
+ <div class="form-group">
820
+ <label for="name">Name</label>
821
+ <input type="text" id="name" name="name" required>
822
+ </div>
823
+ <div class="form-group">
824
+ <label for="email">Email</label>
825
+ <input type="email" id="email" name="email" required>
826
+ </div>
827
+ <div class="form-group">
828
+ <label for="subject">Subject</label>
829
+ <input type="text" id="subject" name="subject" required>
830
+ </div>
831
+ <div class="form-group">
832
+ <label for="message">Message</label>
833
+ <textarea id="message" name="message" required></textarea>
834
+ </div>
835
+ <button type="submit" class="btn btn-primary">Send Message</button>
836
+ </form>
837
+ </div>
838
+ </div>
839
+ </div>
840
+ </section>
841
+
842
+ <!-- Footer -->
843
+ <footer>
844
+ <div class="container">
845
+ <div class="footer-content">
846
+ <div class="footer-column">
847
+ <h3>Quick Links</h3>
848
+ <ul>
849
+ <li><a href="#home">Home</a></li>
850
+ <li><a href="#about">About</a></li>
851
+ <li><a href="#projects">Projects</a></li>
852
+ <li><a href="#skills">Skills</a></li>
853
+ <li><a href="#contact">Contact</a></li>
854
+ </ul>
855
+ </div>
856
+ <div class="footer-column">
857
+ <h3>Services</h3>
858
+ <ul>
859
+ <li><a href="#">Web Development</a></li>
860
+ <li><a href="#">UI/UX Design</a></li>
861
+ <li><a href="#">Mobile Apps</a></li>
862
+ <li><a href="#">Consulting</a></li>
863
+ <li><a href="#">SEO Optimization</a></li>
864
+ </ul>
865
+ </div>
866
+ <div class="footer-column">
867
+ <h3>Connect</h3>
868
+ <div class="social-links">
869
+ <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
870
+ <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
871
+ <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
872
+ <a href="#" aria-label="Codepen"><i class="fab fa-codepen"></i></a>
873
+ <a href="#" aria-label="Stack Overflow"><i class="fab fa-stack-overflow"></i></a>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ <div class="footer-bottom">
878
+ <p>&copy; 2023 Tariq Ahmed. All rights reserved. | Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
879
+ </div>
880
+ </div>
881
+ </footer>
882
+
883
+ <!-- Back to top button -->
884
+ <button id="backToTop" class="btn" aria-label="Back to top">
885
+ <i class="fas fa-arrow-up"></i>
886
+ </button>
887
+
888
+ <!-- Built with anycoder -->
889
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
890
+
891
+ <script>
892
+ // Mobile menu toggle
893
+ const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
894
+ const navMenu = document.querySelector('.nav-menu');
895
+
896
+ mobileMenuBtn.addEventListener('click', () => {
897
+ navMenu.classList.toggle('active');
898
+ });
899
+
900
+ // Smooth scrolling for anchor links
901
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
902
+ anchor.addEventListener('click', function(e) {
903
+ e.preventDefault();
904
+
905
+ // Close mobile menu if open
906
+ navMenu.classList.remove('active');
907
+
908
+ const targetId = this.getAttribute('href');
909
+ if (targetId === '#') return;
910
+
911
+ const targetElement = document.querySelector(targetId);
912
+ if (targetElement) {
913
+ window.scrollTo({
914
+ top: targetElement.offsetTop - 80,
915
+ behavior: 'smooth'
916
+ });
917
+ }
918
+ });
919
+ });
920
+
921
+ // Back to top button
922
+ const backToTopBtn = document.getElementById('backToTop');
923
+
924
+ window.addEventListener('scroll', () => {
925
+ if (window.pageYOffset > 300) {
926
+ backToTopBtn.style.display = 'block';
927
+ } else {
928
+ backToTopBtn.style.display = 'none';
929
+ }
930
+ });
931
+
932
+ backToTopBtn.addEventListener('click', () => {
933
+ window.scrollTo({
934
+ top: 0,
935
+ behavior: 'smooth'
936
+ });
937
+ });
938
+
939
+ // Form submission
940
+ const contactForm = document.getElementById('contactForm');
941
+
942
+ contactForm.addEventListener('submit', (e) => {
943
+ e.preventDefault();
944
+
945
+ // Get form values
946
+ const name = document.getElementById('name').value;
947
+ const email = document.getElementById('email').value;
948
+ const subject = document.getElementById('subject').value;
949
+ const message = document.getElementById('message').value;
950
+
951
+ // Simple validation
952
+ if (!name || !email || !subject || !message) {
953
+ alert('Please fill in all fields');
954
+ return;
955
+ }
956
+
957
+ // In a real application, you would send this data to a server
958
+ console.log('Form submitted:', { name, email, subject, message });
959
+
960
+ // Show success message
961
+ alert('Thank you for your message! I will get back to you soon.');
962
+
963
+ // Reset form
964
+ contactForm.reset();
965
+ });
966
+
967
+ // Animate elements on scroll
968
+ const animateOnScroll = () => {
969
+ const elements = document.querySelectorAll('.project-card, .skill, .contact-item');
970
+
971
+ elements.forEach(element => {
972
+ const elementPosition = element.getBoundingClientRect().top;
973
+ const windowHeight = window.innerHeight;
974
+
975
+ if (elementPosition < windowHeight - 100) {
976
+ element.style.opacity = '1';
977
+ element.style.transform = 'translateY(0)';
978
+ }
979
+ });
980
+ };
981
+
982
+ // Set initial state for animated elements
983
+ document.querySelectorAll('.project-card, .skill, .contact-item').forEach(element => {
984
+ element.style.opacity = '0';
985
+ element.style.transform = 'translateY(20px)';
986
+ element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
987
+ });
988
+
989
+ // Run animation check on scroll and page load
990
+ window.addEventListener('scroll', animateOnScroll);
991
+ window.addEventListener('load', animateOnScroll);
992
+
993
+ // Add scroll animation to sections
994
+ const observerOptions = {
995
+ threshold: 0.1,
996
+ rootMargin: '0px 0px -50px 0px'
997
+ };
998
+
999
+ const observer = new IntersectionObserver((entries) => {
1000
+ entries.forEach(entry => {
1001
+ if (entry.isIntersecting) {
1002
+ entry.target.style.opacity = '1';
1003
+ entry.target.style.transform = 'translateY(0)';
1004
+ }
1005
+ });
1006
+ }, observerOptions);
1007
+
1008
+ // Observe all sections
1009
+ document.querySelectorAll('section').forEach(section => {
1010
+ section.style.opacity = '0';
1011
+ section.style.transform = 'translateY(30px)';
1012
+ section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
1013
+ observer.observe(section);
1014
+ });
1015
+ </script>
1016
+ </body>
1017
+ </html>