Portfólio pessoal
Este site: uma identidade digital interativa, responsiva em qualquer tela, com laboratório de experimentos e conteúdo guiado por dados.
Resumo executivo
Um portfólio pensado como produto: seis páginas, conteúdo centralizado em arquivos tipados e uma camada de interação que respeita desempenho e acessibilidade.
Problema e objetivo
Portfólios costumam oscilar entre templates genéricos e experiências tão carregadas de efeitos que atrapalham a leitura. O objetivo foi criar uma identidade memorável que continuasse rápida, acessível e simples de manter.
Processo
Etapa 1
Direção criativa
Linguagem visual de "instrumento de precisão": superfícies escuras, linhas finas, rótulos técnicos em fonte mono e um único acento violeta usado com parcimônia.
Etapa 2
Sistema visual
Tokens de cor para os temas claro e escuro gerados a partir de um único arquivo, tipografia fluida e um conjunto pequeno de durações e curvas de animação reaproveitado em todo o site.
Etapa 3
Arquitetura de conteúdo
Projetos, habilidades e experimentos vivem em arquivos TypeScript. Páginas, sitemap, imagens Open Graph e o terminal são derivados deles.
Etapa 4
Interação e desempenho
Layout fluido do celular ao monitor ultralargo. A cena 3D do LAB é carregada sob demanda, pausa fora da tela e respeita prefers-reduced-motion. Todas as rotas são pré-renderizadas no build.
Soluções implementadas
Capas generativas
Projetos sem imagem recebem uma arte SVG determinística derivada do seu identificador — nítida em qualquer resolução e sem custo de rede.
Tema sem flash
Um script mínimo aplica o tema salvo, ou o do sistema, antes da primeira pintura. A troca usa a View Transitions API quando disponível.
Terminal com dados reais
Os comandos do terminal leem os mesmos arquivos de dados das páginas, então nunca exibem informação desatualizada.
Formulário honesto
Validação no cliente e no servidor, proteção contra spam e envio real via Resend ou webhook — sem confirmações simuladas.
Tecnologias
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
- Three.js
- GLSL
Galeria
01Capas generativas: a mesma semente sempre produz a mesma composição. 02Esfera de partículas do LAB, renderizada em um único draw call. 03Tokens de cor compartilhados pelos temas claro e escuro.
Resultados
- Todas as páginas e imagens Open Graph são geradas estaticamente no build.
- Nenhuma funcionalidade essencial depende do mouse ou de animações.
- Novos projetos, habilidades e experimentos entram pelos arquivos de dados, sem alterar layout.
Aprendizados
- Efeitos visuais funcionam melhor como camada opcional: o conteúdo precisa estar completo sem eles.
- Centralizar o conteúdo em dados tipados reduz o custo de manter várias páginas consistentes.