Como este site foi feito

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

Porquê tanto para um site simples: Para um site pessoal, isto é mais do que o necessário, e foi de propósito: é uma montra da forma como trabalho em projetos a sério. 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, por isso 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, bases 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 confrontam-nas até chegar à melhor, e revisores independentes testam o resultado. Eu decido, revejo cada alteração e escolho o que vai para o ar.
Os desenhos: Os desenhos são um só, feito em SVG e canvas a partir de dados. Começa no globo, desce até Portugal, passa pela escada da carreira e chega à equipa de agentes, com um zoom a cada nível enquanto lê. O texto desliza e o desenho acompanha, sem cortes, para a história parecer uma só. A visita guiada usa o mesmo desenho, e tudo está traduzido nos 4 idiomas, incluindo os textos dentro dos desenhos.
O vídeo: O vídeo de resumo foi gerado por código a partir dos mesmos desenhos, tipos de letra e cores da página, fotograma a fotograma 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, base de dados Postgres no Supabase, alojamento 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, contactos organizados por etapa, visitas e origens, pedidos de currículo e um registo de segurança. O acesso é feito por uma ligação de uso único enviada por email, com aviso a cada login. Foi pensado para crescer: pode tornar-se a central de outras ferramentas e backoffices, com o mesmo controlo de acesso.
Qualidade: Cada alteração passa por testes automáticos nos 4 idiomas, no telemóvel 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 na base de dados, 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 motores de pesquisa 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 desaparece 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 ligações clicáveis.