Pular para o conteúdo
hugo.pessoni

Meta-case: como este portfólio foi feito

Usei IA para levantar meu próprio trabalho, decidir o que podia ser público e construir o site com spec, testes e um gate de sigilo.

Em 20 segundos

Quase todo o meu trabalho de IA está em repositórios privados de empresas. Para montar este portfólio sem expor nada, tratei o próprio site como um projeto de engenharia: um scan do GitHub virou uma base de fatos, uma sabatina resolveu o que não era óbvio e um gate automático impede que nomes de clientes, pessoas ou sistemas internos cheguem ao HTML publicado.

Contexto

Eu precisava mostrar projetos reais (agentes, servidores MCP, RAG) para um processo seletivo, mas sem infringir a confidencialidade de nenhum deles. Escrever de memória ia gerar dois problemas: esquecer o que eu fiz de melhor e, no cuidado, deixar escapar o que não devia.

Ação

  1. Scan do GitHub com a API autenticada. Foram 120 repositórios acessíveis, 38 com commits meus e cerca de 130 PRs. Para cada repositório relevante, li README, documentação, mensagens de commit e o corpo dos PRs.
  2. Sabatina. Respondi só o que os repositórios não diziam: o que está em produção, o que foi protótipo e o que podia ser citado.
  3. Base de fatos separada do texto. Todo número publicado precisa existir antes na base, com a fonte e um selo: medido, declarado ou estimado.
  4. Spec e plano antes do código. O SDD define as páginas, o design system, a arquitetura e os testes; o plano quebra tudo em tarefas com teste antes da implementação.
  5. Sigilo como código. Uma lista de termos proibidos fica no repositório só como hashes SHA-256. O verificador normaliza o texto, gera n-gramas de até quatro palavras e compara os hashes. Ele roda nos testes e no HTML gerado pelo build, e o build falha se encontrar qualquer termo.
  6. Um AGENTS.md que permite a qualquer sessão de IA retomar o projeto com as mesmas regras.

Resultado

  • Sete cases em CAR, em português e inglês, com paridade verificada por teste.
  • Zero termos proibidos no conteúdo e no HTML publicado, verificado a cada build.
  • Contraste AAA no texto, verificado por teste nos dois temas.

Onde a IA errou

  • No primeiro rascunho da base de conhecimento, a IA escreveu o nome de uma empresa que eu tinha pedido para não citar, justamente na frase que dizia para não citá-la. Uma busca pegou o erro antes do commit. A lição virou regra: o cuidado humano não basta, a verificação precisa ser automática.
  • No plano, uma lista de tecnologias em YAML tinha vírgulas dentro de parênteses e quebraria o frontmatter. A revisão do plano pegou o problema antes da implementação.
  • O matcher do middleware de i18n foi escrito com uma barra invertida só, e por isso casava apenas com a raiz. A revisão de código pegou o erro antes de qualquer página depender dele.
  • A suíte e2e fixava o idioma do navegador em pt-BR para fazer um teste passar, e isso escondeu que visitantes com navegador em inglês eram redirecionados para /en. A revisão corrigiu a causa no roteamento (o português agora é o padrão para todo mundo) e acrescentou um teste com navegador en-US.
  • A primeira versão do gate de sigilo verificava linha por linha e deixava passar termos quebrados entre linhas ou dentro de tags HTML. Ele foi reforçado com janelas que atravessam linhas e com decodificação de marcação e de escapes.

Diário de bordo

Fase de descoberta (05–06/11/2026)

  • Scan autenticado do GitHub: 120 repositórios acessíveis, 38 com commits meus e cerca de 130 PRs.
  • Leitura do LinkedIn e sabatina sobre o que os repositórios não deixavam claro.
  • Base de conhecimento sanitizada, spec (SDD), AGENTS.md e plano de implementação.
  • Um rascunho interno citou o nome de uma empresa que não podia aparecer. Uma busca manual pegou o erro antes do commit, e foi daí que nasceu o gate de sigilo com hashes.

Fase 0 · Fundação (06/11/2026)

  • Scaffold do Next.js 16 com pnpm, Vitest e Playwright.
  • Tokens Grafite e lima, com teste de contraste AAA nos dois temas.
  • i18n PT/EN com next-intl, tema escuro por padrão e casca do layout. Um erro no escape do matcher do proxy impedia o middleware de rodar fora da raiz, e foi corrigido.

Fase 1 · Sigilo, loader e MDX (06/11/2026)

  • Gate de sigilo com lista proibida em SHA-256 e varredura por n-gramas. Depois foi reforçado para cobrir termos quebrados entre linhas, marcação HTML, escapes e novas raízes de varredura.
  • Schema zod e loader de cases, com checagem de paridade PT/EN.
  • Páginas MDX, componentes de MDX e registro de imagens revisadas.

