feat(i18n): add multilingual support and interactive features

feat(ui): implement modern responsive dark theme
feat(portfolio): redesign portfolio structure and content
2026-06-08 14:57:56 -03:00 · 2026-06-08 14:57:25 -03:00 · 2026-06-08 14:57:10 -03:00
4 changed files with 1696 additions and 62 deletions
@@ -1,21 +1,629 @@
+/* =========================
+   RESET
+========================= */
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
 body {
-font-family: Arial, sans-serif;
-max-width: 900px;
-margin: auto;
-padding: 20px;
-line-height: 1.6;
+
+    font-family: "Inter", sans-serif;
+
+     background:
+        radial-gradient(
+            circle at top,
+            rgba(59,130,246,.08),
+            transparent 45%
+        ),
+        var(--background);
+
+    color: var(--text-primary);
+
+    line-height: 1.7;
+
+    overflow-x: hidden;
+
+    transition:
+        background .3s ease,
+        color .3s ease;
 }

-header {
-text-align: center;
-margin-bottom: 40px;
+/* =========================
+   VARIABLES
+========================= */
+
+:root {
+    --background: #09090b;
+    --surface: #111827;
+    --surface-hover: #1f2937;
+    --border: #27272a;
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --accent: #3b82f6;
+    --accent-hover: #2563eb;
+    --container: 1200px;
 }

-h1 {
-margin-bottom: 0;
+[data-theme="light"] {
+
+    --background: #f8fafc;
+
+    --surface: #ffffff;
+
+    --surface-hover: #f1f5f9;
+
+    --border: #e2e8f0;
+
+    --text-primary: #0f172a;
+
+    --text-secondary: #475569;
+
+    --accent: #2563eb;
+
+    --accent-hover: #1d4ed8;
+
 }

-h2 {
-border-bottom: 1px solid #ddd;
-padding-bottom: 5px;
+/* =========================
+   GLOBAL
+========================= */
+
+main {
+    width: 100%;
+}
+
+.section {
+    max-width: var(--container);
+    margin: 0 auto;
+    padding: 120px 24px;
+}
+
+.section h2 {
+    font-size: 2.4rem;
+    margin-bottom: 24px;
+    font-weight: 700;
+}
+
+.section p {
+    color: var(--text-secondary);
+    max-width: 800px;
+}
+
+/* =========================
+   HEADER
+========================= */
+
+.header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    backdrop-filter: blur(18px);
+    background: rgba(9, 9, 11, 0.75);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.navbar {
+    max-width: var(--container);
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 24px;
+}
+
+.logo {
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
+.nav-links {
+    display: flex;
+    gap: 28px;
+    list-style: none;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: var(--text-secondary);
+    transition: 0.3s ease;
+}
+
+.nav-links a:hover {
+    color: var(--text-primary);
+}
+
+.language-switcher {
+    display: flex;
+    gap: 10px;
+}
+
+.language-switcher button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+}
+
+/* =========================
+   HERO
+========================= */
+
+.hero {
+    min-height: 85vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 120px 24px 60px;
+}
+
+.hero-content {
+    max-width: 900px;
+    text-align: center;
+}
+
+.hero-badge {
+    display: inline-block;
+
+    margin-bottom: 24px;
+
+    padding: 8px 16px;
+
+    border: 1px solid var(--border);
+    border-radius: 999px;
+
+    background: color-mix(in srgb,
+            var(--surface) 80%,
+            transparent);
+
+    color: var(--text-secondary);
+
+    font-size: 0.9rem;
+}
+
+.hero h1 {
+    font-size: clamp(2.8rem, 6vw, 4.8rem);
+
+    background: linear-gradient(180deg,
+            #ffffff 0%,
+            #dbeafe 100%);
+
+    -webkit-background-clip: text;
+
+    -webkit-text-fill-color: transparent;
+
+    max-width: 1000px;
+
+    line-height: 1.1;
+
+    margin: 0 auto 28px;
+
+    font-weight: 800;
+
+    letter-spacing: -2px;
+}
+
+.hero p {
+    color: var(--text-secondary);
+
+    font-size: 1.2rem;
+
+    max-width: 700px;
+
+    margin: auto;
+}
+
+.hero-actions {
+    margin-top: 40px;
+
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+
+    flex-wrap: wrap;
+}
+
+/* =========================
+   BUTTONS
+========================= */
+
+.btn-primary,
+.btn-secondary {
+    text-decoration: none;
+
+    padding: 14px 26px;
+
+    border-radius: 12px;
+
+    transition: 0.3s ease;
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    transform: translateY(-2px);
+}
+
+.btn-secondary {
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* =========================
+   METRICS
+========================= */
+
+.metrics {
+    max-width: var(--container);
+
+    margin: auto;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    gap: 24px;
+
+    padding: 0 24px 120px;
+}
+
+.metric-card {
+    background: var(--surface);
+
+    border: 1px solid var(--border);
+
+    padding: 32px;
+
+    border-radius: 20px;
+
+    text-align: center;
+}
+
+.metric-card h3 {
+    font-size: 2rem;
+    margin-bottom: 12px;
+}
+
+.metric-card p {
+    color: var(--text-secondary);
+}
+
+/* =========================
+   GRID CARDS
+========================= */
+
+.cards-grid {
+    display: grid;
+
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+
+    gap: 24px;
+
+    margin-top: 40px;
+}
+
+.card,
+.project-card {
+    background: var(--surface);
+
+    border: 1px solid var(--border);
+
+    border-radius: 20px;
+
+    padding: 28px;
+
+    transition: all .3s ease;
+}
+
+.card:hover,
+.project-card:hover {
+    transform: translateY(-6px);
+
+    border-color: rgba(59, 130, 246, .35);
+
+    background: var(--surface-hover);
+}
+
+.card h3,
+.project-card h3 {
+    margin-bottom: 12px;
+}
+
+.card p,
+.project-card p {
+    color: var(--text-secondary);
+}
+
+/* =========================
+   TECH STACK
+========================= */
+
+.tech-stack {
+    display: flex;
+    flex-wrap: wrap;
+
+    gap: 14px;
+
+    margin-top: 40px;
+}
+
+.tech-stack span {
+    padding: 10px 18px;
+
+    background: var(--surface);
+
+    border: 1px solid var(--border);
+
+    border-radius: 999px;
+
+    color: var(--text-secondary);
+}
+
+/* =========================
+   TIMELINE
+========================= */
+
+.timeline {
+    margin-top: 40px;
+
+    border-left: 2px solid var(--border);
+
+    padding-left: 32px;
+}
+
+.timeline-item {
+    position: relative;
+
+    margin-bottom: 50px;
+}
+
+.timeline-item::before {
+    content: "";
+
+    position: absolute;
+
+    left: -41px;
+    top: 8px;
+
+    width: 14px;
+    height: 14px;
+
+    border-radius: 50%;
+
+    background: var(--accent);
+}
+
+.timeline-item h3 {
+    margin-bottom: 10px;
+}
+
+.timeline-item p {
+    color: var(--text-secondary);
+}
+
+/* =========================
+   CONTACT
+========================= */
+
+.contact-links {
+    display: flex;
+    gap: 20px;
+
+    margin-top: 30px;
+
+    flex-wrap: wrap;
+}
+
+.contact-links a {
+    text-decoration: none;
+
+    color: var(--accent);
+
+    transition: 0.3s ease;
+}
+
+.contact-links a:hover {
+    color: white;
+}
+
+/* =========================
+   FOOTER
+========================= */
+
+.footer {
+    border-top: 1px solid var(--border);
+
+    text-align: center;
+
+    padding: 50px 24px;
+
+    color: var(--text-secondary);
+}
+
+.footer p:first-child {
+    margin-bottom: 10px;
+}
+
+/* ========================= BACK TO TOP ========================= */
+#backToTop {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 50px;
+    height: 50px;
+    border: none;
+    border-radius: 50%;
+    background: #3b82f6;
+    color: white;
+    font-size: 20px;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 999;
+}
+
+#backToTop:hover {
+    transform: translateY(-3px);
+}
+
+#backToTop.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* ========================= SECTION ANIMATION ========================= */
+.section,
+.metric-card,
+.project-card,
+.card {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.7s ease;
+}
+
+.show-element {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+/* ========================= ACTIVE NAV ========================= */
+.nav-links a.active {
+    color: #ffffff;
+}
+
+.nav-links a.active::after {
+    content: "";
+    display: block;
+    margin-top: 6px;
+    width: 100%;
+    height: 2px;
+    background: #3b82f6;
+}
+
+/* =========================
+   THEME BUTTON
+========================= */
+
+.controls {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 16px;
+}
+
+#theme-toggle {
+
+    border: none;
+
+    background: transparent;
+
+    color: var(--text-primary);
+
+    cursor: pointer;
+
+    font-size: 1.2rem;
+
+    transition: .3s ease;
+}
+
+#theme-toggle:hover {
+
+    transform: rotate(20deg);
+}
+
+/* =========================
+   RESPONSIVE
+========================= */
+
+@media (max-width: 960px) {
+
+    .metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .nav-links {
+        display: none;
+    }
+
+    .hero h1 {
+        font-size: 3rem;
+    }
+
+    .section {
+        padding: 90px 24px;
+    }
+}
+
+@media (max-width: 640px) {
+
+    .metrics {
+        grid-template-columns: 1fr;
+    }
+
+    .hero {
+        text-align: center;
+    }
+
+    .hero h1 {
+        font-size: 2.4rem;
+    }
+
+    .hero p {
+        font-size: 1rem;
+    }
+
+    .section h2 {
+        font-size: 2rem;
+    }
+}
+
+.language-switcher button.active {
+    transform: scale(1.15);
+}
+
+.language-switcher button {
+    transition: all 0.3s ease;
+}
+
+.menu-toggle {
+    display: none;
+    background: transparent;
+    border: none;
+    color: #fff;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.card:hover,
+.project-card:hover {
+    transform: translateY(-6px) scale(1.02);
+}
+
+@media (max-width:960px) {
+    .menu-toggle {
+        display: block;
+    }
+
+    .nav-links.open {
+        display: flex !important;
+    }
 }
@@ -1,73 +1,413 @@
 <!DOCTYPE html>
-
 <html lang="pt-BR">

 <head>
    <meta charset="UTF-8">
-    <title>Clezio Penha</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Clezio Penha | Programador Sênior Backend</title>
+
+    <meta name="author" content="Clezio Penha">
+
+    <meta name="description"
+        content="Programador Sênior Backend com mais de 15 anos de experiência em Java, C++, APIs REST, Cloud Computing, DevOps e Arquitetura de Software.">
+
+    <meta name="keywords"
+        content="Java, Spring Boot, Backend, Cloud, Docker, Kubernetes, Oracle Cloud, Azure, APIs REST, DevOps">
+
+    <meta property="og:title" content="Clezio Penha | Backend Engineer">
+
+    <meta property="og:description" content="Mais de 15 anos construindo sistemas robustos, escaláveis e seguros.">
+
+    <meta property="og:type" content="website">
+
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      "name": "Clezio Penha",
+      "jobTitle": "Senior Software Engineer",
+      "description": "Backend Engineer com mais de 15 anos de experiência em Java, C++, Cloud Computing, APIs REST e Arquitetura de Software.",
+      "email": "mailto:clezio.penha@gmail.com",
+      "knowsAbout": [
+        "Java",
+        "C++",
+        "Spring Boot",
+        "Quarkus",
+        "Docker",
+        "Kubernetes",
+        "PostgreSQL",
+        "Oracle Cloud",
+        "Azure"
+      ]
+    }
+    </script>
+
+    <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;800&display=swap"
+        rel="stylesheet">
+
    <link rel="stylesheet" href="css/style.css">
 </head>

 <body>

-<header>
-    <h1>Clezio Penha</h1>
-    <p>Backend Developer | C++ | Java | Cloud</p>
-</header>
+    <header class="header">
+        <nav class="navbar">

-<section>
-    <h2>Sobre</h2>
+            <div class="logo">
+                Clezio Penha
+            </div>

-```
-<p>
-    Desenvolvedor backend com experiência em C++, Qt e Java.
-    Atuo com desenvolvimento de aplicações, APIs REST,
-    Docker, Linux e Cloud.
-</p>
-```
+            <ul class="nav-links">
+                <li><a href="#home" data-i18n="nav.home">Início</a></li>
+                <li><a href="#about" data-i18n="nav.about">Sobre</a></li>
+                <li><a href="#specialties" data-i18n="nav.specialties">Especialidades</a></li>
+                <li><a href="#experience" data-i18n="nav.experience">Experiência</a></li>
+                <li><a href="#projects" data-i18n="nav.projects">Projetos</a></li>
+                <li><a href="#contact" data-i18n="nav.contact">Contato</a></li>
+            </ul>

-</section>
+            <button class="menu-toggle" aria-label="Abrir Menu">☰</button>

-<section>
-    <h2>Tecnologias</h2>
+            <div class="controls">

-```
-<ul>
-    <li>C++</li>
-    <li>Qt</li>
-    <li>Java</li>
-    <li>Spring Boot</li>
-    <li>Quarkus</li>
-    <li>Docker</li>
-    <li>Linux</li>
-    <li>Oracle Cloud</li>
-</ul>
-```
+                <button id="theme-toggle" aria-label="Alternar Tema">

-</section>
+                    🌙

-<section>
-    <h2>Projetos</h2>
+                </button>

-```
-<ul>
-    <li>Infraestrutura Oracle Cloud</li>
-    <li>Servidor Git Privado com Gitea</li>
-    <li>APIs Java com Spring Boot</li>
-</ul>
-```
+                <div class="language-switcher">

-</section>
+                    <button data-lang="pt">🇧🇷</button>

-<section>
-    <h2>Contato</h2>
+                    <button data-lang="en">🇺🇸</button>

-```
-<p>Email: clezio.penha@gmail.com</p>
-<p>Git: https://git.clezio.com.br</p>
-```
+                    <button data-lang="es">🇪🇸</button>

-</section>
+                </div>
+
+            </div>
+
+        </nav>
+    </header>
+
+    <main>
+
+        <section id="home" class="hero">
+
+            <div class="hero-content">
+
+                <span class="hero-badge" data-i18n="hero.badge">
+                    Programador Sênior • Backend Engineer • Tech Lead
+                </span>
+
+                <h1 data-i18n="hero.title">
+                    Transformando desafios de negócio
+                    em soluções robustas,
+                    escaláveis e seguras.
+                </h1>
+
+                <p data-i18n="hero.description">
+                    Programador Sênior com mais de 15 anos de experiência em
+                    desenvolvimento backend, arquitetura de software,
+                    cloud computing e liderança técnica.
+                </p>
+
+                <div class="hero-actions">
+                    <a href="#projects" class="btn-primary" data-i18n="hero.projects">
+                        Ver Projetos
+                    </a>
+
+                    <a href="#contact" class="btn-secondary" data-i18n="hero.contact">
+                        Entrar em Contato
+                    </a>
+                </div>
+
+            </div>
+
+        </section>
+
+        <section class="metrics">
+
+            <article class="metric-card">
+                <h3>15+</h3>
+                <p data-i18n="metrics.experience">
+                    Anos de Experiência
+                </p>
+            </article>
+
+            <article class="metric-card">
+                <h3>Tech Lead</h3>
+                <p data-i18n="metrics.leadership">
+                    Liderança Técnica
+                </p>
+            </article>
+
+            <article class="metric-card">
+                <h3>Cloud</h3>
+                <p data-i18n="metrics.cloud">
+                    Oracle Cloud & Azure
+                </p>
+            </article>
+
+            <article class="metric-card">
+                <h3>Backend</h3>
+                <p data-i18n="metrics.backend">
+                    APIs e Sistemas Corporativos
+                </p>
+            </article>
+
+        </section>
+
+        <section id="about" class="section">
+
+            <h2 data-i18n="about.title">
+                Sobre Mim
+            </h2>
+
+            <p data-i18n="about.description">
+                Ao longo da minha carreira participei da construção e evolução
+                de sistemas corporativos, integrações críticas,
+                automações de processos e plataformas backend voltadas para
+                desempenho, escalabilidade e confiabilidade.
+            </p>
+
+        </section>
+
+        <section class="section">
+
+            <h2 data-i18n="work.title">
+                Como Eu Trabalho
+            </h2>
+
+            <div class="cards-grid">
+
+                <article class="card">
+                    <h3 data-i18n="work.architecture.title">Arquitetura</h3>
+                    <p data-i18n="work.architecture.description">
+                        Planejamento técnico antes da implementação.
+                    </p>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="work.scalability.title">Escalabilidade</h3>
+                    <p data-i18n="work.scalability.description">
+                        Sistemas preparados para crescimento contínuo.
+                    </p>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="work.performance.title">Performance</h3>
+                    <p data-i18n="work.performance.description">
+                        Eficiência operacional e otimização de recursos.
+                    </p>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="work.security.title">Segurança</h3>
+                    <p data-i18n="work.security.description">
+                        Boas práticas desde a concepção.
+                    </p>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="work.quality.title">Qualidade</h3>
+                    <p data-i18n="work.quality.description">
+                        Código limpo e manutenção simplificada.
+                    </p>
+                </article>
+
+            </div>
+
+        </section>
+
+        <section id="specialties" class="section">
+
+            <h2 data-i18n="specialties.title">
+                Especialidades
+            </h2>
+
+            <div class="cards-grid">
+
+                <article class="card">
+                    <h3 data-i18n="specialties.api">APIs REST</h3>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="specialties.architecture">Arquitetura de Software</h3>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="specialties.cloud">Cloud Computing</h3>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="specialties.devops">DevOps</h3>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="specialties.database">Bancos de Dados</h3>
+                </article>
+
+                <article class="card">
+                    <h3 data-i18n="specialties.microservices">Microsserviços</h3>
+                </article>
+
+            </div>
+
+        </section>
+
+        <section class="section">
+
+            <h2 data-i18n="stack.title">Stack Tecnológica</h2>
+
+            <div class="tech-stack">
+
+                <span>Java</span>
+                <span>C++</span>
+                <span>Spring Boot</span>
+                <span>Quarkus</span>
+                <span>Docker</span>
+                <span>Kubernetes</span>
+                <span>Jenkins</span>
+                <span>GitLab CI</span>
+                <span>PostgreSQL</span>
+                <span>MySQL</span>
+                <span>SQL Server</span>
+                <span>Oracle Cloud</span>
+                <span>Azure</span>
+
+            </div>
+
+        </section>
+
+        <section id="experience" class="section">
+
+            <h2 data-i18n="experience.title">
+                Experiência Profissional
+            </h2>
+
+            <div class="timeline">
+
+                <article class="timeline-item">
+                    <h3 data-i18n="timeline.senior.title">Programador Sênior</h3>
+                    <p data-i18n="timeline.senior.description">
+                        Desenvolvimento de sistemas corporativos e soluções backend.
+                    </p>
+                </article>
+
+                <article class="timeline-item">
+                    <h3 data-i18n="timeline.techlead.title">Tech Lead</h3>
+                    <p data-i18n="timeline.techlead.description">
+                        Liderança técnica e apoio arquitetural.
+                    </p>
+                </article>
+
+                <article class="timeline-item">
+                    <h3 data-i18n="timeline.cloud.title">Cloud & DevOps</h3>
+                    <p data-i18n="timeline.cloud.description">
+                        Modernização de infraestrutura e automação.
+                    </p>
+                </article>
+
+            </div>
+
+        </section>
+
+        <section id="projects" class="section">
+
+            <h2 data-i18n="projects.title">
+                Projetos em Destaque
+            </h2>
+
+            <div class="cards-grid">
+
+                <article class="project-card">
+                    <h3 data-i18n="project.sped.title">Sistema de Processamento SPED</h3>
+
+                    <p data-i18n="project.sped.description">
+                        Plataforma responsável pela geração e processamento
+                        automatizado de arquivos fiscais SPED.
+                    </p>
+                </article>
+
+                <article class="project-card">
+                    <h3 data-i18n="project.oracle.title">Infraestrutura Oracle Cloud</h3>
+
+                    <p data-i18n="project.oracle.description">
+                        Implementação e gerenciamento de infraestrutura cloud.
+                    </p>
+                </article>
+
+                <article class="project-card">
+                    <h3 data-i18n="project.gitea.title">Servidor Git Privado com Gitea</h3>
+
+                    <p data-i18n="project.gitea.description">
+                        Ambiente Git privado para versionamento e colaboração.
+                    </p>
+                </article>
+
+                <article class="project-card">
+                    <h3 data-i18n="project.api.title">APIs Corporativas</h3>
+
+                    <p data-i18n="project.api.description">
+                        Desenvolvimento de APIs REST utilizando Spring Boot.
+                    </p>
+                </article>
+
+            </div>
+
+        </section>
+
+        <section id="contact" class="section">
+
+            <h2 data-i18n="contact.title">
+                Vamos Conversar
+            </h2>
+
+            <p data-i18n="contact.description">
+                Disponível para oportunidades profissionais e novos desafios.
+            </p>
+
+            <div class="contact-links">
+
+                <a href="mailto:clezio.penha@gmail.com">
+                    clezio.penha@gmail.com
+                </a>
+
+                <a href="https://www.linkedin.com/in/clezio" target="_blank" rel="noopener noreferrer">
+                    LinkedIn
+                </a>
+
+            </div>
+
+        </section>
+
+    </main>
+
+    <footer class="footer">
+
+        <p>
+            © 2026 Clezio Penha
+        </p>
+
+        <p data-i18n="footer.role">
+            Programador Sênior • Programador Backend
+        </p>
+
+    </footer>
+
+    <button id="backToTop" aria-label="Voltar ao topo">
+        ↑
+    </button>
+
+    <script src="js/translations.js"></script>
+    <script src="js/script.js"></script>

 </body>

@@ -0,0 +1,153 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    /* =========================
+       MENU MOBILE
+    ========================= */
+
+    const menuButton = document.querySelector(".menu-toggle");
+    const themeToggle = document.getElementById("theme-toggle");
+    const navMenu = document.querySelector(".nav-links");
+
+    if (menuButton) {
+        menuButton.addEventListener("click", () => {
+            navMenu.classList.toggle("open");
+        });
+    }
+
+    /* =========================
+        THEME
+    ========================= */
+
+    const savedTheme =
+        localStorage.getItem(
+            "portfolio-theme"
+        ) || "dark";
+
+    document.documentElement.setAttribute(
+        "data-theme",
+        savedTheme
+    );
+
+    themeToggle.textContent =
+        savedTheme === "light"
+            ? "☀️"
+            : "🌙";
+
+    themeToggle.addEventListener(
+        "click",
+        () => {
+
+            const currentTheme =
+                document.documentElement.getAttribute(
+                    "data-theme"
+                );
+
+            const nextTheme =
+                currentTheme === "dark"
+                    ? "light"
+                    : "dark";
+
+            document.documentElement.setAttribute(
+                "data-theme",
+                nextTheme
+            );
+
+            localStorage.setItem(
+                "portfolio-theme",
+                nextTheme
+            );
+
+            themeToggle.textContent =
+                nextTheme === "light"
+                    ? "☀️"
+                    : "🌙";
+
+        }
+    );
+
+    /* =========================
+       BOTÃO TOPO
+    ========================= */
+
+    const backToTop = document.getElementById("backToTop");
+
+    window.addEventListener("scroll", () => {
+
+        if (window.scrollY > 500) {
+            backToTop.classList.add("show");
+        } else {
+            backToTop.classList.remove("show");
+        }
+
+    });
+
+    backToTop.addEventListener("click", () => {
+
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+
+    });
+
+    /* =========================
+       ANIMAÇÃO DAS SEÇÕES
+    ========================= */
+
+    const observer = new IntersectionObserver(
+        entries => {
+
+            entries.forEach(entry => {
+
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("show-element");
+                }
+
+            });
+
+        },
+        {
+            threshold: 0.15
+        }
+    );
+
+    document
+        .querySelectorAll(
+            ".section, .metric-card, .card, .project-card"
+        )
+        .forEach(element => observer.observe(element));
+
+    /* =========================
+       NAVBAR ATIVA
+    ========================= */
+
+    const sections = document.querySelectorAll("section");
+    const navLinks = document.querySelectorAll(".nav-links a");
+
+    window.addEventListener("scroll", () => {
+
+        let current = "";
+
+        sections.forEach(section => {
+
+            const sectionTop = section.offsetTop - 140;
+
+            if (window.scrollY >= sectionTop) {
+                current = section.getAttribute("id");
+            }
+
+        });
+
+        navLinks.forEach(link => {
+
+            link.classList.remove("active");
+
+            if (link.getAttribute("href") === `#${current}`) {
+                link.classList.add("active");
+            }
+
+        });
+
+    });
+
+});
@@ -0,0 +1,533 @@
+const translations = {
+
+    pt: {
+
+        "nav.home": "Início",
+        "nav.about": "Sobre",
+        "nav.specialties": "Especialidades",
+        "nav.experience": "Experiência",
+        "nav.projects": "Projetos",
+        "nav.contact": "Contato",
+
+        "hero.badge":
+            "Programador Sênior • Backend Engineer • Tech Lead",
+
+        "hero.title":
+            "Transformando desafios de negócio em soluções robustas, escaláveis e seguras.",
+
+        "hero.description":
+            "Programador Sênior com mais de 15 anos de experiência em desenvolvimento backend, arquitetura de software, cloud computing e liderança técnica.",
+
+        "hero.projects":
+            "Ver Projetos",
+
+        "hero.contact":
+            "Entrar em Contato",
+
+        "about.title":
+            "Sobre Mim",
+
+        "about.description":
+            "Ao longo da minha carreira participei da construção e evolução de sistemas corporativos, integrações críticas, automações de processos e plataformas backend voltadas para desempenho, escalabilidade e confiabilidade.",
+
+        "work.title":
+            "Como Eu Trabalho",
+
+        "work.architecture.title":
+            "Arquitetura",
+
+        "work.architecture.description":
+            "Planejamento técnico antes da implementação.",
+
+        "work.scalability.title":
+            "Escalabilidade",
+
+        "work.scalability.description":
+            "Sistemas preparados para crescimento contínuo.",
+
+        "work.performance.title":
+            "Performance",
+
+        "work.performance.description":
+            "Eficiência operacional e otimização de recursos.",
+
+        "work.security.title":
+            "Segurança",
+
+        "work.security.description":
+            "Boas práticas desde a concepção.",
+
+        "work.quality.title":
+            "Qualidade",
+
+        "work.quality.description":
+            "Código limpo e manutenção simplificada.",
+
+        "metrics.experience":
+            "Anos de Experiência",
+
+        "metrics.leadership":
+            "Liderança Técnica",
+
+        "metrics.cloud":
+            "Oracle Cloud & Azure",
+
+        "metrics.backend":
+            "APIs e Sistemas Corporativos",
+
+        "specialties.title":
+            "Especialidades",
+
+        "experience.title":
+            "Experiência Profissional",
+
+        "specialties.api":
+            "APIs REST",
+
+        "specialties.architecture":
+            "Arquitetura de Software",
+
+        "specialties.cloud":
+            "Cloud Computing",
+
+        "specialties.devops":
+            "DevOps",
+
+        "specialties.database":
+            "Bancos de Dados",
+
+        "specialties.microservices":
+            "Microsserviços",
+
+        "projects.title":
+            "Projetos em Destaque",
+
+        "contact.title":
+            "Vamos Conversar",
+
+        "contact.description":
+            "Disponível para oportunidades profissionais e novos desafios.",
+
+        "stack.title":
+            "Stack Tecnológica",
+
+        "timeline.senior.title":
+            "Programador Sênior",
+
+        "timeline.senior.description":
+            "Desenvolvimento de sistemas corporativos e soluções backend.",
+
+        "timeline.techlead.title":
+            "Tech Lead",
+
+        "timeline.techlead.description":
+            "Liderança técnica e apoio arquitetural.",
+
+        "timeline.cloud.title":
+            "Cloud & DevOps",
+
+        "timeline.cloud.description":
+            "Modernização de infraestrutura e automação.",
+
+        "project.sped.title":
+            "Sistema de Processamento SPED",
+
+        "project.sped.description":
+            "Plataforma responsável pela geração e processamento automatizado de arquivos fiscais SPED.",
+
+        "project.oracle.title":
+            "Infraestrutura Oracle Cloud",
+
+        "project.oracle.description":
+            "Implementação e gerenciamento de infraestrutura cloud.",
+
+        "project.gitea.title":
+            "Servidor Git Privado com Gitea",
+
+        "project.gitea.description":
+            "Ambiente Git privado para versionamento e colaboração.",
+
+        "project.api.title":
+            "APIs Corporativas",
+
+        "project.api.description":
+            "Desenvolvimento de APIs REST utilizando Spring Boot.",
+
+        "footer.role":
+            "Senior Software Engineer • Backend Engineer"
+    },
+
+    en: {
+
+        "nav.home": "Home",
+        "nav.about": "About",
+        "nav.specialties": "Specialties",
+        "nav.experience": "Experience",
+        "nav.projects": "Projects",
+        "nav.contact": "Contact",
+
+        "hero.badge":
+            "Senior Software Engineer • Backend Engineer • Tech Lead",
+
+        "hero.title":
+            "Transforming business challenges into robust, scalable and secure solutions.",
+
+        "hero.description":
+            "Senior Software Engineer with over 15 years of experience in backend development, software architecture, cloud computing and technical leadership.",
+
+        "hero.projects":
+            "View Projects",
+
+        "hero.contact":
+            "Get In Touch",
+
+        "about.title":
+            "About Me",
+
+        "about.description":
+            "Throughout my career I have contributed to corporate systems, critical integrations, process automation and backend platforms focused on performance, scalability and reliability.",
+
+        "work.title":
+            "How I Work",
+
+        "work.architecture.title":
+            "Architecture",
+
+        "work.architecture.description":
+            "Technical planning before implementation.",
+
+        "work.scalability.title":
+            "Scalability",
+
+        "work.scalability.description":
+            "Systems designed for continuous growth.",
+
+        "work.performance.title":
+            "Performance",
+
+        "work.performance.description":
+            "Operational efficiency and resource optimization.",
+
+        "work.security.title":
+            "Security",
+
+        "work.security.description":
+            "Best practices applied from the very beginning.",
+
+        "work.quality.title":
+            "Quality",
+
+        "work.quality.description":
+            "Clean code and simplified maintenance.",
+
+        "metrics.experience":
+            "Years of Experience",
+
+        "metrics.leadership":
+            "Technical Leadership",
+
+        "metrics.cloud":
+            "Oracle Cloud & Azure",
+
+        "metrics.backend":
+            "APIs and Enterprise Systems",
+
+        "specialties.title":
+            "Specialties",
+
+        "experience.title":
+            "Professional Experience",
+
+        "specialties.api":
+            "REST APIs",
+
+        "specialties.architecture":
+            "Software Architecture",
+
+        "specialties.cloud":
+            "Cloud Computing",
+
+        "specialties.devops":
+            "DevOps",
+
+        "specialties.database":
+            "Databases",
+
+        "specialties.microservices":
+            "Microservices",
+
+        "projects.title":
+            "Featured Projects",
+
+        "contact.title":
+            "Let's Talk",
+
+        "contact.description":
+            "Available for professional opportunities and new challenges.",
+
+        "stack.title":
+            "Technology Stack",
+
+        "timeline.senior.title":
+            "Senior Software Engineer",
+
+        "timeline.senior.description":
+            "Development of enterprise systems and backend solutions.",
+
+        "timeline.techlead.title":
+            "Tech Lead",
+
+        "timeline.techlead.description":
+            "Technical leadership and architectural guidance.",
+
+        "timeline.cloud.title":
+            "Cloud & DevOps",
+
+        "timeline.cloud.description":
+            "Infrastructure modernization and automation.",
+
+        "project.sped.title":
+            "SPED Processing Platform",
+
+        "project.sped.description":
+            "Platform responsible for the automated generation and processing of SPED tax files.",
+
+        "project.oracle.title":
+            "Oracle Cloud Infrastructure",
+
+        "project.oracle.description":
+            "Implementation and management of cloud infrastructure.",
+
+        "project.gitea.title":
+            "Private Git Server with Gitea",
+
+        "project.gitea.description":
+            "Private Git environment for version control and team collaboration.",
+
+        "project.api.title":
+            "Enterprise APIs",
+
+        "project.api.description":
+            "Development of REST APIs using Spring Boot.",
+
+        "footer.role":
+            "Senior Software Engineer • Backend Engineer"
+    },
+
+    es: {
+
+        "nav.home": "Inicio",
+        "nav.about": "Acerca de",
+        "nav.specialties": "Especialidades",
+        "nav.experience": "Experiencia",
+        "nav.projects": "Proyectos",
+        "nav.contact": "Contacto",
+
+        "hero.badge":
+            "Programador Senior • Backend Engineer • Tech Lead",
+
+        "hero.title":
+            "Transformando desafíos empresariales en soluciones robustas, escalables y seguras.",
+
+        "hero.description":
+            "Programador Senior con más de 15 años de experiencia en desarrollo backend, arquitectura de software, cloud computing y liderazgo técnico.",
+
+        "hero.projects":
+            "Ver Proyectos",
+
+        "hero.contact":
+            "Contactar",
+
+        "about.title":
+            "Sobre Mí",
+
+        "about.description":
+            "A lo largo de mi carrera participé en sistemas corporativos, integraciones críticas, automatización de procesos y plataformas backend enfocadas en rendimiento, escalabilidad y confiabilidad.",
+
+        "work.title":
+            "Cómo Trabajo",
+
+        "work.architecture.title":
+            "Arquitectura",
+
+        "work.architecture.description":
+            "Planificación técnica antes de la implementación.",
+
+        "work.scalability.title":
+            "Escalabilidad",
+
+        "work.scalability.description":
+            "Sistemas preparados para un crecimiento continuo.",
+
+        "work.performance.title":
+            "Rendimiento",
+
+        "work.performance.description":
+            "Eficiencia operativa y optimización de recursos.",
+
+        "work.security.title":
+            "Seguridad",
+
+        "work.security.description":
+            "Buenas prácticas aplicadas desde la concepción.",
+
+        "work.quality.title":
+            "Calidad",
+
+        "work.quality.description":
+            "Código limpio y mantenimiento simplificado.",
+
+        "metrics.experience":
+            "Años de Experiencia",
+
+        "metrics.leadership":
+            "Liderazgo Técnico",
+
+        "metrics.cloud":
+            "Oracle Cloud y Azure",
+
+        "metrics.backend":
+            "APIs y Sistemas Corporativos",
+
+        "specialties.title":
+            "Especialidades",
+
+        "experience.title":
+            "Experiencia Profesional",
+
+        "specialties.api":
+            "APIs REST",
+
+        "specialties.architecture":
+            "Arquitectura de Software",
+
+        "specialties.cloud":
+            "Computación en la Nube",
+
+        "specialties.devops":
+            "DevOps",
+
+        "specialties.database":
+            "Bases de Datos",
+
+        "specialties.microservices":
+            "Microservicios",
+
+        "projects.title":
+            "Proyectos Destacados",
+
+        "contact.title":
+            "Hablemos",
+
+        "contact.description":
+            "Disponible para oportunidades profesionales y nuevos desafíos.",
+
+        "stack.title":
+            "Stack Tecnológico",
+
+        "timeline.senior.title":
+            "Programador Senior",
+
+        "timeline.senior.description":
+            "Desarrollo de sistemas empresariales y soluciones backend.",
+
+        "timeline.techlead.title":
+            "Tech Lead",
+
+        "timeline.techlead.description":
+            "Liderazgo técnico y apoyo arquitectónico.",
+
+        "timeline.cloud.title":
+            "Cloud & DevOps",
+
+        "timeline.cloud.description":
+            "Modernización de infraestructura y automatización.",
+
+        "project.sped.title":
+            "Plataforma de Procesamiento SPED",
+
+        "project.sped.description":
+            "Plataforma responsable de la generación y procesamiento automatizado de archivos fiscales SPED.",
+
+        "project.oracle.title":
+            "Infraestructura Oracle Cloud",
+
+        "project.oracle.description":
+            "Implementación y gestión de infraestructura en la nube.",
+
+        "project.gitea.title":
+            "Servidor Git Privado con Gitea",
+
+        "project.gitea.description":
+            "Entorno Git privado para control de versiones y colaboración.",
+
+        "project.api.title":
+            "APIs Empresariales",
+
+        "project.api.description":
+            "Desarrollo de APIs REST utilizando Spring Boot.",
+
+        "footer.role":
+            "Senior Software Engineer • Backend Engineer"
+    }
+};
+
+function applyLanguage(lang) {
+
+    const dictionary =
+        translations[lang] || translations.pt;
+
+    document
+        .querySelectorAll("[data-i18n]")
+        .forEach(element => {
+
+            const key = element.dataset.i18n;
+
+            if (dictionary[key]) {
+                element.textContent = dictionary[key];
+            }
+
+        });
+
+    document.documentElement.lang = lang;
+
+    localStorage.setItem(
+        "portfolio-language",
+        lang
+    );
+
+    document
+        .querySelectorAll("[data-lang]")
+        .forEach(button => {
+
+            button.classList.remove("active");
+
+            if (button.dataset.lang === lang) {
+                button.classList.add("active");
+            }
+
+        });
+}
+
+document
+    .querySelectorAll("[data-lang]")
+    .forEach(button => {
+
+        button.addEventListener("click", () => {
+            applyLanguage(button.dataset.lang);
+        });
+
+    });
+
+document.addEventListener("DOMContentLoaded", () => {
+
+    const savedLanguage =
+        localStorage.getItem(
+            "portfolio-language"
+        );
+
+    applyLanguage(
+        savedLanguage || "pt"
+    );
+
+});
Author	SHA1	Message	Date
Clezio Penha	ab116e4824	feat(i18n): add multilingual support and interactive features	2026-06-08 14:57:56 -03:00
Clezio Penha	50059bb3a5	feat(ui): implement modern responsive dark theme	2026-06-08 14:57:25 -03:00
Clezio Penha	0e92466fd6	feat(portfolio): redesign portfolio structure and content	2026-06-08 14:57:10 -03:00