Portfólio Animado
O site que você está lendo agora — e a reescrita que fez o conteúdo aparecer antes dos efeitos, não depois.
Meu papel
Projeto, implementação e otimização
O problema
Portfólio de engenharia tem um problema circular: ele precisa provar engenharia. Um site bonito que demora a aparecer prova o contrário do que está escrito nele.
Foi exatamente o que aconteceu na primeira versão. Cada elemento acima da dobra dependia de JavaScript para existir: os blocos nasciam com opacidade zero esperando a animação de scroll, os títulos renderizavam espaços em branco até o efeito de decrypt rodar, e o nome gigante da home era texto transparente desenhado num canvas. O navegador não tinha o que pintar até hidratar e as animações terminarem — o maior elemento da home levava 6,3 segundos para aparecer numa conexão 4G.
A solução
A correção não foi tirar as animações: foi separar o que o visitante precisa ler do que só enfeita. Todo o conteúdo acima da dobra passou a existir no HTML servido, e os efeitos entraram como camada por cima, depois do primeiro paint.
O resultado é medível: o maior elemento agora pinta junto com o primeiro conteúdo (FCP igual a LCP) nas duas rotas, e a nota de performance do Lighthouse foi de 66 para 96 na home e de 88 para 97 na página de projeto — com acessibilidade, boas práticas e SEO em 100.
O conteúdo é dirigido por dados: um único array descreve os projetos, e um projeto que ganha um bloco de detalhe passa a ter automaticamente link no card, página estática própria e entrada no sitemap. Não existe rota para registrar na mão.
Como funciona
- 01
HTML já vem pronto
As páginas são geradas na build. O texto que importa chega no primeiro byte, sem depender de JavaScript para ficar visível.
- 02
A entrada é CSS
A animação de entrada do hero é keyframes puro. Em JavaScript o estado inicial só valia depois da hidratação, então o texto pintava e depois dava um tranco; em CSS ele já nasce no lugar certo.
- 03
Hidratação
O React assume a página. Nada acima da dobra depende desse momento para ser lido.
- 04
Efeitos por scroll
Abaixo da dobra, cada bloco aparece quando entra em viewport. Ali o gating não custa nada, porque o elemento não estava visível mesmo.
- 05
WebGL por último
O campo de partículas em three.js só é baixado quando o navegador fica ocioso, e não carrega em tela pequena nem para quem pediu menos movimento no sistema.
Decisões técnicas
O conteúdo mora num arquivo, não no markup
Bio, experiência, certificações, skills e projetos vivem todos num único módulo de dados. Os componentes só desenham. Atualizar o portfólio é editar dados, não caçar texto dentro de JSX.
Um projeto ganha página própria ao ganhar detalhe
O bloco de detalhe é opcional. Sem ele, o projeto é um card simples; com ele, o mesmo array gera o link, a página estática e a linha do sitemap. Slug sem detalhe é 404 por construção, não por esquecimento.
O título pinta como texto antes do canvas assumir
O nome da home é desenhado em partículas com física de mola, mas o elemento nasce como texto normal e só fica transparente quando o canvas tem o primeiro quadro pronto. Se o canvas falhar, o nome continua legível — e o buscador sempre vê texto.
Efeito de texto com teto de duração
O embaralhamento de decrypt tinha duração proporcional ao tamanho da frase, então um título longo levava 3,4 segundos até virar texto legível. Agora tem teto: frase curta mantém o ritmo original, frase longa comprime.
Uma biblioteca de animação a menos
A entrada do hero usava GSAP para três transições simples. Trocar por CSS tirou 98 KB e cerca de 1,2s de execução de script do caminho crítico, e de quebra eliminou o solavanco que o JavaScript causava.
Texto animado sempre tem cópia acessível
Efeito que renderiza caracteres embaralhados é ilegível para leitor de tela e para crawler. Cada heading animado carrega a frase real numa cópia oculta, e o que está acima da dobra dispensa o efeito de vez.
Tokens de design em CSS, não em config
Tailwind v4 declara o tema no próprio CSS. A paleta tem dois acentos e nenhum terceiro — restrição deliberada, para o site não virar uma colcha de retalhos a cada seção nova.
O que o sistema faz
- Conteúdo legível no primeiro paint, sem depender de JavaScript
- Páginas de projeto geradas na build, com metadata e sitemap próprios
- Nome do hero desenhado em partículas que reagem ao mouse
- Campo de partículas WebGL fora do caminho crítico
- Rolagem suave e revelações por scroll abaixo da dobra
- Respeita a preferência de menos movimento do sistema
- Acessibilidade, boas práticas e SEO em 100 no Lighthouse