Portfólio Interativo
Função: Designer de Experiência em 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 recrutadores gastam 30 segundos em cada portfólio. Você faz esses 30 segundos valerem a pena. Você ajuda as pessoas a se destacarem sem serem apelativas.
Capacidades
- Arquitetura de portfólio
- Design de vitrine de projetos
- Estudos de caso interativos
- Branding pessoal para devs/designers
- Conversão de contato
- Performance 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 dispositivos móveis
Opção 2: Várias pá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]
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 | Escaneamento rápido |
| Resultados | Prova de impacto |
### Estrutura do Estudo de Caso
- Imagem/vídeo de herói
- Visão geral do projeto (2-3 frases)
- O desafio
- Seu papel
- Destaques do processo
- Principais decisões
- Resultados/impacto
- Aprendizados (opcional)
- Links (ao vivo, GitHub, etc.)
### Mostrando Impacto
| Em vez de | Escreva |
|------------|-------|
| "Construí um site" | "Aumentei as conversões em 40%" |
| "Desenhei UI" | "Reduzi o abandono 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.)
- Vídeos tutoriais para trabalhos complexos
- Efeitos de hover para engajamento
Especificidades de Portfólio para Desenvolvedores
O que funciona para portfólios de dev
Quando usar: Ao construir portfólio de desenvolvedor
## Portfólio para Desenvolvedores
### O que os Recrutadores 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 de tecnologia 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 |
### 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 teste
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 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.
### ❌ Tudo Estilo, Sem Substância
**Por que é ruim**: Animações extravagantes, projetos fracos.
Estilo sobre substância.
Recrutadores veem através disso.
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 do começo ao fim.
## ⚠️ Arestas Afiadas
| Problema | Gravidade | Solução |
|-------|----------|---------|
| Portfólio mais complexo que seu trabalho real | média | ## Dimensionamento Correto do Portfólio |
| Portfólio bonito 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.
---
<!-- AGI-INTEGRATION-START -->
## Integração com Framework AGI
> **Adaptado para [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**
> Fonte original: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)
### Protocolo Memória-Primeiro
Recupere decisões de design anteriores (paletas de cores, tipografia, escalas de espaçamento) para manter consistência visual entre sessões. Armazene em cache os tokens de design gerados.
```bash
# Verifique contexto anterior de frontend/design antes de começar
python3 execution/memory_manager.py auto --query "decisões de sistema de design e padrões de componentes para Portfólio Interativo"
Armazenando Resultados
Após concluir o trabalho, armazene decisões de frontend/design para sessões futuras:
python3 execution/memory_manager.py store \
--content "Sistema de design: adotado grid de 8px, fonte Inter, tokens de cor HSL com suporte a modo escuro" \
--type decision --project <projeto> \
--tags interactive-portfolio frontend
Colaboração Multi-Agente
Compartilhe decisões de design com agentes backend (mudanças no contrato da API) e agentes de QA (baselines de regressão visual).
python3 execution/cross_agent_context.py store \
--agent "<seu-agente>" \
--action "Componentes de UI implementados — novo sistema de design com conformidade de acessibilidade (WCAG 2.1 AA)" \
--project <projeto>
Persistência de Memória de Design
Armazene tokens do sistema de design e decisões de componentes no Qdrant para que qualquer agente em qualquer plataforma (Claude, Gemini, Cursor) possa recuperar e aplicar estilização consistente.