broomva/skills

Skills Showcase

Renderiza un video animado de showcase de habilidades, categoría por categoría (1080x1080, 30fps, ~48s) y produce un hilo de 7 publicaciones en X que mapea los clústeres de habilidades a su valor concreto.

Inicio rápido

cd skills-showcase
npm install
npx remotion studio          # Vista previa en navegador
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Artefactos de salida

• out/skills-showcase.mp4 — Subida principal a X (H.264, ~4.7 MB)
• out/skills-showcase.gif — Respaldo/vista previa (~7 MB)
• thread.md — Copia del hilo de 7 publicaciones para X

Arquitectura

src/
├── index.ts                  # Punto de entrada registerRoot
├── Root.tsx                  # Registro de composición (1080x1080, 30fps, 1440 fotogramas)
├── SkillsShowcase.tsx        # Línea de tiempo maestra usando <Series>
├── data/skills.ts            # Conjunto de datos tipado: categorías, habilidades, agregados derivados
├── scenes/
│   ├── Intro.tsx             # Título + subtítulo + píldoras de estadísticas (4s)
│   ├── CategorySection.tsx   # Etiqueta de categoría + fichas de habilidades escalonadas (2.67s cada una)
│   └── Outro.tsx             # Métrica de resumen + eslogan + CTA (4s)
└── components/
    └── SkillChip.tsx         # Insignia animada reutilizable con entrada tipo spring

Modelo de datos

Edita src/data/skills.ts para añadir o eliminar habilidades. El video se renderiza de forma determinista a partir de este conjunto de datos.

• Categoría: { id, label, color, order }
• Habilidad: { slug, categoryId, shortDescription }
• Derivados: totalSkills, totalCategories, skillsByCategory

Convenciones de animación

Todas las animaciones utilizan únicamente patrones basados en fotogramas de Remotion:

• useCurrentFrame() + useVideoConfig() para fotogramas/fps
• spring() para entradas (damping: 200 para suavidad, damping: 20 + stiffness: 200 para rapidez)
• interpolate() con clamp para opacidad y traslación
• Cero transiciones CSS o utilidades de animación de Tailwind

Ritmo de la línea de tiempo

Escena	Fotogramas	Duración
Intro	120	4.0s
15 categorías × 80	1200	40.0s
Outro	120	4.0s
Total	1440	48.0s

Personalización

• Agregar una categoría: Añadir al arreglo categories en src/data/skills.ts, actualizar la duración en Root.tsx
• Cambiar colores: Cada categoría tiene un color hexadecimal en el conjunto de datos
• Ajustar ritmo: Modificar CATEGORY_DURATION en SkillsShowcase.tsx
• Copias del hilo: Editar thread.md directamente

Estrategia del hilo

Ver thread.md para el hilo completo de 7 publicaciones. Estructura:

1. Gancho + adjunto de video
2. Por qué las habilidades superan a los prompts únicos
3. Clúster de conciencia y memoria
4. Clúster de investigación y análisis
5. Cobertura de implementación full-stack
6. Habilidades especializadas de nicho y alta señal
7. CTA y pregunta para discusión