Projeto · 2026

papke-page

Este próprio site — portfólio em Next.js, bilíngue, com um agente de IA fundamentado numa base anonimizada de 49 fatos verificados, 42 testes, CSP restritiva e domínio próprio. Construído em público, fase a fase, desde junho de 2026.

Um portfólio que também é produto: bilíngue, com um agente de IA fundamentado no meu próprio conteúdo (e com barreiras de segurança de verdade), auditado de fora, construído em público e publicado a cada merge.

Captura da home do papke-page: hero “Construo produtos que resolvem.”, seção Sobre com foto e a faixa de destaques da experiência, em tema escuro com âmbar.

Você está olhando pra ele. O papke-page é o meu portfólio — e um projeto por si só, construído em público desde o primeiro commit, em 28 de junho de 2026: 82 commits, 11 páginas em dois idiomas, 123 chaves de tradução por idioma e 8 capas em SVG desenhadas à mão. O blog é o registro dessa construção.

Site Next.js 16 (App Router, TypeScript, Server Components), bilíngue PT/EN com next-intl — do conteúdo às rotas — e Tailwind v4 com tokens de tema próprios (dark + âmbar). O conteúdo vive em arquivos TypeScript versionados (conteúdo como código): páginas, projetos, experiência e este texto saem da mesma fonte tipada, que também alimenta o agente.

O agente "Pergunte sobre mim" responde fundamentado só no meu conteúdo mais uma base de competências anonimizada — 49 fatos verificados e 14 respostas preparadas, recuperados por relevância a cada pergunta, no idioma do visitante e em streaming. Cada fato pode carregar o COMO (a mecânica da solução) e um trecho de código ilustrativo de até 3 linhas, já anonimizado. Barreiras de verdade: checagem de pertinência antes de gerar, rate limit por IP, resistência a injeção de prompt e um teste automatizado que falha se um snippet carregar host, schema ou usuário real. Roda em tier grátis (Gemini via API compatível com a OpenAI).

Segurança tratada como feature: CSP restritiva (o único recurso externo é o Google Analytics — com aviso na primeira visita e opt-out no rodapé, liberado nominalmente na política), X-Frame-Options, nosniff, Referrer-Policy, Permissions-Policy e HSTS; chaves de API só no servidor; cookie de idioma com flag Secure; npm audit em zero vulnerabilidades. Auditei o site de fora, como um atacante faria: nenhuma rota aberta, nenhum dado interno, nenhuma chave no bundle — e a proteção anti-bot da Vercel bloqueou a minha própria varredura em rajada.

LGPD na prática: página de privacidade em linguagem clara, formulário de contato com honeypot, limite por IP, caps de tamanho e zero PII em log; o agente não guarda histórico de conversa; o Google Analytics roda com aviso na primeira visita e opt-out real no rodapé — quem desliga não carrega nada.

SEO e domínio próprio: Open Graph, sitemap, robots e geração estática, com a URL canônica centralizada em um único módulo. O roger.papke.com.br aponta da Cloudflare (DNS only) direto pra Vercel, com SSL automático e redirect 308 do endereço .vercel.app.

Engenharia do dia a dia: mudanças por Pull Request com tsc, eslint e 42 testes (Vitest) no verde antes de subir; duas máquinas empurrando pra mesma branch, com fetch e rebase antes de cada push; o merge é decisão humana. Deploy contínuo na Vercel — cada merge publica.

Em números

82
Commits desde jun/2026
11 × 2
Páginas × idiomas
123
Chaves de tradução por idioma
8
Capas SVG feitas à mão
49
Fatos verificados na base do agente
14
Respostas preparadas (Q&A)
42
Testes automatizados
6
Security headers
0
Vulnerabilidades (npm audit)
0
Vazamentos na auditoria externa

