3D que contrata: como equilibrei Three.js, SEO e performance neste portfólio
O desafio de um portfólio com WebGL de verdade: impressionar sem matar LCP no mobile, sem sumir do Google e sem virar só um canvas bonito.
Eu poderia ter feito um portfólio estático elegante. Em vez disso, quis um artefato que mostrasse o mesmo tipo de decisão que eu tomo em produto: presença visual versus orçamento de performance, conteúdo versus efeito, ego de engenharia versus o que um recrutador (e um crawler) realmente precisam.
Este site — Next.js, React Three Fiber, i18n PT/EN, cases detalhados e deploy em Cloudflare Workers — é o laboratório público dessas trocas.
O problema não é “colocar 3D”. É não mentir no primeiro paint
Three.js chama atenção. Também é fácil destruir INP/LCP em telefone médio se cada seção abrir um WebGL próprio, se as estrelas do fundo competirem com o LCP, ou se o HTML útil só existir depois do JavaScript.
A regra que eu usei: o primeiro viewport precisa contar quem eu sou em HTML de verdade. O 3D é reforço, não a única fonte de significado. Crawler e humano com rede ruim ainda merecem a história.
Decisões concretas que eu defendia em code review
Canvas pesado entra com dynamic import e SSR desligado onde faz sentido. Background de estrelas só em desktop e só depois de idle (requestIdleCallback) — mobile não paga o custo de um céu decorativo.
Nas esferas de tecnologia, um único Canvas com View do drei em vez de N contextos WebGL. Menos GPU, menos drama de bateria, framing mais previsível.
SEO não é um plugin no final: metadata por locale, rotas `/pt` e `/en`, hreflang, Open Graph, sitemap, JSON-LD e páginas de projeto com narrativa de case — porque LinkedIn share e Googlebot não executam sua cena GLTF.
Conteúdo como parte da performance de carreira
Performance web sem substância é benchmark. O outro eixo deste projeto foi transformar experiência industrial (governança, torre de controle, SaaS) e projetos públicos (Flutter, este monorepo) em páginas que um recrutador consegue ler em três minutos — com o que pode ser público e o que fica de fora por respeito a NDA.
Ou seja: o 3D abre a porta; o texto e a arquitetura de informação fazem a entrevista.
Stack e entrega
Next.js 16 (App Router), React 19, TypeScript, Tailwind, Framer Motion, Three.js/R3F, i18next, OpenNext + Cloudflare Workers. Formulário de contato no server. CI com lint e type-check.
O ponto não é a lista de libs. É mostrar que eu consigo cruzar frontend avançado, preocupação com Core Web Vitals e disciplina de produto/SEO no mesmo entregável — o tipo de equilíbrio que também aparece quando o “cliente” é uma operação industrial, só que aqui o deploy é público.