first commit

docs/01-analyse-et-plan.md

@@ -0,0 +1,513 @@
+# Portfolio v2 — Analyse & plan d'action
+
+**Projet source :** `/home/johan/WebstormProjects/Portfolio_angular`
+**URL live :** https://johanleroy.fr
+**Date :** 20 avril 2026
+
+---
+
+## 1. Analyse de l'existant
+
+### Stack actuelle
+
+| Élément | Valeur |
+|---|---|
+| Framework | Angular 19.2 |
+| Styling | TailwindCSS 4 |
+| State / Data | Aucun (tout en dur dans les templates) |
+| Animations | Particules vanilla JS maison (`home.component.ts`) |
+| Icônes | PNG dans `/public/img/icon/` (pas de SVG, pas HiDPI) |
+| Icônes UI | Classes FontAwesome (`fa-gamepad`, `fa-film`) **sans lib chargée → cassées** |
+| Dark mode | Toggle manuel via `localStorage` |
+| SEO | Service custom `seo.service.ts` (title, description, OG, canonical) |
+| Router | Lazy-load `PublicModule`, view transitions activées |
+| Hébergement | Statique (`.htaccess` Apache dans `/public/`) |
+| Tests | Karma/Jasmine (0 test écrit) |
+
+### Structure
+
+```
+src/app/
+├── _models/        particule.ts, seo.ts
+├── _services/      seo.service.ts
+└── public/
+    ├── public-layout/           header + dark toggle + nav
+    ├── public-routing.module.ts
+    ├── public.module.ts
+    └── pages/
+        ├── home/          (448 lignes HTML — accueil + skills + centres d'intérêt)
+        ├── formations/    (169 lignes)
+        ├── experience/    (417 lignes — 6 entreprises Actemium, SNCF, Cerema, Novoferm, PivotPoint, Almeria)
+        ├── projets/       (104 lignes — 3 projets MonVoisinGeek, Techos, LPLV)
+        └── not-found/
+```
+
+### Palette actuelle (`src/styles.css`)
+
+```css
+--color-primary-dark:   #181818
+--color-primary-blue:   #0A2463
+--color-primary-light:  #3E92CC
+--color-primary-white:  #FFFAFF
+--color-primary-accent: #D8315B
+```
+
+### Problèmes identifiés
+
+1. **Stack disproportionnée** — Angular + Zone.js pour un portfolio statique = bundle lourd (warning 500 kB dans `angular.json`), overkill pour du contenu vitrine.
+2. **Décalage avec ta stack actuelle** — tu bosses maintenant sur Next.js/Nuxt/NestJS, Angular n'est plus dans aucun de tes projets en mémoire.
+3. **Contenu 100 % hardcodé dans les templates** — chaque modif de texte, techno, projet ou date d'expérience impose de recompiler + redéployer.
+4. **Animations minimalistes** — juste des particules en `requestAnimationFrame`, pas d'effets wow (scroll reveal, parallax, 3D, text morphing, cursors custom…).
+5. **Icônes PNG** — flou sur écrans HiDPI, poids réseau élevé, pas de teinte dynamique possible.
+6. **FontAwesome référencé mais jamais chargé** → les 4 icônes des centres d'intérêt sont invisibles.
+7. **Tests inexistants** malgré la config Karma — bruit dans `package.json`.
+8. **Pas de PWA** (manifest.json, service worker) alors que c'est trivial sur du statique.
+
+### Ce qui marche bien et à conserver
+
+- La structure de navigation (Accueil / Formations / Expérience / Projets).
+- La palette existante (tu peux la reprendre ou l'enrichir).
+- Le `SeoService` et ses meta tags dynamiques.
+- Dark mode par défaut selon préférence système.
+- Export statique déployé sur Plesk via Apache.
+- Le CV PDF téléchargeable.
+
+---
+
+## 2. Choix techno recommandé
+
+### Option A — **Astro 5 + React islands** ⭐ recommandé
+
+**Pourquoi :**
+- 0 JS par défaut → Lighthouse 100 presque gratuit.
+- Islands pattern : tu charges React + Framer Motion uniquement sur les sections animées.
+- Content Collections typées (Zod) → ton JSON devient un contrat validé au build.
+- SSG pur, déploiement Plesk identique à l'actuel (export statique).
+- Supporte nativement les endpoints SSR si tu veux un mini-admin.
+
+**Stack complète :**
+- Astro 5 (router fichiers, layouts)
+- React 19 (îlots interactifs)
+- TailwindCSS 4 (continuité palette)
+- Framer Motion (micro-interactions déclaratives)
+- GSAP + ScrollTrigger (timelines paillettes)
+- Lenis (smooth scroll)
+- @react-three/fiber + @react-three/drei (effets 3D type scène accueil)
+- Lucide React (icônes UI) + Simple Icons via iconify (logos techno vectoriels)
+- TypeScript strict
+
+### Option B — **Next.js 15 + App Router**
+
+Pertinent si tu veux un vrai mini-back-office plus tard (auth JWT, API routes, ISR). Plus lourd qu'Astro pour un simple portfolio.
+
+### Option C — **Nuxt 4**
+
+Si tu préfères rester côté Vue. Excellent mais tu connais déjà Vue 3 (Amarea, TrackSniff), donc pas de challenge.
+
+### Recommandation
+
+**Astro 5** — le meilleur rapport puissance/légèreté pour un portfolio. Tu ajoutes Next.js à ton CV avec Techos, Astro te donne un 3e framework frontend moderne à afficher, et tu gagnes une killer app de perf.
+
+---
+
+## 3. Système de contenu éditable sans rebuild
+
+### Architecture proposée
+
+```
+public/
+├── content/
+│   ├── profile.json       (nom, titre, accroche, photo, CV)
+│   ├── skills.json        (catégories + items avec niveau, logo iconify)
+│   ├── experiences.json   (tableau d'expériences pro)
+│   ├── formations.json    (tableau de formations)
+│   ├── projects.json      (tableau de projets + images + liens)
+│   ├── interests.json     (centres d'intérêt)
+│   └── site.json          (meta SEO, couleurs, switches features)
+└── img/                   (assets éditables)
+```
+
+### Principe
+
+- Les fichiers JSON sont servis **en statique** par ton Plesk (pas dans le bundle).
+- Côté client, un `ContentService` fait un `fetch('/content/profile.json')` au mount.
+- Les composants React affichent les données via Suspense.
+- **Modif en production = éditer le JSON sur le serveur → rechargement navigateur = MAJ immédiate. Zéro rebuild.**
+
+### Schémas typés (Zod)
+
+Les mêmes schémas servent :
+- au build (validation SSG des données si tu veux injecter au build)
+- au runtime (parsing des JSON fetchés)
+- à l'admin (génération de formulaires)
+
+Exemple `content/profile.json` :
+```json
+{
+  "name": "Johan Leroy",
+  "title": "Développeur Fullstack",
+  "tagline": "Dev le jour, DJ la nuit",
+  "hero": {
+    "photo": "/img/pp/pp3.png",
+    "cta": [
+      { "label": "Télécharger mon CV", "href": "/assets/cv.pdf" },
+      { "label": "Voir mes projets", "href": "/projets" }
+    ]
+  },
+  "socials": {
+    "email": "leroyjohan3@gmail.com",
+    "github": "https://github.com/JohanLeroy",
+    "gitea": "https://git.lidge.fr/johanleroy",
+    "website": "https://johanleroy.fr"
+  }
+}
+```
+
+### 3 niveaux d'édition (à choisir)
+
+| Niveau | Outil | Usage |
+|---|---|---|
+| **1. Terminal / SFTP** | FTP Plesk + éditeur texte | MAJ rapide, zéro surcouche. Le plus simple. |
+| **2. Mini-admin web** | `/admin` protégé par mot de passe (cookie httpOnly côté endpoint Astro SSR) | Formulaire qui édite `content/*.json` en live sur le serveur |
+| **3. Gitea as CMS** | Un repo `johan-portfolio-content` dédié. L'admin web pousse via l'API Gitea. | Historisation automatique, rollback possible, build-free par cron `git pull` côté Plesk. |
+
+**Reco pour toi :** niveau 2 ou 3. Le niveau 3 est le plus élégant car tu gardes un vrai git history sans polluer le repo code.
+
+### Ce que l'admin web permettrait
+
+- Édition inline du profil (nom, titre, bio)
+- Ajout/édition/suppression de projets (drag-drop pour réordonner)
+- Ajout d'une expérience pro
+- Changement du thème de couleur (live preview)
+- Toggle du mode "embauche disponible" (badge vert sur le site)
+- Upload de nouvelles images (vers `/public/img/` via endpoint SSR)
+- Export / import du JSON (backup)
+
+---
+
+## 4. UX "paillettes dans les yeux" — direction créative
+
+### Accueil
+
+- **Hero 3D** avec @react-three/fiber : scène minimaliste type "disco ball" qui tourne lentement, sensible au mouvement de souris (parallax). Nod subtil à ton univers DJ.
+- **Texte morphing** (GSAP SplitText) — "Dev" se transforme en "DJ" puis en "Dev" en boucle lente.
+- **Curseur custom** qui suit la souris avec un léger lag, change de forme sur les liens.
+- **Gradient animé** en arrière-plan type aurore boréale (shader ou CSS `conic-gradient` animé).
+
+### Scroll
+
+- **Lenis smooth scroll** partout.
+- **Scroll-triggered animations** : sections qui révèlent leur contenu en cascade (fade + translate-y + blur-out).
+- **Pin + horizontal scroll** sur la section Projets (GSAP ScrollTrigger, type showcase Awwwards).
+- **Progress bar** en haut de page.
+
+### Section skills
+
+- Cards avec effet **hover 3D tilt** (vanilla-tilt ou React équivalent).
+- Icônes SVG des technos avec **glow au survol**.
+- Compteur de maîtrise animé (ring progress) au scroll.
+
+### Timeline expérience
+
+- Layout type **métro parisien** (une ligne verticale animée, stations = expériences).
+- Cards qui s'ouvrent en accordéon au scroll.
+
+### Projets
+
+- Carousel horizontal pinned avec images **zoom parallax**.
+- Badge techno avec micro-logos simple-icons colorés.
+- Hover : overlay gradient + CTA "voir projet".
+
+### Detail bonus
+
+- **Mode "party"** (easter egg) : un bouton discret qui active un strobe + particles + glitch texts → clin d'œil DJ.
+- **Konami code** → affiche ton set DJ en fond sonore discret.
+- **Switch 3 thèmes** : Day, Night, Neon (le mode neon = pleine paillettes).
+
+---
+
+## 5. Plan d'exécution
+
+### Phase 0 — Prérequis (décision utilisateur)
+
+- [ ] Valider le choix Astro vs Next.js vs Nuxt.
+- [ ] Valider le niveau d'édition (SFTP / admin web / Gitea).
+- [ ] Choisir nom de projet (`portfolio-v2`, `johanleroy-fr`, `portfolio-astro`, …).
+- [ ] Palette : garder l'actuelle ou refaire ? (je peux proposer 3 palettes).
+
+### Phase 1 — Bootstrap (1 jour)
+
+- Scaffold Astro + TS strict + Tailwind 4 + React integration.
+- Setup ESLint + Prettier + configs héritées de Techos (cohérence).
+- Créer les 6 schémas Zod + JSON de contenu initial (repris du site actuel).
+- Layout global + router fichier (`/`, `/formations`, `/experience`, `/projets`).
+- Migrer `SeoService` vers un composant `<SEO>` Astro.
+
+### Phase 2 — Contenu & structure (1–2 jours)
+
+- Extraire tout le contenu des templates actuels vers les JSON.
+- Migrer les PNG d'icônes → Iconify (Simple Icons + Lucide).
+- Migrer les images projets/entreprises (optimisation avec `astro:assets`).
+- Pages statiques sans animations pour valider la structure.
+
+### Phase 3 — Animations & paillettes (2–3 jours)
+
+- Intégration Lenis + configuration smooth scroll globale.
+- Installation Framer Motion + GSAP + ScrollTrigger.
+- Hero 3D @react-three/fiber.
+- Scroll-triggered reveals sur chaque section.
+- Curseur custom + cards 3D tilt + timeline métro.
+- Carousel projets pinned horizontal.
+- Thèmes Day / Night / Neon.
+
+### Phase 4 — Admin d'édition (1–2 jours, optionnel selon niveau choisi)
+
+- Endpoint Astro SSR `/api/content/:file` (GET/PUT).
+- Protection par mot de passe + cookie httpOnly.
+- Page `/admin` : formulaires dynamiques générés depuis les schémas Zod.
+- Upload d'images.
+- Export / import JSON.
+- (Variante Gitea) : intégration Gitea API pour push auto.
+
+### Phase 5 — Polish & deploy (1 jour)
+
+- PWA (manifest + service worker).
+- Audit Lighthouse (objectif 100/100/100/100).
+- Sitemap auto + robots.txt.
+- Meta tags Open Graph + Twitter Cards.
+- Build production.
+- Déploiement Plesk (remplacement `/dist` existant).
+- Redirections 301 si URLs changent.
+
+### Phase 6 — Extras plus tard
+
+- Blog MDX (écriture d'articles techniques).
+- Page contact avec vrai formulaire (via endpoint SSR ou Formspree).
+- Section "Now" (what I'm up to, mis à jour mensuel).
+- Stats GitHub/Gitea live (commits, streaks).
+- Page `/jeux` ou `/bacs` pour expériences DJ.
+
+---
+
+## 6. Estimation totale
+
+| Phase | Charge |
+|---|---|
+| 0 — Décisions | 30 min |
+| 1 — Bootstrap | 1 jour |
+| 2 — Contenu & structure | 1–2 jours |
+| 3 — Animations | 2–3 jours |
+| 4 — Admin (optionnel) | 1–2 jours |
+| 5 — Polish & deploy | 1 jour |
+| **Total sans admin** | **5–7 jours** |
+| **Total avec admin** | **6–9 jours** |
+
+---
+
+## 7. Questions initiales — réponses validées ✅
+
+| # | Question | Réponse |
+|---|---|---|
+| 1 | Framework | ✅ **Astro 5** |
+| 2 | Système d'édition | ✅ **Admin web** (option 2) |
+| 3 | Palette / identité | ✅ **Refonte DEV/DJ/Neon** |
+| 4 | Hébergement | ✅ **Plesk** (stay put) — ISR à creuser selon contraintes |
+| 5 | Niveau "paillettes" | ✅ **Wow mais pro** (pas d'effets dans tous les sens) |
+| 6 | Contenu à rafraîchir | ✅ **Ajouter projets récents** (sauf Beehelp = pro/NDA) |
+| 7 | Nom du repo | ✅ `portfolio` |
+
+---
+
+## 8. Setup technique dérivé des choix
+
+| Élément | Valeur |
+|---|---|
+| Mode Astro | **Hybrid** — SSG pour pages publiques, SSR pour `/admin` et `/api` |
+| Déploiement | **Plesk Node.js hosting** (même pattern que `techos_api`) |
+| Persistance contenu | `/public/content/*.json` édités par endpoints SSR protégés |
+| Auth admin | Mot de passe + cookie httpOnly (JWT ou session simple) |
+| MAJ contenu en prod | Admin web → PUT JSON → **fetch runtime côté client, zéro rebuild** |
+| ISR — note Plesk | Plesk = serveur Node permanent, on a l'équivalent d'ISR gratuit. Pas d'ISR Next.js-style mais re-fetch JSON runtime = effet identique |
+
+---
+
+## 9. Direction artistique — 3 palettes néon à trancher
+
+### Option A — **Cyberpunk Dark** (blade-runner / tekno industrielle)
+```
+bg:        #0A0A0F (noir profond)
+accent 1:  #00F0FF (cyan électrique)
+accent 2:  #FF2A6D (rose magenta)
+accent 3:  #D1F7FF (blanc bleuté)
+texte:     #E0E0FF
+```
+
+### Option B — **Rave / Miami** (90's, fun, coloré)
+```
+bg:        #0D0221 (violet nuit)
+accent 1:  #FF00C8 (pink néon)
+accent 2:  #00FFC8 (mint laser)
+accent 3:  #FFD600 (jaune flash)
+texte:     #FFF8F0
+```
+
+### Option C — **Tech Minimal + 1 néon** ⭐ reco pro
+```
+bg:         #0B0B0E (charbon)
+surface:    #16161D
+accent:     #39FF14 (vert néon strobe) — UN SEUL pop
+texte:      #EAEAEA
+secondaire: #8A8F98
+```
+
+**Reco :** Option C pour recruteurs (le plus pro), Option A si on assume la vibe DJ.
+
+---
+
+## 10. Liste projets à afficher — proposition
+
+| # | Projet | Statut | Action |
+|---|---|---|---|
+| 1 | **Techos** (asso hébergement) | Live `techos-asso.fr` | ✅ Inclure |
+| 2 | **TrackSniff** | Privé (invitation) | ⚠️ À trancher |
+| 3 | **Amarea Tattoo** | Client (studio tatouage) | ✅ Inclure |
+| 4 | **Lidge** | Perso, auto-hébergé | ✅ Inclure |
+| 5 | **Portfolio v2** (méta) | En cours | ✅ Classique circulaire |
+| 6 | **MonVoisinGeek / LPLV** (anciens) | Live actuellement | ⚠️ Keep or drop ? |
+| ❌ | **Beehelp** | Pro / NDA | ❌ Exclu (validé) |
+
+---
+
+## 11. Questions finales — réponses validées ✅
+
+| # | Question | Réponse |
+|---|---|---|
+| 1 | **Palette** | ✅ **Option A — Cyberpunk Dark** (`#0A0A0F / #00F0FF / #FF2A6D / #D1F7FF / #E0E0FF`) |
+| 2 | TrackSniff affiché ? | ❌ **Non** (privé, on n'affiche pas) |
+| 3 | Portfolio v2 (self-reference) | ❌ **Non** |
+| 4 | MonVoisinGeek / LPLV | ✅ **Garder** — mais marqués **"Projet fermé / archivé"**, infos présentes, liens morts |
+| 5 | Projet supplémentaire | ✅ **Ajouter "Bot Discord KSauce"** |
+| 6 | Nouvelle expérience/formation | — (à compléter au moment de migrer le contenu) |
+
+### Liste finale des projets affichés
+
+| # | Projet | État | Lien |
+|---|---|---|---|
+| 1 | **Techos** | Live | techos-asso.fr |
+| 2 | **Amarea Tattoo** | Live | (à confirmer) |
+| 3 | **Lidge** | Live perso | (à confirmer) |
+| 4 | **Bot Discord KSauce** | (à préciser) | — |
+| 5 | **MonVoisinGeek** | 🔒 Archivé | — |
+| 6 | **LPLV** | 🔒 Archivé | — |
+
+---
+
+## 12. Plan d'implémentation détaillé — GO
+
+**Répertoire cible :** `/home/johan/WebstormProjects/portfolio` (nouveau, à côté de l'ancien `Portfolio_angular`)
+
+### Étape 1 — Bootstrap Astro hybrid ⬜
+
+- [ ] `npm create astro@latest portfolio` (template `minimal`, TS strict)
+- [ ] Installer intégrations : `@astrojs/react`, `@astrojs/tailwind`, `@astrojs/node` (adapter SSR)
+- [ ] Configurer `astro.config.mjs` mode `hybrid` + adapter Node standalone (Plesk)
+- [ ] Setup Prettier + ESLint (aligné sur Techos)
+- [ ] `.gitignore`, `.editorconfig`, `README.md`
+
+### Étape 2 — Design system Cyberpunk Dark ⬜
+
+- [ ] `tailwind.config` + CSS custom properties (palette Option A)
+- [ ] Typographies : **heading** = Space Grotesk / **body** = Inter / **mono accent** = JetBrains Mono
+- [ ] Utilitaires `glow-cyan`, `glow-pink`, `neon-border`, `scanlines`, `noise-overlay`
+- [ ] Cursor custom (composant React island)
+- [ ] Dark only (pas de light mode — la vibe cyberpunk ne s'y prête pas)
+
+### Étape 3 — Schémas Zod + contenu JSON ⬜
+
+- [ ] `src/content/schemas/` : `profile.ts`, `skills.ts`, `experiences.ts`, `formations.ts`, `projects.ts`, `interests.ts`, `site.ts`
+- [ ] `public/content/*.json` : contenu extrait des templates Angular actuels + MAJ
+- [ ] `ContentService` (fetch runtime) côté client
+- [ ] Validation Zod au parsing (garde-fou si JSON mal formé)
+
+### Étape 4 — Pages publiques + layout ⬜
+
+- [ ] Layout global : `Header` (nav + logo glitch), `Footer`, `CursorCustom`, `LenisProvider`
+- [ ] `/` — Hero 3D disco-ball (R3F), scroll reveals, skills, centres d'intérêt
+- [ ] `/formations` — Timeline métro verticale
+- [ ] `/experience` — Timeline métro + cards accordéon (6 entreprises)
+- [ ] `/projets` — Carousel pinned horizontal + badges techno Iconify
+- [ ] `/404` — Page glitch 404
+
+### Étape 5 — Animations paillettes ⬜
+
+- [ ] Lenis smooth scroll global
+- [ ] Framer Motion : reveals + micro-interactions
+- [ ] GSAP + ScrollTrigger : timelines pinned
+- [ ] Hero R3F : disco ball parallax souris
+- [ ] SplitText : morphing "Dev / DJ / Dev"
+- [ ] Cards skills : 3D tilt (hover)
+- [ ] Gradient conic animé en bg
+
+### Étape 6 — Admin SSR ⬜
+
+- [ ] `/admin/login` — form password → cookie httpOnly
+- [ ] Middleware `src/middleware.ts` : protection route `/admin/*`
+- [ ] `/admin` — dashboard, liste des sections éditables
+- [ ] `/admin/edit/[section]` — formulaires générés depuis Zod schemas
+- [ ] `/api/content/[section]` — GET/PUT (lecture + écriture JSON serveur)
+- [ ] `/api/upload` — upload images vers `public/img/`
+- [ ] `/api/export` + `/api/import` — backup/restore JSON
+
+### Étape 7 — SEO + PWA + déploiement ⬜
+
+- [ ] Composant `<SEO />` (title, description, OG, canonical, Twitter)
+- [ ] `sitemap.xml` auto
+- [ ] `manifest.json` + service worker (PWA)
+- [ ] Redirections 301 depuis anciennes URLs si nécessaire
+- [ ] Build prod + test local
+- [ ] Script déploiement Plesk Node (équivalent Techos API)
+- [ ] Remplacement sur `johanleroy.fr`
+
+### Étape 8 — Post-déploiement ⬜
+
+- [ ] Audit Lighthouse (objectif 95+)
+- [ ] Test admin web en prod
+- [ ] Rédiger `docs/ADMIN.md` (comment éditer le contenu)
+- [ ] Snapshot initial dans git du contenu actuel
+- [ ] Mettre à jour `CLAUDE.md` du projet
+
+---
+
+**GO ✅** — scaffold démarré.
+
+---
+
+## 13. État d'implémentation (suivi)
+
+| Étape | Status |
+|---|---|
+| 1 — Bootstrap Astro hybrid (React + Tailwind 4 + Node adapter) | ✅ |
+| 2 — Design system Cyberpunk Dark (palette, glow, néon, fonts) | ✅ |
+| 3 — Schémas Zod + JSON contenu extrait | ✅ |
+| 4 — Layout + pages publiques (/, /formations, /experience, /projets, /404) | ✅ |
+| 5 — Animations (Lenis, Framer Motion, R3F hero disco, morph, curseur) | ✅ |
+| 6 — Admin SSR protégé + API CRUD JSON + upload | ✅ |
+| 7 — SEO + build prod + workflow Gitea + README déploiement | ✅ |
+
+### Livrables
+
+- `/home/johan/WebstormProjects/portfolio/` (projet Astro 6 + React 19 + Tailwind 4)
+- Build production OK → `dist/server/entry.mjs` (startup Plesk Node)
+- Dev testé sur **http://localhost:3100**
+- Workflow `.gitea/workflows/deploy.yml` déclenché sur push `main`
+- Contenu projets mis à jour : Techos, Amarea Tattoo, Lidge, Bot Discord KSauce, LPLV (archivé), MonVoisinGeek (archivé)
+
+### Prochaines étapes côté utilisateur
+
+1. `cd ~/WebstormProjects/portfolio && npm run dev` → vérifier sur http://localhost:3100
+2. `npm run hash:password -- monMotDePasse` → copier `ADMIN_PASSWORD_HASH` + `ADMIN_JWT_SECRET` dans un `.env` local
+3. Tester `/admin/login` puis `/admin`
+4. Initialiser git et pousser sur `main` vers Gitea
+5. Configurer les secrets Gitea (`FTP_HOST`, `FTP_USER`, `FTP_PASSWORD`, `FTP_TARGET_DIR`)
+6. Configurer Plesk Node.js : startup file `dist/server/entry.mjs`, variables d'env admin, Node 22
+7. Pousser sur `main` → CI déploie → redémarrer l'app Node dans Plesk

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

docs/README.md

@@ -0,0 +1,32 @@
+# Docs — Portfolio v2
+
+Documents de conception et décisions prises pendant la refonte du portfolio.
+
+## Sommaire
+
+| # | Fichier | Rôle |
+|---|---|---|
+| 01 | [Analyse & plan](./01-analyse-et-plan.md) | Audit de l'ancien site Angular + choix Astro hybrid + système d'édition JSON + stack déploiement Plesk Node.js |
+| 02 | [Moodboard Free Party](./02-moodboard-freeparty.md) | Direction artistique "Studio Live / tekno free party" : palette acid, typos, vocabulaire, déclinaison page par page, plan d'implémentation 14 blocs |
+
+## Choix principaux validés
+
+- **Framework** : Astro 6 hybrid (SSG public + SSR `/admin` et `/api`)
+- **Hébergement** : Plesk Node.js (startup `dist/server/entry.mjs`)
+- **Contenu** : `public/content/*.json` éditables via `/admin`, runtime fetch (zéro rebuild)
+- **Direction artistique** : Cyberpunk Dark + skin Free Party
+  - Palette : `#0A0A0F` / `#00F0FF` cyan / `#C6FF00` acid / `#FF2A6D` magenta / `#FF0040` LED red
+  - Typos : Inter, Space Grotesk, JetBrains Mono, Bebas Neue (stencil)
+- **Animations** : Lenis smooth scroll, Framer Motion, View Transitions API, GSAP scroll-pinned manuel, islands React
+
+## Structure des 14 blocs implémentés
+
+Voir [02-moodboard-freeparty.md §11](./02-moodboard-freeparty.md) pour la liste ordonnée et [14](./02-moodboard-freeparty.md) pour le plan d'exécution détaillé.
+
+## Racines & contraintes
+
+- **Pro avant tout** : nav FR grand public, URLs standards, CV 1 clic
+- **Jargon free party = déco** : stickers, BPM fictifs, LED, stencil — jamais bloquant
+- **Responsive** : fallbacks propres pour chaque effet wow (pinned horizontal, magnetic, UV parallax)
+- **A11y** : respect de `prefers-reduced-motion` partout
+- **Sécurité** : admin JWT cookie httpOnly, middleware protégeant `/admin/*` et `/api/content/*`