A história do Portfólio — da Mission Control ao sci-fi com 529 commits e 218 testes
⚡ O portfólio que virou uma nave espacial
Existe uma regra não escrita do mercado dev: seu portfólio precisa ser tão bom quanto o código que você entrega. Mas em maio de 2026, o meu era só um “Mission Control Portfolio” genérico com um grid de projetos.
Hoje ele é uma nave espacial interativa: parallax scene multicamada com cockpit SVG, 5 mini-games jogáveis, terminal com 15+ comandos, i18n PT/EN completo e 218 testes segurando tudo. Tudo com tema ciano+preto cinematográfico — nada de template.
🧠 Contexto — do template ao playground
O commit inicial (06/05/2026) foi modesto:
607df2d 🚀 Initial commit: Mission Control PortfolioNext.js + React + Tailwind, o básico de todo portfólio. Mas a identidade visual mudou rápido: o tema Treasure Planet foi arquivado em junho e nasceu a estética sci-fi ciano+preto com parallax layers (L0-L3) e cockpit SVG animado.
A virada conceitual: em vez de mostrar meus projetos em cards estáticos, eu queria que o visitante interagisse com o portfólio como se estivesse numa cabine de nave. Daí vieram os 5 mini-games.
🔧 A luta — games, animações e o deploy que quebrava
Os 5 mini-games
Cada jogo é um experimento: Snake, Pong, um puzzle e outros — embutidos via iframe com React carregado por CDN (unpkg). Isso trouxe o primeiro problema clássico:
// src/components/MiniGames/ — loading state real
const [loading, setLoading] = useState(true)
// spinner + "Carregando jogo..." enquanto o iframe carrega React + Babel do CDNSem o loading state, os iframes apareciam em branco por segundos. E no mobile, os cards dos jogos rolavam verticalmente em vez de ficarem fixos — o fix foi overflow-y-hidden + min-h-[160px] pra travar o layout.
A animação de entrada que quase nunca rodou
O GSAP foi o vilão da vez: ele quebrava o build na Vercel porque não estava nas dependencies — só nas devDependencies. O build local passava, o deploy quebrava. Foi o primeiro de muitos “funciona aqui mas não lá”.
# O fix de 17/06 — GSAP pra dependencies de verdade
npm install gsap --save-prodO deploy manual que virou rotina
O Portifólio vive em três ambientes: Vercel (produção), self-host na 3001, e staging na 3000 via proxy do Capivara. O deploy da Vercel foi manual por muito tempo — vercel --token "$VERCEL_TOKEN" --prod — até o CI/CD automatizar.
💡 Resolução — a vitrine que responde comandos
O momento mais legal: o terminal interativo. Digite help e veja 15+ comandos; projects lista os projetos; contact abre o formulário. É o portfólio conversando com o visitante.
O formulário de contato também virou robusto: validação + rate-limit + LGPD + integração com Resend pra email. E o Cookie Banner com consentimento LGPD — porque portfólio público com analytics precisa respeitar a lei.
A arquitetura final:
- Parallax scene — grid + cockpit SVG + HUD panels + partículas formam a entrada
- 5 mini-games — abas com um por vez + toggle “ver todos”
- Terminal — 15+ comandos, atalhos de teclado no desktop
- i18n PT/EN — todos os componentes traduzidos
- Umami Analytics — eventos, pageviews, heatmaps (self-hosted na 3100)
📊 Métricas
| Métrica | 06/05 (nascimento) | Hoje |
|---|---|---|
| Commits | 1 | 529 |
| Testes | 0 | 218+ |
| Mini-games | 0 | 5 |
| Comandos do terminal | 0 | 15+ |
| Ambientes | 1 | 3 (Vercel + 3001 + 3000) |
| Lint errors | — | 0 |
| Parallax layers | 0 | 4 (L0-L3) |
🎯 Aprendizados
O Portifólio me ensinou que experiência de marca é código. Um portfólio não mostra só o que você sabe fazer — ele demonstra. Cada mini-game, cada animação, cada comando do terminal é uma entrevista de emprego silenciosa acontecendo em tempo real.
E a lição prática: sempre testar o build no ambiente de deploy. GSAP na devDependencies quebrou produção três vezes até eu entender que “funciona local” não significa “funciona na Vercel”.