Portfólio de Desenvolvedor
Este portfólio começou como um site escrito à mão em JavaScript vanilla. Ele foi migrado em fases planejadas e testadas para React, TypeScript e Tailwind CSS — mantendo o mesmo design e transformando cada projeto em uma página real, com endereço, prévia de compartilhamento e metadados de busca próprios.
Arquitetura
O React Router roda em modo framework com a renderização no servidor desligada: todas as páginas — a inicial e cada projeto, em inglês, português e espanhol — são pré-renderizadas como HTML estático no build e depois hidratadas no navegador. Não há servidor em execução para manter.
O código é organizado por responsabilidade (app, pages, widgets, features, entities, shared), e um teste faz o build falhar se uma camada inferior importar uma superior.
Idiomas e SEO
O idioma faz parte da URL (/, /pt, /es). Cada página tem título, descrição, endereço canônico, alternativas hreflang, prévia para redes sociais e dados estruturados próprios, e o sitemap é gerado a partir dos mesmos dados das rotas.
Todo o texto fica em arquivos JSON tipados: uma chave escrita errado falha na checagem de tipos, e testes garantem que os três idiomas tenham sempre a mesma estrutura.
Segurança, acessibilidade e desempenho
Uma Content-Security-Policy é gerada para cada página com o hash de cada script inline, então nenhum código inline roda sem ter sido incluído no build. Um pequeno script no head aplica o tema e o idioma salvos antes da primeira pintura — sem flash de tema errado.
As animações respeitam a preferência de movimento reduzido e só carregam quando o navegador está ocioso; a primeira visita baixa cerca de 140 kB de JavaScript. Uma suíte Playwright cobre rotas, idiomas, temas, o formulário de contato e verificações automáticas de acessibilidade.