# 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