Carzo

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.

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.

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.