Présentation des compétences

Que fait Présentation des compétences ?

Générer une vidéo animée de démonstration des compétences par catégorie (1080x1080, 30ips, ~48s) et produire un fil de 7 publications sur X qui associe les groupes de compétences à leur valeur concrète.

Démarrage rapide

cd skills-showcase
npm install
npx remotion studio          # Aperçu dans le navigateur
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Artefacts produits

• out/skills-showcase.mp4 — Publication principale sur X (H.264, ~4.7 Mo)
• out/skills-showcase.gif — Alternative/aperçu (~7 Mo)
• thread.md — Copie du fil de 7 publications sur X

Architecture

src/
├── index.ts                  # Point d'entrée registerRoot
├── Root.tsx                  # Registre des compositions (1080x1080, 30ips, 1440 images)
├── SkillsShowcase.tsx        # Timeline principale utilisant <Series>
├── data/skills.ts            # Jeu de données typé : catégories, compétences, agrégats dérivés
├── scenes/
│   ├── Intro.tsx             # Titre + sous-titre + pastilles de statistiques (4s)
│   ├── CategorySection.tsx   # Étiquette de catégorie + vignettes de compétences échelonnées (2.67s chacune)
│   └── Outro.tsx             # Métrique récapitulative + slogan + appel à l'action (4s)
└── components/
    └── SkillChip.tsx         # Badge animé réutilisable avec entrée par ressort

Modèle de données

Modifiez src/data/skills.ts pour ajouter ou supprimer des compétences. La vidéo se re-rend de manière déterministe à partir de ce jeu de données.

• Catégorie : { id, label, color, order }
• Compétence : { slug, categoryId, shortDescription }
• Dérivé : totalSkills, totalCategories, skillsByCategory

Conventions d'animation

Toutes les animations utilisent uniquement des mécanismes basés sur les images de Remotion :

• useCurrentFrame() + useVideoConfig() pour les images/images par seconde
• spring() pour les entrées (amortissement : 200 pour une transition fluide, amortissement : 20 + raideur : 200 pour un effet vif)
• interpolate() avec clamp pour l'opacité et la translation
• Zéro transition CSS ou utilitaires d'animation Tailwind

Chronométrage

Scène	Images	Durée
Intro	120	4.0s
15 catégories × 80	1200	40.0s
Outro	120	4.0s
Total	1440	48.0s

Personnalisation

• Ajouter une catégorie : Ajoutez au tableau categories dans src/data/skills.ts, mettez à jour la durée dans Root.tsx
• Changer les couleurs : Chaque catégorie possède un code couleur hexadécimal color dans le jeu de données
• Ajuster le rythme : Modifiez CATEGORY_DURATION dans SkillsShowcase.tsx
• Copie du fil : Modifiez thread.md directement

Stratégie du fil

Consultez thread.md pour le fil complet de 7 publications. Structure :

1. Accroche + pièce jointe vidéo
2. Pourquoi les compétences surpassent les invites ponctuelles
3. Grappe conscience et mémoire
4. Grappe recherche et analyse
5. Couverture de l'implémentation full-stack
6. Compétences spécialisées de niche à fort signal
7. Appel à l'action et incitation à la discussion