-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
455 lines (448 loc) · 32 KB
/
index.html
File metadata and controls
455 lines (448 loc) · 32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of Guilherme Secca, Software engineer and full-stack developer based in Matosinhos, Portugal.">
<title>Guilherme Secca</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
},
colors: {
dark: '#0B1120',
card: '#1e293b',
accent: '#6366f1',
accentHover: '#4f46e5',
secondary: '#10b981',
},
animation: {
'fade-in': 'fadeIn 1s ease-out forwards',
'slide-up': 'slideUp 0.8s ease-out forwards',
'blink': 'blink 1s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
blink: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0' },
},
},
},
},
};
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/svg+xml" href="/gs.svg">
</head>
<body class="bg-dark text-slate-300 font-sans selection:bg-accent selection:text-white antialiased overflow-x-hidden">
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex-shrink-0 font-bold text-xl text-white tracking-tight font-mono">
<GS />
</div>
<div class="hidden md:flex items-center gap-6">
<button type="button" class="menu-toggle inline-flex items-center gap-2 text-sm font-medium text-gray-300 hover:text-white border border-slate-600/60 px-4 py-2 rounded-full transition-colors" aria-expanded="false" aria-label="Open navigation menu">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button type="button" class="menu-toggle text-gray-300 hover:text-white focus:outline-none p-2" aria-label="Toggle navigation" aria-expanded="false">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="md:hidden fixed inset-0 menu-closed">
<div class="tech-menu-overlay"></div>
<div class="tech-menu-panel glass-nav">
<div class="tech-menu-header">
<span class="tech-menu-badge">
<span class="tech-menu-dot"></span>
Navigation Matrix
</span>
<span class="tech-menu-version">v2025.01</span>
</div>
<div class="tech-menu-body">
<div class="tech-menu-intro">
<p class="tech-menu-label">Select destination</p>
<p class="tech-menu-subtitle">Routing through core sections of the portfolio.</p>
</div>
<ul class="tech-menu-links">
<li style="--delay: 0.05s">
<a href="#home" class="tech-menu-link mobile-link" data-code="00">Home</a>
</li>
<li style="--delay: 0.1s">
<a href="#about" class="tech-menu-link mobile-link" data-code="01">About</a>
</li>
<li style="--delay: 0.15s">
<a href="#experience" class="tech-menu-link mobile-link" data-code="02">Experience</a>
</li>
<li style="--delay: 0.2s">
<a href="#projects" class="tech-menu-link mobile-link" data-code="03">Projects</a>
</li>
<li style="--delay: 0.25s">
<a href="#contact" class="tech-menu-link mobile-link" data-code="04">Contact</a>
</li>
</ul>
</div>
<div class="tech-menu-footer">
<div class="tech-menu-status">
<span class="tech-status-indicator"></span>
<span>Systems nominal — ready to build.</span>
</div>
<div class="tech-menu-actions">
<a href="mailto:guisecca17@gmail.com" class="tech-menu-action">
<i class="fas fa-paper-plane"></i>
<span>Start a Project</span>
</a>
<a href="https://www.linkedin.com/in/guilherme-secca" target="_blank" rel="noreferrer" class="tech-menu-action">
<i class="fab fa-linkedin"></i>
<span>LinkedIn</span>
</a>
<a href="https://github.com/seccaz" target="_blank" rel="noreferrer" class="tech-menu-action">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<section id="home" class="min-h-screen flex items-center justify-center relative pt-16 overflow-hidden">
<div class="absolute top-20 right-0 -mr-20 -mt-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<div class="opacity-0 animate-slide-up" style="animation-delay: 0.1s;">
<div class="inline-flex items-center gap-2 py-1 px-3 rounded-full bg-slate-800/50 border border-slate-700 text-secondary text-sm font-medium mb-6">
<span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
Software Engineer
</div>
</div>
<h1 id="typing-title" class="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-4 tracking-tight"></h1>
<h2 class="text-2xl md:text-4xl font-bold mb-6 tracking-tight opacity-0 animate-slide-up" style="animation-delay: 0.3s;">
<span class="text-gradient">just building things like bob.</span>
</h2>
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-400 mb-10 opacity-0 animate-slide-up" style="animation-delay: 0.4s;">
Software Engineer, Data Enthusiast & Gym Enjoyer based in Matosinhos, Portugal.<br>
Specializing in building the future.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.5s;">
<a href="#projects" class="px-8 py-3 rounded-full bg-white text-dark font-bold hover:bg-slate-200 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.2)]">
View Work
</a>
<a href="#contact" class="px-8 py-3 rounded-full glass text-white font-medium hover:bg-slate-800/80 transition-colors border border-slate-600">
Get in Touch
</a>
</div>
<div class="mt-12 flex justify-center gap-8 opacity-0 animate-slide-up text-sm text-slate-500" style="animation-delay: 0.6s;">
<span class="flex items-center gap-2"><i class="fas fa-map-marker-alt text-accent"></i> Matosinhos, PT</span>
<span class="flex items-center gap-2"><i class="fas fa-language text-accent"></i> English (C1) / Portuguese</span>
</div>
</div>
</section>
<section id="about" class="py-20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
<div class="space-y-8">
<h2 class="text-3xl md:text-4xl font-bold text-white">Education & Background</h2>
<p class="text-slate-400 leading-relaxed">
I'm a Software Engineer with a "builder" mindset. Whether it's a full-stack web app, a data-driven solution, or an e-commerce operation, I love the process of creating something from nothing. Currently pursuing my Masters at ISEP while helping clients build scalable solutions.
</p>
<div class="space-y-6">
<div class="glass-card p-6 rounded-xl border-l-4 border-accent">
<div class="flex justify-between items-start">
<div>
<h3 class="text-white font-semibold text-lg">M.Sc. Electronics & Computing Engineering</h3>
<p class="text-slate-400">Systems and Industrial Planning</p>
<p class="text-accent text-sm mt-1">ISEP</p>
</div>
<span class="text-xs bg-slate-800 px-2 py-1 rounded text-slate-400">2024 - Present</span>
</div>
</div>
<div class="glass-card p-6 rounded-xl border-l-4 border-slate-600">
<div class="flex justify-between items-start">
<div>
<h3 class="text-white font-semibold text-lg">B.A.Sc. Telecommunications & Software</h3>
<p class="text-slate-400">Software Engineering Focus</p>
<p class="text-accent text-sm mt-1">ISEP</p>
</div>
<span class="text-xs bg-slate-800 px-2 py-1 rounded text-slate-400">2021 - 2024</span>
</div>
</div>
</div>
</div>
<div class="glass p-8 rounded-3xl">
<h3 class="text-2xl font-bold text-white mb-6">Technical Arsenal</h3>
<div class="space-y-6">
<div>
<h4 class="text-sm uppercase tracking-wider text-slate-500 font-semibold mb-3">Core Stack</h4>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Full-Stack Dev</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">API Development</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">System Design</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Python</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">JavaScript</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Spring Boot</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">React</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Next.js</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">TypeScript</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Node.js</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">Git</span>
<span class="px-3 py-1 bg-slate-800 text-accent rounded-md text-sm font-mono">AI Tools</span>
</div>
</div>
<div>
<h4 class="text-sm uppercase tracking-wider text-slate-500 font-semibold mb-3">Data & Cloud</h4>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">Cloud Computing</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">GCP</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">PostgreSQL</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">Supabase</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">Data Analysis</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">Web Scraping</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">Multilingual NLP</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">LLM Integration</span>
<span class="px-3 py-1 bg-slate-800 text-emerald-400 rounded-md text-sm font-mono">MongoDB</span>
</div>
</div>
<div>
<h4 class="text-sm uppercase tracking-wider text-slate-500 font-semibold mb-3">Deployment</h4>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">Cloud Deployment</span>
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">Vercel</span>
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">Trigger.dev</span>
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">CORS Management</span>
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">Docker</span>
<span class="px-3 py-1 bg-slate-800 text-blue-400 rounded-md text-sm font-mono">CI/CD</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="experience" class="py-20 bg-slate-900/30">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white">Professional Experience</h2>
</div>
<div class="relative border-l border-slate-700 ml-3 md:ml-6 space-y-12">
<div class="relative pl-8 md:pl-12">
<div class="absolute -left-[5px] top-2 w-3 h-3 rounded-full bg-secondary shadow-[0_0_10px_#10b981]"></div>
<div class="group glass-card p-6 rounded-2xl hover:bg-slate-800/50 transition-all">
<div class="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
<div>
<h3 class="text-xl font-bold text-white group-hover:text-secondary transition-colors">Building</h3>
<p class="text-slate-400">MyLMU</p>
</div>
<span class="text-sm text-slate-500 font-mono mt-1 md:mt-0">Nov 2025 - Present</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-4">
Architected and built MyLMU (mylmu.app) from scratch, a web application for Le Mans Ultimate. Managed full-stack development (Next.js/TS, Vercel, Supabase, Trigger.dev) to extract, store, and display critical session data for sim racers, enhancing performance analysis.
</p>
<div class="flex gap-2">
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-secondary border border-secondary/20">Matosinhos, Porto, Portugal</span>
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-secondary border border-secondary/20">On-site</span>
</div>
</div>
</div>
<div class="relative pl-8 md:pl-12">
<div class="absolute -left-[5px] top-2 w-3 h-3 rounded-full bg-accent"></div>
<div class="group glass-card p-6 rounded-2xl hover:bg-slate-800/50 transition-all">
<div class="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
<div>
<h3 class="text-xl font-bold text-white group-hover:text-accent transition-colors">Freelance Software Engineer</h3>
<p class="text-slate-400">Self-Employed</p>
</div>
<span class="text-sm text-slate-500 font-mono mt-1 md:mt-0">Oct 2025 - Present</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-4">
Building web and mobile applications for diverse clients. Focusing on API integrations, React frontend interfaces, and Python backend automation to deliver scalable and maintainable software solutions.
</p>
<div class="flex gap-2">
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-secondary border border-secondary/20">Freelance</span>
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-secondary border border-secondary/20">Remote</span>
</div>
</div>
</div>
<div class="relative pl-8 md:pl-12">
<div class="absolute -left-[5px] top-2 w-3 h-3 rounded-full bg-accent"></div>
<div class="group glass-card p-6 rounded-2xl hover:bg-slate-800/50 transition-all">
<div class="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
<div>
<h3 class="text-xl font-bold text-white group-hover:text-accent transition-colors">Full Stack Developer (Intern)</h3>
<p class="text-slate-400">Medidata.Net</p>
</div>
<span class="text-sm text-slate-500 font-mono mt-1 md:mt-0">Feb 2024 - Jul 2024</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-4">
Developed the <strong>TurAR Project</strong>, a web-based Augmented Reality application for tourism. Managed full-stack development to help tourists discover Points of Interest (POI) using interactive AR and real-time server-side data.
</p>
<div class="flex gap-2">
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-slate-400 border border-slate-700">Augmented Reality</span>
<span class="text-xs px-2 py-1 rounded bg-slate-900 text-slate-400 border border-slate-700">Full-Stack</span>
</div>
</div>
</div>
<div class="relative pl-8 md:pl-12">
<div class="absolute -left-[5px] top-2 w-3 h-3 rounded-full bg-slate-500"></div>
<div class="group glass-card p-6 rounded-2xl hover:bg-slate-800/50 transition-all">
<div class="flex flex-col md:flex-row md:justify-between md:items-start mb-4">
<div>
<h3 class="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">Founder</h3>
<p class="text-slate-400">Jerseys For Fans</p>
</div>
<span class="text-sm text-slate-500 font-mono mt-1 md:mt-0">Oct 2022 - Apr 2023</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed">
Initiated and managed a complete e-commerce dropshipping operation. Oversaw web store creation (Shopify), supplier sourcing, fulfillment, and paid social media marketing strategies.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Featured Projects</h2>
<p class="text-slate-400 max-w-2xl mx-auto">Recent work involving data analysis, APIs, and web applications.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<a href="https://mylmu.app" target="_blank" rel="noreferrer" class="group block text-transparent">
<div class="relative glass rounded-2xl overflow-hidden hover:-translate-y-2 transition-all duration-300 border border-slate-700/50">
<div class="h-48 bg-gradient-to-br from-red-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 opacity-30 pattern-grid-lg"></div>
<i class="fas fa-flag-checkered text-5xl text-red-400 group-hover:scale-110 transition-transform duration-500"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-red-400 transition-colors">MyLMU</h3>
<span class="text-xs text-red-400 border border-red-400/30 px-2 py-0.5 rounded">Active</span>
</div>
<p class="text-slate-400 text-sm mb-4">A web application for Le Mans Ultimate that extracts, stores, and displays critical session data for sim racers, enhancing performance analysis.</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Next.js</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">TypeScript</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Vercel</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Supabase</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Trigger.dev</span>
</div>
</div>
</div>
</a>
<a href="https://fanalyzes.com" target="_blank" rel="noreferrer" class="group block text-transparent">
<div class="relative glass rounded-2xl overflow-hidden hover:-translate-y-2 transition-all duration-300 border border-slate-700/50">
<div class="h-48 bg-gradient-to-br from-emerald-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 opacity-30 pattern-grid-lg"></div>
<i class="fas fa-futbol text-5xl text-emerald-400 group-hover:scale-110 transition-transform duration-500"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">fanalyzes.com</h3>
<span class="text-xs text-emerald-400 border border-emerald-400/30 px-2 py-0.5 rounded">Active</span>
</div>
<p class="text-slate-400 text-sm mb-4">A Football Sentiment Tracker providing insights into fan engagement and sentiment analysis.</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Python</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Multilingual NLP</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Data Analysis Pipeline</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">API Development</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Google Cloud</span>
</div>
</div>
</div>
</a>
<a href="https://perfumapi-frontend.onrender.com" target="_blank" rel="noreferrer" class="group block text-transparent">
<div class="relative glass rounded-2xl overflow-hidden hover:-translate-y-2 transition-all duration-300 border border-slate-700/50">
<div class="h-48 bg-gradient-to-br from-purple-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
<i class="fas fa-spray-can text-5xl text-purple-400 group-hover:scale-110 transition-transform duration-500"></i>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="text-xl font-bold text-white group-hover:text-purple-400 transition-colors">PerfumAPI</h3>
<span class="text-xs text-purple-400 border border-purple-400/30 px-2 py-0.5 rounded">Active</span>
</div>
<p class="text-slate-400 text-sm mb-4">A specialized API service aggregating and serving perfume data.</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">API Development</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Render Deployment</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Ethical Web Scraping</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Python</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">PostgreSQL</span>
</div>
</div>
</div>
</a>
<div class="group relative glass rounded-2xl overflow-hidden hover:-translate-y-2 transition-all duration-300 border border-slate-700/50">
<div class="h-48 bg-gradient-to-br from-blue-900 to-slate-900 flex items-center justify-center relative overflow-hidden">
<i class="fas fa-vr-cardboard text-5xl text-blue-400 group-hover:scale-110 transition-transform duration-500"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-blue-400 transition-colors">TurAR Project</h3>
<p class="text-slate-400 text-sm mb-4">Augmented Reality web application for tourism, displaying Points of Interest (POIs) in real-time.</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">WebAR</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">A-Frame</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">MongoDB</span>
<span class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300">Full-Stack Development</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="py-24 relative">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="glass p-10 rounded-3xl border border-slate-700/50 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-secondary"></div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Let's Build Something</h2>
<p class="text-slate-400 mb-8 text-lg">
Open for freelance opportunities or collaborations.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="mailto:guisecca17@gmail.com" class="px-8 py-4 bg-accent hover:bg-accentHover text-white rounded-full font-bold transition-all shadow-lg shadow-accent/25 w-full sm:w-auto">
Send Email
</a>
<a href="https://www.linkedin.com/in/guilherme-secca" target="_blank" rel="noreferrer" class="px-8 py-4 bg-transparent border border-slate-600 hover:bg-slate-800 text-white rounded-full font-medium transition-all w-full sm:w-auto">
LinkedIn Profile
</a>
</div>
</div>
</div>
<footer class="mt-20 border-t border-slate-800 pt-10 pb-6 text-center">
<p class="text-slate-500 text-sm">
© 2025 Guilherme Secca. All rights reserved.
</p>
<div class="mt-4 flex justify-center space-x-6">
<a href="https://github.com/seccaz" target="_blank" rel="noreferrer" class="text-slate-500 hover:text-white transition-colors" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/guilherme-secca" class="text-slate-500 hover:text-blue-500 transition-colors" aria-label="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
</div>
</footer>
</section>
<script src="app.js"></script>
</body>
</html>