Hugging Face's logo

Spaces:
Shaikhsarib
/
anycoder-ae007d74
Running

App Files Community
Shaikhsarib commited on
Commit
3118eac
·
verified ·
1 Parent(s): 2235b14

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1193 -19
index.html CHANGED
@@ -1,19 +1,1193 @@
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>Modern Portfolio - Frontend Application</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: #667eea;
11
+ --secondary-color: #764ba2;
12
+ --text-primary: #2d3748;
13
+ --text-secondary: #4a5568;
14
+ --bg-primary: #ffffff;
15
+ --bg-secondary: #f7fafc;
16
+ --bg-card: #ffffff;
17
+ --border-color: #e2e8f0;
18
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
19
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
20
+ --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
21
+ --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
22
+ --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
23
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ [data-theme="dark"] {
27
+ --text-primary: #f7fafc;
28
+ --text-secondary: #e2e8f0;
29
+ --bg-primary: #1a202c;
30
+ --bg-secondary: #2d3748;
31
+ --bg-card: #2d3748;
32
+ --border-color: #4a5568;
33
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
34
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
35
+ --shadow-lg: 0 10px 20px rgba(0,0,0,0.4);
36
+ --shadow-xl: 0 20px 40px rgba(0,0,0,0.5);
37
+ }
38
+
39
+ * {
40
+ margin: 0;
41
+ padding: 0;
42
+ box-sizing: border-box;
43
+ }
44
+
45
+ html {
46
+ scroll-behavior: smooth;
47
+ }
48
+
49
+ body {
50
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
51
+ background-color: var(--bg-secondary);
52
+ color: var(--text-primary);
53
+ line-height: 1.6;
54
+ overflow-x: hidden;
55
+ transition: var(--transition);
56
+ }
57
+
58
+ /* Custom Scrollbar */
59
+ ::-webkit-scrollbar {
60
+ width: 10px;
61
+ }
62
+
63
+ ::-webkit-scrollbar-track {
64
+ background: var(--bg-secondary);
65
+ }
66
+
67
+ ::-webkit-scrollbar-thumb {
68
+ background: var(--primary-color);
69
+ border-radius: 5px;
70
+ }
71
+
72
+ ::-webkit-scrollbar-thumb:hover {
73
+ background: var(--secondary-color);
74
+ }
75
+
76
+ /* Header */
77
+ header {
78
+ position: fixed;
79
+ top: 0;
80
+ width: 100%;
81
+ background: var(--bg-primary);
82
+ backdrop-filter: blur(10px);
83
+ box-shadow: var(--shadow-sm);
84
+ z-index: 1000;
85
+ transition: var(--transition);
86
+ }
87
+
88
+ nav {
89
+ display: flex;
90
+ justify-content: space-between;
91
+ align-items: center;
92
+ padding: 1rem 5%;
93
+ max-width: 1400px;
94
+ margin: 0 auto;
95
+ }
96
+
97
+ .logo {
98
+ font-size: 1.5rem;
99
+ font-weight: 700;
100
+ background: var(--gradient);
101
+ -webkit-background-clip: text;
102
+ -webkit-text-fill-color: transparent;
103
+ background-clip: text;
104
+ animation: gradientShift 3s ease infinite;
105
+ }
106
+
107
+ @keyframes gradientShift {
108
+ 0%, 100% { filter: hue-rotate(0deg); }
109
+ 50% { filter: hue-rotate(30deg); }
110
+ }
111
+
112
+ .nav-links {
113
+ display: flex;
114
+ list-style: none;
115
+ gap: 2rem;
116
+ align-items: center;
117
+ }
118
+
119
+ .nav-links a {
120
+ color: var(--text-primary);
121
+ text-decoration: none;
122
+ font-weight: 500;
123
+ position: relative;
124
+ transition: var(--transition);
125
+ }
126
+
127
+ .nav-links a::after {
128
+ content: '';
129
+ position: absolute;
130
+ bottom: -5px;
131
+ left: 0;
132
+ width: 0;
133
+ height: 2px;
134
+ background: var(--gradient);
135
+ transition: width 0.3s ease;
136
+ }
137
+
138
+ .nav-links a:hover::after {
139
+ width: 100%;
140
+ }
141
+
142
+ .theme-toggle {
143
+ background: none;
144
+ border: none;
145
+ cursor: pointer;
146
+ font-size: 1.2rem;
147
+ color: var(--text-primary);
148
+ transition: transform 0.3s ease;
149
+ }
150
+
151
+ .theme-toggle:hover {
152
+ transform: rotate(180deg);
153
+ }
154
+
155
+ .mobile-menu {
156
+ display: none;
157
+ flex-direction: column;
158
+ gap: 4px;
159
+ background: none;
160
+ border: none;
161
+ cursor: pointer;
162
+ }
163
+
164
+ .mobile-menu span {
165
+ width: 25px;
166
+ height: 3px;
167
+ background: var(--text-primary);
168
+ transition: var(--transition);
169
+ }
170
+
171
+ /* Hero Section */
172
+ .hero {
173
+ min-height: 100vh;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ background: var(--bg-primary);
178
+ position: relative;
179
+ overflow: hidden;
180
+ padding-top: 80px;
181
+ }
182
+
183
+ .hero-bg {
184
+ position: absolute;
185
+ top: 0;
186
+ left: 0;
187
+ right: 0;
188
+ bottom: 0;
189
+ background: var(--gradient);
190
+ opacity: 0.05;
191
+ animation: pulse 4s ease-in-out infinite;
192
+ }
193
+
194
+ @keyframes pulse {
195
+ 0%, 100% { opacity: 0.05; }
196
+ 50% { opacity: 0.1; }
197
+ }
198
+
199
+ .hero-content {
200
+ text-align: center;
201
+ z-index: 1;
202
+ animation: fadeInUp 1s ease;
203
+ }
204
+
205
+ @keyframes fadeInUp {
206
+ from {
207
+ opacity: 0;
208
+ transform: translateY(30px);
209
+ }
210
+ to {
211
+ opacity: 1;
212
+ transform: translateY(0);
213
+ }
214
+ }
215
+
216
+ .hero h1 {
217
+ font-size: clamp(2rem, 5vw, 4rem);
218
+ margin-bottom: 1rem;
219
+ background: var(--gradient);
220
+ -webkit-background-clip: text;
221
+ -webkit-text-fill-color: transparent;
222
+ background-clip: text;
223
+ }
224
+
225
+ .hero .subtitle {
226
+ font-size: clamp(1rem, 2vw, 1.5rem);
227
+ color: var(--text-secondary);
228
+ margin-bottom: 2rem;
229
+ }
230
+
231
+ .hero-buttons {
232
+ display: flex;
233
+ gap: 1rem;
234
+ justify-content: center;
235
+ flex-wrap: wrap;
236
+ }
237
+
238
+ .btn {
239
+ padding: 0.75rem 2rem;
240
+ border: none;
241
+ border-radius: 50px;
242
+ font-size: 1rem;
243
+ font-weight: 600;
244
+ cursor: pointer;
245
+ transition: var(--transition);
246
+ text-decoration: none;
247
+ display: inline-block;
248
+ }
249
+
250
+ .btn-primary {
251
+ background: var(--gradient);
252
+ color: white;
253
+ box-shadow: var(--shadow-md);
254
+ }
255
+
256
+ .btn-primary:hover {
257
+ transform: translateY(-3px);
258
+ box-shadow: var(--shadow-lg);
259
+ }
260
+
261
+ .btn-secondary {
262
+ background: transparent;
263
+ color: var(--text-primary);
264
+ border: 2px solid var(--primary-color);
265
+ }
266
+
267
+ .btn-secondary:hover {
268
+ background: var(--primary-color);
269
+ color: white;
270
+ transform: translateY(-3px);
271
+ }
272
+
273
+ /* Floating particles */
274
+ .particles {
275
+ position: absolute;
276
+ width: 100%;
277
+ height: 100%;
278
+ overflow: hidden;
279
+ }
280
+
281
+ .particle {
282
+ position: absolute;
283
+ width: 4px;
284
+ height: 4px;
285
+ background: var(--primary-color);
286
+ border-radius: 50%;
287
+ opacity: 0.3;
288
+ animation: float 20s infinite linear;
289
+ }
290
+
291
+ @keyframes float {
292
+ from {
293
+ transform: translateY(100vh) translateX(0);
294
+ }
295
+ to {
296
+ transform: translateY(-100px) translateX(100px);
297
+ }
298
+ }
299
+
300
+ /* Section Styles */
301
+ section {
302
+ padding: 5rem 5%;
303
+ max-width: 1400px;
304
+ margin: 0 auto;
305
+ }
306
+
307
+ .section-title {
308
+ text-align: center;
309
+ font-size: 2.5rem;
310
+ margin-bottom: 3rem;
311
+ position: relative;
312
+ }
313
+
314
+ .section-title::after {
315
+ content: '';
316
+ position: absolute;
317
+ bottom: -10px;
318
+ left: 50%;
319
+ transform: translateX(-50%);
320
+ width: 60px;
321
+ height: 4px;
322
+ background: var(--gradient);
323
+ border-radius: 2px;
324
+ }
325
+
326
+ /* About Section */
327
+ .about {
328
+ background: var(--bg-primary);
329
+ }
330
+
331
+ .about-content {
332
+ display: grid;
333
+ grid-template-columns: 1fr 2fr;
334
+ gap: 3rem;
335
+ align-items: center;
336
+ }
337
+
338
+ .about-image {
339
+ position: relative;
340
+ animation: slideInLeft 1s ease;
341
+ }
342
+
343
+ @keyframes slideInLeft {
344
+ from {
345
+ opacity: 0;
346
+ transform: translateX(-30px);
347
+ }
348
+ to {
349
+ opacity: 1;
350
+ transform: translateX(0);
351
+ }
352
+ }
353
+
354
+ .about-image img {
355
+ width: 100%;
356
+ border-radius: 20px;
357
+ box-shadow: var(--shadow-xl);
358
+ }
359
+
360
+ .about-text {
361
+ animation: slideInRight 1s ease;
362
+ }
363
+
364
+ @keyframes slideInRight {
365
+ from {
366
+ opacity: 0;
367
+ transform: translateX(30px);
368
+ }
369
+ to {
370
+ opacity: 1;
371
+ transform: translateX(0);
372
+ }
373
+ }
374
+
375
+ /* Skills Section */
376
+ .skills-grid {
377
+ display: grid;
378
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
379
+ gap: 2rem;
380
+ }
381
+
382
+ .skill-card {
383
+ background: var(--bg-card);
384
+ padding: 2rem;
385
+ border-radius: 15px;
386
+ box-shadow: var(--shadow-md);
387
+ transition: var(--transition);
388
+ position: relative;
389
+ overflow: hidden;
390
+ }
391
+
392
+ .skill-card::before {
393
+ content: '';
394
+ position: absolute;
395
+ top: 0;
396
+ left: 0;
397
+ width: 100%;
398
+ height: 4px;
399
+ background: var(--gradient);
400
+ }
401
+
402
+ .skill-card:hover {
403
+ transform: translateY(-5px);
404
+ box-shadow: var(--shadow-xl);
405
+ }
406
+
407
+ .skill-header {
408
+ display: flex;
409
+ justify-content: space-between;
410
+ align-items: center;
411
+ margin-bottom: 1rem;
412
+ }
413
+
414
+ .skill-name {
415
+ font-weight: 600;
416
+ color: var(--text-primary);
417
+ }
418
+
419
+ .skill-percentage {
420
+ color: var(--primary-color);
421
+ font-weight: 700;
422
+ }
423
+
424
+ .skill-bar {
425
+ width: 100%;
426
+ height: 10px;
427
+ background: var(--border-color);
428
+ border-radius: 10px;
429
+ overflow: hidden;
430
+ position: relative;
431
+ }
432
+
433
+ .skill-progress {
434
+ height: 100%;
435
+ background: var(--gradient);
436
+ border-radius: 10px;
437
+ width: 0;
438
+ animation: fillBar 2s ease forwards;
439
+ }
440
+
441
+ @keyframes fillBar {
442
+ to { width: var(--skill-level); }
443
+ }
444
+
445
+ /* Projects Section */
446
+ .projects {
447
+ background: var(--bg-primary);
448
+ }
449
+
450
+ .projects-grid {
451
+ display: grid;
452
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
453
+ gap: 2rem;
454
+ }
455
+
456
+ .project-card {
457
+ background: var(--bg-card);
458
+ border-radius: 15px;
459
+ overflow: hidden;
460
+ box-shadow: var(--shadow-md);
461
+ transition: var(--transition);
462
+ cursor: pointer;
463
+ }
464
+
465
+ .project-card:hover {
466
+ transform: translateY(-10px) scale(1.02);
467
+ box-shadow: var(--shadow-xl);
468
+ }
469
+
470
+ .project-image {
471
+ width: 100%;
472
+ height: 200px;
473
+ background: var(--gradient);
474
+ position: relative;
475
+ overflow: hidden;
476
+ }
477
+
478
+ .project-image img {
479
+ width: 100%;
480
+ height: 100%;
481
+ object-fit: cover;
482
+ transition: transform 0.5s ease;
483
+ }
484
+
485
+ .project-card:hover .project-image img {
486
+ transform: scale(1.1);
487
+ }
488
+
489
+ .project-overlay {
490
+ position: absolute;
491
+ top: 0;
492
+ left: 0;
493
+ right: 0;
494
+ bottom: 0;
495
+ background: rgba(0, 0, 0, 0.7);
496
+ display: flex;
497
+ align-items: center;
498
+ justify-content: center;
499
+ opacity: 0;
500
+ transition: opacity 0.3s ease;
501
+ }
502
+
503
+ .project-card:hover .project-overlay {
504
+ opacity: 1;
505
+ }
506
+
507
+ .project-links {
508
+ display: flex;
509
+ gap: 1rem;
510
+ }
511
+
512
+ .project-links a {
513
+ width: 40px;
514
+ height: 40px;
515
+ background: white;
516
+ border-radius: 50%;
517
+ display: flex;
518
+ align-items: center;
519
+ justify-content: center;
520
+ color: var(--primary-color);
521
+ text-decoration: none;
522
+ transition: var(--transition);
523
+ }
524
+
525
+ .project-links a:hover {
526
+ transform: scale(1.1);
527
+ background: var(--primary-color);
528
+ color: white;
529
+ }
530
+
531
+ .project-info {
532
+ padding: 1.5rem;
533
+ }
534
+
535
+ .project-title {
536
+ font-size: 1.25rem;
537
+ margin-bottom: 0.5rem;
538
+ color: var(--text-primary);
539
+ }
540
+
541
+ .project-description {
542
+ color: var(--text-secondary);
543
+ margin-bottom: 1rem;
544
+ }
545
+
546
+ .project-tags {
547
+ display: flex;
548
+ flex-wrap: wrap;
549
+ gap: 0.5rem;
550
+ }
551
+
552
+ .tag {
553
+ padding: 0.25rem 0.75rem;
554
+ background: var(--gradient);
555
+ color: white;
556
+ border-radius: 20px;
557
+ font-size: 0.875rem;
558
+ }
559
+
560
+ /* Contact Section */
561
+ .contact {
562
+ background: var(--bg-primary);
563
+ }
564
+
565
+ .contact-container {
566
+ display: grid;
567
+ grid-template-columns: 1fr 1fr;
568
+ gap: 3rem;
569
+ max-width: 1000px;
570
+ margin: 0 auto;
571
+ }
572
+
573
+ .contact-info {
574
+ display: flex;
575
+ flex-direction: column;
576
+ gap: 2rem;
577
+ }
578
+
579
+ .contact-item {
580
+ display: flex;
581
+ align-items: center;
582
+ gap: 1rem;
583
+ }
584
+
585
+ .contact-icon {
586
+ width: 50px;
587
+ height: 50px;
588
+ background: var(--gradient);
589
+ border-radius: 50%;
590
+ display: flex;
591
+ align-items: center;
592
+ justify-content: center;
593
+ color: white;
594
+ font-size: 1.25rem;
595
+ }
596
+
597
+ .contact-form {
598
+ background: var(--bg-card);
599
+ padding: 2rem;
600
+ border-radius: 15px;
601
+ box-shadow: var(--shadow-md);
602
+ }
603
+
604
+ .form-group {
605
+ margin-bottom: 1.5rem;
606
+ }
607
+
608
+ .form-group label {
609
+ display: block;
610
+ margin-bottom: 0.5rem;
611
+ color: var(--text-primary);
612
+ font-weight: 500;
613
+ }
614
+
615
+ .form-group input,
616
+ .form-group textarea {
617
+ width: 100%;
618
+ padding: 0.75rem;
619
+ border: 2px solid var(--border-color);
620
+ border-radius: 10px;
621
+ background: var(--bg-primary);
622
+ color: var(--text-primary);
623
+ font-size: 1rem;
624
+ transition: var(--transition);
625
+ }
626
+
627
+ .form-group input:focus,
628
+ .form-group textarea:focus {
629
+ outline: none;
630
+ border-color: var(--primary-color);
631
+ }
632
+
633
+ .form-group textarea {
634
+ resize: vertical;
635
+ min-height: 120px;
636
+ }
637
+
638
+ /* Footer */
639
+ footer {
640
+ background: var(--bg-primary);
641
+ padding: 2rem 5%;
642
+ text-align: center;
643
+ border-top: 1px solid var(--border-color);
644
+ }
645
+
646
+ .social-links {
647
+ display: flex;
648
+ justify-content: center;
649
+ gap: 1rem;
650
+ margin-bottom: 1rem;
651
+ }
652
+
653
+ .social-links a {
654
+ width: 40px;
655
+ height: 40px;
656
+ background: var(--gradient);
657
+ border-radius: 50%;
658
+ display: flex;
659
+ align-items: center;
660
+ justify-content: center;
661
+ color: white;
662
+ text-decoration: none;
663
+ transition: var(--transition);
664
+ }
665
+
666
+ .social-links a:hover {
667
+ transform: translateY(-3px) rotate(360deg);
668
+ }
669
+
670
+ /* Toast Notification */
671
+ .toast {
672
+ position: fixed;
673
+ bottom: -100px;
674
+ left: 50%;
675
+ transform: translateX(-50%);
676
+ background: var(--gradient);
677
+ color: white;
678
+ padding: 1rem 2rem;
679
+ border-radius: 50px;
680
+ box-shadow: var(--shadow-xl);
681
+ transition: bottom 0.3s ease;
682
+ z-index: 2000;
683
+ }
684
+
685
+ .toast.show {
686
+ bottom: 30px;
687
+ }
688
+
689
+ /* Responsive Design */
690
+ @media (max-width: 768px) {
691
+ .nav-links {
692
+ display: none;
693
+ position: absolute;
694
+ top: 100%;
695
+ left: 0;
696
+ width: 100%;
697
+ background: var(--bg-primary);
698
+ flex-direction: column;
699
+ padding: 1rem;
700
+ box-shadow: var(--shadow-md);
701
+ }
702
+
703
+ .nav-links.active {
704
+ display: flex;
705
+ }
706
+
707
+ .mobile-menu {
708
+ display: flex;
709
+ }
710
+
711
+ .about-content {
712
+ grid-template-columns: 1fr;
713
+ }
714
+
715
+ .contact-container {
716
+ grid-template-columns: 1fr;
717
+ }
718
+
719
+ .hero-buttons {
720
+ flex-direction: column;
721
+ align-items: center;
722
+ }
723
+
724
+ .btn {
725
+ width: 200px;
726
+ }
727
+ }
728
+
729
+ /* Loading Animation */
730
+ .loader {
731
+ position: fixed;
732
+ top: 0;
733
+ left: 0;
734
+ width: 100%;
735
+ height: 100%;
736
+ background: var(--bg-primary);
737
+ display: flex;
738
+ align-items: center;
739
+ justify-content: center;
740
+ z-index: 9999;
741
+ transition: opacity 0.5s ease;
742
+ }
743
+
744
+ .loader.hidden {
745
+ opacity: 0;
746
+ pointer-events: none;
747
+ }
748
+
749
+ .loader-circle {
750
+ width: 50px;
751
+ height: 50px;
752
+ border: 4px solid var(--border-color);
753
+ border-top-color: var(--primary-color);
754
+ border-radius: 50%;
755
+ animation: spin 1s linear infinite;
756
+ }
757
+
758
+ @keyframes spin {
759
+ to { transform: rotate(360deg); }
760
+ }
761
+ </style>
762
+ </head>
763
+ <body>
764
+ <!-- Loading Screen -->
765
+ <div class="loader" id="loader">
766
+ <div class="loader-circle"></div>
767
+ </div>
768
+
769
+ <!-- Header -->
770
+ <header>
771
+ <nav>
772
+ <div class="logo">Portfolio</div>
773
+ <ul class="nav-links" id="navLinks">
774
+ <li><a href="#home">Home</a></li>
775
+ <li><a href="#about">About</a></li>
776
+ <li><a href="#skills">Skills</a></li>
777
+ <li><a href="#projects">Projects</a></li>
778
+ <li><a href="#contact">Contact</a></li>
779
+ <li>
780
+ <button class="theme-toggle" id="themeToggle">
781
+ <i class="fas fa-moon"></i>
782
+ </button>
783
+ </li>
784
+ </ul>
785
+ <button class="mobile-menu" id="mobileMenu">
786
+ <span></span>
787
+ <span></span>
788
+ <span></span>
789
+ </button>
790
+ </nav>
791
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="position: absolute; right: 10px; top: 50px; font-size: 12px; color: var(--text-secondary); text-decoration: none;">Built with anycoder</a>
792
+ </header>
793
+
794
+ <!-- Hero Section -->
795
+ <section class="hero" id="home">
796
+ <div class="hero-bg"></div>
797
+ <div class="particles" id="particles"></div>
798
+ <div class="hero-content">
799
+ <h1>Welcome to My Portfolio</h1>
800
+ <p class="subtitle">Crafting Beautiful Digital Experiences</p>
801
+ <div class="hero-buttons">
802
+ <a href="#projects" class="btn btn-primary">View Projects</a>
803
+ <a href="#contact" class="btn btn-secondary">Get In Touch</a>
804
+ </div>
805
+ </div>
806
+ </section>
807
+
808
+ <!-- About Section -->
809
+ <section class="about" id="about">
810
+ <h2 class="section-title">About Me</h2>
811
+ <div class="about-content">
812
+ <div class="about-image">
813
+ <img src="https://picsum.photos/seed/portfolio/400/400" alt="Profile">
814
+ </div>
815
+ <div class="about-text">
816
+ <h3>Frontend Developer & UI/UX Enthusiast</h3>
817
+ <p style="margin: 1rem 0; color: var(--text-secondary);">
818
+ I'm passionate about creating beautiful, functional, and user-centered digital experiences.
819
+ With expertise in modern web technologies, I bring ideas to life through clean code and
820
+ thoughtful design.
821
+ </p>
822
+ <p style="margin: 1rem 0; color: var(--text-secondary);">
823
+ My journey in web development started with curiosity and has evolved into a career
824
+ driven by innovation and continuous learning. I specialize in building responsive,
825
+ performant applications that delight users.
826
+ </p>
827
+ <div style="margin-top: 2rem;">
828
+ <button class="btn btn-primary" onclick="downloadResume()">Download Resume</button>
829
+ </div>
830
+ </div>
831
+ </div>
832
+ </section>
833
+
834
+ <!-- Skills Section -->
835
+ <section class="skills" id="skills">
836
+ <h2 class="section-title">Technical Skills</h2>
837
+ <div class="skills-grid">
838
+ <div class="skill-card">
839
+ <div class="skill-header">
840
+ <span class="skill-name">HTML/CSS</span>
841
+ <span class="skill-percentage">95%</span>
842
+ </div>
843
+ <div class="skill-bar">
844
+ <div class="skill-progress" style="--skill-level: 95%"></div>
845
+ </div>
846
+ </div>
847
+ <div class="skill-card">
848
+ <div class="skill-header">
849
+ <span class="skill-name">JavaScript</span>
850
+ <span class="skill-percentage">90%</span>
851
+ </div>
852
+ <div class="skill-bar">
853
+ <div class="skill-progress" style="--skill-level: 90%"></div>
854
+ </div>
855
+ </div>
856
+ <div class="skill-card">
857
+ <div class="skill-header">
858
+ <span class="skill-name">React</span>
859
+ <span class="skill-percentage">85%</span>
860
+ </div>
861
+ <div class="skill-bar">
862
+ <div class="skill-progress" style="--skill-level: 85%"></div>
863
+ </div>
864
+ </div>
865
+ <div class="skill-card">
866
+ <div class="skill-header">
867
+ <span class="skill-name">Node.js</span>
868
+ <span class="skill-percentage">80%</span>
869
+ </div>
870
+ <div class="skill-bar">
871
+ <div class="skill-progress" style="--skill-level: 80%"></div>
872
+ </div>
873
+ </div>
874
+ <div class="skill-card">
875
+ <div class="skill-header">
876
+ <span class="skill-name">UI/UX Design</span>
877
+ <span class="skill-percentage">88%</span>
878
+ </div>
879
+ <div class="skill-bar">
880
+ <div class="skill-progress" style="--skill-level: 88%"></div>
881
+ </div>
882
+ </div>
883
+ <div class="skill-card">
884
+ <div class="skill-header">
885
+ <span class="skill-name">Database</span>
886
+ <span class="skill-percentage">75%</span>
887
+ </div>
888
+ <div class="skill-bar">
889
+ <div class="skill-progress" style="--skill-level: 75%"></div>
890
+ </div>
891
+ </div>
892
+ </div>
893
+ </section>
894
+
895
+ <!-- Projects Section -->
896
+ <section class="projects" id="projects">
897
+ <h2 class="section-title">Featured Projects</h2>
898
+ <div class="projects-grid">
899
+ <div class="project-card">
900
+ <div class="project-image">
901
+ <img src="https://picsum.photos/seed/project1/400/200" alt="Project 1">
902
+ <div class="project-overlay">
903
+ <div class="project-links">
904
+ <a href="#"><i class="fas fa-eye"></i></a>
905
+ <a href="#"><i class="fab fa-github"></i></a>
906
+ </div>
907
+ </div>
908
+ </div>
909
+ <div class="project-info">
910
+ <h3 class="project-title">E-Commerce Platform</h3>
911
+ <p class="project-description">A full-stack e-commerce solution with modern UI and seamless shopping experience.</p>
912
+ <div class="project-tags">
913
+ <span class="tag">React</span>
914
+ <span class="tag">Node.js</span>
915
+ <span class="tag">MongoDB</span>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ <div class="project-card">
920
+ <div class="project-image">
921
+ <img src="https://picsum.photos/seed/project2/400/200" alt="Project 2">
922
+ <div class="project-overlay">
923
+ <div class="project-links">
924
+ <a href="#"><i class="fas fa-eye"></i></a>
925
+ <a href="#"><i class="fab fa-github"></i></a>
926
+ </div>
927
+ </div>
928
+ </div>
929
+ <div class="project-info">
930
+ <h3 class="project-title">Task Management App</h3>
931
+ <p class="project-description">Collaborative task management tool with real-time updates and team features.</p>
932
+ <div class="project-tags">
933
+ <span class="tag">Vue.js</span>
934
+ <span class="tag">Firebase</span>
935
+ <span class="tag">Tailwind</span>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ <div class="project-card">
940
+ <div class="project-image">
941
+ <img src="https://picsum.photos/seed/project3/400/200" alt="Project 3">
942
+ <div class="project-overlay">
943
+ <div class="project-links">
944
+ <a href="#"><i class="fas fa-eye"></i></a>
945
+ <a href="#"><i class="fab fa-github"></i></a>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ <div class="project-info">
950
+ <h3 class="project-title">Weather Dashboard</h3>
951
+ <p class="project-description">Beautiful weather application with forecasts, maps, and location-based services.</p>
952
+ <div class="project-tags">
953
+ <span class="tag">JavaScript</span>
954
+ <span class="tag">API</span>
955
+ <span class="tag">CSS3</span>
956
+ </div>
957
+ </div>
958
+ </div>
959
+ </div>
960
+ </section>
961
+
962
+ <!-- Contact Section -->
963
+ <section class="contact" id="contact">
964
+ <h2 class="section-title">Get In Touch</h2>
965
+ <div class="contact-container">
966
+ <div class="contact-info">
967
+ <div class="contact-item">
968
+ <div class="contact-icon">
969
+ <i class="fas fa-envelope"></i>
970
+ </div>
971
+ <div>
972
+ <h4>Email</h4>
973
+ <p style="color: var(--text-secondary);">hello@example.com</p>
974
+ </div>
975
+ </div>
976
+ <div class="contact-item">
977
+ <div class="contact-icon">
978
+ <i class="fas fa-phone"></i>
979
+ </div>
980
+ <div>
981
+ <h4>Phone</h4>
982
+ <p style="color: var(--text-secondary);">+1 (555) 123-4567</p>
983
+ </div>
984
+ </div>
985
+ <div class="contact-item">
986
+ <div class="contact-icon">
987
+ <i class="fas fa-map-marker-alt"></i>
988
+ </div>
989
+ <div>
990
+ <h4>Location</h4>
991
+ <p style="color: var(--text-secondary);">San Francisco, CA</p>
992
+ </div>
993
+ </div>
994
+ </div>
995
+ <form class="contact-form" id="contactForm">
996
+ <div class="form-group">
997
+ <label for="name">Name</label>
998
+ <input type="text" id="name" name="name" required>
999
+ </div>
1000
+ <div class="form-group">
1001
+ <label for="email">Email</label>
1002
+ <input type="email" id="email" name="email" required>
1003
+ </div>
1004
+ <div class="form-group">
1005
+ <label for="message">Message</label>
1006
+ <textarea id="message" name="message" required></textarea>
1007
+ </div>
1008
+ <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
1009
+ </form>
1010
+ </div>
1011
+ </section>
1012
+
1013
+ <!-- Footer -->
1014
+ <footer>
1015
+ <div class="social-links">
1016
+ <a href="#"><i class="fab fa-github"></i></a>
1017
+ <a href="#"><i class="fab fa-linkedin"></i></a>
1018
+ <a href="#"><i class="fab fa-twitter"></i></a>
1019
+ <a href="#"><i class="fab fa-instagram"></i></a>
1020
+ </div>
1021
+ <p style="color: var(--text-secondary);">&copy; 2024 Portfolio. All rights reserved.</p>
1022
+ </footer>
1023
+
1024
+ <!-- Toast Notification -->
1025
+ <div class="toast" id="toast">Message sent successfully!</div>
1026
+
1027
+ <script>
1028
+ // Loader
1029
+ window.addEventListener('load', () => {
1030
+ setTimeout(() => {
1031
+ document.getElementById('loader').classList.add('hidden');
1032
+ }, 1000);
1033
+ });
1034
+
1035
+ // Theme Toggle
1036
+ const themeToggle = document.getElementById('themeToggle');
1037
+ const body = document.body;
1038
+ const icon = themeToggle.querySelector('i');
1039
+
1040
+ // Check for saved theme preference
1041
+ const savedTheme = localStorage.getItem('theme') || 'light';
1042
+ body.setAttribute('data-theme', savedTheme);
1043
+ icon.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
1044
+
1045
+ themeToggle.addEventListener('click', () => {
1046
+ const currentTheme = body.getAttribute('data-theme');
1047
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
1048
+
1049
+ body.setAttribute('data-theme', newTheme);
1050
+ localStorage.setItem('theme', newTheme);
1051
+ icon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
1052
+ });
1053
+
1054
+ // Mobile Menu
1055
+ const mobileMenu = document.getElementById('mobileMenu');
1056
+ const navLinks = document.getElementById('navLinks');
1057
+
1058
+ mobileMenu.addEventListener('click', () => {
1059
+ navLinks.classList.toggle('active');
1060
+ });
1061
+
1062
+ // Close mobile menu when clicking a link
1063
+ navLinks.querySelectorAll('a').forEach(link => {
1064
+ link.addEventListener('click', () => {
1065
+ navLinks.classList.remove('active');
1066
+ });
1067
+ });
1068
+
1069
+ // Particles Animation
1070
+ function createParticles() {
1071
+ const particlesContainer = document.getElementById('particles');
1072
+ const particleCount = 30;
1073
+
1074
+ for (let i = 0; i < particleCount; i++) {
1075
+ const particle = document.createElement('div');
1076
+ particle.className = 'particle';
1077
+ particle.style.left = Math.random() * 100 + '%';
1078
+ particle.style.animationDelay = Math.random() * 20 + 's';
1079
+ particle.style.animationDuration = (Math.random() * 20 + 10) + 's';
1080
+ particlesContainer.appendChild(particle);
1081
+ }
1082
+ }
1083
+ createParticles();
1084
+
1085
+ // Contact Form
1086
+ const contactForm = document.getElementById('contactForm');
1087
+ const toast = document.getElementById('toast');
1088
+
1089
+ contactForm.addEventListener('submit', (e) => {
1090
+ e.preventDefault();
1091
+
1092
+ // Show toast notification
1093
+ toast.classList.add('show');
1094
+
1095
+ // Reset form
1096
+ contactForm.reset();
1097
+
1098
+ // Hide toast after 3 seconds
1099
+ setTimeout(() => {
1100
+ toast.classList.remove('show');
1101
+ }, 3000);
1102
+ });
1103
+
1104
+ // Smooth Scroll with Offset
1105
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1106
+ anchor.addEventListener('click', function (e) {
1107
+ e.preventDefault();
1108
+ const target = document.querySelector(this.getAttribute('href'));
1109
+ if (target) {
1110
+ const headerOffset = 80;
1111
+ const elementPosition = target.getBoundingClientRect().top;
1112
+ const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
1113
+
1114
+ window.scrollTo({
1115
+ top: offsetPosition,
1116
+ behavior: 'smooth'
1117
+ });
1118
+ }
1119
+ });
1120
+ });
1121
+
1122
+ // Scroll Animations
1123
+ const observerOptions = {
1124
+ threshold: 0.1,
1125
+ rootMargin: '0px 0px -100px 0px'
1126
+ };
1127
+
1128
+ const observer = new IntersectionObserver((entries) => {
1129
+ entries.forEach(entry => {
1130
+ if (entry.isIntersecting) {
1131
+ entry.target.style.opacity = '1';
1132
+ entry.target.style.transform = 'translateY(0)';
1133
+ }
1134
+ });
1135
+ }, observerOptions);
1136
+
1137
+ // Observe elements for animation
1138
+ document.querySelectorAll('.skill-card, .project-card, .about-text').forEach(el => {
1139
+ el.style.opacity = '0';
1140
+ el.style.transform = 'translateY(20px)';
1141
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1142
+ observer.observe(el);
1143
+ });
1144
+
1145
+ // Dynamic Header Background on Scroll
1146
+ window.addEventListener('scroll', () => {
1147
+ const header = document.querySelector('header');
1148
+ if (window.scrollY > 100) {
1149
+ header.style.background = 'var(--bg-primary)';
1150
+ header.style.boxShadow = 'var(--shadow-md)';
1151
+ } else {
1152
+ header.style.background = 'var(--bg-primary)';
1153
+ header.style.boxShadow = 'var(--shadow-sm)';
1154
+ }
1155
+ });
1156
+
1157
+ // Download Resume Function
1158
+ function downloadResume() {
1159
+ // Create a dummy resume download
1160
+ const link = document.createElement('a');
1161
+ link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent('This is a sample resume file.');
1162
+ link.download = 'resume.txt';
1163
+ link.click();
1164
+
1165
+ // Show toast
1166
+ toast.textContent = 'Resume downloaded!';
1167
+ toast.classList.add('show');
1168
+ setTimeout(() => {
1169
+ toast.classList.remove('show');
1170
+ }, 3000);
1171
+ }
1172
+
1173
+ // Add hover effect to project cards
1174
+ document.querySelectorAll('.project-card').forEach(card => {
1175
+ card.addEventListener('click', function() {
1176
+ // Simulate project view
1177
+ toast.textContent = 'Opening project details...';
1178
+ toast.classList.add('show');
1179
+ setTimeout(() => {
1180
+ toast.classList.remove('show');
1181
+ }, 2000);
1182
+ });
1183
+ });
1184
+
1185
+ // Typing Effect for Hero Title
1186
+ const heroTitle = document.querySelector('.hero h1');
1187
+ const originalText = heroTitle.textContent;
1188
+ heroTitle.textContent = '';
1189
+ let charIndex = 0;
1190
+
1191
+ function typeWriter() {
1192
+ if (charIndex < originalText.length) {
1193
+ heroTitle.textContent += originalText.charAt(char