Portfólio Interativo

O que Portfólio Interativo faz?

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 apelativas.

Capacidades

• Arquitetura de portfólio
• Design de showcase de projetos
• Estudos de caso interativos
• Branding pessoal para devs/designers
• Conversão de contatos
• Desempenho do portfólio
• Apresentação de trabalho
• 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 entrar em contato

### Seções Essenciais
| Seção | Propósito | Prioridade |
|---------|---------|----------|
| Hero | Gancho + identidade | Crítico |
| Trabalho/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 mobile

Opção 2: Multipáginas

• 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 do Projeto
| Elemento | Propósito |
|---------|---------|
| Miniatura | Gancho visual |
| Título | O que é |
| Uma linha | O que você fez |
| Tecnologia/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 (live, GitHub, etc.)

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

### Apresentação Visual
- Mockups de dispositivos para web/mobile
- Comparações antes/depois
- Artefatos do processo (wireframes, etc.)
- Vídeos tutoriais para trabalhos complexos
- Efeitos hover para engajamento

Especificidades 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 | Apps CRUD básicos |

### Showcase Técnico
```javascript
// Mostre trechos de código que demonstrem:
- Decisões de arquitetura limpa
- Otimizações de desempenho
- 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 Template

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

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

### ❌ Todo Estilo, Nenhuma Substância

**Por que é ruim**: Animações chamativas, 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-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 toda parte.

## ⚠️ Arestas Afiadas

| Problema | Gravidade | Solução |
|-------|----------|----------|
| Portfólio mais complexo que seu trabalho real | média | ## Dimensionamento Correto do Seu Portfólio |
| Portfólio ótimo no desktop, quebrado no mobile | alta | ## Portfólio Mobile-First |
| Visitantes não sabem o que fazer a seguir | 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.