produtono ar
Carzo
O site que você está navegando agora. O suporte é cinza e sem acento nenhum; cada página de projeto assume a paleta e a tipografia reais daquele trabalho, lidas do CSS que está em produção. Blog em MDX e um fundo de canvas que responde ao ponteiro.
A escolha
TypeScript, e nenhuma biblioteca de 3D
A primeira versão usava WebGL com shaders para um campo de partículas. Ficava bonito, custava trezentos kilobytes de biblioteca e não dizia nada: partícula solta é o fundo padrão de todo portfólio de desenvolvedor desde 2019. A versão atual desenha em canvas 2D puro, que já vem no navegador, e o fundo passou a significar alguma coisa. Menos dependência, menos bateria no telefone, e a decisão foi tomada pelo que o fundo precisava comunicar, não pelo que era mais impressionante de implementar.
01
Por que construir do zero
Poderia ter usado um template de portfólio ou um builder. Mas o portfólio é a primeira impressão que alguém tem do seu trabalho, e se a primeira impressão for um template genérico, a mensagem é clara: "não me importei o suficiente pra construir o meu".
O Carzo foi construído do zero com Next.js 16, TypeScript e Tailwind CSS v4. Cada pixel, cada animação, cada interação foi pensada pra transmitir uma coisa: esse cara leva código a sério.
02
O background WebGL
O fundo interativo é o diferencial emocional do site. São duas camadas de partículas renderizadas via React Three Fiber com shaders GLSL customizados: uma camada densa de micro-partículas violeta/índigo que fluem como um campo de forças, e uma camada esparsa de estrelas brilhantes em ciano que pulsam no fundo.
As partículas reagem ao mouse com atração magnética (não repulsão), scroll parallax, e o sistema adapta automaticamente a quantidade de partículas baseado no hardware. São 4000 em desktops, 1500 em mobile, e zero se o usuário preferir reduced-motion (acessibilidade).
Os shaders são escritos em GLSL inline (Turbopack do Next.js 16 não suporta raw-loader) com simplex noise 3D pra movimento orgânico.
03
Performance e SEO
Apesar do WebGL pesado, o site atinge Lighthouse 92+ em performance, 100 em SEO e 100 em acessibilidade. Isso foi possível com lazy loading do canvas via requestIdleCallback (o Three.js só monta depois que a página está interativa), fallback CSS estático pra dispositivos sem WebGL, dispose automático de geometrias e materiais, e frame budget que limita a 30fps em hardware fraco.
OG images são geradas dinamicamente via next/og no edge, JSON-LD structured data alimenta o Google, e o blog roda em MDX com syntax highlighting. Tudo estático, sem CMS, sem banco de dados.