logos-42/code-skills-tools-

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
• Casos de estudio interactivos
• Marca personal para desarrolladores/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 intelectual | 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 de caso de estudio individuales
• Mejor para SEO

Opción 3: Híbrido

• Secciones principales en una página
• Casos de estudio detallados separados
• 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 / 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 |
| Descripción breve | Qué hiciste |
| Tecnología/etiquetas | Escaneo rápido |
| Resultados | Prueba de impacto |

### Estructura del Caso de Estudio

1. Imagen/video hero
2. Resumen del proyecto (2-3 oraciones)
3. El desafío
4. Tu rol
5. Puntos 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é las conversiones un 40%" |
| "Diseñé la interfaz de usuario" | "Reduje la pérdida de usuarios un 25%" |
| "Desarrollé funcionalidades" | "Entregué a 50K usuarios" |

### Presentación Visual
- Maquetas de dispositivos para web/móvil
- Comparaciones antes/después
- Artefactos del proceso (wireframes, etc.)
- Recorridos en video para trabajo complejo
- Efectos hover para participación

Especificidades 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. Habilidad para resolver problemas
4. Habilidades de comunicación
5. Profundidad técnica

### Imprescindibles
- Enlace al perfil de GitHub (limpiado)
- Enlaces a proyectos en vivo
- Stack tecnológico para 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
• Trayectorias de aprendizaje
• Muestra habilidades de comunicación

## Antipatrones

### ❌ Portafolio Plantilla

**Por qué es malo**: Se ve como 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.

### ❌ Puro Estilo Sin Sustancia

**Por qué es malo**: Animaciones elegantes, 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 utiliza el medio.
Sin personalidad.
Listas en lugar de historias.

**En su lugar**: Muestra, no cuentes.
Casos de estudio visuales.
Elementos interactivos.
Personalidad en todo momento.

## ⚠️ Bordes Afilados

| Problema | Gravedad | Solución |
|----------|----------|----------|
| El portafolio es más complejo que tu trabajo real | media | ## Ajuste de Tamaño de tu Portafolio |
| El 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 | ## Frescura del Portafolio |

## Habilidades Relacionadas

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

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