clezio/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portfolio): redesign portfolio structure and content

Browse Source
This commit is contained in:
Clezio Penha
2026-06-08 14:57:10 -03:00
parent 93ffacb124
commit 0e92466fd6
1 changed files with 389 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+388 -48
View File
@@ -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>