375 lines
16 KiB
Markdown
375 lines
16 KiB
Markdown
# 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
|