Portfólio pessoal
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.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Motion
- Three.js
Disponível para novos projetos
Vítor · Desenvolvimento web
Trabalho do front-end ao back-end — da arquitetura do código ao último detalhe de interação, em qualquer tela.
Goiânia, Brasil · hora local
Introdução
Tudo começa com um ponto.
Uma ideia, uma pergunta, um rascunho. O resto é processo.
Sobre
Trabalho do front-end ao back-end — da arquitetura do código ao último detalhe de interação, em qualquer tela.
Escreva aqui sua apresentação em dois ou três parágrafos curtos: quem você é, o que faz hoje e o que motiva o seu trabalho.
Projetos
Estudos de caso com contexto, processo e resultados — da ideia à entrega.
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.
Exemplo de estrutura — descreva em uma frase o que a aplicação faz e para quem.
Exemplo de estrutura — o objetivo do site, o público e o resultado esperado.
Exemplo de estrutura — uma técnica ou API do navegador explorada por curiosidade.
Exemplo de estrutura — algo que você construiu para si e usa de verdade.
Compatibilidade
Cada projeto nasce responsivo: o mesmo conteúdo se reorganiza do celular ao monitor ultralargo, sem versões separadas e sem perder nada pelo caminho.

O layout começa na menor tela e ganha espaço conforme ela cresce.
Grades e tipografia se ajustam continuamente, não só em pontos fixos.
Alvos confortáveis ao toque e navegação completa pelo teclado.
Imagens no tamanho certo para cada tela e nada carregado à toa.
Sua tela agora: —
Habilidades
A base de tudo o que roda no navegador e no servidor.
Interfaces rápidas, responsivas e prontas para produção.
APIs, dados e a lógica que sustenta as interfaces.
O que faz um site funcionar bem para todas as pessoas, em qualquer tela.
O ambiente que mantém o trabalho organizado e versionado.
LAB
Pequenas experiências interativas que rodam aqui mesmo, no navegador.
Milhares de pontos distribuídos numa esfera de Fibonacci e deformados por ruído simplex na GPU, com todos os parâmetros expostos em controles.
Um playground para os eixos de largura e peso da fonte display. O cursor vira um controle bidimensional.
O gerador das capas dos projetos: uma semente de texto vira uma composição SVG única e reproduzível.
Bastidores
Trechos reais deste site e um terminal que responde com os mesmos dados das páginas.
Código-fonte
// Um item = um cartão, uma página e// uma entrada no sitemap.const portfolio: Project = { slug: 'portfolio-pessoal', title: 'Portfólio pessoal', category: 'sites', technologies: ['Next.js', 'Three.js'], status: 'in-progress', featured: true, // Sem `cover`: capa gerada pelo slug.};// Largura real da janela, sem erro de hidratação.function subscribe(callback: () => void) { window.addEventListener('resize', callback); return () => window.removeEventListener('resize', callback);} const width = useSyncExternalStore( subscribe, () => window.innerWidth, () => null, // no servidor);void main() { vec3 p = position; float n = snoise(p * 1.4 + uTime * 0.1); vec4 mv = modelViewMatrix * vec4(p * (1.0 + n * uNoise), 1.0); // Repulsão do cursor (espaço da câmera). vec2 delta = mv.xy - uPointer; float force = smoothstep(0.9, 0.0, length(delta)); mv.xy += normalize(delta) * force * 0.18; gl_Position = projectionMatrix * mv;}Terminal interativo
Contato
Projetos, oportunidades ou uma ideia ainda sem forma — escreva e eu respondo.