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

REDESIGN_SUMMARY.md

@@ -0,0 +1,150 @@
+# 🎨 Data-Driven Brutalism Redesign - Summary
+
+## Overview
+
+Seu portfólio foi completamente redesenhado com a estética **"Data-Driven Brutalism"** — uma abordagem ousada, técnica e memorável que reflete sua expertise em Data Engineering.
+
+## Mudanças Principais
+
+### 1. **Paleta de Cores** 🎯
+- **Antes**: Branco/cinza/preto genérico
+- **Depois**:
+  - Fundo: Muito escuro (#0f0f0f) - inspira dados/terminal
+  - **Cyan (#00d4ff)**: Primary accent - simboliza código/dados
+  - **Magenta (#ff006e)**: Secondary accent - contraste visual arrojado
+  - Tons de cinza para hierarquia
+
+### 2. **Tipografia** ✍️
+- **Display**: Monoespacial (`font-mono`) para headings - reflete código
+- **Body**: Sans-serif com tamanhos bem definidos
+- **Badges/Tags**: Monospace com `>`, `$`, `#` prefixes - terminal style
+- **Cores de texto**: Cyan, Magenta, Branco para hierarquia
+
+### 3. **Componentes Redesenhados**
+
+#### **Hero Section**
+✨ Novo visual:
+- Animação de partículas de dados flutuantes
+- Nome com gradient cyan→magenta
+- Terminal-style badges "> python", "> data_engineer"
+- Frame com visual de terminal (close/minimize buttons)
+- Efeito glow ao redor da imagem
+
+#### **Experience Section**
+📊 Cards como "data blocks":
+- Border esquerdo cyan com ponto indicador
+- Header com gradient cyan e sintaxe `$ empresa`
+- Timeline vertical conectando experiências
+- Skills com prefix `#` (hashtag style)
+- Monospace para data/localização
+
+#### **Projects Section**
+🚀 Grid com visual de dados:
+- Featured project com border cyan (left border)
+- Cards com data-point animado no center
+- Border topo magenta para outras seções
+- Botões com `[FEATURED]`, `CÓDIGO`, `DEMO` (uppercase)
+- Hover effects com glowing
+
+#### **Education Section**
+🎓 Timeline visual:
+- Linha conectando formações (gradient cyan→magenta)
+- Timeline dots em cada card
+- Border esquerdo cyan
+- Certificações com border topo magenta
+- Icons com background colored
+
+### 4. **Efeitos Visuais**
+
+#### **Animações**
+- `data-grid`: Background grid animado (muito subtil)
+- `float-particle`: Partículas flutuantes no hero
+- `pulse`: Data points pulsando
+- `glitch`: Efeito de transição (opcional)
+
+#### **Glowing Effects**
+```css
+--glow-cyan: 0 0 20px hsl(185 100% 50% / 0.3), 0 0 40px hsl(185 100% 50% / 0.1);
+--glow-magenta: 0 0 20px hsl(328 100% 54% / 0.3), 0 0 40px hsl(328 100% 54% / 0.1);
+```
+
+#### **Terminal Frames**
+- Imagem do perfil em "terminal window" com close buttons
+- Monospace filenames: `profile.tsx`, `data_engineer`
+
+### 5. **Design System - Variables**
+
+Todos os tokens CSS foram atualizados em `globals.css`:
+
+```css
+:root {
+  --background: 220 15% 6%;        /* Muito escuro */
+  --foreground: 0 0% 95%;          /* Branco leve */
+  --primary: 185 100% 50%;         /* Cyan vibrante */
+  --secondary: 328 100% 54%;       /* Magenta vibrante */
+  --border: 220 13% 15%;           /* Cinza escuro */
+  --glow-cyan: ...;                /* Efeitos de luz */
+  --glow-magenta: ...;
+}
+```
+
+## Características Técnicas
+
+### Brutalismo (O que o torna "brutal")
+1. **Formas quadradas**: Sem border-radius em componentes principais (rounded-none)
+2. **Bordas visíveis**: Borders 2px em cards, não bordas sutis
+3. **Tipografia pesada**: font-black, font-bold, font-mono dominante
+4. **Sem suavidade excessiva**: Transições definidas, contraste alto
+5. **Assimetria**: Cards com borders diferentes (left, top), positioning não-centrado
+
+### Dados (O que o torna "data-driven")
+1. **Grid patterns**: Background subtle com grid de dados
+2. **Data points**: Dots pulsando em projetos e formações
+3. **Timeline visualization**: Linha conectando elementos
+4. **Terminal syntax**: `$`, `>`, `#` como prefixes
+5. **Monospace everywhere**: Reflete código/dados
+
+## Impacto Visual
+
+### Antes ❌
+- Genérico, parecia template
+- Cores monótonas
+- Sem identidade visual
+- Fácil de esquecer
+
+### Depois ✅
+- **MEMORÁVEL**: Cyan + Magenta + Dark é distintivo
+- **TÉCNICO**: Monospace, terminal frames gritam "engenheiro"
+- **OUSADO**: Não teme contraste alto e bordas visíveis
+- **COESO**: Todo elemento serve um propósito visual
+- **Identidade**: Reflete quem você é (Data Engineer, tech-forward)
+
+## Como Funciona
+
+1. **globals.css**: Design tokens (cores, sombras, animações)
+2. **HeroSection.tsx**: Animações de partículas, terminal frame
+3. **ExperienceSection.tsx**: Timeline com data blocks
+4. **ProjectsSection.tsx**: Grid com data-points
+5. **EducationSection.tsx**: Timeline vertical
+6. **EducationSection.tsx**: Certificações com design visual
+
+## Próximos Passos (Opcional)
+
+Se quiser refinar ainda mais:
+
+1. **Adicionar componentes decorativos**: SVG patterns nas seções
+2. **Micro-animações**: Hover states mais elaboradas
+3. **Gradient meshes**: Backgrounds com gradientes organicamente posicionados
+4. **Custom cursor**: Cursor estilizado em cyan/magenta
+5. **Componentes Layout**: Footer, Navigation com mesmo aesthetic
+
+## Recursos Utilizados
+
+- **Framer Motion**: Animações (já estava no projeto)
+- **Tailwind CSS**: Styling com classes personalizadas
+- **CSS Grid/Animations**: Backgrounds e effects puros
+- **React Icons**: Icons já existentes, apenas restilizados
+
+---
+
+**Resultado**: Um portfólio que parece ter sido designado por um engenheiro de dados para engenheiros de dados. Ousado, técnico, e impossível de esquecer. 🚀