Decisões de engenharia

  1. 01

    Conteúdo como código

    Tudo — páginas, projetos, experiência, blog — vive em arquivos TypeScript versionados, lidos por um único módulo de acesso. Uma fonte tipada que alimenta o site e o agente ao mesmo tempo: mudou o conteúdo, mudou nos dois.

  2. 02

    Agente fundamentado, com guardrails

    O agente só fala sobre mim. Antes de gerar, uma chamada barata decide se a pergunta é pertinente; depois, a base de 49 fatos e 14 respostas preparadas é recuperada por relevância e entra no prompt com as regras que a acompanham (ressalvas, confiança de relato, código só ilustrativo). Rate limit por IP, resistência a injeção de prompt e nada de dado sensível — tudo no tier grátis.

  3. 03

    Anonimização como regra — e como teste

    A base do agente nasce de um arquivo de carreira anonimizado de propósito: nenhum fato nomeia instituição, sistema, schema ou colega. A regra não fica só no documento — um teste automatizado falha se qualquer snippet carregar host, schema, usuário ou nome de objeto real. E a auditoria externa confirmou: nada interno chega ao bundle servido.

  4. 04

    Bilíngue de ponta a ponta

    PT/EN via next-intl do conteúdo às rotas — 123 chaves por idioma, cada projeto e cada cargo escritos nas duas línguas — e o agente responde no idioma da pergunta.

  5. 05

    Segurança verificada de fora

    O site carrega um único recurso externo no browser — o Google Analytics, com aviso na primeira visita e opt-out no rodapé —, então a CSP pôde ser restritiva, liberando nominalmente apenas os domínios do Google. Chaves só no servidor, APIs só POST com CORS fechado e erros sem stack trace. Depois de blindar, auditei de fora como um atacante: rotas sensíveis, bundle, source maps, cookies. Zero vazamento — e a proteção anti-bot da Vercel barrou minha própria varredura em rajada.

  6. 06

    Capas em SVG feitas à mão

    Em vez de imagens genéricas, cada projeto tem uma capa em SVG desenhada à mão na mesma linguagem visual (dark + âmbar): diagramas de arquitetura, pipelines, o ecossistema do banco. Leves, nítidas em qualquer tela, validadas como XML antes de entrar — e, quando o projeto tem material real, com fotos e telas embutidas.

  7. 07

    Domínio próprio sem proxy

    O roger.papke.com.br fica na Cloudflare só como DNS (nuvem cinza): um CNAME direto pra Vercel, que emite e renova o SSL sozinha. Sem proxy no meio, sem cache brigando com o Next. O endereço .vercel.app redireciona com 308, e a URL canônica vive num único módulo que alimenta metadata, sitemap e robots.

  8. 08

    Deploy contínuo por PR — duas máquinas, uma branch

    Cada mudança passa por Pull Request com tsc, eslint e 42 testes no verde. Duas máquinas trabalham na mesma branch: fetch e rebase antes de cada push, e o histórico segue linear. O merge é decisão humana; a partir dele, a Vercel publica sozinha.

Arquitetura

Next.js

App Router · [locale]

11 páginas em PT/EN, geração estática e Server Components.

Conteúdo (TS)

Fonte única

content/data em TypeScript alimenta páginas, projetos, experiência e o agente.

i18n

next-intl

123 chaves por idioma, do conteúdo às rotas.

Agente de IA

API route + Gemini

Pertinência → recuperação por relevância → resposta em streaming, com guardrails.

Base anonimizada

49 fatos · 14 Q&A

Gerada do arquivo de carreira; teste automatizado trava vazamento de identificador.

Segurança

Headers · rate limit

CSP restritiva, HSTS, nosniff; chaves só no servidor; limite por IP nas APIs.

APIs

/api/chat · /api/contact

Só POST, CORS fechado, erros terse; contato via Resend sem PII em log.

Deploy & domínio

Vercel · Cloudflare

PR + gate → Vercel; DNS only na Cloudflare; 308 do .vercel.app.

Stack

Next.jsTypeScriptnext-intlTailwind CSSVitestAI Agents (Gemini)VercelCloudflare