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 vitrinas de proyectos
- Estudios de caso interactivos
- Branding personal para desarrolladores/diseñadores
- Conversión de contactos
- 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ítica |
| Trabajo/Proyectos | Demostrar habilidades | Crítica |
| Sobre mí | Personalidad + historia | Importante |
| Contacto | Convertir interés | Crítica |
| Testimonios | Prueba social | Bueno tener |
| Blog/Escritos | Liderazgo de pensamiento | Opcional |
### Patrones de Navegación
Opción 1: Desplazamiento de una página
- Mejor para: Diseñadores, creativos
- Funciona bien con animaciones
- Amigable para móviles
Opción 2: Múltiples páginas
- Mejor para: Muchos proyectos
- Páginas individuales de casos de estudio
- Mejor para SEO
Opción 3: Híbrido
- Secciones principales en una página
- Casos de estudio detallados por separado
- Lo mejor de ambos mundos
### Fórmula de la Sección Hero
[Tu nombre] [Qué haces en una línea] [Una línea que te diferencia] [CTA: Ver Trabajo / Contacto]
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 |
| Una línea | Qué hiciste |
| Tecnología/etiquetas | Escaneo rápido |
| Resultados | Prueba de impacto |
### Estructura del Caso de Estudio
- Imagen/video hero
- Resumen del proyecto (2-3 frases)
- El desafío
- Tu rol
- Destacados del proceso
- Decisiones clave
- Resultados/impacto
- Aprendizajes (opcional)
- Enlaces (vivo, GitHub, etc.)
### Mostrando Impacto
| En lugar de | Escribe |
|-------------|---------|
| "Construí un sitio web" | "Aumenté conversiones un 40%" |
| "Diseñé UI" | "Reduje el abandono de usuarios un 25%" |
| "Desarrollé funciones" | "Entregué a 50.000 usuarios" |
### Presentación Visual
- Maquetas de dispositivos para web/móvil
- Comparaciones antes/después
- Artefactos del proceso (wireframes, etc.)
- Videotutoriales para trabajos complejos
- Efectos hover para interacción
Específicos para Portafolio de Desarrollador
Lo que funciona para portafolios de desarrolladores
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. Capacidad 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 (para proyectos en equipo)
### Selección de Proyectos
| Incluir | Evitar |
|---------|--------|
| Problemas reales resueltos | Clones de tutoriales |
| Proyectos secundarios con usuarios | Proyectos incompletos |
| Contribuciones a código abierto | "Próximamente" |
| Desafíos técnicos | Apps 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 proyectos únicas.
Tu voz en el texto.
### ❌ Mucho Estilo, Poca Sustancia
**Por qué es malo**: Animaciones elegantes, proyectos débiles.
Estilo sobre sustancia.
Los reclutadores lo perciben.
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 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.
Casos de estudio visuales.
Elementos interactivos.
Personalidad en todo.
## ⚠️ Puntos Críticos
| Problema | Gravedad | Solución |
|----------|----------|----------|
| Portafolio más complejo que tu trabajo real | media | ## Dimensionamiento Adecuado del 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 antiguo o irrelevante | media | ## Actualización del Portafolio |
## Habilidades Relacionadas
Funciona bien con: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`