Como este site foi feito

Um site pessoal também é portfólio, então conto aqui as decisões por trás deste e como uso IA junto com a engenharia que já sabia. Eu desenhei, escrevi e revisei tudo.

Por que tanto para um site simples: Para um site pessoal, isto é mais do que o necessário, e foi de propósito: é uma vitrine do jeito que eu trabalho em projetos de verdade. Num projeto de cliente, a primeira decisão é quanto rigor o problema pede. Testes em vários navegadores, auditorias e revisões custam tempo e dinheiro, então eu dimensiono isso pelo risco, pelo prazo e pelo orçamento, e digo com clareza o que pode ficar para depois.
Engenharia com IA: A base é o que eu já sabia fazer: arquitetura, TypeScript, banco de dados, testes, segurança e revisão de código. A IA entra como ferramenta. Uso o Claude Code com agentes guiados por checklists de especialistas. Muitas vezes, vários deles propõem soluções diferentes para o mesmo problema e as confrontam até chegar à melhor, e revisores independentes testam o resultado. Eu decido, reviso cada mudança e escolho o que vai ao ar.
Os desenhos: Os desenhos são um só, feito em SVG e canvas a partir de dados. Ele começa no globo, desce até Portugal, passa pela escada da carreira e chega ao time de agentes, com um zoom a cada nível enquanto você lê. O texto rola e o desenho acompanha, sem cortes, para a história parecer uma coisa só. O tour guiado usa o mesmo desenho, e tudo é traduzido nos 4 idiomas, inclusive os textos dentro dos desenhos.
O vídeo: O vídeo de resumo foi gerado por código a partir dos mesmos desenhos, fontes e cores da página, quadro a quadro num navegador, com uma skill de IA para vídeo. A música também é gerada, em lá menor, com um toque a cada degrau da escada, e não tem voz sintética. Existe nos 4 idiomas.
Tecnologias: Next.js 16, React 19 e TypeScript, estilos em Tailwind CSS 4, banco Postgres no Supabase, hospedagem e CDN na Vercel, emails pela Resend e verificação anti-robô da Cloudflare.
Painel de administração: Por trás do site há um painel próprio: mensagens, contatos organizados por etapa, visitas e origens, pedidos de currículo e um registro de segurança. O acesso é por link de uso único enviado por email, com aviso a cada login. Foi pensado para crescer: pode virar a central de outras ferramentas e backoffices, com o mesmo controle de acesso.
Qualidade: Cada mudança passa por testes automáticos nos 4 idiomas, no celular e no computador, em Chrome, Safari e Firefox, incluindo acessibilidade (WCAG 2.2 AA). A segurança segue o OWASP, com validação no servidor, verificação anti-robô, limites de envio, Row Level Security no banco, HTTPS obrigatório e Content Security Policy, entre outras técnicas. No Lighthouse, de 96 a 100.
SEO e GEO: Quatro idiomas ligados entre si, dados estruturados do schema.org, sitemap e um llms.txt: o site foi feito para aparecer nos buscadores e também para ser encontrado e citado por assistentes de IA.
Privacidade: O site não usa cookies de rastreio nem anúncios. O IP some em 14 dias, e mensagens e pedidos de currículo são apagados em até 24 meses. Os detalhes estão na política de privacidade.
Currículo: O PDF sai do mesmo conteúdo do site, em 4 idiomas, pensado para pessoas e para sistemas de recrutamento: uma coluna, texto real, títulos padrão e links clicáveis.