portfólio.tsx

Portfólio — este site

Este projeto é o site que você está usando agora. A interface imita o Visual Studio Code: barra de atividades à esquerda, explorador com árvore de arquivos, abas e trilha de navegação. As páginas não são "páginas" — são arquivos. sobre-mim.css, rosa-polar.app, lyncas.tsx.

A ideia partiu de uma pergunta simples: se o portfólio é dirigido a pessoas que passam o dia dentro de um editor de código, por que ele deveria parecer um site institucional?

A metáfora e o que ela custa

Toda decisão de design tem preço, e vale declarar o desta. Como os links do site são nomes de arquivo, o texto âncora — que é um dos sinais que buscadores usam para entender o destino de um link — virou sobre-mim.css em vez de "sobre mim". Do ponto de vista de SEO, isso é ruim.

Aceitei o custo porque a metáfora é o diferencial do site, mas mitiguei onde deu: os links da página inicial trazem a descrição junto do nome do arquivo, e a trilha de navegação usa os segmentos reais da URL.

Três problemas que só apareceram medindo

A árvore escondia o site inteiro dos buscadores. As pastas do explorador nasciam fechadas, e os filhos só entravam no DOM ao expandir. Como o HTML servido é renderizado com elas fechadas, cada página interna chegava ao Googlebot com exatamente um link interno. Páginas sem links que apontem para elas sinalizam, para um buscador, que nem o autor as considera importantes. Passando a expandir por padrão, o número foi de 1 para 19 links por página.

O tema piscava a cada carregamento. A preferência ficava no localStorage e era aplicada dentro de um useEffect — que, por definição, roda depois da primeira pintura. Quem escolhia tema claro via um flash escuro em toda navegação. Não existe solução dentro do ciclo de vida do React: a correção é um script síncrono e inline, executado antes de qualquer conteúdo, que aplica o tema no <html> antes do navegador pintar.

A cor de destaque reprovava em contraste. O verde #10b981 rende 6,57:1 sobre o fundo escuro — folgado. Sobre o fundo branco do tema claro, rende 2,54:1, quando o mínimo da WCAG AA é 4,5:1. Como essa cor é a de todos os links do site, o tema claro era difícil de ler para quem tem baixa visão. A correção foi usar #047857 apenas no tema claro, que rende 5,48:1 — restrição matemática, não questão de gosto.

Resultado

  • Lighthouse (computador): 100 em desempenho, acessibilidade, práticas recomendadas e SEO.
  • Lighthouse (celular): 99 em desempenho, 100 nas demais.
  • Métricas: CLS zero e nenhum tempo de bloqueio relevante da thread principal.

Decisões técnicas

  • Server Components por padrão: só há "use client" onde existe estado ou evento — a árvore, as abas, o carrossel e o alternador de tema. O conteúdo é todo renderizado no servidor.
  • Fonte única de navegação: a árvore do explorador, o sitemap, o título da aba e a trilha derivam todos do mesmo arquivo de dados. Adicionar uma página é acrescentar uma entrada.
  • Imagem de compartilhamento gerada em build: o card que aparece ao compartilhar um link é desenhado por código com next/og, imitando o próprio editor. Sem dependência adicional e sem custo em tempo de requisição.
  • Dados estruturados: JSON-LD de Person na home e de BreadcrumbList na trilha, para que buscadores leiam a identidade e a hierarquia sem depender de interpretar texto.
  • Sem framework de estilo: CSS Modules e variáveis CSS para os dois temas. Nenhuma biblioteca de componentes.

Histórico de mudanças

O painel Source Control da barra lateral lê os commits recentes deste repositório na API do GitHub durante o build, e o CHANGELOG.md mostra o diff de cada um, renderizado com os mesmos temas do editor. É o site se explicando com o próprio histórico, em vez de um texto sobre ele.

Competências em Destaque

  • Next.js 16 e React 19: App Router, Server Components, metadata por rota, geração estática.
  • TypeScript estrito: sem any, com tipos discriminados modelando a árvore de arquivos.
  • SEO técnico: canonical por página, sitemap derivado, robots.txt, Open Graph, dados estruturados.
  • Acessibilidade: hierarquia de títulos, marcos rotulados, foco visível, contraste verificado nos dois temas.
  • Responsividade: layout de aplicação com rolagem interna, gaveta lateral no celular e tratamento da faixa de tablet.

Código Fonte