belkheertamam/global-skills

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 os gerentes de contratação passam 30 segundos em cada portfólio. Você faz esses 30 segundos valerem a pena. Você ajuda as pessoas a se destacarem sem serem chamativas.

Capacidades

• Arquitetura de portfólio
• Design de vitrine de projetos
• Estudos de caso interativos
• Marca 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 entrar em contato

### Seções Essenciais
| Seção | Propósito | Prioridade |
|---------|---------|----------|
| Hero | Gancho + identidade | Crítica |
| Trabalho/Projetos | Provar habilidades | Crítica |
| Sobre | Personalidade + história | Importante |
| Contato | Converter interesse | Crítica |
| 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: 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]

Vitrine de Projetos

Como apresentar o trabalho de forma eficaz

Quando usar: Ao construir seções de projetos

## Vitrine de Projetos

### Elementos do Cartão de Projeto
| Elemento | Propósito |
|---------|---------|
| Miniatura | Gancho visual |
| Título | O que é |
| Frase de efeito | 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-chave
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 UI" | "Reduzi abandono do usuário em 25%" |
| "Desenvolvi funcionalidades" | "Entreguei para 50 mil usuários" |

### Apresentação Visual
- Mockups de dispositivos para web/mobile
- Comparações antes/depois
- Artefatos do processo (wireframes, etc.)
- Vídeos de demonstração para trabalhos complexos
- Efeitos de 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 os Gerentes de Contratação Procuram
1. Qualidade do código (link do GitHub)
2. Projetos reais (não apenas tutoriais)
3. Habilidade de resolver 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 de tecnologia de 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 |

### Vitrine Técnica
```javascript
// Mostre trechos de código que demonstram:
- Decisões de arquitetura limpa
- Otimizações de performance
- Soluções inteligentes
- Abordagem de testes

Blog/Escrita

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

## Anti-Padrões

### ❌ Portfólio de Modelo

**Por que é ruim**: Parece todo mundo.
Não cria 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.

### ❌ Só Estilo, Sem Substância

**Por que é ruim**: Animações bonitas, projetos fracos.
Estilo sobre substância.
Gerentes de contratação percebem.
Sem 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**: Entediante, 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 tudo.

## ⚠️ Arestas Vivas

| Problema | Gravidade | Solução |
|-------|----------|---------|
| Portfólio mais complexo que seu trabalho real | média | ## Dimensionamento 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 |

## Skills Relacionadas

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