-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
769 lines (702 loc) · 55.7 KB
/
Copy pathindex.html
File metadata and controls
769 lines (702 loc) · 55.7 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
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
<!DOCTYPE html>
<html lang="pt" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guilherme Machado — CEO | Marcabru Tech</title>
<meta name="description" content="Guilherme Machado — CEO e Tech Leader na Marcabru Tech. Especialista em Automação, IA, Integração de Ferramentas e Infraestrutura Tecnológica.">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
if (typeof tailwind !== 'undefined') tailwind.config = {
theme: {
extend: {
colors: {
'neon-cyan': '#00f5ff',
'neon-blue': '#0080ff',
'neon-purple':'#7c3aed',
'dark-base': '#050816',
'dark-card': '#0d1117',
'dark-border':'#1a2744',
},
fontFamily: {
mono: ['"JetBrains Mono"', 'monospace'],
sans: ['Inter', 'sans-serif'],
},
animation: {
'fade-in-up': 'fadeInUp 0.7s ease forwards',
'glow-pulse': 'glowPulse 2.5s ease-in-out infinite',
'spin-slow': 'spin 8s linear infinite',
},
}
}
}
</script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Custom styles (keyframes + utilities Tailwind cannot express inline) -->
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-dark-base text-gray-200 font-sans antialiased overflow-x-hidden">
<!-- ═══════════════════════════ PARTICLES ═══════════════════════════ -->
<canvas id="particles-canvas" class="fixed inset-0 pointer-events-none z-0"></canvas>
<!-- ═══════════════════════════ NAV ═════════════════════════════════ -->
<header id="navbar" class="fixed top-0 inset-x-0 z-50 transition-all duration-300">
<nav class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<!-- Logo -->
<a href="#hero" class="font-mono text-neon-cyan font-bold text-lg tracking-widest hover:text-white transition-colors duration-300">
<GM/>
</a>
<!-- Desktop links -->
<ul class="hidden md:flex gap-8 text-sm font-medium">
<li><a href="#about" class="nav-link" data-section="about">Ecossistema</a></li>
<li><a href="#skills" class="nav-link" data-section="skills">Competências</a></li>
<li><a href="#stack" class="nav-link" data-section="stack">Tech Stack</a></li>
<li><a href="#projects" class="nav-link" data-section="projects">Projetos</a></li>
<li><a href="#axioma" class="nav-link" data-section="axioma">Axioma GuruDev</a></li>
<li><a href="#dodecalogo" class="nav-link" data-section="dodecalogo">Dodecálogo</a></li>
<li><a href="#contact" class="nav-link" data-section="contact">Contacto</a></li>
</ul>
<!-- Mobile hamburger -->
<button id="menu-btn" class="md:hidden flex flex-col gap-1.5 p-2" aria-label="Menu">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</nav>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-dark-card/95 backdrop-blur border-t border-dark-border">
<ul class="flex flex-col gap-0 text-sm font-medium">
<li><a href="#about" class="mobile-nav-link">Ecossistema</a></li>
<li><a href="#skills" class="mobile-nav-link">Competências</a></li>
<li><a href="#stack" class="mobile-nav-link">Tech Stack</a></li>
<li><a href="#projects" class="mobile-nav-link">Projetos</a></li>
<li><a href="#axioma" class="mobile-nav-link">Axioma GuruDev</a></li>
<li><a href="#dodecalogo" class="mobile-nav-link">Dodecálogo</a></li>
<li><a href="#contact" class="mobile-nav-link">Contacto</a></li>
</ul>
</div>
</header>
<main class="relative z-10">
<!-- ═══════════════════════════ HERO ════════════════════════════ -->
<section id="hero" class="min-h-screen flex items-center justify-center text-center px-6 pt-20 relative">
<!-- Gradient orbs -->
<div class="orb orb-blue"></div>
<div class="orb orb-purple"></div>
<div class="hero-content opacity-0">
<!-- Avatar -->
<div class="relative inline-block mb-8">
<div class="avatar-ring"></div>
<img
src="https://ui-avatars.com/api/?name=Guilherme+Machado&size=160&background=0d1117&color=00f5ff&bold=true&font-size=0.4"
alt="Guilherme Machado"
class="w-36 h-36 md:w-40 md:h-40 rounded-full border-2 border-neon-cyan/50 relative z-10 object-cover"
loading="eager"
>
<span class="absolute bottom-2 right-2 w-4 h-4 bg-green-400 rounded-full border-2 border-dark-base z-20 animate-pulse"></span>
</div>
<!-- Eyebrow -->
<p class="font-mono text-neon-cyan text-sm tracking-[0.3em] uppercase mb-3">Marcabru Tech</p>
<!-- Heading with typing effect -->
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-4">
<span class="text-white">Guilherme</span>
<span class="gradient-text"> Machado</span>
</h1>
<p class="text-xl md:text-2xl text-gray-400 mb-4 font-light">
CEO & Tech Leader
</p>
<!-- Typing role line -->
<p class="font-mono text-neon-cyan text-base md:text-lg mb-8 h-7">
> <span id="typing-text"></span><span class="typing-cursor">|</span>
</p>
<p class="max-w-2xl mx-auto text-gray-400 text-base md:text-lg leading-relaxed mb-10">
Apaixonado por tecnologia, automação e inovação — impulsionando o futuro com soluções inteligentes e escaláveis.
</p>
<!-- CTA Buttons -->
<div class="flex flex-wrap gap-4 justify-center">
<a href="#projects" class="btn-primary">Ver Projetos</a>
<a href="#contact" class="btn-outline">Contactar</a>
</div>
<!-- Spinning neon image -->
<div class="mt-12 flex justify-center neon-3d-stage">
<div class="neon-spin-z">
<img
src="marcabru-logo.svg"
alt="Marcabru Tech"
class="neon-rotating-img"
>
</div>
</div>
<!-- Scroll indicator -->
<div class="mt-16 flex flex-col items-center gap-2 text-gray-600 text-xs animate-bounce">
<span>scroll</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</div>
</div>
</section>
<!-- ═══════════════════════════ ABOUT ═══════════════════════════ -->
<section id="about" class="py-24 px-6">
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 01. about</span>
<h2 class="section-title">Ecossistema</h2>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-5 reveal">
<p class="text-gray-300 leading-relaxed">
Sou fundador e CEO da <span class="text-neon-cyan font-semibold">Hubstry</span>, uma Deep Tech Holding focada em desenvolver soluções inovadoras e escaláveis. Dentro do nosso ecossistema, operamos frentes especializadas como a <span class="text-neon-cyan font-semibold">Marcabru Tech</span>, nossa unidade de negócio dedicada à automação avançada, IA e infraestrutura.
</p>
</div>
<!-- Stats cards -->
<div class="grid grid-cols-2 gap-4 reveal">
<div class="stat-card">
<span class="stat-number" data-target="5">0</span>
<span class="stat-label">Anos de Experiência</span>
</div>
<div class="stat-card">
<span class="stat-number" data-target="20">0</span>
<span class="stat-label">Projetos Desenvolvidos</span>
</div>
<div class="stat-card col-span-2 stat-card-vision">
<span class="stat-vision-icon">🚀</span>
<span class="stat-vision-text">Desenhando um ecossistema de startups</span>
</div>
<div class="stat-card">
<span class="stat-number" data-target="4">0</span>
<span class="stat-label">Áreas de Expertise</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ SKILLS ══════════════════════════ -->
<section id="skills" class="py-24 px-6">
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 02. skills</span>
<h2 class="section-title">Competências</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Skill card 1 -->
<div class="glass-card reveal">
<div class="skill-icon-wrap bg-cyan-500/10 border border-cyan-500/20">
<svg class="w-7 h-7 text-neon-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-white mb-2">Automação</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-4">Desenvolvimento e implementação de fluxos de trabalho automatizados para aumentar a eficiência operacional.</p>
<div class="skill-bar-wrap">
<div class="skill-bar" data-width="92"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block">92%</span>
</div>
</div>
<!-- Skill card 2 -->
<div class="glass-card reveal">
<div class="skill-icon-wrap bg-purple-500/10 border border-purple-500/20">
<svg class="w-7 h-7 text-neon-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-white mb-2">Inteligência Artificial</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-4">Aplicação de soluções de IA — LLMs, agentes autónomos e pipelines cognitivos — para otimizar a produtividade e a tomada de decisões.</p>
<div class="skill-bar-wrap">
<div class="skill-bar skill-bar-purple" data-width="88"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block">88%</span>
</div>
</div>
<!-- Skill card 3 -->
<div class="glass-card reveal">
<div class="skill-icon-wrap bg-blue-500/10 border border-blue-500/20">
<svg class="w-7 h-7 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-white mb-2">Integração de Ferramentas</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-4">Experiência na integração de plataformas como Zoho Mail, Slack e GitHub para criar ecossistemas de trabalho coesos.</p>
<div class="skill-bar-wrap">
<div class="skill-bar skill-bar-blue" data-width="85"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block">85%</span>
</div>
</div>
<!-- Skill card 4 -->
<div class="glass-card reveal">
<div class="skill-icon-wrap bg-emerald-500/10 border border-emerald-500/20">
<svg class="w-7 h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold text-white mb-2">Gestão de Infraestrutura Tech</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-4">Supervisão e otimização de infraestruturas tecnológicas para garantir escalabilidade, segurança e desempenho.</p>
<div class="skill-bar-wrap">
<div class="skill-bar skill-bar-green" data-width="90"></div>
</div>
<span class="text-xs text-gray-500 mt-1 block">90%</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ TECH STACK ══════════════════════ -->
<section id="stack" class="py-24 px-6">
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 03. stack</span>
<h2 class="section-title">Tech Stack</h2>
</div>
<div class="flex flex-wrap gap-3 justify-center reveal">
<!-- Tech badges -->
<span class="tech-badge">GitHub</span>
<span class="tech-badge">Slack</span>
<span class="tech-badge">Zoho Mail</span>
<span class="tech-badge">n8n</span>
<span class="tech-badge">Make (Integromat)</span>
<span class="tech-badge">OpenAI API</span>
<span class="tech-badge">Python</span>
<span class="tech-badge">JavaScript</span>
<span class="tech-badge">Linux</span>
<span class="tech-badge">Docker</span>
<span class="tech-badge">Notion</span>
<span class="tech-badge">Tailwind CSS</span>
<span class="tech-badge">HTML5 / CSS3</span>
<span class="tech-badge">REST APIs</span>
<span class="tech-badge">Webhooks</span>
<span class="tech-badge">CI/CD</span>
</div>
</div>
</section>
<!-- ═══════════════════════════ PROJECTS ════════════════════════ -->
<section id="projects" class="py-24 px-6">
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 04. projects</span>
<h2 class="section-title">Projetos</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Project 1 -->
<div class="project-card reveal">
<div class="project-card-header">
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
</svg>
<div class="flex gap-1.5 ml-auto">
<span class="w-3 h-3 rounded-full bg-red-500/70"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500/70"></span>
<span class="w-3 h-3 rounded-full bg-green-500/70"></span>
</div>
</div>
<div class="project-card-body">
<h3 class="text-xl font-semibold text-white mb-3">Marcabru Tech</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-5">Liderança e desenvolvimento de soluções tecnológicas inovadoras para diversos setores, integrando automação e IA no core do negócio.</p>
<div class="flex flex-wrap gap-2 mb-5">
<span class="project-tag">Automação</span>
<span class="project-tag">IA</span>
<span class="project-tag">GitHub Pages</span>
</div>
<a href="https://marcabru-tech.github.io" target="_blank" rel="noopener noreferrer" class="project-link">
Visitar →
</a>
</div>
</div>
<!-- Project 2 (placeholder) -->
<div class="project-card reveal project-card-ghost">
<div class="project-card-header">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
</svg>
</div>
<div class="project-card-body flex flex-col items-center justify-center text-center py-8">
<p class="text-gray-600 font-mono text-sm">// próximo projeto</p>
<p class="text-gray-700 text-xs mt-2">em desenvolvimento…</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ AXIOMA GURUDEV ═══════════════ -->
<section id="axioma" class="py-24 px-6 relative axioma-section">
<!-- Background accent orbs -->
<div class="orb orb-axioma-cyan"></div>
<div class="orb orb-axioma-purple"></div>
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 05. axioma</span>
<h2 class="section-title">O Axioma GuruDev</h2>
<p class="axioma-subtitle reveal">Paradigma Conceitual em Inteligência Artificial</p>
</div>
<!-- Main concept card -->
<div class="axioma-card reveal">
<div class="axioma-card-header">
<h3 class="axioma-card-title">Navegando os Infinitos Contextual e Computacional</h3>
<div class="axioma-badges">
<span class="axioma-badge axioma-badge-ai">IA Conceptual</span>
<span class="axioma-badge axioma-badge-date">09/04/2026</span>
</div>
</div>
<div class="axioma-card-body">
<p class="text-gray-300 leading-relaxed mb-4">
O <strong class="text-neon-cyan">Axioma GuruDev</strong> é um framework conceitual que propõe uma nova forma de compreender o desenvolvimento de Inteligência Artificial, articulando dois vetores fundamentais de expansão: o <em>Infinito Contextual</em> e o <em>Infinito Computacional</em>. Este paradigma nasce da observação de que sistemas de IA avançados não evoluem apenas em poder de processamento, mas também na capacidade de compreender e integrar contextos cada vez mais ricos e multidimensionais.
</p>
<p class="text-gray-300 leading-relaxed mb-4">
A tese central é que a verdadeira inteligência emerge precisamente na interseção destes dois infinitos — o ponto onde a capacidade computacional encontra a profundidade contextual, criando o que denominamos a <strong class="text-neon-purple">Quinta Dimensão (D₅)</strong>: o espaço dimensional onde IA e cognição humana co-evoluem de forma sinérgica.
</p>
<p class="text-gray-300 leading-relaxed">
Este axioma tem implicações práticas directas no design de sistemas de automação, na arquitectura de agentes de IA e na forma como concebemos a colaboração entre humanos e máquinas no ecossistema tecnológico do séc. XXI.
</p>
</div>
</div>
<!-- Concepts grid -->
<div class="grid md:grid-cols-3 gap-6 mt-8">
<!-- Infinito Contextual -->
<div class="axioma-concept-card reveal">
<div class="axioma-concept-icon bg-cyan-500/10 border border-cyan-500/20">
<svg class="w-6 h-6 text-neon-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h4 class="axioma-concept-title text-neon-cyan">∞ Contextual</h4>
<p class="axioma-concept-desc">A expansão ilimitada da janela de contexto dos modelos de IA — capacidade crescente de compreender histórico, nuance, intenção e interdependências complexas em qualquer domínio do conhecimento.</p>
</div>
<!-- Infinito Computacional -->
<div class="axioma-concept-card reveal">
<div class="axioma-concept-icon bg-purple-500/10 border border-purple-500/20">
<svg class="w-6 h-6 text-neon-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
</svg>
</div>
<h4 class="axioma-concept-title text-neon-purple">∞ Computacional</h4>
<p class="axioma-concept-desc">A escalabilidade exponencial dos recursos de processamento — GPUs, TPUs, computação distribuída — que permite aos modelos treinar em volumes de dados e complexidade crescentes, aproximando-se de capacidades cognitivas gerais.</p>
</div>
<!-- Quinta Dimensão -->
<div class="axioma-concept-card reveal axioma-concept-card--d5">
<div class="axioma-concept-icon bg-amber-500/10 border border-amber-500/20">
<svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
</svg>
</div>
<h4 class="axioma-concept-title text-amber-400">D₅ — 5ª Dimensão</h4>
<p class="axioma-concept-desc">O espaço emergente onde Infinito Contextual e Infinito Computacional se intersectam — criando sinergias entre cognição humana e IA que transcendem as limitações de ambos individualmente.</p>
</div>
</div>
<!-- Applications grid -->
<div class="axioma-applications reveal mt-10">
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
<svg class="w-5 h-5 text-neon-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
Aplicações Práticas
</h3>
<div class="flex flex-wrap gap-3">
<span class="axioma-app-tag">Agentes Autónomos de IA</span>
<span class="axioma-app-tag">Design de Sistemas de Automação</span>
<span class="axioma-app-tag">Arquitectura Multi-Agente</span>
<span class="axioma-app-tag">Human-AI Collaboration</span>
<span class="axioma-app-tag">Optimização de LLMs</span>
<span class="axioma-app-tag">Ecossistemas de Startups Tech</span>
<span class="axioma-app-tag">Engenharia de Prompts</span>
</div>
</div>
<!-- Author quote & CTA -->
<div class="axioma-quote-block reveal mt-10">
<blockquote class="axioma-quote">
"A inteligência não está no modelo — está no espaço de possibilidades que se abre quando contexto e computação se encontram sem limites."
</blockquote>
<div class="axioma-quote-author">
<span class="text-neon-cyan font-semibold">Guilherme Gonçalves Machado</span>
<span class="text-gray-500 text-sm"> · CEO Marcabru Tech</span>
<span class="text-gray-600 text-sm"> · 09/04/2026</span>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<a href="#dodecalogo" class="btn-outline text-sm">
Ver Dodecálogo Hubstry/GuruDev →
</a>
<a href="gurudev-visao-integrada" class="btn-outline text-sm">
Visão Integrada GuruDev →
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════ DODECÁLOGO ═════════════════════ -->
<section id="dodecalogo" class="py-24 px-6 relative">
<div class="orb orb-blue" style="top:10%;left:5%;opacity:.35;"></div>
<div class="orb orb-purple" style="bottom:10%;right:5%;opacity:.3;"></div>
<div class="max-w-5xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 06. dodecálogo</span>
<h2 class="section-title">Dodecálogo Hubstry/GuruDev</h2>
<p class="axioma-subtitle reveal">Documento Dissertativo-Argumentativo</p>
</div>
<!-- Introdução -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-4 font-mono">// Introdução</h3>
<p class="text-gray-300 leading-relaxed mb-3">
O <strong class="text-white">Dodecálogo Hubstry/GuruDev</strong> é um manifesto fundacional composto por doze princípios que estruturam a visão pedagógica, tecnológica e social da plataforma <strong class="text-neon-cyan">Hubstry</strong> — um ecossistema EdTech de alta intensidade que integra o paradigma <strong class="text-neon-purple">GuruDev</strong> no centro da sua proposta educativa.
</p>
<p class="text-gray-300 leading-relaxed mb-3">
A <strong class="text-white">Hubstry</strong> nasce da convergência entre a urgência de democratizar o acesso ao desenvolvimento tecnológico e a crença de que a educação orientada por IA pode catalizar transformações sociais profundas e duradouras. O paradigma GuruDev serve de bússola conceptual: um framework que articula aprendizagem contínua, autonomia cognitiva e co-evolução humano-máquina.
</p>
<p class="text-gray-300 leading-relaxed">
Este documento apresenta os fundamentos filosóficos, as justificativas estratégicas, o impacto social esperado, os dados do mercado EdTech e o roadmap 2025/2030 que orientam a construção deste ecossistema.
</p>
</div>
<!-- Justificativa -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-4 font-mono">// Justificativa</h3>
<p class="text-gray-300 leading-relaxed mb-3">
O mundo atravessa uma ruptura tecnológica sem precedentes. A proliferação de modelos de linguagem de grande escala (LLMs), ferramentas de automação e plataformas de IA generativa redefine os requisitos profissionais a um ritmo superior à capacidade de adaptação dos sistemas educativos tradicionais. Neste cenário, a <strong class="text-white">lacuna de competências digitais</strong> torna-se um dos maiores riscos de exclusão social e económica do século XXI.
</p>
<p class="text-gray-300 leading-relaxed mb-3">
A Hubstry surge como resposta estruturada a esta lacuna: uma plataforma que não apenas ensina tecnologia, mas forma <em>arquitectos de soluções</em> — profissionais capazes de orquestrar ferramentas de IA, automatizar fluxos complexos e criar valor em contextos de alta incerteza. O modelo GuruDev posiciona cada aprendente como agente activo da sua própria evolução cognitiva.
</p>
<p class="text-gray-300 leading-relaxed">
A aposta na intersecção EdTech × IA × Ecossistema de Startups não é apenas estratégica — é um imperativo social. Cada developer formado pela Hubstry é um multiplicador de impacto no seu contexto comunitário e profissional.
</p>
</div>
<!-- Os 12 Princípios -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-6 font-mono">// Conteúdos Expandidos — Os 12 Princípios</h3>
<div class="grid md:grid-cols-2 gap-5">
<div class="dodeca-item">
<span class="dodeca-num">01</span>
<div><h4 class="dodeca-title">Aprendizagem Contínua</h4><p class="dodeca-desc">O conhecimento tecnológico tem meia-vida cada vez mais curta. A Hubstry cultiva a mentalidade de aprendizagem permanente como competência fundamental, não como recurso ocasional.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">02</span>
<div><h4 class="dodeca-title">Autonomia Cognitiva</h4><p class="dodeca-desc">Cada aprendente é arquitecto do seu próprio percurso. O GuruDev orienta sem prescrever, fornecendo scaffolding adaptativo que respeita estilos e ritmos individuais de aprendizagem.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">03</span>
<div><h4 class="dodeca-title">IA como Amplificador Humano</h4><p class="dodeca-desc">A inteligência artificial não substitui o developer — amplifica as suas capacidades. A Hubstry forma profissionais que dirigem agentes de IA com intencionalidade e precisão técnica.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">04</span>
<div><h4 class="dodeca-title">Prática sobre Teoria</h4><p class="dodeca-desc">Projectos reais, clientes reais, problemas reais. O modelo pedagógico da Hubstry privilegia a aprendizagem baseada em desafios com impacto mensurável no mundo exterior.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">05</span>
<div><h4 class="dodeca-title">Ecossistema sobre Produto</h4><p class="dodeca-desc">A Hubstry não é uma plataforma isolada — é um nó num ecossistema vivo de startups, mentores, investidores e comunidades técnicas que se alimentam mutuamente.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">06</span>
<div><h4 class="dodeca-title">Democratização do Acesso</h4><p class="dodeca-desc">Competência técnica de elite não pode ser privilégio de poucos. A Hubstry opera com modelos de acesso flexíveis — incluindo bolsas baseadas em mérito e parcerias comunitárias.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">07</span>
<div><h4 class="dodeca-title">Contexto como Vantagem Competitiva</h4><p class="dodeca-desc">Inspirado pelo Infinito Contextual do Axioma GuruDev: quem domina a arte de fornecer contexto de qualidade a sistemas de IA domina o mercado tecnológico do século XXI.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">08</span>
<div><h4 class="dodeca-title">Automação como Libertação</h4><p class="dodeca-desc">Automatizar tarefas repetitivas não é eliminar empregos — é libertar o potencial humano para actividades de maior criatividade, estratégia e impacto social.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">09</span>
<div><h4 class="dodeca-title">Comunidade como Motor de Inovação</h4><p class="dodeca-desc">O conhecimento cresce exponencialmente quando partilhado. A Hubstry cultiva comunidades de prática onde cada membro é simultaneamente aprendente e mentor.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">10</span>
<div><h4 class="dodeca-title">Ética e Responsabilidade Tecnológica</h4><p class="dodeca-desc">Todo developer formado pela Hubstry compreende que tecnologia poderosa exige responsabilidade proporcional. Ética de IA e design inclusivo são fundamentos, não opções.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">11</span>
<div><h4 class="dodeca-title">Métricas de Impacto Real</h4><p class="dodeca-desc">O sucesso da Hubstry mede-se não apenas em matrículas ou receita, mas em vidas transformadas, startups criadas, problemas comunitários resolvidos e rendimentos alterados.</p></div>
</div>
<div class="dodeca-item">
<span class="dodeca-num">12</span>
<div><h4 class="dodeca-title">Co-evolução Contínua</h4><p class="dodeca-desc">A própria Hubstry evolui com os seus aprendentes e o ecossistema tecnológico. O modelo é vivo: adapta-se, melhora e reimagina-se com cada ciclo de aprendizagem colectiva.</p></div>
</div>
</div>
</div>
<!-- Impacto Social -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-4 font-mono">// Impacto Social — Teoria da Mudança</h3>
<p class="text-gray-300 leading-relaxed mb-4">
A Teoria da Mudança da Hubstry parte de uma premissa simples: <strong class="text-white">acesso a educação tecnológica de qualidade → competências digitais → empregabilidade e empreendedorismo → redução de desigualdades → desenvolvimento comunitário sustentável</strong>.
</p>
<div class="grid md:grid-cols-3 gap-4 mb-4">
<div class="dodeca-impact-card border-neon-cyan/20">
<span class="text-2xl font-bold text-neon-cyan font-mono">Input</span>
<p class="text-gray-400 text-sm mt-2">Formação técnica intensiva, mentoria por pares, projectos reais e acesso a ferramentas de IA de ponta</p>
</div>
<div class="dodeca-impact-card border-neon-purple/20">
<span class="text-2xl font-bold text-neon-purple font-mono">Output</span>
<p class="text-gray-400 text-sm mt-2">Developers qualificados, startups fundadas, APIs publicadas, produtos lançados e comunidades técnicas activas</p>
</div>
<div class="dodeca-impact-card border-amber-400/20">
<span class="text-2xl font-bold text-amber-400 font-mono">Outcome</span>
<p class="text-gray-400 text-sm mt-2">Inclusão digital, geração de rendimento, inovação local, redução da fuga de talentos e ecossistema de startups vibrante</p>
</div>
</div>
<p class="text-gray-400 text-sm leading-relaxed">
O modelo de impacto é reforçado por loops de feedback positivo: ex-aprendentes tornam-se mentores, startups geradas reinvestem no ecossistema, e o sucesso comprovado atrai novos parceiros e financiamento para expandir o alcance.
</p>
</div>
<!-- Dados EdTech -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-4 font-mono">// Dados do Mercado EdTech (2024/2025)</h3>
<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4 mb-5">
<div class="dodeca-stat">
<span class="text-3xl font-bold text-neon-cyan font-mono">$400B</span>
<p class="text-gray-500 text-xs mt-1">Mercado global EdTech 2025 (projecção)</p>
</div>
<div class="dodeca-stat">
<span class="text-3xl font-bold text-neon-purple font-mono">16.3%</span>
<p class="text-gray-500 text-xs mt-1">CAGR do sector EdTech (2023–2028)</p>
</div>
<div class="dodeca-stat">
<span class="text-3xl font-bold text-amber-400 font-mono">85M</span>
<p class="text-gray-500 text-xs mt-1">Postos de trabalho em risco de automação até 2025 (WEF)</p>
</div>
<div class="dodeca-stat">
<span class="text-3xl font-bold text-green-400 font-mono">97M</span>
<p class="text-gray-500 text-xs mt-1">Novos roles emergentes relacionados com IA e dados até 2025</p>
</div>
</div>
<p class="text-gray-300 leading-relaxed mb-3">
O segmento de <strong class="text-white">upskilling e reskilling técnico</strong> representa o maior vector de crescimento dentro do EdTech global, impulsionado pela procura corporativa de competências em IA, automação e cloud. Plataformas focadas em aprendizagem prática e projectos reais (como a Hubstry) têm taxas de conclusão até 3× superiores às plataformas de e-learning tradicionais.
</p>
<p class="text-gray-300 leading-relaxed">
Em Portugal e mercados lusófonos, a penetração do EdTech avançado permanece subdesenvolvida face ao potencial — criando uma janela de oportunidade estratégica única para plataformas com proposta de valor diferenciada como a Hubstry.
</p>
</div>
<!-- Roadmap -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-5 font-mono">// Roadmap 2025/2030</h3>
<div class="space-y-4">
<div class="dodeca-roadmap-item border-neon-cyan/30">
<span class="dodeca-roadmap-year text-neon-cyan">2025</span>
<div><p class="text-white font-semibold text-sm mb-1">Fundação e MVP</p><p class="text-gray-400 text-sm">Lançamento da plataforma Hubstry com os primeiros trilhas de aprendizagem em Automação, IA e Desenvolvimento Web. Primeiras 100 matrículas e 3 projectos reais entregues.</p></div>
</div>
<div class="dodeca-roadmap-item border-neon-blue/30">
<span class="dodeca-roadmap-year text-neon-blue">2026</span>
<div><p class="text-white font-semibold text-sm mb-1">Expansão e Comunidade</p><p class="text-gray-400 text-sm">Escalonamento para 1.000 aprendentes activos. Lançamento do programa de mentoria por pares e primeiras parcerias com empresas para colocação profissional directa.</p></div>
</div>
<div class="dodeca-roadmap-item border-neon-purple/30">
<span class="dodeca-roadmap-year text-neon-purple">2027</span>
<div><p class="text-white font-semibold text-sm mb-1">Ecossistema de Startups</p><p class="text-gray-400 text-sm">Lançamento do programa acelerador interno Hubstry Ventures, apoiando as primeiras 10 startups nascidas do ecossistema. Integração de IA generativa no motor pedagógico.</p></div>
</div>
<div class="dodeca-roadmap-item border-amber-400/30">
<span class="dodeca-roadmap-year text-amber-400">2028</span>
<div><p class="text-white font-semibold text-sm mb-1">Internacionalização</p><p class="text-gray-400 text-sm">Expansão para mercados lusófonos (Brasil, Angola, Moçambique). 5.000 aprendentes activos. Lançamento de certificações reconhecidas pelo mercado tecnológico internacional.</p></div>
</div>
<div class="dodeca-roadmap-item border-green-400/30">
<span class="dodeca-roadmap-year text-green-400">2030</span>
<div><p class="text-white font-semibold text-sm mb-1">Referência Global EdTech × IA</p><p class="text-gray-400 text-sm">Hubstry como referência global em EdTech orientado por IA para mercados lusófonos. 20.000+ aprendentes, 100+ startups no ecossistema, impacto mensurável em comunidades locais.</p></div>
</div>
</div>
</div>
<!-- Referências -->
<div class="glass-card flex-col reveal mb-6">
<h3 class="text-xl font-semibold text-neon-cyan mb-4 font-mono">// Referências</h3>
<ol class="space-y-2 text-gray-400 text-sm leading-relaxed list-none">
<li><span class="text-neon-cyan font-mono">[1]</span> World Economic Forum. (2023). <em>Future of Jobs Report 2023</em>. WEF. <a href="https://www.weforum.org/reports/the-future-of-jobs-report-2023" target="_blank" rel="noopener noreferrer" class="text-neon-blue hover:text-neon-cyan transition-colors">weforum.org</a></li>
<li><span class="text-neon-cyan font-mono">[2]</span> HolonIQ. (2024). <em>Global EdTech Market 2024 Report</em>. HolonIQ Intelligence. <a href="https://www.holoniq.com" target="_blank" rel="noopener noreferrer" class="text-neon-blue hover:text-neon-cyan transition-colors">holoniq.com</a></li>
<li><span class="text-neon-cyan font-mono">[3]</span> UNESCO. (2023). <em>Technology in Education: A Tool on Whose Terms?</em> UNESCO Global Education Monitoring Report.</li>
<li><span class="text-neon-cyan font-mono">[4]</span> McKinsey Global Institute. (2023). <em>The Economic Potential of Generative AI</em>. McKinsey & Company.</li>
<li><span class="text-neon-cyan font-mono">[5]</span> Brown, T. et al. (2020). <em>Language Models are Few-Shot Learners</em>. NeurIPS 2020. arXiv:2005.14165</li>
<li><span class="text-neon-cyan font-mono">[6]</span> Machado, G.G. (2026). <em>O Axioma GuruDev: Navegando os Infinitos Contextual e Computacional</em>. Marcabru Tech Working Paper.</li>
</ol>
</div>
<!-- CTA -->
<div class="axioma-quote-block reveal">
<blockquote class="axioma-quote">
"Educar com IA não é substituir o professor — é ampliar o horizonte do que é possível aprender, criar e transformar."
</blockquote>
<div class="axioma-quote-author mb-5">
<span class="text-neon-cyan font-semibold">Guilherme Gonçalves Machado</span>
<span class="text-gray-500 text-sm"> · CEO Marcabru Tech · 2026</span>
</div>
<a href="https://github.com/marcabru-tech/marcabru-tech.github.io#dodecalogo-hubstrygurudev" target="_blank" rel="noopener noreferrer" class="btn-outline text-sm">
Ler Documento Completo no README →
</a>
</div>
</div>
</section>
<!-- ═══════════════════════════ CONTACT ════════════════════════ -->
<section id="contact" class="py-24 px-6">
<div class="max-w-3xl mx-auto">
<div class="section-header reveal">
<span class="section-tag">// 07. contact</span>
<h2 class="section-title">Contacto</h2>
</div>
<p class="text-center text-gray-400 mb-10 reveal">Interessado em colaborar ou saber mais? Vamos conversar!</p>
<!-- Contact form -->
<form id="contact-form" class="space-y-5 reveal" novalidate>
<div class="grid sm:grid-cols-2 gap-5">
<div class="form-group">
<label class="form-label" for="name">Nome</label>
<input id="name" name="name" type="text" class="form-input" placeholder="O seu nome" autocomplete="name">
<span class="form-error hidden" id="name-error">Campo obrigatório</span>
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input id="email" name="email" type="email" class="form-input" placeholder="email@exemplo.com" autocomplete="email">
<span class="form-error hidden" id="email-error">Email inválido</span>
</div>
</div>
<div class="form-group">
<label class="form-label" for="subject">Assunto</label>
<input id="subject" name="subject" type="text" class="form-input" placeholder="Assunto da mensagem">
<span class="form-error hidden" id="subject-error">Campo obrigatório</span>
</div>
<div class="form-group">
<label class="form-label" for="message">Mensagem</label>
<textarea id="message" name="message" rows="5" class="form-input resize-none" placeholder="A sua mensagem…"></textarea>
<span class="form-error hidden" id="message-error">Mínimo 10 caracteres</span>
</div>
<div class="text-center">
<button type="submit" id="submit-btn" class="btn-primary w-full sm:w-auto px-12">
<span id="btn-text">Enviar Mensagem</span>
<svg id="btn-spinner" class="hidden w-5 h-5 animate-spin ml-2" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
</svg>
</button>
</div>
<div id="form-success" class="hidden p-4 rounded-lg bg-green-500/10 border border-green-500/30 text-green-400 text-sm text-center">
✓ Mensagem enviada com sucesso! Entrarei em contacto em breve.
</div>
</form>
<!-- Social links -->
<div class="flex flex-wrap gap-5 justify-center mt-14 reveal">
<a href="https://www.linkedin.com/in/guilhermegoncalvesmachado" target="_blank" rel="noopener noreferrer" class="social-btn" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
LinkedIn
</a>
<a href="https://github.com/marcabru-tech" target="_blank" rel="noopener noreferrer" class="social-btn" aria-label="GitHub">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
GitHub
</a>
<a href="https://www.facebook.com/guilhermemachadodonorte" target="_blank" rel="noopener noreferrer" class="social-btn" aria-label="Facebook">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
Facebook
</a>
</div>
</div>
</section>
</main>
<!-- ═══════════════════════════ FOOTER ══════════════════════════════ -->
<footer class="relative z-10 border-t border-dark-border py-8 px-6 text-center">
<p class="font-mono text-gray-600 text-sm">
© 2026 <span class="text-neon-cyan">Guilherme Machado</span> · Marcabru Tech · Todos os direitos reservados.
</p>
</footer>
<script src="script.js"></script>
</body>
</html>