Skip to content
hugo.pessoni

Meta-case: how this portfolio was built

I used AI to map my own work, decide what could be public, and build the site with a spec, tests and a confidentiality gate.

In 20 seconds

Almost all of my AI work lives in private company repositories. To build this portfolio without exposing anything, I treated the site itself as an engineering project: a GitHub scan became a fact base, an interview resolved what was not obvious, and an automated gate keeps client names, people and internal systems out of the published HTML.

Context

I needed to show real projects (agents, MCP servers, RAG) for a hiring process, without breaking the confidentiality of any of them. Writing from memory would cause two problems: forgetting my best work and, in trying to be careful, letting slip what I should not.

Action

  1. GitHub scan with the authenticated API. 120 accessible repositories, 38 with commits from me and about 130 PRs. For each relevant repository I read the README, docs, commit messages and PR bodies.
  2. Interview. I answered only what the repositories did not say: what is in production, what was a prototype and what could be mentioned.
  3. Fact base kept apart from the text. Every published number must first exist in the base, with a source and a badge: measured, declared or estimated.
  4. Spec and plan before code. The SDD defines the pages, the design system, the architecture and the tests; the plan breaks it all into tasks with a test written before the implementation.
  5. Confidentiality as code. A list of forbidden terms lives in the repository only as SHA-256 hashes. The checker normalizes the text, builds n-grams of up to four words and compares the hashes. It runs in the tests and on the HTML generated by the build, and the build fails if it finds any term.
  6. An AGENTS.md so any AI session can pick the project up again under the same rules.

Result

  • Seven CAR cases, in Portuguese and English, with parity checked by a test.
  • Zero forbidden terms in the content and in the published HTML, verified on every build.
  • AAA contrast on body text, verified by a test in both themes.

Where the AI got it wrong

  • In the first draft of the knowledge base, the AI wrote the name of a company I had asked it not to mention, in the very sentence that said not to mention it. A search caught the error before the commit. The lesson became a rule: human care is not enough, the check has to be automatic.
  • In the plan, a YAML list of technologies had commas inside parentheses and would have broken the frontmatter. The plan review caught it before implementation.
  • The i18n middleware matcher was written with a single backslash, so it only matched the root path. A code review caught it before any page depended on it.
  • The e2e suite pinned the browser locale to pt-BR to make a test pass, which hid that visitors with an English browser were being redirected to /en. The review fixed the cause in the routing (Portuguese is now the default for everyone) and added a test with an en-US browser.
  • The first version of the confidentiality gate checked line by line and missed terms split across lines or inside HTML tags. It was hardened with windows that cross lines and with decoding of markup and escapes.

Build log

Log kept in Portuguese.

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.