Hugging Face's logo

Spaces:
Ntecdeve
/
anycoder-4c27738b
Running

App Files Community
Ntecdeve commited on
Commit
5b547de
·
verified ·
1 Parent(s): fdda32b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1366 -19
index.html CHANGED
@@ -1,19 +1,1366 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Portfólio Moderno</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
8
+ <style>
9
+ /* CSS Variables */
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #ec4899;
14
+ --dark: #0f172a;
15
+ --dark-light: #1e293b;
16
+ --light: #f8fafc;
17
+ --gray: #94a3b8;
18
+ --gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
19
+ --gradient-hover: linear-gradient(135deg, #4f46e5 0%, #db2777 100%);
20
+ --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
21
+ --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.15);
22
+ --radius: 16px;
23
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ /* Reset & Base */
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ html {
34
+ scroll-behavior: smooth;
35
+ }
36
+
37
+ body {
38
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
39
+ background: var(--light);
40
+ color: var(--dark);
41
+ line-height: 1.6;
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ a {
46
+ text-decoration: none;
47
+ color: inherit;
48
+ }
49
+
50
+ ul {
51
+ list-style: none;
52
+ }
53
+
54
+ /* Custom Scrollbar */
55
+ ::-webkit-scrollbar {
56
+ width: 10px;
57
+ }
58
+
59
+ ::-webkit-scrollbar-track {
60
+ background: var(--light);
61
+ }
62
+
63
+ ::-webkit-scrollbar-thumb {
64
+ background: var(--primary);
65
+ border-radius: 5px;
66
+ }
67
+
68
+ ::-webkit-scrollbar-thumb:hover {
69
+ background: var(--primary-dark);
70
+ }
71
+
72
+ /* Header */
73
+ header {
74
+ position: fixed;
75
+ top: 0;
76
+ left: 0;
77
+ right: 0;
78
+ z-index: 1000;
79
+ padding: 1rem 5%;
80
+ display: flex;
81
+ justify-content: space-between;
82
+ align-items: center;
83
+ background: rgba(255, 255, 255, 0.95);
84
+ backdrop-filter: blur(10px);
85
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
86
+ transition: var(--transition);
87
+ }
88
+
89
+ header.scrolled {
90
+ padding: 0.7rem 5%;
91
+ box-shadow: var(--shadow);
92
+ }
93
+
94
+ .logo {
95
+ font-size: 1.8rem;
96
+ font-weight: 800;
97
+ background: var(--gradient);
98
+ -webkit-background-clip: text;
99
+ -webkit-text-fill-color: transparent;
100
+ background-clip: text;
101
+ }
102
+
103
+ .nav-links {
104
+ display: flex;
105
+ gap: 2rem;
106
+ }
107
+
108
+ .nav-links a {
109
+ font-weight: 500;
110
+ color: var(--dark);
111
+ position: relative;
112
+ padding: 0.5rem 0;
113
+ transition: var(--transition);
114
+ }
115
+
116
+ .nav-links a::after {
117
+ content: '';
118
+ position: absolute;
119
+ bottom: 0;
120
+ left: 0;
121
+ width: 0;
122
+ height: 2px;
123
+ background: var(--gradient);
124
+ transition: var(--transition);
125
+ }
126
+
127
+ .nav-links a:hover::after {
128
+ width: 100%;
129
+ }
130
+
131
+ .nav-links a:hover {
132
+ color: var(--primary);
133
+ }
134
+
135
+ .menu-toggle {
136
+ display: none;
137
+ flex-direction: column;
138
+ gap: 5px;
139
+ cursor: pointer;
140
+ padding: 5px;
141
+ }
142
+
143
+ .menu-toggle span {
144
+ width: 25px;
145
+ height: 3px;
146
+ background: var(--dark);
147
+ border-radius: 3px;
148
+ transition: var(--transition);
149
+ }
150
+
151
+ /* Hero Section */
152
+ .hero {
153
+ min-height: 100vh;
154
+ display: flex;
155
+ align-items: center;
156
+ padding: 6rem 5% 4rem;
157
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
158
+ position: relative;
159
+ overflow: hidden;
160
+ }
161
+
162
+ .hero::before {
163
+ content: '';
164
+ position: absolute;
165
+ top: -50%;
166
+ right: -20%;
167
+ width: 80%;
168
+ height: 150%;
169
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
170
+ animation: float 6s ease-in-out infinite;
171
+ }
172
+
173
+ @keyframes float {
174
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
175
+ 50% { transform: translateY(-30px) rotate(5deg); }
176
+ }
177
+
178
+ .hero-content {
179
+ display: grid;
180
+ grid-template-columns: 1fr 1fr;
181
+ gap: 4rem;
182
+ align-items: center;
183
+ max-width: 1400px;
184
+ margin: 0 auto;
185
+ width: 100%;
186
+ }
187
+
188
+ .hero-text h3 {
189
+ font-size: 1.2rem;
190
+ color: var(--primary);
191
+ margin-bottom: 1rem;
192
+ font-weight: 600;
193
+ }
194
+
195
+ .hero-text h1 {
196
+ font-size: 3.5rem;
197
+ font-weight: 800;
198
+ line-height: 1.2;
199
+ margin-bottom: 1.5rem;
200
+ color: var(--dark);
201
+ }
202
+
203
+ .hero-text h1 span {
204
+ background: var(--gradient);
205
+ -webkit-background-clip: text;
206
+ -webkit-text-fill-color: transparent;
207
+ background-clip: text;
208
+ }
209
+
210
+ .hero-text p {
211
+ font-size: 1.1rem;
212
+ color: var(--gray);
213
+ margin-bottom: 2rem;
214
+ max-width: 500px;
215
+ }
216
+
217
+ .hero-buttons {
218
+ display: flex;
219
+ gap: 1rem;
220
+ flex-wrap: wrap;
221
+ }
222
+
223
+ .btn {
224
+ padding: 1rem 2rem;
225
+ border-radius: 50px;
226
+ font-weight: 600;
227
+ font-size: 1rem;
228
+ cursor: pointer;
229
+ transition: var(--transition);
230
+ border: none;
231
+ display: inline-flex;
232
+ align-items: center;
233
+ gap: 0.5rem;
234
+ }
235
+
236
+ .btn-primary {
237
+ background: var(--gradient);
238
+ color: white;
239
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
240
+ }
241
+
242
+ .btn-primary:hover {
243
+ transform: translateY(-3px);
244
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
245
+ }
246
+
247
+ .btn-secondary {
248
+ background: transparent;
249
+ color: var(--dark);
250
+ border: 2px solid var(--dark);
251
+ }
252
+
253
+ .btn-secondary:hover {
254
+ background: var(--dark);
255
+ color: white;
256
+ }
257
+
258
+ .hero-image {
259
+ position: relative;
260
+ display: flex;
261
+ justify-content: center;
262
+ align-items: center;
263
+ }
264
+
265
+ .hero-image-wrapper {
266
+ width: 400px;
267
+ height: 400px;
268
+ position: relative;
269
+ }
270
+
271
+ .hero-image-wrapper::before {
272
+ content: '';
273
+ position: absolute;
274
+ top: 20px;
275
+ left: 20px;
276
+ right: 20px;
277
+ bottom: 20px;
278
+ border: 3px solid var(--primary);
279
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
280
+ animation: morph 8s ease-in-out infinite;
281
+ }
282
+
283
+ @keyframes morph {
284
+ 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
285
+ 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
286
+ 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
287
+ 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
288
+ }
289
+
290
+ .hero-image-placeholder {
291
+ width: 100%;
292
+ height: 100%;
293
+ background: var(--gradient);
294
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
295
+ display: flex;
296
+ align-items: center;
297
+ justify-content: center;
298
+ font-size: 8rem;
299
+ color: white;
300
+ animation: morph 8s ease-in-out infinite;
301
+ box-shadow: var(--shadow);
302
+ }
303
+
304
+ .floating-cards {
305
+ position: absolute;
306
+ width: 100%;
307
+ height: 100%;
308
+ }
309
+
310
+ .floating-card {
311
+ position: absolute;
312
+ background: white;
313
+ padding: 1rem;
314
+ border-radius: 12px;
315
+ box-shadow: var(--shadow);
316
+ display: flex;
317
+ align-items: center;
318
+ gap: 0.8rem;
319
+ animation: floatCard 4s ease-in-out infinite;
320
+ }
321
+
322
+ .floating-card:nth-child(1) {
323
+ top: 10%;
324
+ right: -10%;
325
+ animation-delay: 0s;
326
+ }
327
+
328
+ .floating-card:nth-child(2) {
329
+ bottom: 20%;
330
+ left: -10%;
331
+ animation-delay: 1s;
332
+ }
333
+
334
+ .floating-card:nth-child(3) {
335
+ bottom: 5%;
336
+ right: 5%;
337
+ animation-delay: 2s;
338
+ }
339
+
340
+ @keyframes floatCard {
341
+ 0%, 100% { transform: translateY(0); }
342
+ 50% { transform: translateY(-15px); }
343
+ }
344
+
345
+ .floating-card i {
346
+ font-size: 1.5rem;
347
+ color: var(--primary);
348
+ }
349
+
350
+ .floating-card span {
351
+ font-weight: 600;
352
+ font-size: 0.9rem;
353
+ }
354
+
355
+ /* Stats Section */
356
+ .stats {
357
+ display: flex;
358
+ gap: 3rem;
359
+ margin-top: 3rem;
360
+ }
361
+
362
+ .stat {
363
+ text-align: left;
364
+ }
365
+
366
+ .stat h3 {
367
+ font-size: 2rem;
368
+ font-weight: 800;
369
+ color: var(--dark);
370
+ }
371
+
372
+ .stat p {
373
+ font-size: 0.9rem;
374
+ color: var(--gray);
375
+ margin: 0;
376
+ }
377
+
378
+ /* About Section */
379
+ .about {
380
+ padding: 6rem 5%;
381
+ background: white;
382
+ }
383
+
384
+ .section-header {
385
+ text-align: center;
386
+ margin-bottom: 4rem;
387
+ }
388
+
389
+ .section-header span {
390
+ color: var(--primary);
391
+ font-weight: 600;
392
+ font-size: 1rem;
393
+ text-transform: uppercase;
394
+ letter-spacing: 2px;
395
+ }
396
+
397
+ .section-header h2 {
398
+ font-size: 2.5rem;
399
+ font-weight: 800;
400
+ margin-top: 0.5rem;
401
+ color: var(--dark);
402
+ }
403
+
404
+ .about-content {
405
+ display: grid;
406
+ grid-template-columns: 1fr 1fr;
407
+ gap: 4rem;
408
+ max-width: 1200px;
409
+ margin: 0 auto;
410
+ }
411
+
412
+ .about-image {
413
+ position: relative;
414
+ }
415
+
416
+ .about-image img {
417
+ width: 100%;
418
+ border-radius: var(--radius);
419
+ box-shadow: var(--shadow);
420
+ }
421
+
422
+ .about-image::before {
423
+ content: '';
424
+ position: absolute;
425
+ top: -20px;
426
+ left: -20px;
427
+ right: 20px;
428
+ bottom: 20px;
429
+ border: 3px solid var(--secondary);
430
+ border-radius: var(--radius);
431
+ z-index: -1;
432
+ }
433
+
434
+ .about-text h3 {
435
+ font-size: 1.8rem;
436
+ margin-bottom: 1rem;
437
+ color: var(--dark);
438
+ }
439
+
440
+ .about-text p {
441
+ color: var(--gray);
442
+ margin-bottom: 1.5rem;
443
+ }
444
+
445
+ .skills {
446
+ display: flex;
447
+ flex-wrap: wrap;
448
+ gap: 0.8rem;
449
+ margin-top: 1.5rem;
450
+ }
451
+
452
+ .skill-tag {
453
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
454
+ color: var(--primary);
455
+ padding: 0.5rem 1rem;
456
+ border-radius: 50px;
457
+ font-size: 0.9rem;
458
+ font-weight: 500;
459
+ transition: var(--transition);
460
+ }
461
+
462
+ .skill-tag:hover {
463
+ transform: scale(1.05);
464
+ background: var(--primary);
465
+ color: white;
466
+ }
467
+
468
+ /* Services Section */
469
+ .services {
470
+ padding: 6rem 5%;
471
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
472
+ }
473
+
474
+ .services-grid {
475
+ display: grid;
476
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
477
+ gap: 2rem;
478
+ max-width: 1200px;
479
+ margin: 0 auto;
480
+ }
481
+
482
+ .service-card {
483
+ background: white;
484
+ padding: 2.5rem;
485
+ border-radius: var(--radius);
486
+ box-shadow: var(--shadow);
487
+ transition: var(--transition);
488
+ position: relative;
489
+ overflow: hidden;
490
+ }
491
+
492
+ .service-card::before {
493
+ content: '';
494
+ position: absolute;
495
+ top: 0;
496
+ left: 0;
497
+ width: 100%;
498
+ height: 4px;
499
+ background: var(--gradient);
500
+ transform: scaleX(0);
501
+ transition: var(--transition);
502
+ }
503
+
504
+ .service-card:hover::before {
505
+ transform: scaleX(1);
506
+ }
507
+
508
+ .service-card:hover {
509
+ transform: translateY(-10px);
510
+ box-shadow: var(--shadow-hover);
511
+ }
512
+
513
+ .service-icon {
514
+ width: 70px;
515
+ height: 70px;
516
+ background: var(--gradient);
517
+ border-radius: 16px;
518
+ display: flex;
519
+ align-items: center;
520
+ justify-content: center;
521
+ margin-bottom: 1.5rem;
522
+ }
523
+
524
+ .service-icon i {
525
+ font-size: 1.8rem;
526
+ color: white;
527
+ }
528
+
529
+ .service-card h3 {
530
+ font-size: 1.4rem;
531
+ margin-bottom: 1rem;
532
+ color: var(--dark);
533
+ }
534
+
535
+ .service-card p {
536
+ color: var(--gray);
537
+ font-size: 0.95rem;
538
+ }
539
+
540
+ /* Portfolio Section */
541
+ .portfolio {
542
+ padding: 6rem 5%;
543
+ background: white;
544
+ }
545
+
546
+ .portfolio-filters {
547
+ display: flex;
548
+ justify-content: center;
549
+ gap: 1rem;
550
+ margin-bottom: 3rem;
551
+ flex-wrap: wrap;
552
+ }
553
+
554
+ .filter-btn {
555
+ padding: 0.7rem 1.5rem;
556
+ border: none;
557
+ background: var(--light);
558
+ color: var(--dark);
559
+ border-radius: 50px;
560
+ cursor: pointer;
561
+ font-weight: 500;
562
+ transition: var(--transition);
563
+ }
564
+
565
+ .filter-btn.active, .filter-btn:hover {
566
+ background: var(--primary);
567
+ color: white;
568
+ }
569
+
570
+ .portfolio-grid {
571
+ display: grid;
572
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
573
+ gap: 2rem;
574
+ max-width: 1200px;
575
+ margin: 0 auto;
576
+ }
577
+
578
+ .portfolio-item {
579
+ position: relative;
580
+ border-radius: var(--radius);
581
+ overflow: hidden;
582
+ cursor: pointer;
583
+ aspect-ratio: 4/3;
584
+ }
585
+
586
+ .portfolio-item img {
587
+ width: 100%;
588
+ height: 100%;
589
+ object-fit: cover;
590
+ transition: var(--transition);
591
+ }
592
+
593
+ .portfolio-overlay {
594
+ position: absolute;
595
+ inset: 0;
596
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(236, 72, 153, 0.9) 100%);
597
+ display: flex;
598
+ flex-direction: column;
599
+ justify-content: center;
600
+ align-items: center;
601
+ opacity: 0;
602
+ transition: var(--transition);
603
+ padding: 2rem;
604
+ text-align: center;
605
+ }
606
+
607
+ .portfolio-item:hover img {
608
+ transform: scale(1.1);
609
+ }
610
+
611
+ .portfolio-item:hover .portfolio-overlay {
612
+ opacity: 1;
613
+ }
614
+
615
+ .portfolio-overlay h3 {
616
+ color: white;
617
+ font-size: 1.5rem;
618
+ margin-bottom: 0.5rem;
619
+ transform: translateY(20px);
620
+ transition: var(--transition);
621
+ }
622
+
623
+ .portfolio-overlay p {
624
+ color: rgba(255, 255, 255, 0.9);
625
+ transform: translateY(20px);
626
+ transition: var(--transition);
627
+ transition-delay: 0.1s;
628
+ }
629
+
630
+ .portfolio-item:hover .portfolio-overlay h3,
631
+ .portfolio-item:hover .portfolio-overlay p {
632
+ transform: translateY(0);
633
+ }
634
+
635
+ .portfolio-link {
636
+ margin-top: 1rem;
637
+ width: 50px;
638
+ height: 50px;
639
+ background: white;
640
+ border-radius: 50%;
641
+ display: flex;
642
+ align-items: center;
643
+ justify-content: center;
644
+ color: var(--primary);
645
+ transform: translateY(20px);
646
+ transition: var(--transition);
647
+ transition-delay: 0.2s;
648
+ }
649
+
650
+ .portfolio-item:hover .portfolio-link {
651
+ transform: translateY(0);
652
+ }
653
+
654
+ /* Testimonials */
655
+ .testimonials {
656
+ padding: 6rem 5%;
657
+ background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%);
658
+ }
659
+
660
+ .testimonials .section-header span {
661
+ color: var(--secondary);
662
+ }
663
+
664
+ .testimonials .section-header h2 {
665
+ color: white;
666
+ }
667
+
668
+ .testimonials-slider {
669
+ max-width: 900px;
670
+ margin: 0 auto;
671
+ position: relative;
672
+ overflow: hidden;
673
+ }
674
+
675
+ .testimonial-card {
676
+ background: rgba(255, 255, 255, 0.05);
677
+ backdrop-filter: blur(10px);
678
+ padding: 3rem;
679
+ border-radius: var(--radius);
680
+ border: 1px solid rgba(255, 255, 255, 0.1);
681
+ }
682
+
683
+ .testimonial-content {
684
+ text-align: center;
685
+ }
686
+
687
+ .testimonial-content i {
688
+ font-size: 3rem;
689
+ color: var(--primary);
690
+ margin-bottom: 1.5rem;
691
+ opacity: 0.5;
692
+ }
693
+
694
+ .testimonial-content p {
695
+ font-size: 1.2rem;
696
+ color: rgba(255, 255, 255, 0.9);
697
+ font-style: italic;
698
+ line-height: 1.8;
699
+ margin-bottom: 2rem;
700
+ }
701
+
702
+ .testimonial-author {
703
+ display: flex;
704
+ align-items: center;
705
+ justify-content: center;
706
+ gap: 1rem;
707
+ }
708
+
709
+ .testimonial-author img {
710
+ width: 60px;
711
+ height: 60px;
712
+ border-radius: 50%;
713
+ object-fit: cover;
714
+ border: 3px solid var(--primary);
715
+ }
716
+
717
+ .testimonial-author-info h4 {
718
+ color: white;
719
+ font-size: 1.1rem;
720
+ }
721
+
722
+ .testimonial-author-info span {
723
+ color: var(--gray);
724
+ font-size: 0.9rem;
725
+ }
726
+
727
+ /* Contact Section */
728
+ .contact {
729
+ padding: 6rem 5%;
730
+ background: white;
731
+ }
732
+
733
+ .contact-content {
734
+ display: grid;
735
+ grid-template-columns: 1fr 1fr;
736
+ gap: 4rem;
737
+ max-width: 1200px;
738
+ margin: 0 auto;
739
+ }
740
+
741
+ .contact-info h3 {
742
+ font-size: 1.8rem;
743
+ margin-bottom: 1rem;
744
+ color: var(--dark);
745
+ }
746
+
747
+ .contact-info p {
748
+ color: var(--gray);
749
+ margin-bottom: 2rem;
750
+ }
751
+
752
+ .contact-details {
753
+ display: flex;
754
+ flex-direction: column;
755
+ gap: 1.5rem;
756
+ }
757
+
758
+ .contact-item {
759
+ display: flex;
760
+ align-items: center;
761
+ gap: 1rem;
762
+ }
763
+
764
+ .contact-item-icon {
765
+ width: 50px;
766
+ height: 50px;
767
+ background: var(--gradient);
768
+ border-radius: 12px;
769
+ display: flex;
770
+ align-items: center;
771
+ justify-content: center;
772
+ }
773
+
774
+ .contact-item-icon i {
775
+ color: white;
776
+ font-size: 1.2rem;
777
+ }
778
+
779
+ .contact-item-text h4 {
780
+ font-size: 1rem;
781
+ color: var(--dark);
782
+ }
783
+
784
+ .contact-item-text p {
785
+ color: var(--gray);
786
+ margin: 0;
787
+ font-size: 0.95rem;
788
+ }
789
+
790
+ .social-links {
791
+ display: flex;
792
+ gap: 1rem;
793
+ margin-top: 2rem;
794
+ }
795
+
796
+ .social-link {
797
+ width: 45px;
798
+ height: 45px;
799
+ background: var(--light);
800
+ border-radius: 50%;
801
+ display: flex;
802
+ align-items: center;
803
+ justify-content: center;
804
+ color: var(--dark);
805
+ transition: var(--transition);
806
+ }
807
+
808
+ .social-link:hover {
809
+ background: var(--primary);
810
+ color: white;
811
+ transform: translateY(-5px);
812
+ }
813
+
814
+ .contact-form {
815
+ background: var(--light);
816
+ padding: 2.5rem;
817
+ border-radius: var(--radius);
818
+ }
819
+
820
+ .form-group {
821
+ margin-bottom: 1.5rem;
822
+ }
823
+
824
+ .form-group label {
825
+ display: block;
826
+ margin-bottom: 0.5rem;
827
+ font-weight: 500;
828
+ color: var(--dark);
829
+ }
830
+
831
+ .form-group input,
832
+ .form-group textarea {
833
+ width: 100%;
834
+ padding: 1rem;
835
+ border: 2px solid transparent;
836
+ background: white;
837
+ border-radius: 12px;
838
+ font-size: 1rem;
839
+ transition: var(--transition);
840
+ }
841
+
842
+ .form-group input:focus,
843
+ .form-group textarea:focus {
844
+ outline: none;
845
+ border-color: var(--primary);
846
+ }
847
+
848
+ .form-group textarea {
849
+ resize: vertical;
850
+ min-height: 120px;
851
+ }
852
+
853
+ .form-row {
854
+ display: grid;
855
+ grid-template-columns: 1fr 1fr;
856
+ gap: 1rem;
857
+ }
858
+
859
+ /* Footer */
860
+ footer {
861
+ background: var(--dark);
862
+ color: white;
863
+ padding: 4rem 5% 2rem;
864
+ }
865
+
866
+ .footer-content {
867
+ display: grid;
868
+ grid-template-columns: 2fr 1fr 1fr 1fr;
869
+ gap: 3rem;
870
+ max-width: 1200px;
871
+ margin: 0 auto;
872
+ padding-bottom: 3rem;
873
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
874
+ }
875
+
876
+ .footer-brand .logo {
877
+ font-size: 2rem;
878
+ margin-bottom: 1rem;
879
+ display: inline-block;
880
+ }
881
+
882
+ .footer-brand p {
883
+ color: var(--gray);
884
+ margin-bottom: 1.5rem;
885
+ }
886
+
887
+ .footer-links h4 {
888
+ font-size: 1.2rem;
889
+ margin-bottom: 1.5rem;
890
+ color: white;
891
+ }
892
+
893
+ .footer-links ul {
894
+ display: flex;
895
+ flex-direction: column;
896
+ gap: 0.8rem;
897
+ }
898
+
899
+ .footer-links a {
900
+ color: var(--gray);
901
+ transition: var(--transition);
902
+ }
903
+
904
+ .footer-links a:hover {
905
+ color: var(--primary);
906
+ }
907
+
908
+ .footer-bottom {
909
+ display: flex;
910
+ justify-content: space-between;
911
+ align-items: center;
912
+ padding-top: 2rem;
913
+ max-width: 1200px;
914
+ margin: 0 auto;
915
+ flex-wrap: wrap;
916
+ gap: 1rem;
917
+ }
918
+
919
+ .footer-bottom p {
920
+ color: var(--gray);
921
+ }
922
+
923
+ .footer-bottom-links {
924
+ display: flex;
925
+ gap: 2rem;
926
+ }
927
+
928
+ .footer-bottom-links a {
929
+ color: var(--gray);
930
+ transition: var(--transition);
931
+ }
932
+
933
+ .footer-bottom-links a:hover {
934
+ color: var(--primary);
935
+ }
936
+
937
+ /* Built with Anylabel */
938
+ .built-with {
939
+ text-align: center;
940
+ padding: 1rem;
941
+ background: rgba(99, 102, 241, 0.1);
942
+ margin-top: 2rem;
943
+ }
944
+
945
+ .built-with a {
946
+ color: var(--primary);
947
+ font-weight: 600;
948
+ transition: var(--transition);
949
+ }
950
+
951
+ .built-with a:hover {
952
+ color: var(--secondary);
953
+ }
954
+
955
+ /* Scroll to top */
956
+ .scroll-top {
957
+ position: fixed;
958
+ bottom: 30px;
959
+ right: 30px;
960
+ width: 50px;
961
+ height: 50px;
962
+ background: var(--gradient);
963
+ border-radius: 50%;
964
+ display: flex;
965
+ align-items: center;
966
+ justify-content: center;
967
+ color: white;
968
+ cursor: pointer;
969
+ opacity: 0;
970
+ visibility: hidden;
971
+ transition: var(--transition);
972
+ box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
973
+ }
974
+
975
+ .scroll-top.active {
976
+ opacity: 1;
977
+ visibility: visible;
978
+ }
979
+
980
+ .scroll-top:hover {
981
+ transform: translateY(-5px);
982
+ }
983
+
984
+ /* Responsive */
985
+ @media (max-width: 1024px) {
986
+ .hero-content {
987
+ grid-template-columns: 1fr;
988
+ text-align: center;
989
+ }
990
+
991
+ .hero-text p {
992
+ margin: 0 auto 2rem;
993
+ }
994
+
995
+ .hero-buttons {
996
+ justify-content: center;
997
+ }
998
+
999
+ .stats {
1000
+ justify-content: center;
1001
+ }
1002
+
1003
+ .hero-image {
1004
+ order: -1;
1005
+ }
1006
+
1007
+ .hero-image-wrapper {
1008
+ width: 300px;
1009
+ height: 300px;
1010
+ }
1011
+
1012
+ .about-content {
1013
+ grid-template-columns: 1fr;
1014
+ }
1015
+
1016
+ .contact-content {
1017
+ grid-template-columns: 1fr;
1018
+ }
1019
+
1020
+ .footer-content {
1021
+ grid-template-columns: 1fr 1fr;
1022
+ }
1023
+ }
1024
+
1025
+ @media (max-width: 768px) {
1026
+ .nav-links {
1027
+ position: fixed;
1028
+ top: 70px;
1029
+ left: 0;
1030
+ right: 0;
1031
+ background: white;
1032
+ flex-direction: column;
1033
+ padding: 2rem;
1034
+ gap: 1.5rem;
1035
+ box-shadow: var(--shadow);
1036
+ transform: translateY(-150%);
1037
+ transition: var(--transition);
1038
+ }
1039
+
1040
+ .nav-links.active {
1041
+ transform: translateY(0);
1042
+ }
1043
+
1044
+ .menu-toggle {
1045
+ display: flex;
1046
+ }
1047
+
1048
+ .menu-toggle.active span:nth-child(1) {
1049
+ transform: rotate(45deg) translate(5px, 5px);
1050
+ }
1051
+
1052
+ .menu-toggle.active span:nth-child(2) {
1053
+ opacity: 0;
1054
+ }
1055
+
1056
+ .menu-toggle.active span:nth-child(3) {
1057
+ transform: rotate(-45deg) translate(5px, -5px);
1058
+ }
1059
+
1060
+ .hero-text h1 {
1061
+ font-size: 2.5rem;
1062
+ }
1063
+
1064
+ .stats {
1065
+ flex-direction: column;
1066
+ gap: 1.5rem;
1067
+ align-items: center;
1068
+ }
1069
+
1070
+ .form-row {
1071
+ grid-template-columns: 1fr;
1072
+ }
1073
+
1074
+ .footer-content {
1075
+ grid-template-columns: 1fr;
1076
+ }
1077
+
1078
+ .footer-bottom {
1079
+ flex-direction: column;
1080
+ text-align: center;
1081
+ }
1082
+
1083
+ .portfolio-grid {
1084
+ grid-template-columns: 1fr;
1085
+ }
1086
+ }
1087
+
1088
+ /* Animations */
1089
+ .fade-in {
1090
+ opacity: 0;
1091
+ transform: translateY(30px);
1092
+ transition: all 0.6s ease-out;
1093
+ }
1094
+
1095
+ .fade-in.visible {
1096
+ opacity: 1;
1097
+ transform: translateY(0);
1098
+ }
1099
+ </style>
1100
+ </head>
1101
+ <body>
1102
+ <!-- Header -->
1103
+ <header id="header">
1104
+ <a href="#" class="logo">Portfolio.</a>
1105
+ <nav class="nav-links" id="navLinks">
1106
+ <a href="#home">Home</a>
1107
+ <a href="#about">Sobre</a>
1108
+ <a href="#services">Serviços</a>
1109
+ <a href="#portfolio">Portfolio</a>
1110
+ <a href="#testimonials">Depoimentos</a>
1111
+ <a href="#contact">Contato</a>
1112
+ </nav>
1113
+ <div class="menu-toggle" id="menuToggle">
1114
+ <span></span>
1115
+ <span></span>
1116
+ <span></span>
1117
+ </div>
1118
+ </header>
1119
+
1120
+ <!-- Hero Section -->
1121
+ <section class="hero" id="home">
1122
+ <div class="hero-content">
1123
+ <div class="hero-text">
1124
+ <h3>Olá, seja bem-vindo!</h3>
1125
+ <h1>Eu sou <span>João Silva</span></h1>
1126
+ <h1>Desenvolvedor Web & Designer</h1>
1127
+ <p>Crio experiências digitais inovadoras que transformam ideias em realidade. Especializado em desenvolvimento web moderno e design de interfaces.</p>
1128
+ <div class="hero-buttons">
1129
+ <a href="#contact" class="btn btn-primary">
1130
+ <i class="fas fa-paper-plane"></i>
1131
+ Vamos Trabalhar Juntos
1132
+ </a>
1133
+ <a href="#portfolio" class="btn btn-secondary">
1134
+ <i class="fas fa-eye"></i>
1135
+ Ver Projetos
1136
+ </a>
1137
+ </div>
1138
+ <div class="stats">
1139
+ <div class="stat">
1140
+ <h3>5+</h3>
1141
+ <p>Anos de Experiência</p>
1142
+ </div>
1143
+ <div class="stat">
1144
+ <h3>150+</h3>
1145
+ <p>Projetos Completos</p>
1146
+ </div>
1147
+ <div class="stat">
1148
+ <h3>50+</h3>
1149
+ <p>Clientes Satisfeitos</p>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ <div class="hero-image">
1154
+ <div class="hero-image-wrapper">
1155
+ <div class="hero-image-placeholder">
1156
+ <i class="fas fa-code"></i>
1157
+ </div>
1158
+ <div class="floating-cards">
1159
+ <div class="floating-card">
1160
+ <i class="fab fa-react"></i>
1161
+ <span>React Developer</span>
1162
+ </div>
1163
+ <div class="floating-card">
1164
+ <i class="fas fa-paint-brush"></i>
1165
+ <span>UI/UX Design</span>
1166
+ </div>
1167
+ <div class="floating-card">
1168
+ <i class="fas fa-mobile-alt"></i>
1169
+ <span>Mobile First</span>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </section>
1176
+
1177
+ <!-- About Section -->
1178
+ <section class="about" id="about">
1179
+ <div class="section-header fade-in">
1180
+ <span>Sobre Mim</span>
1181
+ <h2>Quem Sou Eu</h2>
1182
+ </div>
1183
+ <div class="about-content">
1184
+ <div class="about-image fade-in">
1185
+ <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" style="width: 100%; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);">
1186
+ <defs>
1187
+ <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
1188
+ <stop offset="0%" style="stop-color:#6366f1"/>
1189
+ <stop offset="100%" style="stop-color:#ec4899"/>
1190
+ </linearGradient>
1191
+ </defs>
1192
+ <rect width="400" height="400" fill="#f1f5f9"/>
1193
+ <circle cx="200" cy="150" r="80" fill="url(#grad1)"/>
1194
+ <ellipse cx="200" cy="320" rx="120" ry="80" fill="url(#grad1)"/>
1195
+ <text x="200" y="165" font-family="Arial" font-size="50" fill="white" text-anchor="middle">👨‍💻</text>
1196
+ </svg>
1197
+ </div>
1198
+ <div class="about-text fade-in">
1199
+ <h3>Desenvolvedor Criativo com Paixão por Tecnologia</h3>
1200
+ <p>Sou um desenvolvedor web apaixonado por criar soluções digitais inovadoras. Com mais de 5 anos de experiência, tenho trabalhado com empresas de diversos setores para entregar projetos que superam expectativas.</p>
1201
+ <p>Minha abordagem combina design thinking com as mais modernas tecnologias web, garantindo que cada projeto não apenas funcione perfeitamente, mas também proporcione uma experiência memorável aos usuários.</p>
1202
+ <div class="skills">
1203
+ <span class="skill-tag">HTML5</span>
1204
+ <span class="skill-tag">CSS3</span>
1205
+ <span class="skill-tag">JavaScript</span>
1206
+ <span class="skill-tag">React</span>
1207
+ <span class="skill-tag">Vue.js</span>
1208
+ <span class="skill-tag">Node.js</span>
1209
+ <span class="skill-tag">Python</span>
1210
+ <span class="skill-tag">UI/UX</span>
1211
+ <span class="skill-tag">Figma</span>
1212
+ <span class="skill-tag">Git</span>
1213
+ </div>
1214
+ </div>
1215
+ </div>
1216
+ </section>
1217
+
1218
+ <!-- Services Section -->
1219
+ <section class="services" id="services">
1220
+ <div class="section-header fade-in">
1221
+ <span>Serviços</span>
1222
+ <h2>O Que Eu Ofereço</h2>
1223
+ </div>
1224
+ <div class="services-grid">
1225
+ <div class="service-card fade-in">
1226
+ <div class="service-icon">
1227
+ <i class="fas fa-code"></i>
1228
+ </div>
1229
+ <h3>Desenvolvimento Web</h3>
1230
+ <p>Criação de sites e aplicações web modernos, responsivos e otimizados para performance e SEO.</p>
1231
+ </div>
1232
+ <div class="service-card fade-in">
1233
+ <div class="service-icon">
1234
+ <i class="fas fa-mobile-alt"></i>
1235
+ </div>
1236
+ <h3>Design Responsivo</h3>
1237
+ <p>Interfaces que se adaptam perfeitamente a todos os dispositivos, do desktop ao mobile.</p>
1238
+ </div>
1239
+ <div class="service-card fade-in">
1240
+ <div class="service-icon">
1241
+ <i class="fas fa-paint-brush"></i>
1242
+ </div>
1243
+ <h3>UI/UX Design</h3>
1244
+ <p>Design de interfaces intuitivas e experiências de usuário que encantam e convertem.</p>
1245
+ </div>
1246
+ <div class="service-card fade-in">
1247
+ <div class="service-icon">
1248
+ <i class="fas fa-rocket"></i>
1249
+ </div>
1250
+ <h3>Otimização SEO</h3>
1251
+ <p>Melhoria da visibilidade do seu site nos mecanismos de busca com técnicas modernas.</p>
1252
+ </div>
1253
+ <div class="service-card fade-in">
1254
+ <div class="service-icon">
1255
+ <i class="fas fa-shopping-cart"></i>
1256
+ </div>
1257
+ <h3>E-commerce</h3>
1258
+ <p>Lojas virtuais completas com integração de pagamentos e gestão de produtos.</p>
1259
+ </div>
1260
+ <div class="service-card fade-in">
1261
+ <div class="service-icon">
1262
+ <i class="fas fa-server"></i>
1263
+ </div>
1264
+ <h3>Backend & APIs</h3>
1265
+ <p>Desenvolvimento de APIs robustas e sistemas backend escaláveis para suas aplicações.</p>
1266
+ </div>
1267
+ </div>
1268
+ </section>
1269
+
1270
+ <!-- Portfolio Section -->
1271
+ <section class="portfolio" id="portfolio">
1272
+ <div class="section-header fade-in">
1273
+ <span>Portfolio</span>
1274
+ <h2>Meus Projetos Recentes</h2>
1275
+ </div>
1276
+ <div class="portfolio-filters fade-in">
1277
+ <button class="filter-btn active" data-filter="all">Todos</button>
1278
+ <button class="filter-btn" data-filter="web">Web</button>
1279
+ <button class="filter-btn" data-filter="app">Apps</button>
1280
+ <button class="filter-btn" data-filter="design">Design</button>
1281
+ </div>
1282
+ <div class="portfolio-grid">
1283
+ <div class="portfolio-item fade-in" data-category="web">
1284
+ <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
1285
+ <rect width="400" height="300" fill="#1e293b"/>
1286
+ <rect x="20" y="20" width="360" height="260" rx="10" fill="#334155"/>
1287
+ <rect x="30" y="30" width="200" height="20" rx="5" fill="#6366f1"/>
1288
+ <rect x="30" y="60" width="150" height="15" rx="3" fill="#64748b"/>
1289
+ <rect x="30" y="85" width="180" height="15" rx="3" fill="#64748b"/>
1290
+ <rect x="30" y="110" width="120" height="15" rx="3" fill="#64748b"/>
1291
+ <rect x="250" y="60" width="120" height="150" rx="8" fill="#6366f1"/>
1292
+ <text x="200" y="155" font-family="Arial" font-size="40" fill="white" text-anchor="middle">🌐</text>
1293
+ </svg>
1294
+ <div class="portfolio-overlay">
1295
+ <h3>E-commerce Moderno</h3>
1296
+ <p>Loja virtual completa com React e Node.js</p>
1297
+ <a href="#" class="portfolio-link">
1298
+ <i class="fas fa-external-link-alt"></i>
1299
+ </a>
1300
+ </div>
1301
+ </div>
1302
+ <div class="portfolio-item fade-in" data-category="app">
1303
+ <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
1304
+ <rect width="400" height="300" fill="#0f172a"/>
1305
+ <rect x="130" y="40" width="140" height="220" rx="20" fill="#1e293b"/>
1306
+ <rect x="140" y="50" width="120" height="15" rx="3" fill="#6366f1"/>
1307
+ <rect x="140" y="75" width="120" height="80" rx="8" fill="#334155"/>
1308
+ <circle cx="200" cy="115" r="20" fill="#ec4899"/>
1309
+ <text x="200" y="122" font-family="Arial" font-size="20" fill="white" text-anchor="middle">📱</text>
1310
+ <rect x="140" y="165" width="120" height="25" rx="5" fill="#6366f1"/>
1311
+ <rect x="140" y="200" width="120" height="25" rx="5" fill="#475569"/>
1312
+ <rect x="140" y="235" width="120" height="15" rx="3" fill="#475569"/>
1313
+ </svg>
1314
+ <div class="portfolio-overlay">
1315
+ <h3>App de Delivery</h3>
1316
+ <p>Aplicativo móvel com React Native</p>
1317
+ <a href="#" class="portfolio-link">
1318
+ <i class="fas fa-external-link-alt"></i>
1319
+ </a>
1320
+ </div>
1321
+ </div>
1322
+ <div class="portfolio-item fade-in" data-category="design">
1323
+ <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
1324
+ <rect width="400" height="300" fill="#f8fafc"/>
1325
+ <rect x="30" y="30" width="340" height="240" rx="5" fill="white" stroke="#e2e8f0"/>
1326
+ <rect x="50" y="50" width="80" height="80" rx="8" fill="#6366f1"/>
1327
+ <rect x="140" y="50" width="220" height="15" rx="3" fill="#e2e8f0"/>
1328
+ <rect x="140" y="75" width="180" height="15" rx="3" fill="#e2e8f0"/>
1329
+ <rect x="140" y="100" width="150" height="15" rx="3" fill="#e2e8f0"/>
1330
+ <rect x="50" y="140" width="310" height="100" rx="8" fill="#f1f5f9"/>
1331
+ <text x="200" y="195" font-family="Arial" font-size="30" fill="#6366f1" text-anchor="middle">🎨</text>
1332
+ </svg>
1333
+ <div class="portfolio-overlay">
1334
+ <h3>Sistema Dashboard</h3>
1335
+ <p>Design de interface para SaaS</p>
1336
+ <a href="#" class="portfolio-link">
1337
+ <i class="fas fa-external-link-alt"></i>
1338
+ </a>
1339
+ </div>
1340
+ </div>
1341
+ <div class="portfolio-item fade-in" data-category="web">
1342
+ <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
1343
+ <rect width="400" height="300" fill="#ec4899"/>
1344
+ <rect x="50" y="100" width="300" height="150" rx="10" fill="white"/>
1345
+ <rect x="70" y="120" width="260" height="80" rx="5" fill="#fce7f3"/>
1346
+ <text x="200" y="165" font-family="Arial" font-size="35" fill="#ec4899" text-anchor="middle">💬</text>
1347
+ <rect x="70" y="215" width="180" height="20" rx="5" fill="#fce7f3"/>
1348
+ <rect x="260" y="215" width="60" height="20" rx="5" fill="#ec4899"/>
1349
+ </svg>
1350
+ <div class="portfolio-overlay">
1351
+ <h3>Chat App</h3>
1352
+ <p>Aplicação de mensagens em tempo real</p>
1353
+ <a href="#" class="portfolio-link">
1354
+ <i class="fas fa-external-link-alt"></i>
1355
+ </a>
1356
+ </div>
1357
+ </div>
1358
+ <div class="portfolio-item fade-in" data-category="app">
1359
+ <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
1360
+ <rect width="400" height="300" fill="#10b981"/>
1361
+ <rect x="80" y="50" width="240" height="200" rx="15" fill="white"/>
1362
+ <rect x="100" y="70" width="200" height="30" rx="5" fill="#10b981"/>
1363
+ <rect x="100" y="110" width="200" height="100" rx="8" fill="#d1fae5"/>
1364
+ <text x="200" y="165" font-family="Arial" font-size="35" fill="#10b981" text-anchor="middle">📊</text>
1365
+ <rect x="100" y="220" width="90" height="20" rx="5" fill="#10b981"/>
1366
+ <rect x="210" y