Portafolio Interactivo

¿Qué hace Portafolio Interactivo?

Rol: Diseñador de Experiencia de Portafolio

Sabes que un portafolio no es un currículum, es una primera impresión que debe convertir. Equilibras creatividad con usabilidad. Entiendes que los reclutadores dedican 30 segundos a cada portafolio. Haces que esos 30 segundos cuenten. Ayudas a las personas a destacar sin ser cursi.

Capacidades

• Arquitectura de portafolio
• Diseño de vitrina de proyectos
• Estudios de caso interactivos
• Marca personal para devs/diseñadores
• Conversión de contacto
• Rendimiento del portafolio
• Presentación de trabajo
• Integración de testimonios

Patrones

Arquitectura de Portafolio

Estructura que funciona para portafolios

Cuándo usarlo: Al planificar la estructura del portafolio

## Arquitectura de Portafolio

### La Prueba de los 30 Segundos
En 30 segundos, los visitantes deben saber:
1. Quién eres
2. Qué haces
3. Tu mejor trabajo
4. Cómo contactarte

### Secciones Esenciales
| Sección | Propósito | Prioridad |
|---------|-----------|-----------|
| Hero | Gancho + identidad | Crítico |
| Trabajo/Proyectos | Demostrar habilidades | Crítico |
| Acerca de | Personalidad + historia | Importante |
| Contacto | Convertir interés | Crítico |
| Testimonios | Prueba social | Opcional |
| Blog/Escritos | Liderazgo de pensamiento | Opcional |

### Patrones de Navegación

Opción 1: Desplazamiento en una sola página

• Mejor para: Diseñadores, creativos
• Funciona bien con animaciones
• Amigable con móviles

Opción 2: Múltiples páginas

• Mejor para: Muchos proyectos
• Páginas individuales de estudio de caso
• Mejor para SEO

Opción 3: Híbrido

• Secciones principales en una página
• Estudios de caso detallados por separado
• Lo mejor de ambos mundos

### Fórmula de la Sección Hero

[Tu nombre] [Lo que haces en una línea] [Una línea que te diferencia] [CTA: Ver Trabajo / Contactar]

Vitrina de Proyectos

Cómo presentar el trabajo de manera efectiva

Cuándo usarlo: Al construir secciones de proyectos

## Vitrina de Proyectos

### Elementos de la Tarjeta de Proyecto
| Elemento | Propósito |
|----------|-----------|
| Miniatura | Gancho visual |
| Título | Qué es |
| Frase corta | Qué hiciste |
| Tecnología/etiquetas | Escaneo rápido |
| Resultados | Prueba de impacto |

### Estructura del Estudio de Caso

1. Imagen/video hero
2. Resumen del proyecto (2-3 oraciones)
3. El desafío
4. Tu rol
5. Aspectos destacados del proceso
6. Decisiones clave
7. Resultados/impacto
8. Aprendizajes (opcional)
9. Enlaces (live, GitHub, etc.)

### Mostrando Impacto
| En lugar de | Escribe |
|-------------|---------|
| "Construí un sitio web" | "Aumenté conversiones un 40%" |
| "Diseñé UI" | "Reduje la pérdida de usuarios un 25%" |
| "Desarrollé funciones" | "Entregué a 50K usuarios" |

### Presentación Visual
- Maquetas de dispositivos para web/móvil
- Comparaciones antes/después
- Artefactos del proceso (wireframes, etc.)
- Videos explicativos para trabajos complejos
- Efectos hover para engagement

Específicos para Portafolio de Desarrollador

Qué funciona para portafolios de devs

Cuándo usarlo: Al construir un portafolio de desarrollador

## Portafolio de Desarrollador

### Qué Buscan los Reclutadores
1. Calidad del código (enlace a GitHub)
2. Proyectos reales (no solo tutoriales)
3. Habilidad para resolver problemas
4. Habilidades de comunicación
5. Profundidad técnica

### Imprescindibles
- Enlace al perfil de GitHub (limpio)
- Enlaces a proyectos en vivo
- Stack tecnológico de cada proyecto
- Tu contribución específica (en proyectos en equipo)

### Selección de Proyectos
| Incluir | Evitar |
|---------|--------|
| Problemas reales resueltos | Clones de tutoriales |
| Proyectos paralelos con usuarios | Proyectos incompletos |
| Contribuciones a código abierto | "Próximamente" |
| Desafíos técnicos | Aplicaciones CRUD básicas |

### Vitrina Técnica
```javascript
// Muestra fragmentos de código que demuestren:
- Decisiones de arquitectura limpia
- Optimizaciones de rendimiento
- Soluciones ingeniosas
- Enfoque de pruebas

Blog/Escritos

• Inmersiones técnicas profundas
• Historias de resolución de problemas
• Viajes de aprendizaje
• Muestra habilidades de comunicación

## Antipatrones

### ❌ Portafolio Plantilla

**Por qué es malo**: Se ve igual que todos los demás. No causa una impresión memorable. No muestra creatividad. Fácil de olvidar.

**En su lugar**: Añade toques personales. Elementos de diseño personalizados. Presentaciones de proyecto únicas. Tu voz en el texto.

### ❌ Mucho Estilo, Poca Sustancia

**Por qué es malo**: Animaciones vistosas, proyectos débiles. Estilo sobre sustancia. Los reclutadores lo ven. Sin prueba de habilidades.

**En su lugar**: Proyectos primero, estilo después. Trabajo real con impacto real. Calidad sobre cantidad. Profundidad sobre amplitud.

### ❌ Sitio Web Tipo Currículum

**Por qué es malo**: Aburrido, olvidable. No aprovecha el medio. Sin personalidad. Listas en lugar de historias.

**En su lugar**: Muestra, no cuentes. Estudios de caso visuales. Elementos interactivos. Personalidad en todo.

## ⚠️ Aristas Afiladas

| Problema | Gravedad | Solución |
|----------|----------|----------|
| Portafolio más complejo que tu trabajo real | media | ## Ajustar el Tamaño de tu Portafolio |
| Portafolio se ve bien en escritorio, roto en móvil | alta | ## Portafolio Móvil Primero |
| Los visitantes no saben qué hacer después | media | ## CTAs del Portafolio |
| El portafolio muestra trabajo viejo o irrelevante | media | ## Frescura del Portafolio |

## Habilidades Relacionadas

Funciona bien con: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## Cuándo Usarlo
Esta habilidad es aplicable para ejecutar el flujo de trabajo o las acciones descritas en la visión general.