# 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
