lpazzim.com
- React
- TypeScript
- Vite
- Tailwind CSS
- Framer Motion
- TanStack Query
- i18next
- Notion API
- Vercel
- Papel
- Design & Engenharia
- Empresa
- Personal project
- Período
- 2025 — 2026
- Links
- Ver site Código-fonte
Este site: um portfólio bilíngue de estética editorial que funciona como CV vivo, com um blog que usa o Notion como CMS headless.
Contexto
Eu queria um portfólio que mostrasse como eu trabalho em vez de apenas listar tecnologias: conteúdo tipado, animação com propósito, dados reais e um fluxo de publicação que eu goste de usar.
O que eu fiz
- Desenhei a linguagem visual editorial: tipografia serifada em grande escala, paleta contida e revelações guiadas pelo scroll.
- Criei um modelo de conteúdo tipado e bilíngue, em que cada case e cada experiência é escrito uma vez por idioma e validado pelo TypeScript.
- Integrei o Notion como CMS headless via Vercel Serverless Functions, mantendo o token da API fora do bundle do cliente.
- Configurei a internacionalização EN / PT-BR com a preferência de idioma persistida.
Decisões-chave
- 01
Notion como CMS
Escrevo onde já faço minhas anotações. Uma função serverless consulta o banco, filtra pela flag Published e devolve JSON simples, com cache na edge e stale-while-revalidate.
- 02
Conteúdo como dado tipado, não markup
Os cases ficam em objetos TypeScript em vez de JSX. Uma tradução faltando vira erro de compilação, e os mesmos dados podem gerar um currículo em PDF no futuro.
- 03
Capas geradas em vez de fotos de banco
Cada case ganha uma capa generativa de linhas, gerada a partir do seu id e tingida pela própria cor de destaque, mantendo o arquivo visualmente consistente sem imagens de banco.
Resultados
- idiomas, totalmente traduzidos
- 2
- de peso em imagens após a limpeza
- -95%
- segredos enviados ao navegador
- 0
Aprendizado
“Um portfólio é um produto com um usuário muito específico: a pessoa que está decidindo se vai falar com você. Cada seção deve responder a uma pergunta dela.”