Site para Empresa de Engenharia
Um site institucional multilíngue, todo pré-renderizado, com uma estrutura metálica gerada proceduralmente em Three.js que se monta conforme o visitante rola a página — e vira um desenho técnico em aparelhos que não conseguem rodá-la.
- Cliente
- Empresa de engenharia e construção (nome omitido até o lançamento)
- Papel
- Direção visual, desenvolvimento e testes
- Ano
- 2026
- Status
- Prévia entregue, aguardando aprovação do cliente
100
Lighthouse Acessibilidade e Boas Práticas (laboratório)
89–99
Lighthouse Performance no mobile (laboratório)
40
páginas pré-renderizadas em 4 idiomas
132
testes unitários e end-to-end
Contexto
Uma empresa de engenharia e construção precisava de um site que transmitisse rigor técnico para clientes de vários países e que funcionasse nos celulares que esses clientes realmente usam.
O problema
Entregar um site premium e multilíngue com um elemento 3D marcante — sem sacrificar performance, acessibilidade ou a experiência em aparelhos simples.
O que eu fiz
- 01
Defini a direção visual e os tokens de design, e construí todas as páginas e componentes.
- 02
Modelei uma estrutura metálica paramétrica que gera tanto um desenho em SVG quanto a cena WebGL.
- 03
Escrevi testes unitários, end-to-end e de acessibilidade, além de scripts de contraste e Lighthouse.
O que faz
- Início, sobre, serviços com páginas de detalhe, projetos, contato e privacidade — em português, inglês, espanhol e alemão
- Sequência 3D guiada pela rolagem em cinco etapas reversíveis
- Troca de tema com revelação circular e transições de página direcionais
- URLs localizadas com hreflang, sitemap e imagens Open Graph por idioma
- Endpoint de contato com proteção contra abuso
Destaques de engenharia
- 01
Um modelo, dois renderizadores
Um único modelo paramétrico gera o desenho SVG renderizado no servidor e a cena WebGL: 465 peças em 8 draw calls com instanced meshes, e zero bytes de download de modelo.
- 02
Níveis de qualidade por aparelho
A detecção de capacidade — teste de WebGL, renderizador por software, memória, núcleos, Save-Data — escolhe 3D alto, médio ou baixo, um desenho 2D ou uma seção estática.
- 03
Seguro por padrão
Content Security Policy estrita e cabeçalhos de segurança; o endpoint de contato tem honeypot, tempo mínimo de preenchimento, limite de tamanho e rate limit por IP.
Partes difíceis
- 01
3D sem prejudicar o LCP
O Three.js carrega sob demanda quando a sequência se aproxima da tela, então a primeira pintura é texto e a maior pintura nunca atrasa.
- 02
Testar WebGL
O Playwright roda um projeto com GPU real e outro com WebGL desativado, para provar que a alternativa funciona.
Resultados
- Lighthouse (laboratório, build de produção local): Acessibilidade 100 e Boas Práticas 100 em todas as páginas medidas; Performance 89–99 no mobile e 100 no desktop; CLS 0.
- 27 testes unitários e 105 end-to-end passando, incluindo verificações de acessibilidade com axe e layouts de 320 a 3840 px de largura.
Os números vêm do repositório: testes, medições e relatórios documentados.
Stack
- Next.js 16
- React 19
- TypeScript
- Three.js
- CSS Modules
- Vitest
- Playwright
- axe-core
- Lighthouse
- Vercel
ProcessoConstruído com um fluxo assistido por IA dirigido e revisado por mim, validado pela suíte automatizada de testes e auditorias.
Código e cliente são privados. Os detalhes são compartilhados até onde o trabalho permite.