Hugging Face's logo

Spaces:
sagar007
/
anycoder-b2033197
Running

App Files Community
sagar007 commited on
Commit
03f023e
·
verified ·
1 Parent(s): 115ff37

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1201 -19
index.html CHANGED
@@ -1,19 +1,1201 @@
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>AI Engineer Portfolio</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary: #00d4ff;
13
+ --secondary: #7b2ff7;
14
+ --accent: #f107a3;
15
+ --dark: #0a0a0f;
16
+ --dark-surface: #12121a;
17
+ --dark-surface-2: #1a1a25;
18
+ --text: #ffffff;
19
+ --text-muted: #8a8a9a;
20
+ --gradient: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
21
+ --glow: 0 0 40px rgba(0, 212, 255, 0.3);
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ scroll-behavior: smooth;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Space Grotesk', sans-serif;
33
+ background: var(--dark);
34
+ color: var(--text);
35
+ overflow-x: hidden;
36
+ line-height: 1.6;
37
+ }
38
+
39
+ /* Custom Scrollbar */
40
+ ::-webkit-scrollbar {
41
+ width: 8px;
42
+ }
43
+
44
+ ::-webkit-scrollbar-track {
45
+ background: var(--dark-surface);
46
+ }
47
+
48
+ ::-webkit-scrollbar-thumb {
49
+ background: var(--gradient);
50
+ border-radius: 4px;
51
+ }
52
+
53
+ /* Navigation */
54
+ nav {
55
+ position: fixed;
56
+ top: 0;
57
+ left: 0;
58
+ right: 0;
59
+ z-index: 1000;
60
+ padding: 1.5rem 5%;
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ background: rgba(10, 10, 15, 0.8);
65
+ backdrop-filter: blur(20px);
66
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ nav.scrolled {
71
+ padding: 1rem 5%;
72
+ background: rgba(10, 10, 15, 0.95);
73
+ }
74
+
75
+ .logo {
76
+ font-size: 1.5rem;
77
+ font-weight: 700;
78
+ background: var(--gradient);
79
+ -webkit-background-clip: text;
80
+ -webkit-text-fill-color: transparent;
81
+ background-clip: text;
82
+ }
83
+
84
+ .nav-links {
85
+ display: flex;
86
+ gap: 2.5rem;
87
+ list-style: none;
88
+ }
89
+
90
+ .nav-links a {
91
+ color: var(--text-muted);
92
+ text-decoration: none;
93
+ font-weight: 500;
94
+ font-size: 0.95rem;
95
+ position: relative;
96
+ transition: color 0.3s ease;
97
+ }
98
+
99
+ .nav-links a::after {
100
+ content: '';
101
+ position: absolute;
102
+ bottom: -5px;
103
+ left: 0;
104
+ width: 0;
105
+ height: 2px;
106
+ background: var(--gradient);
107
+ transition: width 0.3s ease;
108
+ }
109
+
110
+ .nav-links a:hover {
111
+ color: var(--text);
112
+ }
113
+
114
+ .nav-links a:hover::after {
115
+ width: 100%;
116
+ }
117
+
118
+ .menu-toggle {
119
+ display: none;
120
+ flex-direction: column;
121
+ gap: 5px;
122
+ cursor: pointer;
123
+ }
124
+
125
+ .menu-toggle span {
126
+ width: 25px;
127
+ height: 2px;
128
+ background: var(--text);
129
+ transition: all 0.3s ease;
130
+ }
131
+
132
+ /* Hero Section */
133
+ .hero {
134
+ min-height: 100vh;
135
+ display: flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+ padding: 0 5%;
139
+ position: relative;
140
+ overflow: hidden;
141
+ }
142
+
143
+ .hero::before {
144
+ content: '';
145
+ position: absolute;
146
+ top: -50%;
147
+ left: -50%;
148
+ width: 200%;
149
+ height: 200%;
150
+ background:
151
+ radial-gradient(circle at 20% 80%, rgba(123, 47, 247, 0.15) 0%, transparent 50%),
152
+ radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
153
+ radial-gradient(circle at 50% 50%, rgba(241, 7, 163, 0.1) 0%, transparent 50%);
154
+ animation: rotate 20s linear infinite;
155
+ }
156
+
157
+ @keyframes rotate {
158
+ from { transform: rotate(0deg); }
159
+ to { transform: rotate(360deg); }
160
+ }
161
+
162
+ .hero-content {
163
+ text-align: center;
164
+ z-index: 1;
165
+ max-width: 900px;
166
+ }
167
+
168
+ .hero-badge {
169
+ display: inline-block;
170
+ padding: 0.5rem 1.5rem;
171
+ background: rgba(0, 212, 255, 0.1);
172
+ border: 1px solid rgba(0, 212, 255, 0.3);
173
+ border-radius: 50px;
174
+ font-size: 0.875rem;
175
+ color: var(--primary);
176
+ margin-bottom: 1.5rem;
177
+ animation: fadeInUp 0.8s ease forwards;
178
+ opacity: 0;
179
+ }
180
+
181
+ .hero h1 {
182
+ font-size: clamp(2.5rem, 8vw, 5rem);
183
+ font-weight: 700;
184
+ line-height: 1.1;
185
+ margin-bottom: 1.5rem;
186
+ animation: fadeInUp 0.8s ease 0.2s forwards;
187
+ opacity: 0;
188
+ }
189
+
190
+ .hero h1 span {
191
+ background: var(--gradient);
192
+ -webkit-background-clip: text;
193
+ -webkit-text-fill-color: transparent;
194
+ background-clip: text;
195
+ }
196
+
197
+ .hero p {
198
+ font-size: 1.25rem;
199
+ color: var(--text-muted);
200
+ max-width: 600px;
201
+ margin: 0 auto 2.5rem;
202
+ animation: fadeInUp 0.8s ease 0.4s forwards;
203
+ opacity: 0;
204
+ }
205
+
206
+ .hero-buttons {
207
+ display: flex;
208
+ gap: 1rem;
209
+ justify-content: center;
210
+ flex-wrap: wrap;
211
+ animation: fadeInUp 0.8s ease 0.6s forwards;
212
+ opacity: 0;
213
+ }
214
+
215
+ .btn {
216
+ padding: 1rem 2rem;
217
+ border-radius: 50px;
218
+ font-weight: 600;
219
+ font-size: 1rem;
220
+ text-decoration: none;
221
+ transition: all 0.3s ease;
222
+ cursor: pointer;
223
+ border: none;
224
+ }
225
+
226
+ .btn-primary {
227
+ background: var(--gradient);
228
+ color: var(--text);
229
+ box-shadow: var(--glow);
230
+ }
231
+
232
+ .btn-primary:hover {
233
+ transform: translateY(-3px);
234
+ box-shadow: 0 0 60px rgba(0, 212, 255, 0.5);
235
+ }
236
+
237
+ .btn-secondary {
238
+ background: transparent;
239
+ color: var(--text);
240
+ border: 2px solid rgba(255, 255, 255, 0.2);
241
+ }
242
+
243
+ .btn-secondary:hover {
244
+ border-color: var(--primary);
245
+ color: var(--primary);
246
+ }
247
+
248
+ .scroll-indicator {
249
+ position: absolute;
250
+ bottom: 2rem;
251
+ left: 50%;
252
+ transform: translateX(-50%);
253
+ display: flex;
254
+ flex-direction: column;
255
+ align-items: center;
256
+ gap: 0.5rem;
257
+ color: var(--text-muted);
258
+ font-size: 0.75rem;
259
+ animation: bounce 2s infinite;
260
+ }
261
+
262
+ @keyframes bounce {
263
+ 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
264
+ 40% { transform: translateX(-50%) translateY(-10px); }
265
+ 60% { transform: translateX(-50%) translateY(-5px); }
266
+ }
267
+
268
+ @keyframes fadeInUp {
269
+ from {
270
+ opacity: 0;
271
+ transform: translateY(30px);
272
+ }
273
+ to {
274
+ opacity: 1;
275
+ transform: translateY(0);
276
+ }
277
+ }
278
+
279
+ /* Floating Particles */
280
+ .particles {
281
+ position: absolute;
282
+ top: 0;
283
+ left: 0;
284
+ width: 100%;
285
+ height: 100%;
286
+ overflow: hidden;
287
+ z-index: 0;
288
+ }
289
+
290
+ .particle {
291
+ position: absolute;
292
+ width: 4px;
293
+ height: 4px;
294
+ background: var(--primary);
295
+ border-radius: 50%;
296
+ opacity: 0.5;
297
+ animation: float 15s infinite;
298
+ }
299
+
300
+ @keyframes float {
301
+ 0%, 100% {
302
+ transform: translateY(100vh) rotate(0deg);
303
+ opacity: 0;
304
+ }
305
+ 10% {
306
+ opacity: 0.5;
307
+ }
308
+ 90% {
309
+ opacity: 0.5;
310
+ }
311
+ 100% {
312
+ transform: translateY(-100vh) rotate(720deg);
313
+ opacity: 0;
314
+ }
315
+ }
316
+
317
+ /* Section Styles */
318
+ section {
319
+ padding: 6rem 5%;
320
+ }
321
+
322
+ .section-header {
323
+ text-align: center;
324
+ margin-bottom: 4rem;
325
+ }
326
+
327
+ .section-header h2 {
328
+ font-size: clamp(2rem, 5vw, 3rem);
329
+ margin-bottom: 1rem;
330
+ }
331
+
332
+ .section-header p {
333
+ color: var(--text-muted);
334
+ max-width: 600px;
335
+ margin: 0 auto;
336
+ }
337
+
338
+ .gradient-text {
339
+ background: var(--gradient);
340
+ -webkit-background-clip: text;
341
+ -webkit-text-fill-color: transparent;
342
+ background-clip: text;
343
+ }
344
+
345
+ /* About Section */
346
+ .about {
347
+ background: var(--dark-surface);
348
+ }
349
+
350
+ .about-grid {
351
+ display: grid;
352
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
353
+ gap: 3rem;
354
+ max-width: 1200px;
355
+ margin: 0 auto;
356
+ }
357
+
358
+ .about-image {
359
+ position: relative;
360
+ }
361
+
362
+ .about-image-wrapper {
363
+ position: relative;
364
+ border-radius: 20px;
365
+ overflow: hidden;
366
+ aspect-ratio: 1;
367
+ background: var(--gradient);
368
+ padding: 3px;
369
+ }
370
+
371
+ .about-image-inner {
372
+ width: 100%;
373
+ height: 100%;
374
+ background: var(--dark-surface);
375
+ border-radius: 17px;
376
+ display: flex;
377
+ align-items: center;
378
+ justify-content: center;
379
+ font-size: 8rem;
380
+ }
381
+
382
+ .about-image::before {
383
+ content: '';
384
+ position: absolute;
385
+ top: -20px;
386
+ right: -20px;
387
+ width: 100px;
388
+ height: 100px;
389
+ background: var(--gradient);
390
+ border-radius: 50%;
391
+ opacity: 0.3;
392
+ filter: blur(40px);
393
+ }
394
+
395
+ .about-content h3 {
396
+ font-size: 1.75rem;
397
+ margin-bottom: 1rem;
398
+ }
399
+
400
+ .about-content p {
401
+ color: var(--text-muted);
402
+ margin-bottom: 2rem;
403
+ }
404
+
405
+ .stats {
406
+ display: grid;
407
+ grid-template-columns: repeat(3, 1fr);
408
+ gap: 1.5rem;
409
+ }
410
+
411
+ .stat {
412
+ text-align: center;
413
+ padding: 1.5rem;
414
+ background: var(--dark-surface-2);
415
+ border-radius: 15px;
416
+ border: 1px solid rgba(255, 255, 255, 0.05);
417
+ }
418
+
419
+ .stat-number {
420
+ font-size: 2rem;
421
+ font-weight: 700;
422
+ background: var(--gradient);
423
+ -webkit-background-clip: text;
424
+ -webkit-text-fill-color: transparent;
425
+ background-clip: text;
426
+ }
427
+
428
+ .stat-label {
429
+ font-size: 0.875rem;
430
+ color: var(--text-muted);
431
+ }
432
+
433
+ /* Skills Section */
434
+ .skills-container {
435
+ max-width: 1200px;
436
+ margin: 0 auto;
437
+ }
438
+
439
+ .skills-grid {
440
+ display: grid;
441
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
442
+ gap: 2rem;
443
+ }
444
+
445
+ .skill-category {
446
+ background: var(--dark-surface);
447
+ border-radius: 20px;
448
+ padding: 2rem;
449
+ border: 1px solid rgba(255, 255, 255, 0.05);
450
+ transition: all 0.3s ease;
451
+ }
452
+
453
+ .skill-category:hover {
454
+ transform: translateY(-5px);
455
+ border-color: rgba(0, 212, 255, 0.3);
456
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
457
+ }
458
+
459
+ .skill-icon {
460
+ width: 50px;
461
+ height: 50px;
462
+ background: var(--gradient);
463
+ border-radius: 12px;
464
+ display: flex;
465
+ align-items: center;
466
+ justify-content: center;
467
+ font-size: 1.5rem;
468
+ margin-bottom: 1.5rem;
469
+ }
470
+
471
+ .skill-category h3 {
472
+ font-size: 1.25rem;
473
+ margin-bottom: 1rem;
474
+ }
475
+
476
+ .skill-tags {
477
+ display: flex;
478
+ flex-wrap: wrap;
479
+ gap: 0.5rem;
480
+ }
481
+
482
+ .skill-tag {
483
+ padding: 0.5rem 1rem;
484
+ background: var(--dark-surface-2);
485
+ border-radius: 50px;
486
+ font-size: 0.875rem;
487
+ color: var(--text-muted);
488
+ border: 1px solid rgba(255, 255, 255, 0.05);
489
+ transition: all 0.3s ease;
490
+ font-family: 'JetBrains Mono', monospace;
491
+ }
492
+
493
+ .skill-tag:hover {
494
+ border-color: var(--primary);
495
+ color: var(--primary);
496
+ }
497
+
498
+ /* Projects Section */
499
+ .projects {
500
+ background: var(--dark-surface);
501
+ }
502
+
503
+ .projects-grid {
504
+ display: grid;
505
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
506
+ gap: 2rem;
507
+ max-width: 1200px;
508
+ margin: 0 auto;
509
+ }
510
+
511
+ .project-card {
512
+ background: var(--dark-surface-2);
513
+ border-radius: 20px;
514
+ overflow: hidden;
515
+ border: 1px solid rgba(255, 255, 255, 0.05);
516
+ transition: all 0.4s ease;
517
+ }
518
+
519
+ .project-card:hover {
520
+ transform: translateY(-10px);
521
+ box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
522
+ border-color: rgba(0, 212, 255, 0.3);
523
+ }
524
+
525
+ .project-image {
526
+ height: 200px;
527
+ background: var(--gradient);
528
+ position: relative;
529
+ overflow: hidden;
530
+ }
531
+
532
+ .project-image::before {
533
+ content: '';
534
+ position: absolute;
535
+ top: 0;
536
+ left: 0;
537
+ right: 0;
538
+ bottom: 0;
539
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
540
+ }
541
+
542
+ .project-content {
543
+ padding: 2rem;
544
+ }
545
+
546
+ .project-tags {
547
+ display: flex;
548
+ flex-wrap: wrap;
549
+ gap: 0.5rem;
550
+ margin-bottom: 1rem;
551
+ }
552
+
553
+ .project-tag {
554
+ padding: 0.25rem 0.75rem;
555
+ background: rgba(0, 212, 255, 0.1);
556
+ border-radius: 50px;
557
+ font-size: 0.75rem;
558
+ color: var(--primary);
559
+ font-family: 'JetBrains Mono', monospace;
560
+ }
561
+
562
+ .project-content h3 {
563
+ font-size: 1.5rem;
564
+ margin-bottom: 0.75rem;
565
+ }
566
+
567
+ .project-content p {
568
+ color: var(--text-muted);
569
+ margin-bottom: 1.5rem;
570
+ font-size: 0.95rem;
571
+ }
572
+
573
+ .project-links {
574
+ display: flex;
575
+ gap: 1rem;
576
+ }
577
+
578
+ .project-link {
579
+ color: var(--text-muted);
580
+ text-decoration: none;
581
+ font-size: 0.875rem;
582
+ display: flex;
583
+ align-items: center;
584
+ gap: 0.5rem;
585
+ transition: color 0.3s ease;
586
+ }
587
+
588
+ .project-link:hover {
589
+ color: var(--primary);
590
+ }
591
+
592
+ /* Experience Section */
593
+ .timeline {
594
+ max-width: 800px;
595
+ margin: 0 auto;
596
+ position: relative;
597
+ }
598
+
599
+ .timeline::before {
600
+ content: '';
601
+ position: absolute;
602
+ left: 50%;
603
+ transform: translateX(-50%);
604
+ width: 2px;
605
+ height: 100%;
606
+ background: linear-gradient(to bottom, var(--primary), var(--secondary), var(--accent));
607
+ }
608
+
609
+ .timeline-item {
610
+ display: flex;
611
+ justify-content: flex-end;
612
+ padding-right: calc(50% + 30px);
613
+ position: relative;
614
+ margin-bottom: 3rem;
615
+ }
616
+
617
+ .timeline-item:nth-child(even) {
618
+ justify-content: flex-start;
619
+ padding-right: 0;
620
+ padding-left: calc(50% + 30px);
621
+ }
622
+
623
+ .timeline-dot {
624
+ position: absolute;
625
+ left: 50%;
626
+ transform: translateX(-50%);
627
+ width: 16px;
628
+ height: 16px;
629
+ background: var(--primary);
630
+ border-radius: 50%;
631
+ border: 3px solid var(--dark);
632
+ box-shadow: 0 0 20px var(--primary);
633
+ }
634
+
635
+ .timeline-content {
636
+ background: var(--dark-surface);
637
+ padding: 2rem;
638
+ border-radius: 15px;
639
+ border: 1px solid rgba(255, 255, 255, 0.05);
640
+ max-width: 350px;
641
+ transition: all 0.3s ease;
642
+ }
643
+
644
+ .timeline-content:hover {
645
+ border-color: rgba(0, 212, 255, 0.3);
646
+ transform: scale(1.02);
647
+ }
648
+
649
+ .timeline-date {
650
+ color: var(--primary);
651
+ font-size: 0.875rem;
652
+ font-family: 'JetBrains Mono', monospace;
653
+ margin-bottom: 0.5rem;
654
+ }
655
+
656
+ .timeline-content h3 {
657
+ font-size: 1.25rem;
658
+ margin-bottom: 0.5rem;
659
+ }
660
+
661
+ .timeline-content h4 {
662
+ color: var(--text-muted);
663
+ font-size: 0.95rem;
664
+ margin-bottom: 1rem;
665
+ }
666
+
667
+ .timeline-content p {
668
+ color: var(--text-muted);
669
+ font-size: 0.9rem;
670
+ }
671
+
672
+ /* Contact Section */
673
+ .contact {
674
+ background: var(--dark-surface);
675
+ }
676
+
677
+ .contact-container {
678
+ max-width: 600px;
679
+ margin: 0 auto;
680
+ text-align: center;
681
+ }
682
+
683
+ .contact h2 {
684
+ margin-bottom: 1rem;
685
+ }
686
+
687
+ .contact p {
688
+ color: var(--text-muted);
689
+ margin-bottom: 2rem;
690
+ }
691
+
692
+ .contact-form {
693
+ display: flex;
694
+ flex-direction: column;
695
+ gap: 1.5rem;
696
+ }
697
+
698
+ .form-group {
699
+ position: relative;
700
+ }
701
+
702
+ .form-group input,
703
+ .form-group textarea {
704
+ width: 100%;
705
+ padding: 1.25rem;
706
+ background: var(--dark-surface-2);
707
+ border: 2px solid rgba(255, 255, 255, 0.05);
708
+ border-radius: 12px;
709
+ color: var(--text);
710
+ font-family: 'Space Grotesk', sans-serif;
711
+ font-size: 1rem;
712
+ transition: all 0.3s ease;
713
+ }
714
+
715
+ .form-group input:focus,
716
+ .form-group textarea:focus {
717
+ outline: none;
718
+ border-color: var(--primary);
719
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
720
+ }
721
+
722
+ .form-group textarea {
723
+ min-height: 150px;
724
+ resize: vertical;
725
+ }
726
+
727
+ .form-group input::placeholder,
728
+ .form-group textarea::placeholder {
729
+ color: var(--text-muted);
730
+ }
731
+
732
+ .social-links {
733
+ display: flex;
734
+ justify-content: center;
735
+ gap: 1.5rem;
736
+ margin-top: 3rem;
737
+ }
738
+
739
+ .social-link {
740
+ width: 50px;
741
+ height: 50px;
742
+ background: var(--dark-surface-2);
743
+ border-radius: 50%;
744
+ display: flex;
745
+ align-items: center;
746
+ justify-content: center;
747
+ font-size: 1.25rem;
748
+ color: var(--text-muted);
749
+ text-decoration: none;
750
+ border: 1px solid rgba(255, 255, 255, 0.05);
751
+ transition: all 0.3s ease;
752
+ }
753
+
754
+ .social-link:hover {
755
+ background: var(--gradient);
756
+ color: var(--text);
757
+ transform: translateY(-5px);
758
+ border-color: transparent;
759
+ }
760
+
761
+ /* Footer */
762
+ footer {
763
+ padding: 2rem 5%;
764
+ text-align: center;
765
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
766
+ }
767
+
768
+ footer p {
769
+ color: var(--text-muted);
770
+ font-size: 0.875rem;
771
+ }
772
+
773
+ footer a {
774
+ color: var(--primary);
775
+ text-decoration: none;
776
+ }
777
+
778
+ /* Mobile Menu */
779
+ .mobile-menu {
780
+ display: none;
781
+ position: fixed;
782
+ top: 0;
783
+ left: 0;
784
+ right: 0;
785
+ bottom: 0;
786
+ background: var(--dark);
787
+ z-index: 999;
788
+ flex-direction: column;
789
+ align-items: center;
790
+ justify-content: center;
791
+ gap: 2rem;
792
+ opacity: 0;
793
+ pointer-events: none;
794
+ transition: opacity 0.3s ease;
795
+ }
796
+
797
+ .mobile-menu.active {
798
+ opacity: 1;
799
+ pointer-events: all;
800
+ }
801
+
802
+ .mobile-menu a {
803
+ color: var(--text);
804
+ text-decoration: none;
805
+ font-size: 1.5rem;
806
+ font-weight: 600;
807
+ }
808
+
809
+ .close-menu {
810
+ position: absolute;
811
+ top: 2rem;
812
+ right: 2rem;
813
+ font-size: 2rem;
814
+ color: var(--text);
815
+ cursor: pointer;
816
+ }
817
+
818
+ /* Responsive */
819
+ @media (max-width: 768px) {
820
+ .nav-links {
821
+ display: none;
822
+ }
823
+
824
+ .menu-toggle {
825
+ display: flex;
826
+ }
827
+
828
+ .mobile-menu {
829
+ display: flex;
830
+ }
831
+
832
+ .timeline::before {
833
+ left: 20px;
834
+ }
835
+
836
+ .timeline-item,
837
+ .timeline-item:nth-child(even) {
838
+ padding-left: 60px;
839
+ padding-right: 0;
840
+ justify-content: flex-start;
841
+ }
842
+
843
+ .timeline-dot {
844
+ left: 20px;
845
+ }
846
+
847
+ .timeline-content {
848
+ max-width: 100%;
849
+ }
850
+
851
+ .stats {
852
+ grid-template-columns: 1fr;
853
+ }
854
+
855
+ .hero h1 {
856
+ font-size: 2.5rem;
857
+ }
858
+
859
+ .about-grid {
860
+ grid-template-columns: 1fr;
861
+ }
862
+
863
+ .about-image {
864
+ max-width: 300px;
865
+ margin: 0 auto;
866
+ }
867
+ }
868
+
869
+ /* AI Animation Background */
870
+ .ai-bg {
871
+ position: fixed;
872
+ top: 0;
873
+ left: 0;
874
+ width: 100%;
875
+ height: 100%;
876
+ pointer-events: none;
877
+ z-index: -1;
878
+ opacity: 0.5;
879
+ }
880
+
881
+ .ai-network {
882
+ width: 100%;
883
+ height: 100%;
884
+ }
885
+
886
+ /* Terminal Effect */
887
+ .terminal {
888
+ background: var(--dark-surface);
889
+ border-radius: 15px;
890
+ overflow: hidden;
891
+ border: 1px solid rgba(255, 255, 255, 0.1);
892
+ font-family: 'JetBrains Mono', monospace;
893
+ margin-top: 2rem;
894
+ }
895
+
896
+ .terminal-header {
897
+ background: var(--dark);
898
+ padding: 0.75rem 1rem;
899
+ display: flex;
900
+ gap: 0.5rem;
901
+ }
902
+
903
+ .terminal-dot {
904
+ width: 12px;
905
+ height: 12px;
906
+ border-radius: 50%;
907
+ }
908
+
909
+ .terminal-dot.red { background: #ff5f56; }
910
+ .terminal-dot.yellow { background: #ffbd2e; }
911
+ .terminal-dot.green { background: #27c93f; }
912
+
913
+ .terminal-body {
914
+ padding: 1.5rem;
915
+ font-size: 0.875rem;
916
+ }
917
+
918
+ .terminal-line {
919
+ margin-bottom: 0.5rem;
920
+ display: flex;
921
+ gap: 0.5rem;
922
+ }
923
+
924
+ .terminal-prompt {
925
+ color: var(--primary);
926
+ }
927
+
928
+ .terminal-command {
929
+ color: var(--text);
930
+ }
931
+
932
+ .terminal-output {
933
+ color: var(--text-muted);
934
+ margin-left: 1rem;
935
+ }
936
+
937
+ .typing-cursor {
938
+ display: inline-block;
939
+ width: 8px;
940
+ height: 16px;
941
+ background: var(--primary);
942
+ animation: blink 1s infinite;
943
+ }
944
+
945
+ @keyframes blink {
946
+ 0%, 50% { opacity: 1; }
947
+ 51%, 100% { opacity: 0; }
948
+ }
949
+ </style>
950
+ </head>
951
+ <body>
952
+ <!-- AI Network Background -->
953
+ <canvas class="ai-bg" id="aiCanvas"></canvas>
954
+
955
+ <!-- Navigation -->
956
+ <nav id="navbar">
957
+ <div class="logo">&lt;AI Engineer /&gt;</div>
958
+ <ul class="nav-links">
959
+ <li><a href="#about">About</a></li>
960
+ <li><a href="#skills">Skills</a></li>
961
+ <li><a href="#projects">Projects</a></li>
962
+ <li><a href="#experience">Experience</a></li>
963
+ <li><a href="#contact">Contact</a></li>
964
+ </ul>
965
+ <div class="menu-toggle" id="menuToggle">
966
+ <span></span>
967
+ <span></span>
968
+ <span></span>
969
+ </div>
970
+ </nav>
971
+
972
+ <!-- Mobile Menu -->
973
+ <div class="mobile-menu" id="mobileMenu">
974
+ <span class="close-menu" id="closeMenu">&times;</span>
975
+ <a href="#about">About</a>
976
+ <a href="#skills">Skills</a>
977
+ <a href="#projects">Projects</a>
978
+ <a href="#experience">Experience</a>
979
+ <a href="#contact">Contact</a>
980
+ </div>
981
+
982
+ <!-- Hero Section -->
983
+ <section class="hero" id="home">
984
+ <div class="particles" id="particles"></div>
985
+ <div class="hero-content">
986
+ <div class="hero-badge">🤖 Available for AI Projects</div>
987
+ <h1>Building the <span>Future</span> with <span>Artificial Intelligence</span></h1>
988
+ <p>I'm an AI Engineer specializing in Machine Learning, Deep Learning, and Intelligent Systems. I transform complex data into intelligent solutions.</p>
989
+ <div class="hero-buttons">
990
+ <a href="#projects" class="btn btn-primary">View My Work</a>
991
+ <a href="#contact" class="btn btn-secondary">Get In Touch</a>
992
+ </div>
993
+ </div>
994
+ <div class="scroll-indicator">
995
+ <span>Scroll Down</span>
996
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
997
+ <path d="M12 5v14M19 12l-7 7-7-7"/>
998
+ </svg>
999
+ </div>
1000
+ </section>
1001
+
1002
+ <!-- About Section -->
1003
+ <section class="about" id="about">
1004
+ <div class="section-header">
1005
+ <h2>About <span class="gradient-text">Me</span></h2>
1006
+ <p>Passionate about creating intelligent systems that solve real-world problems</p>
1007
+ </div>
1008
+ <div class="about-grid">
1009
+ <div class="about-image">
1010
+ <div class="about-image-wrapper">
1011
+ <div class="about-image-inner">🧠</div>
1012
+ </div>
1013
+ </div>
1014
+ <div class="about-content">
1015
+ <h3>AI Engineer & Machine Learning Specialist</h3>
1016
+ <p>With over 5 years of experience in artificial intelligence, I specialize in developing cutting-edge ML models, neural networks, and AI-driven solutions. From natural language processing to computer vision, I build systems that learn and adapt.</p>
1017
+
1018
+ <div class="terminal">
1019
+ <div class="terminal-header">
1020
+ <span class="terminal-dot red"></span>
1021
+ <span class="terminal-dot yellow"></span>
1022
+ <span class="terminal-dot green"></span>
1023
+ </div>
1024
+ <div class="terminal-body">
1025
+ <div class="terminal-line">
1026
+ <span class="terminal-prompt">➜</span>
1027
+ <span class="terminal-command">python ai_engineer.py --profile</span>
1028
+ </div>
1029
+ <div class="terminal-line">
1030
+ <span class="terminal-output">✓ Machine Learning Expert</span>
1031
+ </div>
1032
+ <div class="terminal-line">
1033
+ <span class="terminal-output">✓ Deep Learning Specialist</span>
1034
+ </div>
1035
+ <div class="terminal-line">
1036
+ <span class="terminal-output">✓ NLP & Computer Vision</span>
1037
+ </div>
1038
+ <div class="terminal-line">
1039
+ <span class="terminal-output">✓ MLOps & Deployment</span>
1040
+ <span class="typing-cursor"></span>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+
1045
+ <div class="stats">
1046
+ <div class="stat">
1047
+ <div class="stat-number">50+</div>
1048
+ <div class="stat-label">Projects</div>
1049
+ </div>
1050
+ <div class="stat">
1051
+ <div class="stat-number">5+</div>
1052
+ <div class="stat-label">Years Exp.</div>
1053
+ </div>
1054
+ <div class="stat">
1055
+ <div class="stat-number">30+</div>
1056
+ <div class="stat-label">Clients</div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+ </section>
1062
+
1063
+ <!-- Skills Section -->
1064
+ <section id="skills">
1065
+ <div class="section-header">
1066
+ <h2>Technical <span class="gradient-text">Skills</span></h2>
1067
+ <p>Tools and technologies I use to bring AI solutions to life</p>
1068
+ </div>
1069
+ <div class="skills-container">
1070
+ <div class="skills-grid">
1071
+ <div class="skill-category">
1072
+ <div class="skill-icon">🧠</div>
1073
+ <h3>Machine Learning</h3>
1074
+ <div class="skill-tags">
1075
+ <span class="skill-tag">Python</span>
1076
+ <span class="skill-tag">TensorFlow</span>
1077
+ <span class="skill-tag">PyTorch</span>
1078
+ <span class="skill-tag">Scikit-learn</span>
1079
+ <span class="skill-tag">XGBoost</span>
1080
+ </div>
1081
+ </div>
1082
+ <div class="skill-category">
1083
+ <div class="skill-icon">🔮</div>
1084
+ <h3>Deep Learning</h3>
1085
+ <div class="skill-tags">
1086
+ <span class="skill-tag">Neural Networks</span>
1087
+ <span class="skill-tag">CNN</span>
1088
+ <span class="skill-tag">RNN/LSTM</span>
1089
+ <span class="skill-tag">Transformers</span>
1090
+ <span class="skill-tag">GANs</span>
1091
+ </div>
1092
+ </div>
1093
+ <div class="skill-category">
1094
+ <div class="skill-icon">📝</div>
1095
+ <h3>NLP</h3>
1096
+ <div class="skill-tags">
1097
+ <span class="skill-tag">BERT</span>
1098
+ <span class="skill-tag">GPT</span>
1099
+ <span class="skill-tag">NLTK</span>
1100
+ <span class="skill-tag">SpaCy</span>
1101
+ <span class="skill-tag">Hugging Face</span>
1102
+ </div>
1103
+ </div>
1104
+ <div class="skill-category">
1105
+ <div class="skill-icon">👁️</div>
1106
+ <h3>Computer Vision</h3>
1107
+ <div class="skill-tags">
1108
+ <span class="skill-tag">OpenCV</span>
1109
+ <span class="skill-tag">YOLO</span>
1110
+ <span class="skill-tag">ResNet</span>
1111
+ <span class="skill-tag">ImageAI</span>
1112
+ <span class="skill-tag">MediaPipe</span>
1113
+ </div>
1114
+ </div>
1115
+ <div class="skill-category">
1116
+ <div class="skill-icon">☁️</div>
1117
+ <h3>MLOps & Cloud</h3>
1118
+ <div class="skill-tags">
1119
+ <span class="skill-tag">AWS</span>
1120
+ <span class="skill-tag">GCP</span>
1121
+ <span class="skill-tag">Docker</span>
1122
+ <span class="skill-tag">Kubernetes</span>
1123
+ <span class="skill-tag">MLflow</span>
1124
+ </div>
1125
+ </div>
1126
+ <div class="skill-category">
1127
+ <div class="skill-icon">🗄️</div>
1128
+ <h3>Data Engineering</h3>
1129
+ <div class="skill-tags">
1130
+ <span class="skill-tag">SQL</span>
1131
+ <span class="skill-tag">Spark</span>
1132
+ <span class="skill-tag">Pandas</span>
1133
+ <span class="skill-tag">Kafka</span>
1134
+ <span class="skill-tag">Airflow</span>
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+ </div>
1139
+ </section>
1140
+
1141
+ <!-- Projects Section -->
1142
+ <section class="projects" id="projects">
1143
+ <div class="section-header">
1144
+ <h2>Featured <span class="gradient-text">Projects</span></h2>
1145
+ <p>Showcasing some of my recent AI and machine learning projects</p>
1146
+ </div>
1147
+ <div class="projects-grid">
1148
+ <div class="project-card">
1149
+ <div class="project-image"></div>
1150
+ <div class="project-content">
1151
+ <div class="project-tags">
1152
+ <span class="project-tag">NLP</span>
1153
+ <span class="project-tag">Transformers</span>
1154
+ </div>
1155
+ <h3>AI Chatbot with LLM</h3>
1156
+ <p>Advanced conversational AI powered by Large Language Models with custom fine-tuning for domain-specific responses.</p>
1157
+ <div class="project-links">
1158
+ <a href="#" class="project-link">
1159
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
1160
+ Code
1161
+ </a>
1162
+ <a href="#" class="project-link">
1163
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
1164
+ Demo
1165
+ </a>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+ <div class="project-card">
1170
+ <div class="project-image"></div>
1171
+ <div class="project-content">
1172
+ <div class="project-tags">
1173
+ <span class="project-tag">Computer Vision</span>
1174
+ <span class="project-tag">YOLO</span>
1175
+ </div>
1176
+ <h3>Real-time Object Detection</h3>
1177
+ <p>High-performance object detection system using YOLOv8 for real-time video analysis with 95%+ accuracy.</p>
1178
+ <div class="project-links">
1179
+ <a href="#" class="project-link">
1180
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
1181
+ Code
1182
+ </a>
1183
+ <a href="#" class="project-link">
1184
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
1185
+ Demo
1186
+ </a>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+ <div class="project-card">
1191
+ <div class="project-image"></div>
1192
+ <div class="project-content">
1193
+ <div class="project-tags">
1194
+ <span class="project-tag">Deep Learning</span>
1195
+ <span class="project-tag">GANs</span>
1196
+ </div>
1197
+ <h3>AI Image Generator</h3>
1198
+ <p>Creative AI system using Generative Adversarial Networks to create realistic images from text descriptions.</p>
1199
+ <div class="project-links">
1200
+ <a href="#" class="project-link">
1201
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2