feat: frontend redesign with brutalism aesthetic and local-dev-setup skill

[IvanildoBarauna]

📋 Resumo

Esta PR implementa uma redesignação completa do frontend com um novo sistema de design baseado em brutismo de dados, além da criação de uma Claude Skill para setup local automático do desenvolvimento.

✨ Principais Mudanças

1. Redesign Frontend - Brutismo de Dados

• Novo sistema de cores: Paleta técnica com #0f0f0f (background), #00d4ff (cyan), #ff006e (magenta)
• Tipografia: Monospace para headings/código, sans-serif para body
• Componentes redefinidos:
  • HeroSection.tsx: Partículas animadas, frame de terminal, gradiente no nome
  • ExperienceSection.tsx: Timeline com data blocks, borda esquerda cyan
  • ProjectsSection.tsx: Indicadores de data-point, bordas magenta
  • EducationSection.tsx: Timeline vertical com cartões de certificado
• CSS global: Efeitos de glow, padrões de grid, pontos de dados pulsantes

2. Claude Skill: local-dev-setup

Automação completa do ambiente de desenvolvimento local:

• SSH Tunnel: Conecta automaticamente ao PostgreSQL remoto (VPS 168.231.100.213)
• Docker Compose: Inicia stack completo (backend, frontend, PostgreSQL, Redis)
• Health Checks: Verifica saúde dos serviços (backend 8090, frontend 3000)
• Documentação:
  • SKILL.md: Definição e metadados
  • ARCHITECTURE.md: Deep-dive técnico
  • TROUBLESHOOTING.md: Guia abrangente de debug
  • README.md: Instruções em português

3. Organização de Documentação

• REDESIGN_SUMMARY.md: Visão geral estética e técnica
• TESTING_REDESIGN.md: Guia completo de testes manuais
• .claude/skills/local-dev-setup/: Skill estruturada e pronta para uso

📊 Estatísticas

• Arquivos alterados: 19
• Linhas adicionadas: ~2.431
• Linhas removidas: ~289
• Mudanças principais: Frontend (CSS + componentes), Skills, Documentação

🎯 Checklist de Teste

• Redesign visual aparece corretamente em todos os navegadores
• Componentes animados funcionam sem lag
• Skill local-dev-setup configura SSH tunnel corretamente
• Docker Compose services iniciam sem erros
• Health checks passam (backend + frontend)
• Cores e tipografia aplicadas em todas as seções
• Responsividade mantida em dispositivos móveis

🔍 Como Testar

Frontend Redesign

cd frontend
npm install
npm run dev --turbo
# Acessar http://localhost:3000 e verificar novo design

Local Development Setup

# Usar a skill diretamente via Claude Code
# Ou executar o script:
bash .claude/skills/local-dev-setup/scripts/setup-local-dev.sh

📚 Documentação Adicional

Consulte os arquivos para mais detalhes:

• REDESIGN_SUMMARY.md - Design visual e cores
• TESTING_REDESIGN.md - Procedimentos de teste manual
• .claude/skills/local-dev-setup/ARCHITECTURE.md - Arquitetura técnica da skill

💡 Notas Importantes

• A skill local-dev-setup requer SSH acesso ao servidor com PostgreSQL
• O redesign mantém acessibilidade WCAG básica
• Todas as imagens e assets estão em frontend/public/
• Cache do frontend em localStorage está operacional

🚀 Próximos Passos

• Code review
• Testes manuais em produção-like environment
• Merge para main
• Deploy em produção

[IvanildoBarauna]

@claude review this PR as a critical UX Design focused in usability and the modern design

[claude]

Claude finished @IvanildoBarauna's task in 2m 26s —— View job

---

UX Design Review — PR #83

Tasks

• Gather context and understand request
• Read frontend changed files (CSS, components)
• Analyze UX/usability and modern design quality
• Post comprehensive review

---

Overall Assessment

The redesign succeeds in establishing a clear tech-noir identity — the cobalt/cyan palette, terminal frame, and monospace typography all communicate "senior engineer" effectively. However the implementation has several usability regressions and consistency gaps that need to be addressed before this goes to production. The aesthetic ambition is right; the execution needs polish.

---

Critical Issues (must fix)

1. Competing animation systems — double-animation jank

globals.css defines .fade-in / .slide-up keyframes that run immediately via CSS. Several elements simultaneously apply these classes and Framer Motion initial/animate props, so two different animation systems fight each other on the same element.

• ExperienceSection.tsx:17 — section header div has fade-in class
• ProjectsSection.tsx:36 — featured card has both slide-up class AND initial={{ opacity: 0, y: 30 }}
• EducationSection.tsx:45 — formation card has slide-up AND Framer Motion initial

