johanleroy/portfolio
1
1
Fork 0
Code Actions Activity
Files
88ac8870f4c88f62e922e5c73a0ba2d36ae6eb44
portfolio/docs/02-moodboard-freeparty.md
Johan LEROY 7c7ff160eb first commit
2026-04-21 14:14:03 +02:00

16 KiB
Raw Blame History

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

View Git Blame Copy Permalink