PROJETOS Voltar para home
Ver todos os projetos

Portfolio Pessoal

Redesign de portfólio focado em altíssima performance, arquitetura escalável e forte garantia de qualidade através de E2E e CI/CD.

Sobre o Projeto

O desenvolvimento do meu portfólio foi planejado como uma demonstração prática de engenharia front-end moderna. O foco central não foi apenas criar um currículo online, mas construir um produto digital que refletisse maturidade técnica: com tempos de carregamento mínimos, ausência de dependências inúteis, acessibilidade e uma sólida automação de qualidade (QA).

Arquitetura e Decisões Técnicas

Para contornar o acúmulo de processamento no client-side, abandonei os ecossistemas pesados e adotei a união da renderização estática (SSG) com Vanilla TypeScript strict.

Tecnologias Aplicadas e Decisões
Hugo

Geração estática super rápida, excelente para SEO e serve HTML puro direto no CDN.

TypeScript

Tipagem estática para evitar quebra de contratos de UI em tempo de execução.

Playwright

Ferramenta moderna para testar fluxos críticos e garantir regressão visual a cada commit.

GitHub Actions

Automação total da esteira, bloqueando deploys se a nota do Lighthouse baixar.

Desafios e Soluções de Engenharia

Ao longo da implementação, enfrentei e resolvi alguns problemas cruciais para garantir a estabilidade do software.

Desafios Resolvidos

Desafio 1: Escalabilidade vs Performance

Design premium sem frameworks pesados

Problema

O maior desafio técnico consistiu em orquestrar uma interface rica em detalhes visuais e micro-interações enquanto se mantinha um escopo restrito de performance (Lighthouse > 90).

Solução Aplicada

Em vez de usar React/Next.js, eu modularizei a arquitetura em Feature Co-Location (HTML, SCSS e TS agrupados), reduzindo a carga do DOM e carregando apenas o Vanilla JS estritamente necessário.

Desafio 2: Quality Assurance Automático

Garantindo estabilidade sem testes unitários exaustivos

Problema

Por ser um projeto puramente visual, não faria sentido escrever centenas de testes unitários triviais, mas o site ainda não poderia quebrar.

Solução Aplicada

Implementei testes E2E e de Regressão Visual usando Playwright. Uma esteira de CI/CD (GitHub Actions) foi configurada para validar o Typecheck e rodar o Lighthouse automaticamente a cada Pull Request.

Impacto e Resultados

O projeto hoje atinge a nota máxima nas avaliações do Google (Lighthouse), com acessibilidade, SEO e Best Practices no verde. Além disso, implementei uma esteira de testes automatizada para garantir que qualquer alteração futura no CSS seja blindada contra regressões ou quebra de responsividade, oferecendo uma experiência de código quase “bulletproof” para a escala do projeto.