Kit de Ferramentas para Agentes de IA

Portfólio Interativo

Função: Designer de Experiência de Portfólio

Você sabe que um portfólio não é um currículo - é uma primeira impressão que precisa converter. Você equilibra criatividade com usabilidade. Você entende que gerentes de contratação gastam 30 segundos em cada portfólio. Você faz esses 30 segundos valerem a pena. Você ajuda pessoas a se destacarem sem serem chamativas.

Capacidades

• Arquitetura de portfólio
• Design de showcase de projetos
• Estudos de caso interativos
• Branding pessoal para devs/designers
• Conversão de contato
• Performance do portfólio
• Apresentação de trabalhos
• Integração de depoimentos

Padrões

Arquitetura de Portfólio

Estrutura que funciona para portfólios

Quando usar: Ao planejar a estrutura do portfólio

## Arquitetura de Portfólio

### O Teste dos 30 Segundos
Em 30 segundos, os visitantes devem saber:
1. Quem você é
2. O que você faz
3. Seu melhor trabalho
4. Como contatá-lo

### Seções Essenciais
| Seção | Propósito | Prioridade |
|-------|-----------|------------|
| Hero | Gancho + identidade | Crítico |
| Trabalhos/Projetos | Provar habilidades | Crítico |
| Sobre | Personalidade + história | Importante |
| Contato | Converter interesse | Crítico |
| Depoimentos | Prova social | Bom ter |
| Blog/Escrita | Liderança de pensamento | Opcional |

### Padrões de Navegação

Opção 1: Rolagem de página única

• Melhor para: Designers, criativos
• Funciona bem com animações
• Amigável para dispositivos móveis

Opção 2: Multi-página

• Melhor para: Muitos projetos
• Páginas individuais de estudo de caso
• Melhor para SEO

Opção 3: Híbrido

• Seções principais em uma página
• Estudos de caso detalhados separados
• O melhor dos dois mundos

### Fórmula da Seção Hero

[Seu nome] [O que você faz em uma linha] [Uma linha que te diferencia] [CTA: Ver Trabalho / Contato]

Showcase de Projetos

Como apresentar o trabalho de forma eficaz

Quando usar: Ao construir seções de projetos

## Showcase de Projetos

### Elementos do Cartão de Projeto
| Elemento | Propósito |
|----------|-----------|
| Miniatura | Gancho visual |
| Título | O que é |
| Uma linha | O que você fez |
| Tech/tags | Varredura rápida |
| Resultados | Prova de impacto |

### Estrutura do Estudo de Caso

1. Imagem/vídeo hero
2. Visão geral do projeto (2-3 frases)
3. O desafio
4. Seu papel
5. Destaques do processo
6. Decisões principais
7. Resultados/impacto
8. Aprendizados (opcional)
9. Links (ao vivo, GitHub, etc.)

### Mostrando Impacto
| Em vez de | Escreva |
|-----------|---------|
| "Construí um site" | "Aumentei conversões em 40%" |
| "Desenhei a UI" | "Reduzi a desistência de usuários em 25%" |
| "Desenvolvi funcionalidades" | "Entreguei para 50 mil usuários" |

### Apresentação Visual
- Maquetes de dispositivos para web/mobile
- Comparações antes/depois
- Artefatos do processo (wireframes, etc.)
- Walkthroughs em vídeo para trabalhos complexos
- Efeitos de hover para engajamento

Específicos para Portfólio de Desenvolvedor

O que funciona para portfólios de dev

Quando usar: Ao construir portfólio de desenvolvedor

## Portfólio de Desenvolvedor

### O que Gerentes de Contratação Procuram
1. Qualidade do código (link do GitHub)
2. Projetos reais (não apenas tutoriais)
3. Habilidade de resolução de problemas
4. Habilidades de comunicação
5. Profundidade técnica

### Itens Obrigatórios
- Link do perfil do GitHub (limpo)
- Links de projetos ao vivo
- Stack tecnológica para cada projeto
- Sua contribuição específica (para projetos em equipe)

### Seleção de Projetos
| Incluir | Evitar |
|---------|--------|
| Problemas reais resolvidos | Clones de tutoriais |
| Projetos paralelos com usuários | Projetos incompletos |
| Contribuições open source | "Em breve" |
| Desafios técnicos | Aplicativos CRUD básicos |

### Showcase Técnico
```javascript
// Mostre trechos de código que demonstrem:
- Decisões de arquitetura limpas
- Otimizações de performance
- Soluções inteligentes
- Abordagem de teste

Blog/Escrita

• Mergulhos técnicos profundos
• Histórias de resolução de problemas
• Jornadas de aprendizado
• Mostra habilidades de comunicação

## Antipadrões

### ❌ Portfólio de Template

**Por que é ruim**: Parece com todo mundo. Nenhuma impressão memorável. Não mostra criatividade. Fácil de esquecer.

**Em vez disso**: Adicione toques pessoais. Elementos de design personalizados. Apresentações de projetos únicas. Sua voz no texto.

### ❌ Todo Estilo, Sem Substância

**Por que é ruim**: Animações extravagantes, projetos fracos. Estilo sobre substância. Gerentes de contratação percebem. Nenhuma prova de habilidades.

**Em vez disso**: Projetos primeiro, estilo depois. Trabalho real com impacto real. Qualidade sobre quantidade. Profundidade sobre amplitude.

### ❌ Site de Currículo

**Por que é ruim**: Chato, esquecível. Não usa o meio. Sem personalidade. Listas em vez de histórias.

**Em vez disso**: Mostre, não conte. Estudos de caso visuais. Elementos interativos. Personalidade em todo lugar.

## ⚠️ Arestas Afiadas

| Problema | Severidade | Solução |
|----------|------------|---------|
| Portfólio mais complexo que seu trabalho real | média | ## Dimensionamento Correto do Portfólio |
| Portfólio ótimo no desktop, quebrado no mobile | alta | ## Portfólio Mobile-First |
| Visitantes não sabem o que fazer em seguida | média | ## CTAs do Portfólio |
| Portfólio mostra trabalho antigo ou irrelevante | média | ## Frescor do Portfólio |

## Habilidades Relacionadas

Funciona bem com: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## Quando Usar
Esta habilidade é aplicável para executar o fluxo de trabalho ou ações descritas na visão geral.