Fix: Pick one system. Keep Framer Motion (it's already imported and handles whileInView correctly) and remove the CSS animation classes from motion-animated elements. Fix this →

2. Math.random() hydration mismatch (confirmed by Codex review)

HeroSection.tsx:21-31 — Math.random() is called inline during render for particle initial/animate values. Next.js SSR computes one set of random values; the client hydration computes different values → console hydration errors and visible particle jumps on first load.

// Current — breaks SSR
initial={{ opacity: 0, x: Math.random() * 100 - 50, y: Math.random() * 100 - 50 }}

// Fix: memoize outside render or use useMemo
const particles = useMemo(() =>
  Array.from({ length: 5 }, (_, i) => ({
    x: (i * 73 + 17) % 200 - 100,  // deterministic, or use seeded values
    y: (i * 53 + 31) % 200 - 100,
    duration: 4 + (i * 0.4),
  })), []);

Fix this →

3. CSS class conflict: text-lg vs text-sm on the same element

HeroSection.tsx:78-81 — the description paragraph has both text-lg (from parent intent) and text-sm (explicit class). Tailwind's cascade applies the last declared utility, but the conflict reveals an authoring error and results in text-sm text that's too small for body copy (11-12px effectively).

// Current — conflicting sizes
className="text-lg text-gray-400 max-w-xl leading-relaxed font-mono text-sm"

// Fix: pick one
className="text-sm text-gray-400 max-w-xl leading-relaxed font-mono"

---

High Priority Issues (should fix)

4. Featured project right column is decorative emptiness

ProjectsSection.tsx:88-96 — the featured project's right half on desktop is a large empty box with a pulsing dot and $ OPEN_SOURCE text. This wastes 50% of the most prominent card on the page. For a portfolio, this is where a screenshot, tech stack diagram, or star/fork count should live.

┌───────────────────────────────────────────┐
│ [FEATURED]          │                     │
│ $ project_title     │   . $ OPEN_SOURCE   │  ← empty
│ description...      │                     │
│ #tag1 #tag2         │   (50% wasted)      │
└───────────────────────────────────────────┘

5. CTA button style inconsistency — breaks visual grammar

ProjectsSection.tsx:182 — the "Ver todos os projetos" button at the bottom uses rounded-lg and border-border (default design system tokens), completely different from every other interactive element which uses rounded-none and explicit cyan borders. This looks like a forgot-to-update oversight.

6. Mixed language UI labels

Content is in Portuguese, but UI action labels are in English: OPEN, GIT, VERIFY, [FEATURED], [CURRENT], $ OPEN_SOURCE. This creates a cognitively jarring experience. Either commit to one language for labels or use the already-Portuguese Contato pattern throughout.

Inconsistent:

• ExperienceSection.tsx:68 → OPEN
• ProjectsSection.tsx:71 → CÓDIGO (Portuguese — good)
• ProjectsSection.tsx:82 → GIT (English)
• EducationSection.tsx:126 → VERIFY (English)

---

Medium Priority (UX refinements)

7. Terminal prefix overuse dilutes meaning

$ and > prefixes appear on: section headings, role titles, company names, course names, subsection titles, and badge text. When everything is a terminal prompt, nothing is. The strongest usage is the profile terminal frame and the hero badge — those land. The $ Formação Acadêmica section heading is where it becomes noise.

• ExperienceSection.tsx:52 → h3 company name: $ {empresa} — this is a company name, not a command
• EducationSection.tsx:30 → section title $ Formação Acadêmica
• EducationSection.tsx:92 → $ Certificações Profissionais

Recommendation: Reserve $/> for data items (positions, course names) and leave structural headings clean.

8. Certification card alignment inconsistency

EducationSection.tsx:106 — the certificate icon uses mx-auto (centered) but the card is text-left. The icon is visually centered while the text below is left-aligned, creating an incoherent card layout. Either center all content or left-align the icon too.

9. Terminal traffic-light colors break the mental model

HeroSection.tsx:151-153 — the terminal dots are red/yellow/blue, but macOS terminals (which this frame mimics) use red/yellow/green. Anyone familiar with terminals will notice this.

// Current
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
// Fix
<div className="w-3 h-3 rounded-full bg-green-500"></div>

10. Action labels "GIT" and "OPEN" are too terse

ExperienceSection.tsx:68, ProjectsSection.tsx:82 — GIT as a button label alongside the GitHub icon provides no semantic value. The icon already communicates GitHub; GIT doesn't add clarity and feels truncated. OPEN on a company website link is also weak — "Visit" or "Website" reads more clearly.

---

What Works Well

• Terminal frame on profile photo (HeroSection.tsx:147-168) — signature element that immediately communicates the engineering aesthetic. Visually distinct and memorable.
• whileInView + viewport={{ once: true }} across all sections — correct pattern for scroll-triggered animations that don't repeat, smooth page-scroll experience.
• Experience timeline (ExperienceSection.tsx:83-86) — left border + connector dot is clear chronological flow, readable and conventional enough for non-technical users.
• Skill tags with # prefix (ExperienceSection.tsx:119) — natural hashtag metaphor that feels native to a data engineer context.
• Color palette cohesion — cobalt background, cyan primary, magenta accent is well-defined in CSS custom properties and applied consistently across components.
• Scroll-smooth on CTAs (HeroSection.tsx:94-99) — the scrollIntoView on CTA buttons is a good UX touch.

---

Summary

Category	Rating
Visual identity & aesthetic	✅ Strong
Color & typography system	✅ Solid
Animation quality	⚠️ Needs cleanup (competing systems, hydration bug)
Content hierarchy	⚠️ Overuse of terminal prefixes
CTA/interaction design	⚠️ Inconsistencies and terse labels
Information density	⚠️ Featured project placeholder wastes prime space
Language consistency	❌ Mixed PT/EN

The redesign is heading in a strong direction and the visual identity is coherent. Fixing the hydration bug, the double-animation conflict, and the featured project placeholder would bring this to a production-ready state.