first commit

docs/02-moodboard-freeparty.md

@@ -0,0 +1,374 @@
+# Portfolio v2 — Moodboard "Studio Live / Free Party"
+
+> Direction artistique : **tekno free party**. Vibe sound system / squat / rave illégale. Palette cyberpunk conservée mais **poussée en acid**, typographies plus brutes, vocabulaire underground, textures warehouse.
+
+---
+
+## 1. Vocabulaire / mots-clés du site
+
+On oublie "cv", "profil", "vinyles", on skinne tout :
+
+| Concept générique | Version free party |
+|---|---|
+| Portfolio | **Sound system** |
+| Mes projets | **Crate / Skeuds** |
+| Téléchargez mon CV | **Dubplate `.pdf`** |
+| Expérience pro | **Setlist** / **Warehouse log** |
+| Formations | **Learning stack** / **BPM log** |
+| Compétences | **Rack** / **Patch bay** |
+| Centres d'intérêt | **Off-decks** |
+| Contact | **Open mic** / **Frequencies** |
+| Chargement | `BOOTING SOUND SYSTEM…` |
+| 404 | `SIGNAL LOST` / `NO SKEUD FOUND` |
+| Dispo pour boulot | `ON AIR` (LED verte clignotante) |
+
+Tu gardes le style "code + tekno" : classes `.mono`, tags `[BPM:174]`, `>> mix`, `//` partout.
+
+---
+
+## 2. Palette ajustée (acid free party)
+
+On garde le cyberpunk mais on pousse **l'acid** et on ajoute du **jaune strobe** pour l'énergie rave.
+
+```
+bg:          #0A0A0F     (noir warehouse)
+surface:     #111118
+accent_cyan: #00F0FF     (UV light principal)
+accent_acid: #C6FF00     (⭐ NOUVEAU — jaune acid strobe pour accents forts)
+accent_pink: #FF2A6D     (magenta dubplate)
+accent_red:  #FF0040     (⭐ NOUVEAU — rouge LED clip)
+texte:       #E0E0FF
+mute:        #8A8FA8
+```
+
+**Usages :**
+- cyan = base UI (nav, borders)
+- acid yellow = **CTA principal + "ON AIR"** (très rave flyer)
+- pink/magenta = accents secondaires
+- rouge LED = warnings, statut live, status en cours
+- violet/ice → on réduit l'usage
+
+---
+
+## 3. Typographies
+
+On pousse plus loin le contraste entre mono tech et display brut :
+
+| Usage | Font | Pourquoi |
+|---|---|---|
+| Display / titres | **Space Grotesk** (gardé) | Sharp, tech, se tient |
+| Body | **Inter** (gardé) | Lisible |
+| Mono | **JetBrains Mono** (gardé) | Code |
+| ⭐ Accent "rave" | **Array** ou **Neue Haas Grotesk Display Black** | Stencil bâton, façon flyer free party / affiche underground |
+| ⭐ Étiquettes stickées | **Monument Extended** ou équivalent | Giga bold pour les dates, BPM, codes |
+
+Suggestion alternative open source sur Google Fonts : **Bebas Neue** (stencil), **Anton** (poster), **Oswald** (condensé).
+
+---
+
+## 4. Éléments communs à tout le site
+
+### 4.1 Header / nav = **console sound system**
+
+- En haut, fine barre noire avec :
+  - **Logo** : "JL" stylisé rave (stencil) avec **LED verte qui clignote** à côté = "ON AIR"
+  - **Nav** : les items `/crate`, `/setlist`, `/bpm-log`, `/open-mic` (ou versions FR : `/skeuds`, `/setlist`, `/formations`, `/contact`)
+  - **Scroll progress bar** fine en néon cyan en bas du header (indique où on en est)
+- Au clic d'un item → **LED s'allume**, petit son *clic* de fader (togglable, off par défaut)
+
+### 4.2 Background ambient
+
+Derrière tout le site, couches superposées très subtiles :
+1. **Gradient noir → surface** de base
+2. **Grain / noise** fin (bruit vidéo warehouse)
+3. **2-3 spots UV** (radial cyan + magenta) qui se **déplacent lentement** selon le scroll (fake parallax light)
+4. **Optional :** **strobe flash** très bref (20ms, opacité 10%) toutes les 30-60s pour la vibe rave. **Respecte `prefers-reduced-motion`**
+
+### 4.3 Transition entre pages = **crossfade EQ**
+
+Quand tu cliques sur un lien de nav :
+1. L'écran actuel reçoit un **léger blur + fade out** (simule un low-pass EQ qui ferme)
+2. Le nouveau page **slide in** avec son contenu qui reveal (fade in + text split)
+3. Durée totale : ~600ms
+4. Réalisation : **Astro View Transitions API** (native)
+
+### 4.4 Scroll smooth = Lenis (déjà fait)
+
+### 4.5 Curseur
+
+- Curseur natif conservé
+- **Sur les liens/boutons** : petit halo néon cyan/acid qui apparaît (au lieu d'un curseur custom qui dérange)
+- **Boutons magnétiques** : le bouton se déplace légèrement vers le curseur à l'approche (spring physics, comme Vercel / Rauno)
+
+### 4.6 Text reveals
+
+- Tous les gros titres : **char-by-char reveal** avec effet blur → clear (Framer Motion SplitText)
+- Sous-titres : **word-by-word** fade-up
+- Trigger : `whileInView`
+
+---
+
+## 5. Page /  (Home)
+
+### 5.1 Hero
+
+**Couche 1 (background fixe)** :
+- Gradient mesh animé noir → charbon
+- 3 spots UV lents
+- **Ligne de waveform audio** centrée en bas du hero, qui pulse doucement (fake audio reactive avec math `sin`). Couleur cyan/acid, épaisseur fine.
+
+**Couche 2 (texte)** :
+- `> frequency: 174 BPM` (petit mono cyan tout en haut, stylé tag radio)
+- **Titre** : `Johan Leroy` en **ultra large**, style poster free party. Le "Leroy" en **acid yellow** avec glow (au lieu de magenta). Effet **char-by-char reveal** au load.
+- Sous-titre : `[ ` + **mot qui morph `dev → DJ → skeud-head → dev`** + ` ]` dans des brackets mono
+- **Tagline acid** : _"code propre, sono sale"_ en italique mono
+- **CTA principal** en **jaune acid** néon : `// grab the dubplate (cv.pdf)`
+- **CTA ghost** : `>> browse the crate`
+
+**Couche 3 (stickers / details) :**
+- En haut à droite, petit **badge "ON AIR"** avec LED verte (animée)
+- En bas à gauche, petit tag style flyer `NANTES FR · 2019→now`
+- Stickers collés style "free party sticker pack" éparpillés (logos fictifs en SVG) — très légers, opacité 20%
+
+### 5.2 Section Stack = **Sound system rack**
+
+**Métaphore : un rack de studio / sono.** Un panneau sombre façon plaque acier brossé, avec **modules empilés** verticalement (comme des modules Eurorack).
+
+Chaque module = une catégorie :
+- En haut du module : **label LED** (LANGUAGES, FRAMEWORKS, DATABASES…)
+- **VU meter vertical** à gauche qui bouge doucement (fake)
+- **Pads / knobs** : chaque techno = un carré avec son icône + label, stylé "bouton pressoir"
+- Au hover du pad → **pad s'enfonce** légèrement, LED cyan s'allume, **tooltip** apparaît `[ MASTERED ]` ou `[ KNOWS ]`
+- **Indicateur BPM fictif** en haut à droite du rack : `BPM 174 · HARDTEK`
+
+**Deux racks empilés :** primary (plus gros) et secondary (plus compact).
+
+Effet paillette : le rack a une **jauge power** qui s'allume au scroll reveal.
+
+### 5.3 Section Off-decks (centres d'intérêt)
+
+Cards format **bande magnétique / cassette tape** :
+- Chaque card = une mini-cassette stylisée avec étiquette
+- Icône au centre, label en dessous façon marker
+- Au hover : la bande **tourne** légèrement (CSS transform rotateY)
+
+### 5.4 Footer
+
+- Séparateur = **forme d'onde audio**
+- 3 colonnes : Nav, Open mic (contact), Credits
+- En bas, sticker collé `"// code propre, sono sale — JL 2026"` + **icônes sound system** (enceinte, platine, casque) en SVG
+
+---
+
+## 6. Page /projets = **Crate / skeuds**
+
+**Métaphore : un bac à disques.** Les projets sont des **skeuds (records 12")** qu'on feuillette.
+
+### 6.1 Layout
+
+- **Horizontal pinned scroll** (GSAP ScrollTrigger) : quand tu scrolles verticalement, les skeuds **défilent horizontalement** comme si tu feuilletais un bac
+- Chaque skeud = une **pochette vinyle** carrée, grand format (300-400px)
+
+### 6.2 Skeud / card projet
+
+- **Face A** par défaut visible :
+  - Image projet en center crop
+  - Cercle noir de vinyle qui **dépasse** à droite (comme un disque qui sort de sa pochette)
+  - Étiquette centrale du vinyle (label fictif) avec nom du projet
+  - Stickers overlay :
+    - `[LIVE]` en acid yellow si actif
+    - `[ARCHIVED]` en gris si fermé
+    - `[DUBPLATE]` si privé
+    - BPM fictif `[180 BPM]`
+- Au hover :
+  - Le disque **sort complètement** de la pochette (translation X)
+  - Le disque **tourne** sur son axe (33⅓ rpm fake, lent)
+  - La pochette s'incline légèrement (3D tilt)
+  - Overlay apparaît avec stack + lien "play"
+- Au clic :
+  - Transition fluide vers site externe, ou vers page détail
+
+### 6.3 Détails graphiques
+
+- Le bac a une texture **bois / plastique** (SVG pattern)
+- **Numéro d'ordre** en gros chiffres stencil derrière chaque card `#01`, `#02`
+- Filtres en haut : `[ ALL ]` `[ LIVE ]` `[ ARCHIVED ]` en petits pads
+- **Compteur** en bas : `05 / 06 skeuds`
+
+---
+
+## 7. Page /experience = **Setlist**
+
+**Métaphore : la tracklist d'un set DJ.** Chaque job = une track dans le set, avec durée, BPM, style.
+
+### 7.1 Layout : tracklist verticale stylisée
+
+Header de la page :
+```
+> setlist.current = "10_years_of_code"
+> duration: 10y 0m 0d
+> tracks: 6
+> status: ON AIR
+```
+
+Ensuite, liste verticale où chaque expérience est **une ligne de tracklist** :
+
+```
+01  [NOW PLAYING]     Almeria          ████████████ Dev fullstack · 3y · [174 BPM]
+02                    CEREMA           ████░░░░░░░░ Technicien · 2y · [160 BPM]
+03                    SNCF Réseau      ████░░░░░░░░ Télécom    · 2y · [140 BPM]
+04  [INTRO]           Novoferm         █░░░░░░░░░░░ Stage      · 7w · [120 BPM]
+...
+```
+
+Au clic/hover d'une ligne → elle **s'expand** comme un accordéon, révèle missions + stack. Animation : expansion + le "BPM" pulse.
+
+### 7.2 Détails
+
+- Police mono partout dans la liste
+- Ligne "NOW PLAYING" avec **fond jaune acid subtil** et **LED rouge clignotante**
+- Progress bars = **waveforms** ASCII stylisées
+- **Timeline header** : ligne horizontale avec années `2018 — 2026`
+
+### 7.3 Après la tracklist, 2 blocs :
+
+- **Patch bay** = compétences techniques (pattern rack, avec câbles SVG animés qui relient les modules) — visuellement unique
+- **Soft skills** = liste simple en mono
+
+---
+
+## 8. Page /formations = **BPM Log**
+
+**Métaphore : un journal de bord de crate-digging.** Tu as appris comme un DJ apprend — tu creuses, tu collectionnes, tu stockes.
+
+### 8.1 Layout
+
+Timeline verticale simple mais **affichage type carte d'entrée de rave** :
+
+Chaque formation = une "carte" façon **entrance ticket** :
+- Fond carte papier beige/gris (distinct des autres sections, ambiance "ticket froissé")
+- En-tête : `FREE PARTY INVITATION — EDU SYSTEM`
+- Date / lieu : `2023 — NANTES — CAMPUS ENI`
+- Titre : `CONCEPTEUR DEV. D'APPLICATIONS`
+- Description
+- Footer sticker : `ADMIT ONE`
+- Card **rotationnée légèrement** (tilt 2-3°) pour l'effet "jeté"
+
+Au scroll, les tickets **glissent** depuis les côtés avec une légère rotation.
+
+---
+
+## 9. Page 404 = **SIGNAL LOST**
+
+- Fond noir profond, scanlines CRT visibles
+- Gros texte central : `SIGNAL LOST` + glitch chromatic aberration
+- Sous-texte mono : `frequency not found — rejoin the main feed`
+- CTA acid : `[<<] back to the sound system`
+- En fond, petit **static noise** animé (SVG avec noise turbulence)
+
+---
+
+## 10. Micro-détails / easter eggs
+
+- **Konami code** (↑↑↓↓←→←→BA) → active le **party mode** : strobe 1s + glitch généralisé + un émoji skeud qui traverse l'écran
+- **Clic logo 5x** → affiche un **DJ set secret** (player audio caché, ton son si tu veux)
+- **Boot sequence** au premier load : brève overlay `BOOTING SOUND SYSTEM… [OK]` avant de révéler le hero
+- **Hover sur un lien** : léger *tick* (clic platine, togglable)
+
+---
+
+## 11. Plan d'implémentation ordonné
+
+1. **Design system v2** — ajouter palette acid (`--color-acid: #C6FF00`, `--color-red: #FF0040`), ajouter font stencil (Anton ou Bebas Neue)
+2. **View Transitions** activer côté Astro + transitions personnalisées entre pages
+3. **Header skinné** — LED ON AIR, scroll progress bar, logo stencil
+4. **Hero v2** — waveform SVG animée, text reveal char-by-char, tagline, stickers
+5. **Sound system rack** (nouvelle UI skills) — remplace la grille actuelle
+6. **Magnetic buttons + text reveals** — utilitaires globaux
+7. **Crate / skeuds** (nouvelle UI projets) — horizontal pinned scroll, vinyle qui sort
+8. **Setlist** (nouvelle UI experience) — tracklist, now playing, accordéons
+9. **Patch bay** (nouveau bloc expérience) — rack + câbles SVG animés
+10. **BPM log** (nouvelle UI formations) — tickets rave tiltés
+11. **Footer skinné** — forme d'onde, stickers
+12. **404 signal lost**
+13. **Micro-interactions** — sons togglables, Konami, boot sequence
+14. **Reduced motion** — vérifier tout se dégrade bien
+15. **Perf** — audit Lighthouse
+
+**Effort total :** 4-5 jours de dev concentré. Livrable par blocs testables.
+
+---
+
+## 12. Risques & arbitrages
+
+- **Risque kitsch :** si on en met trop, ça devient caricatural. Ligne de crête : **1 gimmick fort par section max**, le reste sobre.
+- **Risque perf :** shader + vinyles 3D + scroll pinned = lourd. On reste sur du CSS/SVG/Canvas 2D léger, pas de WebGL sauf si nécessaire.
+- **Risque recruteur :** certains vieux recruteurs ne comprendront pas la métaphore. Contre-mesure : **vocabulaire bilingue** (techos + jargon), CV toujours accessible en 1 clic.
+- **Risque audio :** si on ajoute vraiment des sons, **off par défaut**, toggle visible. Jamais auto-play.
+
+---
+
+## 13. Avant le GO : questions pour toi
+
+1. **Acid yellow `#C6FF00`** comme accent principal CTA, tu valides ? (tu peux aussi choisir `#D6FF00` plus doux)
+2. **Font stencil** : Bebas Neue (gratuite, moderne) / Anton / Array (payante mais ultime) ?
+3. **Sons** : on les implémente dès le début (togglables, off) ou on les laisse pour plus tard ?
+4. **Boot sequence** au premier load : oui ou cringe ?
+5. **Vocabulaire** : on garde bilingue (FR grand public + jargon en sous-texte), ou full jargon free party ?
+6. **Horizontal pinned scroll** pour les projets : oui (plus wow, mais mobile = fallback grid) / non (grid partout) ?
+7. Tu veux **rester sur cette doc** comme référence pendant l'implémentation ou tu veux qu'on épure avant ?
+
+---
+
+Dis-moi tes choix + "GO" et je commence à skinner, par étapes (je te montre après chaque bloc).
+
+---
+
+## 14. Décisions validées ✅
+
+| # | Question | Réponse validée |
+|---|---|---|
+| 1 | Acid yellow `#C6FF00` en accent principal | ✅ Validé |
+| 2 | Font stencil | ✅ **Bebas Neue** (Google Fonts, gratuite, moderne) |
+| 3 | Sons (clic fader, tick platine) togglables off par défaut | ✅ Intégrés dès le début, **OFF par défaut**, toggle visible |
+| 4 | Boot sequence au premier load | ✅ **On tente** — ajustable si cringe après retour |
+| 5 | Vocabulaire | ✅ **FR grand public** — **rester pro**. Nav et URLs standards (`/projets`, `/formations`, `/experience`). Les skins free party **dressent** le site en accents déco (sous-titres mono `// crate v1.0`, stickers, BPM fictifs, `[NOW PLAYING]`, etc.) sans bloquer le recruteur |
+| 6 | Horizontal pinned scroll projets | ✅ **OUI** — avec **fallback grid verticale sur mobile** (breakpoint `< md`) |
+| 7 | Doc de référence | ✅ On la garde en référence |
+
+### Ligne éditoriale affinée
+
+- **Structure UX** = pro et accessible (nav FR, URLs lisibles, CTA clairs)
+- **Habillage** = free party / studio (palette acid, stencil, stickers, BPM, waveforms, vinyles)
+- **Sons** = **toggle** visible dans le header (icône speaker), off à l'arrivée
+- **Boot sequence** = rapide (1.2s max), skippable en cliquant, n'apparaît **qu'au premier load** (stocké en `sessionStorage`), plus jamais en retour de page
+- **Mobile** = fallback propre pour chaque wow-feature :
+  - Horizontal pinned scroll → grid verticale
+  - Magnetic buttons → classic hover
+  - Cursor halos → désactivés
+  - Spots UV parallax → statiques
+
+### Plan d'exécution — ordre de livraison
+
+| Bloc | Livrables | Effort |
+|---|---|---|
+| **0. Design system v2** | Palette acid (`--color-acid`, `--color-red`) + Bebas Neue chargée + utilities `glow-acid`, `stencil`, `sticker` | 0.5j |
+| **1. View Transitions + transitions de page** | Crossfade EQ global entre pages | 0.25j |
+| **2. Header v2** | Logo stencil "JL" + LED ON AIR + scroll progress bar + toggle sons | 0.5j |
+| **3. Background ambient** | Gradient mesh + grain + 2 spots UV suivant le scroll | 0.5j |
+| **4. Hero v2 + boot sequence** | Waveform, text reveal, tagline, stickers, CTA acid + boot 1re visite | 1j |
+| **5. Sound system rack (skills)** | Remplace les grilles SkillCard actuelles | 1j |
+| **6. Magnetic buttons + text reveals globaux** | Utilitaires réutilisables | 0.5j |
+| **7. Crate (projets)** | Pinned horizontal scroll + skeuds qui sortent + fallback grid mobile | 1j |
+| **8. Setlist (expérience)** | Tracklist, NOW PLAYING, accordéons, BPM | 1j |
+| **9. Patch bay (compétences pro)** | Rack + câbles SVG animés | 0.5j |
+| **10. BPM log (formations)** | Tickets rave tiltés | 0.5j |
+| **11. Footer skinné + 404 Signal Lost** | Waveform séparateur, stickers, page 404 | 0.5j |
+| **12. Easter eggs** | Konami, 5× logo, sons | 0.25j |
+| **13. Audit perf + reduced motion** | Lighthouse, a11y | 0.5j |
+
+**Total :** ~8 jours de dev concentré, livrables testables bloc par bloc.
+
+---
+
+## 15. GO ✅ — implémentation démarre au bloc 0