-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
676 lines (636 loc) · 39.9 KB
/
index.html
File metadata and controls
676 lines (636 loc) · 39.9 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
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
<!DOCTYPE html>
<html lang="pt-BR" id="html-root">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#000000">
<meta name="description" content="Andrei Roberto da Costa | Desenvolvedor de Software"
data-i18n-attr="content:page_description">
<title data-i18n="page_title">Andrei Roberto da Costa | Desenvolvedor de Software</title>
<link rel="canonical" href="https://nullcipherr.github.io/">
<link rel="alternate" href="https://nullcipherr.github.io/" hreflang="pt-BR">
<link rel="alternate" href="https://nullcipherr.github.io/" hreflang="en">
<link rel="alternate" href="https://nullcipherr.github.io/" hreflang="x-default">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Andrei Costa">
<meta property="og:locale" content="pt_BR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:url" content="https://nullcipherr.github.io/">
<meta property="og:title" content="Andrei Roberto da Costa | Desenvolvedor de Software"
data-i18n-attr="content:page_title">
<meta property="og:description" content="Andrei Roberto da Costa | Desenvolvedor de Software e Especialista em IA"
data-i18n-attr="content:page_description">
<meta property="og:image" content="https://nullcipherr.github.io/assets/images/hero-bg.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Andrei Roberto da Costa | Desenvolvedor de Software"
data-i18n-attr="content:page_title">
<meta name="twitter:description"
content="Andrei Roberto da Costa | Desenvolvedor de Software e Especialista em IA"
data-i18n-attr="content:page_description">
<meta name="twitter:image" content="https://nullcipherr.github.io/assets/images/hero-bg.png">
<!-- Google Fonts -->
<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@400;500;700;800;900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=WindSong:wght@400;500&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="preload" as="image" href="assets/images/Background.webp" type="image/webp" fetchpriority="high">
<link rel="preload" as="image" href="assets/images/Background.png" fetchpriority="high">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css?v=20260427-contact-image-fix">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Andrei Roberto da Costa",
"url": "https://nullcipherr.github.io/",
"jobTitle": "Desenvolvedor de Software",
"image": "https://avatars.githubusercontent.com/u/141879308?v=4",
"email": "mailto:blendsteal@gmail.com",
"sameAs": [
"https://github.com/NullCipherr"
],
"address": {
"@type": "PostalAddress",
"addressLocality": "Maringa",
"addressRegion": "Parana",
"addressCountry": "BR"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Andrei Costa Portfolio",
"url": "https://nullcipherr.github.io/",
"inLanguage": [
"pt-BR",
"en"
]
}
</script>
</head>
<body>
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Pular para o conteúdo principal</a>
<!-- Glassmorphism Header -->
<header class="glass-header">
<nav aria-label="Navegação principal" data-i18n-attr="aria-label:nav_aria_label">
<div class="logo">AC.</div>
<ul class="nav-links" id="nav-primary">
<li><a href="#sobre" data-i18n="nav_about">Sobre</a></li>
<li><a href="#experiencia" data-i18n="nav_experience">Experiência</a></li>
<li><a href="#habilidades" data-i18n="nav_skills">Habilidades</a></li>
<li><a href="#projetos" data-i18n="nav_projects">Projetos</a></li>
<li><a href="#conteudos" data-i18n="nav_content">Conteúdo</a></li>
<li><a href="#faq" data-i18n="nav_faq">FAQ</a></li>
<li><a href="#contato" data-i18n="nav_contact">Contato</a></li>
</ul>
<div class="lang-switcher">
<button class="lang-toggle" type="button" aria-label="Trocar idioma para Inglês" aria-pressed="false">
<span class="lang-toggle-label">PT</span>
<span class="lang-toggle-track" aria-hidden="true">
<span class="lang-toggle-thumb"></span>
</span>
<span class="lang-toggle-label">EN</span>
</button>
</div>
<button class="menu-toggle" aria-label="Abrir menu" aria-expanded="false"
aria-controls="nav-primary" data-menu-open-label="Abrir menu" data-menu-close-label="Fechar menu"
data-i18n-attr="aria-label:menu_aria_label_open,data-menu-open-label:menu_aria_label_open,data-menu-close-label:menu_aria_label_close">
<span class="bar bar-1"></span>
<span class="bar bar-2"></span>
<span class="bar bar-3"></span>
</button>
</nav>
</header>
<!-- Hero Section -->
<section id="hero">
<!-- Background Lazy Loading Containers -->
<div class="hero-bg-container">
<video id="hero-video" class="hero-bg-video" muted loop playsinline preload="metadata"
poster="assets/images/Background.webp" aria-hidden="true" tabindex="-1">
<source data-src="assets/videos/Background.webm" type="video/webm">
<source data-src="assets/videos/Background-optimized.mp4" type="video/mp4">
</video>
<div class="hero-bg-image" aria-hidden="true"></div>
<div class="hero-overlay"></div>
</div>
<div class="hero-content">
<div class="profile-container">
<img src="https://avatars.githubusercontent.com/u/141879308?v=4" alt="Andrei Roberto da Costa"
class="hero-profile-img" width="200" height="200" loading="eager" fetchpriority="high"
decoding="async" data-i18n-attr="alt:profile_alt">
</div>
<h1>
<span class="hero-name">Andrei Costa</span>
<span class="accent-text" data-i18n="hero_title">Desenvolvedor de Software</span>
</h1>
<h2 data-i18n="hero_subtitle">Especialista em unir tecnologia e dados para construir soluções de IA
escaláveis e experiências
imersivas em games.</h2>
<p class="hero-value-prop mono-text" data-i18n="hero_value_prop">
Desenvolvimento orientado a performance, código limpo e foco em entrega de valor de ponta a ponta.
</p>
<div class="hero-proof-list">
<span class="hero-proof-item" data-i18n="hero_proof_1">Bacharel em Ciência da Computação (UEM)</span>
<span class="hero-proof-item" data-i18n="hero_proof_2">Experiência profissional desde 2017</span>
<span class="hero-proof-item" data-i18n="hero_proof_3">React, Node.js, Python e IA aplicada</span>
</div>
<div class="hero-actions-divider" aria-hidden="true"></div>
<div class="social-links">
<a href="#projetos" class="cta-secondary">
<svg class="cta-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M10 4a2 2 0 0 0-2 2v1H5a2 2 0 0 0-2 2v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V9a2 2 0 0 0-2-2h-3V6a2 2 0 0 0-2-2h-4Zm4 3h-4V6h4v1Z" />
</svg>
<span data-i18n="hero_projects">Ver Projetos</span>
</a>
<a href="https://github.com/NullCipherr" target="_blank" rel="noopener noreferrer"
class="cta-secondary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<span data-i18n="hero_github">GitHub</span>
</a>
<a href="#contato" class="cta-primary">
<svg class="cta-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M4 5a2 2 0 0 0-2 2v.35l10 5.56 10-5.56V7a2 2 0 0 0-2-2H4Zm18 4.65-9.51 5.28a1 1 0 0 1-.98 0L2 9.65V17a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9.65Z" />
</svg>
<span data-i18n="hero_contact">Entrar em Contato</span>
</a>
</div>
</div>
</section>
<main id="main-content" tabindex="-1">
<!-- Showcase Section -->
<section id="showcase" class="fade-element">
<div class="showcase-heading">
<h2 class="section-title" data-i18n="showcase_title">Showcase</h2>
<span class="showcase-heading-line" aria-hidden="true"></span>
</div>
<p class="showcase-intro mono-text" data-i18n="showcase_intro">
Escolha a experiência de portfólio que deseja explorar.
</p>
<div class="showcase-grid">
<a href="https://nullcipherr.github.io/portfolio-os/" target="_blank" rel="noopener noreferrer"
class="showcase-card">
<span class="showcase-card-kicker mono-text" data-i18n="showcase_os_kicker">Desktop
Experience</span>
<h3 class="showcase-card-title">portfolio-os</h3>
<p class="showcase-card-text" data-i18n="showcase_os_desc">
Interface inspirada em sistema operacional com janelas, apps e navegação por desktop.
</p>
<span class="showcase-card-cta" data-i18n="showcase_card_cta">Abrir versão</span>
</a>
<a href="https://nullcipherr.github.io/portfolio-terminal/" target="_blank" rel="noopener noreferrer"
class="showcase-card">
<span class="showcase-card-kicker mono-text" data-i18n="showcase_terminal_kicker">Terminal
Experience</span>
<h3 class="showcase-card-title">portfolio-terminal</h3>
<p class="showcase-card-text" data-i18n="showcase_terminal_desc">
Portfólio orientado a comandos com foco em velocidade, leitura técnica e interação em shell.
</p>
<span class="showcase-card-cta" data-i18n="showcase_card_cta">Abrir versão</span>
</a>
</div>
</section>
<!-- Sobre Mim Section -->
<section id="sobre" class="fade-element">
<div class="about-heading">
<h2 class="section-title" data-i18n="about_title">Sobre Mim</h2>
<span class="about-heading-line" aria-hidden="true"></span>
</div>
<div class="about-content">
<p data-i18n="about_text_1">
Iniciei minha jornada como Level Designer 3D em uma startup de desenvolvimento
de jogos aos 17 anos, onde rapidamente evoluí para outras frentes criativas e técnicas, desde o
design de texturas até a programação de mecânicas para jogos em terceira pessoa. No mesmo ano,
ingressei no curso de Ciência da Computação na Universidade Estadual de Maringá (UEM), o que me
permitiu aprofundar minha grande paixão pela tecnologia através de pilares fundamentais como Teoria
da Computação, Análise de Complexidade de Algoritmos, Redes, Criptografia e Inteligência Artificial.
</p>
<p data-i18n="about_text_2">
Atualmente, foco minha expertise no Desenvolvimento Web de alta performance, unindo essa base
acadêmica rigorosa à criação de soluções modernas e escaláveis. Além disso, atuo ativamente na
integração de Inteligência Artificial (IA) em fluxos de trabalho e produtos, utilizando modelos
avançados e algoritmos de Machine Learning para resolver problemas complexos e otimizar a
experiência do usuário. Minha trajetória reflete essa transição contínua entre a engenharia de
software clássica e as tecnologias emergentes que moldam o futuro.
</p>
<p data-i18n="about_text_3">
Valorizo colaboração próxima com produto e negócio, transformando requisitos em soluções técnicas
claras, mensuráveis e sustentáveis para o longo prazo, sem perder velocidade de entrega.
</p>
<p data-i18n-html="about_education_text">
<strong>Formação Acadêmica:</strong> Bacharel em Ciência da Computação pela Universidade Estadual de
Maringá (UEM), com conclusão em 12/2024.
</p>
<p data-i18n-html="about_languages_text">
<strong>Idiomas:</strong> Inglês (Intermediário), Espanhol (Básico) e Francês (Básico).
</p>
</div>
</section>
<!-- Experiência Section -->
<section id="experiencia" class="fade-element">
<h2 class="section-title" data-i18n="experience_title">Experiência Profissional</h2>
<div class="experience-filters" role="toolbar" aria-label="Filtrar experiência por período"
data-i18n-attr="aria-label:experience_filters_aria">
<button class="experience-filter is-active" type="button" data-experience-filter="all"
aria-pressed="true">
<span data-i18n="experience_filter_all">Todos</span>
</button>
<button class="experience-filter" type="button" data-experience-filter="current"
aria-pressed="false">
<span data-i18n="experience_filter_current">Atual</span>
</button>
<button class="experience-filter" type="button" data-experience-filter="recent" aria-pressed="false">
<span data-i18n="experience_filter_recent">2022+</span>
</button>
<button class="experience-filter" type="button" data-experience-filter="game-freelance"
aria-pressed="false">
<span data-i18n="experience_filter_game_freelance">2021 - 2023</span>
</button>
<button class="experience-filter" type="button" data-experience-filter="ast" aria-pressed="false">
<span data-i18n="experience_filter_ast">2017 - 2021</span>
</button>
</div>
<div class="timeline">
<div class="timeline-item" data-experience-years="current recent">
<div class="timeline-date mono-text" data-i18n="experience_date_now">Atual</div>
<div class="timeline-content">
<h3 data-i18n="exp1_title">Desenvolvedor Freelancer | Backend Python</h3>
<p class="timeline-company accent-text" data-i18n="exp1_company">
Autônomo</p>
<p data-i18n="exp1_text">Foco em Backend (FastAPI, Flask) e Inteligência Artificial (Deep
Learning, Vision
Computacional, Séries Temporais) usando TensorFlow e PyTorch.</p>
</div>
</div>
<div class="timeline-item" data-experience-years="current recent">
<div class="timeline-content">
<div class="timeline-date mono-text" data-i18n="experience_date_fullstack">07/2022 - Atual</div>
<h3 data-i18n="exp2_title">Desenvolvedor Freelancer | Full Stack</h3>
<p class="timeline-company accent-text" data-i18n="exp2_company">
Autônomo</p>
<p data-i18n="exp2_text">Desenvolvimento end-to-end com React, Angular, TypeScript, Node.js e
Tailwind CSS.</p>
</div>
</div>
<div class="timeline-item" data-experience-years="game-freelance">
<div class="timeline-content">
<div class="timeline-date mono-text" data-i18n="experience_date_game_freelance">02/2021 - 06/2023</div>
<h3 data-i18n="exp3_title">Desenvolvedor Freelancer | Game Developer</h3>
<p class="timeline-company accent-text" data-i18n="exp3_company">
Autônomo</p>
<p data-i18n="exp3_text">Criação de mecânicas 3D em C++ e Blueprints, sistemas multiplayer e
simuladores de física de
alta precisão.</p>
</div>
</div>
<div class="timeline-item" data-experience-years="ast">
<div class="timeline-content">
<div class="timeline-date mono-text" data-i18n="experience_date_ast">12/2017 - 02/2021</div>
<h3 data-i18n="exp4_title">Desenvolvedor de Games</h3>
<p class="timeline-company accent-text" data-i18n="exp4_company">AST Games
Studios</p>
<p data-i18n="exp4_text">Implementação de sistemas de rede e arte técnica (Blender, Substance
Painter) para Desktop,
Consoles e Mobile.</p>
</div>
</div>
</div>
</section>
<!-- Habilidades Section -->
<section id="habilidades" class="fade-element">
<div class="skills-heading">
<h2 class="section-title" data-i18n="skills_title">Habilidades Técnicas</h2>
<span class="skills-heading-line" aria-hidden="true"></span>
</div>
<div class="section-intro-group">
<p class="section-intro" data-i18n="skills_intro_1">
Combino base sólida em engenharia de software com prática contínua em arquitetura de aplicações,
modelagem de dados e integração de sistemas.
</p>
</div>
<div class="bento-grid">
<div class="bento-item">
<h3 data-i18n="skill1_title">IA e Dados</h3>
<p class="mono-text" data-i18n="skill1_text">Machine Learning, Deep Learning (CNNs, RNNs, MLPs),
TensorFlow, PyTorch, SQL,
NoSQL</p>
</div>
<div class="bento-item">
<h3 data-i18n="skill2_title">Desenvolvimento Web</h3>
<p class="mono-text" data-i18n="skill2_text">Python (FastAPI/Flask), Node.js, TypeScript, React,
Angular, Tailwind CSS</p>
</div>
<div class="bento-item">
<h3 data-i18n="skill3_title">Desenvolvimento de Games</h3>
<p class="mono-text" data-i18n="skill3_text">Unreal Engine, Unity, C++, C#, Blueprints, Multiplayer,
VR</p>
</div>
</div>
</section>
<!-- Projetos Section -->
<section id="projetos" class="fade-element">
<h2 class="section-title" data-i18n="projects_title">Projetos em Destaque</h2>
<div class="section-intro-group">
<p class="section-intro" data-i18n="projects_intro_1">
Esta seleção reúne projetos construídos com foco em arquitetura, confiabilidade operacional e
decisões técnicas orientadas a contexto real.
</p>
</div>
<div class="projects-grid">
<article class="project-card">
<div class="project-head">
<h3 data-i18n="project1_title">Mercury Server</h3>
<p class="project-stack mono-text" data-i18n="project1_stack">
Zig 0.14+ • HTTP/1.1 • Parser manual • Connection Pool • Métricas em tempo real
</p>
</div>
<p data-i18n="project1_desc">
Servidor HTTP/1.1 low-level em Zig com parser escrito manualmente, workers fixos e isolamento
entre accept/processamento para reduzir overhead e manter previsibilidade operacional.
</p>
<div class="project-links">
<a href="https://github.com/NullCipherr/Mercury-Server" target="_blank" rel="noopener noreferrer"
data-i18n="project1_repo_cta">Ver repositório</a>
<a href="https://github.com/NullCipherr/Mercury-Server/tree/main/docs" target="_blank"
rel="noopener noreferrer" data-i18n="project1_docs_cta">Ver documentação</a>
</div>
</article>
<article class="project-card">
<div class="project-head">
<h3 data-i18n="project2_title">GRIT Engine</h3>
<p class="project-stack mono-text" data-i18n="project2_stack">
TypeScript 5.8 • WebGL2 • Spatial Hashing • Instancing GPU • API Tipada
</p>
</div>
<p data-i18n="project2_desc">
Engine de partículas em tempo real, agnóstica a framework, com runtime imperativo,
renderização WebGL2 e foco em simulações interativas de alta performance para web.
</p>
<div class="project-links">
<a href="https://github.com/NullCipherr/GRIT-Engine" target="_blank" rel="noopener noreferrer"
data-i18n="project2_repo_cta">Ver repositório</a>
<a href="https://github.com/NullCipherr/GRIT-Engine/tree/main/docs" target="_blank"
rel="noopener noreferrer" data-i18n="project2_docs_cta">Ver documentação</a>
</div>
</article>
<article class="project-card">
<div class="project-head">
<h3 data-i18n="project3_title">Airport Bus</h3>
<p class="project-stack mono-text" data-i18n="project3_stack">
Elixir 1.16+ • Phoenix 1.7+ • PostgreSQL 14+ • Vue 3 • Phoenix Channels
</p>
</div>
<p data-i18n="project3_desc">
Plataforma de operações aeroportuárias em tempo real com API Phoenix, autenticação stateless
por token assinado e console web em Vue 3 com atualização contínua via eventos.
</p>
<div class="project-links">
<a href="https://github.com/NullCipherr/Airport-Bus" target="_blank" rel="noopener noreferrer"
data-i18n="project3_repo_cta">Ver repositório</a>
<a href="https://github.com/NullCipherr/Airport-Bus/tree/main/docs" target="_blank"
rel="noopener noreferrer" data-i18n="project3_docs_cta">Ver documentação</a>
</div>
</article>
</div>
<div class="section-cards-divider" aria-hidden="true"></div>
<p class="projects-cta">
<a href="https://github.com/NullCipherr?tab=repositories" target="_blank" rel="noopener noreferrer"
data-i18n="projects_blog_cta">Ver meus repositórios no GitHub</a>
</p>
</section>
<!-- Conteúdo Técnico Section -->
<section id="conteudos" class="fade-element">
<h2 class="section-title" data-i18n="content_title">Conteúdo Técnico</h2>
<div class="section-intro-group">
<p class="section-intro" data-i18n="content_intro_1">
Base editorial criada para conectar artigos, projetos e oportunidades reais de negócio com foco em
descoberta orgânica.
</p>
</div>
<div class="content-pillars-grid">
<article class="content-card">
<p class="content-card-tag mono-text" data-i18n="content_pillar_1_tag">Pilar: Front-end</p>
<h3 data-i18n="content_pillar_1_title">Arquitetura Front-end Escalável para Landing + Blog</h3>
<p data-i18n="content_pillar_1_desc">
Estrutura prática para evoluir uma landing page em canal de conteúdo sem perder performance,
semântica e manutenção.
</p>
<a href="blog/post.html?slug=mercury-server-zig-http11" data-i18n="content_read_article">Ler
artigo</a>
</article>
<article class="content-card">
<p class="content-card-tag mono-text" data-i18n="content_pillar_2_tag">Pilar: Python + Dados</p>
<h3 data-i18n="content_pillar_2_title">Pipelines de Dados com Python para Projetos em Produção</h3>
<p data-i18n="content_pillar_2_desc">
Guia de arquitetura para automação e APIs orientadas a dados com foco em previsibilidade e
observabilidade.
</p>
<a href="blog/post.html?slug=grit-engine-webgl2-realtime" data-i18n="content_read_article">Ler
artigo</a>
</article>
<article class="content-card">
<p class="content-card-tag mono-text" data-i18n="content_pillar_3_tag">Pilar: Games</p>
<h3 data-i18n="content_pillar_3_title">Arquitetura Multiplayer em Unreal para Times Enxutos</h3>
<p data-i18n="content_pillar_3_desc">
Decisões técnicas para reduzir retrabalho em jogos multiplayer e acelerar novas entregas com
componentes reutilizáveis.
</p>
<a href="blog/post.html?slug=airport-bus-phoenix-realtime" data-i18n="content_read_article">Ler
artigo</a>
</article>
</div>
<div class="section-cards-divider" aria-hidden="true"></div>
<p class="content-blog-cta">
<a href="blog/index.html" data-i18n="content_blog_cta">Ir para o Blog Técnico</a>
</p>
</section>
<!-- Prova Social Section -->
<section id="prova-social" class="fade-element">
<h2 class="section-title" data-i18n="proof_title">Resultados e Credibilidade</h2>
<div class="proof-grid">
<article class="proof-card">
<h3 data-i18n="proof1_title">Formação Sólida</h3>
<p data-i18n="proof1_text">
Bacharel em Ciência da Computação pela UEM, com base forte em engenharia de software e IA.
</p>
</article>
<article class="proof-card">
<h3 data-i18n="proof2_title">Atualização Contínua</h3>
<p data-i18n="proof2_text">
Certificações recentes em Deep Learning, Python e Prompt Engineering aplicados ao mercado.
</p>
</article>
<article class="proof-card">
<h3 data-i18n="proof3_title">Experiência em Produção</h3>
<p data-i18n="proof3_text">
Atuação em projetos reais com escopos de web, backend orientado a dados e desenvolvimento de
games.
</p>
</article>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="fade-element">
<h2 class="section-title" data-i18n="faq_title">Perguntas Frequentes</h2>
<div class="faq-list">
<details class="faq-item">
<summary data-i18n="faq_q1">Por que este portfólio está publicado no GitHub?</summary>
<p data-i18n="faq_a1">
Porque o GitHub funciona como vitrine técnica e histórico público de evolução: além da
interface, é possível ver repositórios, decisões de arquitetura e organização do código.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q2">O conteúdo do blog depende de redeploy do portfólio?</summary>
<p data-i18n="faq_a2">
Não. Os artigos vivem no repositório portfolio-blog e são consumidos por fetch via GitHub Raw,
permitindo atualizar conteúdo sem republicar todos os portfólios.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q3">Os projetos aqui são apenas demonstrações visuais?</summary>
<p data-i18n="faq_a3">
Não. A proposta é mostrar raciocínio de engenharia: estrutura de pastas, documentação, dados
externos, integração com GitHub como CMS e preocupação com manutenção.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q4">Posso avaliar seu código diretamente pelos repositórios?</summary>
<p data-i18n="faq_a4">
Sim. Sempre que possível, mantenho os repositórios organizados para leitura técnica, com README,
estrutura clara e separação entre interface, conteúdo e dados.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q5">Como o GitHub é usado como CMS neste portfólio?</summary>
<p data-i18n="faq_a5">
O conteúdo bruto fica em repositórios dedicados, como portfolio-blog, e os portfólios consomem
arquivos JSON e Markdown pelas URLs Raw do GitHub.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q6">Esse modelo é escalável para outros portfólios?</summary>
<p data-i18n="faq_a6">
Sim. Como o conteúdo está desacoplado da interface, outros layouts podem consumir os mesmos
dados sem duplicar posts ou depender de um build central.
</p>
</details>
<details class="faq-item">
<summary data-i18n="faq_q7">Como entrar em contato para oportunidades ou colaboração?</summary>
<p data-i18n="faq_a7">
Use o e-mail ou GitHub no bloco de contato. Contexto do projeto, objetivo e prazo ajudam a
responder com próximos passos mais claros.
</p>
</details>
</div>
</section>
<!-- Contato Section -->
<section id="contato" class="fade-element">
<div class="footer-cta contact-card-new">
<div class="cta-glow"></div>
<img src="assets/images/devices_render.png" alt="Devices Render" class="contact-hero-image" loading="lazy" width="450" height="300" decoding="async">
<h2 data-i18n="contact_header">Vamos conversar sobre oportunidades?</h2>
<p data-i18n="contact_text" class="contact-desc-new">Estou aberto a oportunidades em projetos web, backend Python e soluções com IA aplicada.</p>
<div class="contact-actions-new">
<a href="mailto:arcodeworks@gmail.com" class="contact-social-link" aria-label="Enviar e-mail">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M4 5a2 2 0 0 0-2 2v.35l10 5.56 10-5.56V7a2 2 0 0 0-2-2H4Zm18 4.65-9.51 5.28a1 1 0 0 1-.98 0L2 9.65V17a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9.65Z" />
</svg>
<span class="sr-only">E-mail</span>
</a>
<a href="https://br.linkedin.com/in/rvdonkey" target="_blank" rel="noopener noreferrer"
class="contact-social-link" aria-label="Abrir LinkedIn">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM.3 8h4.4v14H.3V8Zm7.15 0h4.22v1.91h.06c.59-1.12 2.03-2.3 4.18-2.3 4.47 0 5.29 2.94 5.29 6.76V22h-4.4v-6.77c0-1.61-.03-3.69-2.25-3.69-2.25 0-2.59 1.76-2.59 3.57V22h-4.4V8Z" />
</svg>
<span class="sr-only">LinkedIn</span>
</a>
<a href="https://github.com/NullCipherr" target="_blank" rel="noopener noreferrer"
class="contact-social-link" aria-label="Abrir GitHub">
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path
d="M12 0c-6.63 0-12 5.37-12 12 0 5.3 3.44 9.8 8.21 11.39.6.11.79-.26.79-.58v-2.23c-3.34.73-4.03-1.42-4.03-1.42-.55-1.39-1.33-1.76-1.33-1.76-1.09-.75.08-.73.08-.73 1.21.08 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.49.99.11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23.96-.27 1.98-.4 3-.4s2.05.13 3 .4c2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.24 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.82 1.1.82 2.22v3.29c0 .32.19.69.8.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12Z" />
</svg>
<span class="sr-only">GitHub</span>
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="premium-footer fade-element">
<div class="footer-container">
<div class="footer-grid" aria-label="Navegação de rodapé" data-i18n-attr="aria-label:footer_nav_aria">
<section class="footer-panel" aria-labelledby="footer-brand-title">
<h2 id="footer-brand-title" class="footer-panel-title" data-i18n="footer_brand_title">Marca</h2>
<a href="#hero" class="footer-logo logo" aria-label="Andrei Costa - Início">AC.</a>
<p class="footer-brand-copy" data-i18n="footer_brand_copy">
Desenvolvimento full stack com foco em performance, qualidade técnica e soluções aplicadas a
problemas reais.
</p>
<p class="footer-availability" data-i18n="footer_availability">
Disponível para novos projetos e oportunidades.
</p>
</section>
<nav class="footer-panel footer-nav" aria-labelledby="footer-nav-title">
<h2 id="footer-nav-title" class="footer-panel-title" data-i18n="footer_nav_title">Navegação</h2>
<ul class="footer-links-list">
<li><a href="#sobre" data-i18n="nav_about">Sobre</a></li>
<li><a href="#experiencia" data-i18n="nav_experience">Experiência</a></li>
<li><a href="#habilidades" data-i18n="nav_skills">Habilidades</a></li>
<li><a href="#projetos" data-i18n="nav_projects">Projetos</a></li>
<li><a href="#conteudos" data-i18n="nav_content">Conteúdo</a></li>
<li><a href="#faq" data-i18n="nav_faq">FAQ</a></li>
</ul>
</nav>
<nav class="footer-panel footer-nav" aria-labelledby="footer-content-title">
<h2 id="footer-content-title" class="footer-panel-title" data-i18n="footer_content_title">Conteúdo</h2>
<ul class="footer-links-list">
<li><a href="#showcase" data-i18n="showcase_title">Showcase</a></li>
<li><a href="blog/index.html" data-i18n="content_blog_cta">Ir para o Blog Técnico</a></li>
<li><a href="https://github.com/NullCipherr?tab=repositories" target="_blank"
rel="noopener noreferrer" data-i18n="projects_blog_cta">Ver meus repositórios no GitHub</a></li>
<li><a href="https://github.com/NullCipherr/portfolio-blog" target="_blank"
rel="noopener noreferrer">portfolio-blog</a></li>
</ul>
</nav>
<section class="footer-panel" aria-labelledby="footer-contact-title">
<h2 id="footer-contact-title" class="footer-panel-title" data-i18n="footer_contact_title">Contato Direto</h2>
<div class="footer-contact-links">
<a href="mailto:arcodeworks@gmail.com">arcodeworks@gmail.com</a>
<a href="https://br.linkedin.com/in/rvdonkey" target="_blank" rel="noopener noreferrer">LinkedIn</a>
<a href="https://github.com/NullCipherr" target="_blank" rel="noopener noreferrer">GitHub</a>
</div>
</section>
</div>
<div class="footer-note-divider" aria-hidden="true"></div>
<div class="footer-tech-note">
<p data-i18n="footer_tech_note">
"Desenvolvido com HTML5, CSS3 e Vanilla JS — Performance máxima."
</p>
</div>
<div class="footer-legal">
<p>© <span id="current-year"></span> Andrei Costa. <span data-i18n="footer_rights">Todos os
direitos reservados.</span></p>
<a href="#hero" class="footer-back-top" data-i18n="footer_back_top">Voltar ao topo</a>
</div>
</div>
</footer>
<!-- JS -->
<script src="js/script.js" defer></script>
</body>
</html>