Construindo o Carzo: do conceito ao código
Como pensei, planejei e construí este site usando Next.js, React Three Fiber e um sistema de agentes de IA.
Por que construir do zero?
Existem dezenas de templates de portfólio prontos. Mas eu queria algo que causasse impacto, não indiferença. Algo que, ao abrir, a pessoa sentisse que estava diante de algo diferente.
A stack
Escolhi uma combinação que me dá controle total sobre a experiência:
- Next.js 15 com App Router: SSR para SEO, Server Components para performance
- React Three Fiber: WebGL sem sair do ecossistema React
- Tailwind CSS v4: estilização rápida, responsiva, consistente
- Framer Motion: animações fluidas que respeitam
prefers-reduced-motion - MDX: este blog que você está lendo agora
O fundo interativo
O background que você vê não é uma imagem. São milhares de partículas governadas por simplex noise em GLSL, reagindo à posição do seu cursor em tempo real.
float snoise(vec3 v) {
// Simplex 3D noise: partículas orgânicas
}
Em mobile, o número de partículas é reduzido automaticamente. Em dispositivos com prefers-reduced-motion, o fundo é desativado completamente.
Responsive-first, não responsive-after
Cada componente foi pensado para mobile e desktop ao mesmo tempo. Não existe uma "versão mobile". Existe uma experiência fluida que se adapta.
O melhor código responsivo é aquele que você nem percebe que é responsivo.
O que vem por aí
Este site vai crescer. Blog posts, novos projetos, talvez um app embutido. Mas o fundamento está aqui: rápido, bonito e com personalidade.