Fase 2 · Cases e dados (06/11/2026)

  • Cases em PT e EN: Fábrica, Gateway MCP, Assistente de conhecimento, suporte, bot de vendas, Intelicita e Hallucinator, cada um com seus fatos rastreados na base de conhecimento.
  • Dados de perfil, contribuições, stack, outros projetos e evidências.

Fase 3 · Componentes e diagramas (06/11/2026)

  • Header, footer, alternância de tema e de idioma, com testes e2e. Português passou a ser o idioma padrão para todo visitante, sem detecção de idioma.
  • Componentes de case: ficha técnica, métricas, CAR, lições e navegação.
  • Diagramas SVG gerados a partir de dados, nos dois temas, para os 7 cases.

Fase 4 · Páginas (06/11/2026)

  • Páginas de cases com filtro por categoria, ficha técnica e diagrama. Ajustes: ficha técnica acima no celular, diagrama sem rolagem no desktop e filtro preservado ao voltar.
  • Home com hero, evidências, destaques, stack e contribuições.
  • Página de contribuições agrupadas por habilidade.
  • Página sobre com trajetória, formação e certificações.
  • Meta-case e este diário de bordo.

Fase 5 · Qualidade (06/11/2026)

  • Teste e2e de acessibilidade com axe (WCAG 2.0/2.1/2.2 A e AA) em 11 rotas nos temas escuro e claro, sem violações sérias ou críticas. Também há teste de movimento reduzido (bloco abaixo da dobra, com controle sem a preferência) e de teclado (foco chega ao link do primeiro case com contorno visível). Correção na origem: o menu do celular ganhou rótulo próprio ("Menu principal (celular)"), evitando dois nav com o mesmo nome.
  • Lighthouse local, preset desktop, servidor de produção em localhost:3100, medido em /, /cases/fabrica e /en. Comando: npx lighthouse@12 <url> --only-categories=performance,accessibility,best-practices,seo --preset=desktop --chrome-flags="--headless=new" com CHROME_PATH apontando para o Chrome instalado no sistema. O pnpm dlx lighthouse falhou (ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND) e o Chromium do Playwright não abriu pelo Lighthouse (spawn UNKNOWN).
    • Desempenho 100, Acessibilidade 100, Boas práticas 96, SEO 92 nas três páginas.
    • SEO 92 está abaixo da meta de 95. O único item reprovado é o canonical, que aponta para https://hugopessoni.tech (correto em produção) e não para localhost. Num teste temporário com o site apontado para localhost:3100 o SEO mediu 100 (alteração revertida), mas isso não substitui a medição real: reavaliar em produção na Task 28.
    • Boas práticas 96: o único erro de console é o 404 de /_vercel/insights/script.js, que só existe na Vercel.

Fase 6 · README, screenshots e revisão final (06/11/2026)

  • README e screenshots; revisão final com ajustes de veracidade (textos dos cases), sitemap com x-default, troca de idioma preservando a query string e separador da métrica.
  • Revisão do PR #1 (10 achados, todos corrigidos): o menu do celular não fechava ao navegar, porque o header persiste entre páginas (agora fecha, com teste e2e que falha sem a correção); o gate de sigilo passou a varrer tests/, redaction/allow.txt e os arquivos de configuração da raiz; o pnpm cv:pdf verifica o texto do CV antes de gerar o PDF, cujo texto comprimido o scan não lê; o sitemap reaproveita alternates() e não declara mais lastModified a cada build; a lista de cases ganhou um h2 (não pula de h1 para h3); a ficha técnica virou um <dl> válido; o conteúdo é lido uma vez por build; os checkboxes de T1–T26 foram marcados no plano.
  • Animações (adendo A1 da spec), sem dependências novas, todas desligadas com movimento reduzido:
    • troca de tema em bolha via View Transitions;
    • hero com título em desfoque, eyebrow que se decifra, fundo de pontos com luz no ponteiro e foto com tilt;
    • spotlight nos cards e contagem nas métricas.
  • Foi preciso conter o fundo do hero com overflow-x: clip num wrapper, porque no body o clip vira hidden na viewport e a página rolava na horizontal. Há teste e2e para isso.
  • O CV PT perdeu a linha do espanhol, a pedido do Hugo.
  • Foto com moldura (cantos em lima) e legenda: sede do Google Cloud em São Paulo, programa TD SYNNEX & Google AI Mastery Journey. No /sobre, a foto fica ao lado do texto. No hero, a coluna de texto vai até a foto, e no celular a foto fica centralizada.
  • O gate de sigilo no build passou a remontar os pedaços do payload RSC antes de verificar. O Next corta o payload em qualquer ponto, inclusive no meio de uma classe CSS, e o pedaço solto gerou um falso positivo.
  • Favicon e ícones (app/icon.png, apple-icon.png, favicon.ico) com o personagem amarelo enviado pelo Hugo, fundo removido; legenda da foto ajustada.