Trois circuits d'apprentissage interactifs pour le hackathon PIT STOP.
| # | Circuit | Jour J | Complet | Thème |
|---|---|---|---|---|
| 01 | Claude Code | 30 min (3 exercices) | 10 exercices | Coding agent : du premier prompt au plan multi-agents |
| 02 | Notion Custom Agents | 15 min (2 exercices) | 8 exercices | Agents autonomes : daily digest, triage, Slack, onboarding |
| 03 | n8n | 15 min (2 exercices) | 8 exercices | Automatisation visuelle : webhooks, API, AI Agent node |
Chaque circuit est un skill tree interactif avec :
- Mode Jour J — exercices filtrés pour la session live du 25 mars
- Mode Parcours complet — tous les exercices pour approfondir en autonomie
- Panel de détail — étapes guidées, concepts clés inspectables, insights
- Progression — bouton "Marquer comme fait" persisté en localStorage
- Mutations animées — transitions de code entre exercices (Shiki Magic Move)
├── index.html Landing page (Zone DRS)
├── shared/
│ ├── learning-map.css Styles partagés (PIT STOP design system)
│ └── learning-map-engine.js Moteur générique du skill tree
├── claude-code/
│ ├── index.html Page du circuit
│ └── data.js Données des 10 exercices
├── notion-agents/
│ ├── index.html
│ └── data.js Données des 8 exercices
└── n8n/
├── index.html
└── data.js Données des 8 exercices
Le moteur (learning-map-engine.js) est data-driven : pour ajouter un circuit, il suffit de créer un data.js avec le même schéma et un index.html qui charge le moteur.
Aligné sur le PIT STOP Hub :
- Fond : carbon
#0D0D0Davec dot grid 24px - Accent : neon
#00FF87 - Typo : Oswald (headings, uppercase) + JetBrains Mono (labels, code)
- Cards :
#111111avec bordure#1E1E1E, glow neon au hover
- Vanilla HTML / CSS / JS — zéro build, zéro dépendance
- Shiki + Shiki Magic Move (lazy-loaded depuis CDN) pour la coloration syntaxique et les animations de code
- Déployé sur GitHub Pages via GitHub Actions
python3 -m http.server 8080
# → http://localhost:8080Approche pédagogique et moteur de skill tree inspirés de langchain-learning.