Files
portifolio-evandrodevbr/docs/superpowers/specs/2026-08-17-frontend-foundation-design.md
T
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

1.9 KiB

Design: frontend foundation and conversion pass

Objetivo

Corrigir os pontos que impedem o portfólio de funcionar como produto: navegação global ausente, download de CV quebrado, foco de teclado inconsistente e efeitos cinematográficos executando fora do contexto necessário.

Decisões

  • Reutilizar o Header existente no layout global, sem adicionar dependências.
  • Centralizar URLs e itens de navegação em lib/site-navigation.ts para evitar caminhos divergentes.
  • Manter a identidade visual escura/cinematográfica, mas deixar o conteúdo principal e as ações acessíveis sem depender de animação.
  • Usar um disclosure mobile simples e acessível: aria-expanded, aria-controls, hidden e fechamento por Escape.
  • Fazer o MagneticButton renderizar li diretamente quando solicitado, eliminando div > li inválido.
  • Limitar cursor customizado, grain e progresso de scroll à home; páginas internas continuam com navegação normal e menos trabalho de renderização.
  • Adicionar skip link, scroll-padding e foco visível global.

Não incluído neste lote

  • Redesign completo da hero.
  • Migração de animações ou troca de biblioteca.
  • Alteração de backend, conteúdo editorial ou arquitetura de rotas.
  • Correção geral dos 152 diagnósticos do Biome; apenas os arquivos tocados serão saneados.

Critérios de aceite

  1. O header aparece na home e nas rotas internas.
  2. O menu mobile informa e controla seu estado, fecha com Escape e não deixa links ocultos no fluxo de tabulação.
  3. Todos os CTAs de CV apontam para /Profile.pdf, arquivo existente.
  4. Nenhum uso de MagneticButton as="li" produz um elemento intermediário inválido.
  5. O alvo do skip link existe e elementos focáveis têm indicação visual clara.
  6. Testes de regressão passam para header, CV e semântica de lista.
  7. Build de produção continua passando.