Files
portifolio-evandrodevbr/docs/superpowers/plans/2026-08-17-frontend-foundation.md
Evandro Fonseca Junior b791b7de9e feat: control room hero, SEO/AEO optimization and design system fixes
Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
2026-08-27 10:55:21 -03:00

2.1 KiB

Plano: frontend foundation e conversão

Estado inicial

  • Branch atual: feature/portrait-cyber-effects.
  • Workspace limpo antes da implementação.
  • pnpm run build era o baseline verde conhecido.
  • Testes e Biome já possuíam falhas preexistentes; a validação distinguirá regressões dos problemas anteriores.

Execução

1. Regressões primeiro

Arquivos:

  • app/components/Header.test.tsx
  • app/components/Hero.test.tsx
  • app/components/cinematic/MagneticButton.test.tsx

Adicionar asserções para:

  • links e atributos ARIA do header;
  • download do CV em /Profile.pdf;
  • li renderizado diretamente sob uma lista.

Verificação: rodar as suítes específicas e observar falhas antes da implementação.

2. Contratos compartilhados

Arquivo novo:

  • lib/site-navigation.ts

Exportar CV_URL e os itens de navegação usados pelo header. O teste do Hero e o componente devem usar o mesmo contrato.

3. Navegação global

Arquivos:

  • app/layout.tsx
  • app/components/Header.tsx
  • app/components/cinematic/CinematicOverlays.tsx

Adicionar header no layout, skip link, navegação desktop, disclosure mobile e remover o botão Home redundante dos overlays.

4. Correções de semântica e performance

Arquivos:

  • app/components/Hero.tsx
  • app/components/cinematic/MagneticButton.tsx
  • app/components/cinematic/FilmGrain.tsx
  • app/globals.css

Usar CV_URL, renderizar li sem wrapper inválido, respeitar prefers-reduced-motion/pointer coarse no grain e adicionar foco/scroll global.

5. Validação e revisão

Executar:

pnpm exec jest --runInBand app/components/Header.test.tsx app/components/Hero.test.tsx app/components/cinematic/MagneticButton.test.tsx
pnpm run test -- --runInBand
pnpm run lint
pnpm run build
pnpm run format
pnpm exec biome check --write app/components/Header.tsx app/components/Hero.tsx app/components/cinematic/MagneticButton.tsx app/components/cinematic/CinematicOverlays.tsx app/components/cinematic/FilmGrain.tsx app/layout.tsx lib/site-navigation.ts

Revisar git diff --check, git diff --stat e o diff completo. Não criar commit sem solicitação explícita.