Update Doc , Readme and preview

DOCUMENTATION.md

@@ -33,9 +33,12 @@ cv-web-liabeuf/
 ├── cv-data.json            ← Version maître (Directeur Conseil Service)
 ├── cv-data-ux.json         ← Version UX & Digital Manager
 ├── cv-data-dsi.json        ← Version Directeur SI & Transformation Digitale
-├── infrastructure.html   ← Page dédiée à la stack technique du projet
+├── infrastructure.html     ← Page dédiée à la stack technique du projet (GitOps)
+├── ecosystem.html          ← Page dashboard présentant l'écosystème Coolify auto-hébergé
 ├── favicon.svg             ← Favicon SVG initiales SL + dégradé Cornerstone CGI
-├── DOCUMENTATION.md      ← Ce fichier
+├── ecosystem-favicon.svg   ← Favicon dédié pour le dashboard écosystème
+├── DOCUMENTATION.md        ← Ce fichier technique
+├── README.md               ← Guide d'accueil principal du dépôt
 └── .gitignore              ← Exclut .claude/ (dossier de travail Claude Code)
 ```
 
@@ -51,7 +54,7 @@ Le paramètre `?cv=` dans l'URL permet de charger une version différente du CV
 | `cv.stephaneliabeuf.fr?cv=ux` | `cv-data-ux.json` | Recruteurs UX / Digital |
 | `cv.stephaneliabeuf.fr?cv=dsi` | `cv-data-dsi.json` | DSI / Directions SI |
 
-Le paramètre `?cv=` est **transparent** : il n'est pas affiché dans l'interface, seule l'URL change. Il est automatiquement propagé vers la page `infrastructure.html` et conservé lors du retour au CV.
+Le paramètre `?cv=` est **transparent** : il n'est pas affiché dans l'interface, seule l'URL change. Il est automatiquement propagé vers les pages `infrastructure.html` et `ecosystem.html` et conservé lors du retour au CV.
 
 ---
 
@@ -169,10 +172,10 @@ Le **dégradé Cornerstone CGI** (`#E31937 → #A82465 → #5236AB`) est appliqu
 - **Routing JSON par URL** — `?cv=ux` → `cv-data-ux.json`, `?cv=dsi` → `cv-data-dsi.json`, défaut → `cv-data.json`
 - **Propagation du paramètre** — le lien "Voir mon infrastructure" et le bouton "Retour au CV" conservent le `?cv=` actif
 
-### Page Infrastructure
+### Pages Annexes Dynamiques
-- Page `infrastructure.html` décrivant la stack complète : Edition → Forgejo → Coolify → Nginx → HTTPS
+- **Page Infrastructure** (`infrastructure.html`) : Décrit le pipeline GitOps complet (Edition → Forgejo → Coolify → Nginx → HTTPS) avec graphismes de monitoring de flux.
-- Lien retour dynamique vers `index.html?cv={param}` via `URLSearchParams`
+- **Page Écosystème** (`ecosystem.html`) : Tableau de bord de surveillance de l'écosystème Coolify avec la synthèse des 14 ressources actives (2 applications principales, 12 services de collaboration, DevOps, base de données et productivité).
-- Favicon et bouton retour intégrés
+- **Routage Dynamique** : Les boutons de retour de ces pages et les boutons de navigation vers celles-ci propagent dynamiquement le paramètre `?cv={param}` pour préserver le contexte de version choisi par le visiteur.
 
 ---
 

README.md

@@ -0,0 +1,169 @@
+# 💼 CV Web Interactif — Stéphane Liabeuf
+
+> Un CV en ligne professionnel, multi-versions et multi-thèmes, **100 % auto-hébergé** et déployé automatiquement via un workflow GitOps moderne (**Forgejo + Coolify + Nginx**).
+
+---
+
+## 🌟 Points Forts du Projet
+
+- **Performance & Sobriété** : Rendu instantané développé en **HTML5 / CSS3 / JavaScript Vanilla**. Aucun framework lourd, aucun outil de build, aucune dépendance externe au runtime.
+- **Multi-Versions Dynamique** : Moteur de rendu unique piloté par les paramètres d'URL (`?cv=ux` ou `?cv=dsi`) chargeant des structures JSON distinctes.
+- **Multi-Thèmes Persistant** : 4 ambiances visuelles complètes (dont Cyberpunk, CGI ou Professionnel IT) configurables via un menu interactif et persistées dans le `localStorage`.
+- **GitOps & Souveraineté** : Hébergement intégral sur serveur privé, automatisation complète des déploiements via Webhook Coolify lors de chaque commit poussé sur Forgejo.
+- **Dashboard Écosystème** : Intégration d'un tableau de bord de surveillance de l'écosystème d'outils et de services auto-hébergés.
+- **Optimisation SEO & Print** : Métadonnées OpenGraph dynamiques, balisage Schema.org `Person` pour les moteurs de recherche, et feuille de style d'impression optimisée (`window.print()`).
+
+---
+
+## 📂 Architecture des Fichiers
+
+Voici la structure complète et simplifiée des fichiers du dépôt :
+
+```text
+cv-web-liabeuf/
+├── index.html              # Moteur de rendu principal (UI, thèmes, logique JS de routage)
+├── infrastructure.html     # Page visuelle présentant la stack de déploiement GitOps
+├── ecosystem.html          # Page dashboard présentant l'écosystème Coolify auto-hébergé
+├── cv-data.json            # Contenu maître (Version Directeur Conseil Service)
+├── cv-data-ux.json         # Contenu ciblé (Version UX & Digital Manager)
+├── cv-data-dsi.json        # Contenu ciblé (Version Directeur SI & Transformation Digitale)
+├── favicon.svg             # Favicon SVG principal aux initiales SL sur dégradé Cornerstone
+├── ecosystem-favicon.svg   # Favicon dédié à la page Écosystème
+├── DOCUMENTATION.md        # Fiche technique d'architecture et guides pratiques
+├── README.md               # Guide d'accueil du dépôt (ce fichier)
+└── .gitignore              # Configuration Git excluant les répertoires temporaires (.claude/)
+```
+
+---
+
+## 🧭 Routage & Versions du CV
+
+Le fichier unique `index.html` récupère le paramètre d'URL `cv` et charge dynamiquement le fichier JSON correspondant :
+
+| URL | Fichier Source | Profil Cible | Thème par défaut |
+| :--- | :--- | :--- | :--- |
+| `cv.stephaneliabeuf.fr` | `cv-data.json` | **Directeur Conseil Service** (Général) | Thème Professionnel (`itpro`) |
+| `cv.stephaneliabeuf.fr?cv=ux` | `cv-data-ux.json` | **UX & Digital Manager** | Thème Bande Dessinée (`bd`) / Cyberpunk |
+| `cv.stephaneliabeuf.fr?cv=dsi` | `cv-data-dsi.json` | **Directeur SI & Transformation Digitale** | Thème Professionnel (`itpro`) |
+
+> [!TIP]
+> **Propagation Transparente** : Le paramètre `?cv=` actif est propagé automatiquement vers les pages `infrastructure.html` et `ecosystem.html`, permettant à l'utilisateur de retourner au CV d'origine sans perdre sa sélection de profil.
+
+---
+
+## ⚙️ Thèmes Visuels Disponibles
+
+Le menu de navigation latéral (icône menu burger `≡`) permet d'appliquer instantanément les styles suivants :
+
+1. **⚡ Cyberpunk** (`cyberpunk`) : Tons sombres profonds, néons électriques cyan/magenta, police technique *Orbitron* & *Share Tech Mono*.
+2. **💥 Bande Dessinée** (`bd`) : Effet papier vintage, bulles de dialogue, contours noirs épais et ombres portées, police *Comic Neue*.
+3. **💼 IT Professionnel** (`itpro`) : Style épuré, bleu corporate de haute qualité, lisibilité optimale avec la police *Inter*.
+4. **◆ CGI Branding** (`cgi`) : Reprise de la charte officielle de **CGI** avec son dégradé iconique *Cornerstone* (`#E31937` → `#A82465` → `#5236AB`).
+
+---
+
+## 📊 Tableau de Bord de l'Écosystème (`ecosystem.html`)
+
+Cette page propose une vue en temps réel de la stack applicative et des services utilitaires auto-hébergés par Stéphane :
+
+```mermaid
+graph TD
+    Coolify[Orchestration Coolify] --> WebApps[Applications Web]
+    Coolify --> DevOps[Outils DevOps & Code]
+    Coolify --> Collab[Collaboration & Design]
+    Coolify --> Prod[Productivité & Métriques]
+
+    subgraph WebApps [Applications]
+        CV[CV Interactif - cv.stephaneliabeuf.fr]
+        Main[Site Principal - stephaneliabeuf.fr]
+    end
+
+    subgraph DevOps [DevOps & Code]
+        Forgejo[Forgejo + PostgreSQL]
+        Homebox[Homebox]
+        N8N[n8n + Postgres + Worker]
+        Noco[NocoDB]
+    end
+
+    subgraph Collab [Collaboration & Design]
+        Affine[AFFiNE]
+        Excali[Excalidraw]
+        Ghost[Ghost]
+    end
+
+    subgraph Prod [Productivité & Métriques]
+        ITTools[IT-Tools]
+        Mailpit[Mailpit]
+        Umami[Umami Analytics]
+        Archiver[Open-Archiver]
+        Penpot[Penpot]
+    end
+
+    style Coolify fill:#00d8ff,stroke:#03070c,stroke-width:2px,color:#03070c
+    style CV fill:#20ef67,stroke:#fff,color:#000
+    style Main fill:#20ef67,stroke:#fff,color:#000
+```
+
+---
+
+## 🏗️ Architecture du Pipeline GitOps
+
+Chaque commit validé en local est poussé vers Forgejo, qui notifie Coolify par webhook afin de mettre à jour le conteneur Nginx en production :
+
+```mermaid
+sequenceDiagram
+    autonumber
+    actor Dev as Stéphane (Local)
+    participant FG as Forgejo (Serveur Privé)
+    participant CF as Coolify (Orchestrateur)
+    participant NX as Conteneur Nginx (Prod)
+    actor Rec as Recruteur (Client Web)
+
+    Dev->>FG: git push origin main
+    Note over FG: Dépôt privé sécurisé
+    FG-->>CF: Notification Webhook (Push Event)
+    Note over CF: Lancement automatique du Build
+    CF->>NX: Déploiement à chaud (Rolling Update)
+    Note over NX: Fichiers HTML/CSS/JS statiques
+    Rec->>NX: Requête HTTP (https://cv.stephaneliabeuf.fr)
+    NX-->>Rec: Rendu instantané du CV en HTML Vanilla
+```
+
+---
+
+## 🛠️ Maintenance & Guides Pratiques
+
+### 1. Ajouter une nouvelle version de CV
+1. Dupliquez un fichier existant (ex: `cv-data.json`) sous le nom `cv-data-{nouveau}.json`.
+2. Modifiez le contenu textuel et les métadonnées SEO dans ce nouveau fichier JSON.
+3. Dans `index.html`, déclarez le nouveau profil dans le tableau de validation :
+   ```javascript
+   const cvAllowed = ['ux', 'dsi', '{nouveau}'];
+   ```
+4. Commitez et poussez la modification. La version sera accessible à l'adresse : `https://cv.stephaneliabeuf.fr?cv={nouveau}`.
+
+### 2. Ajouter un nouveau thème visuel
+1. Ajoutez un sélecteur d'attribut CSS dans `index.html` :
+   ```css
+   [data-theme="nom-du-theme"] {
+       --primary: #votre-couleur;
+       /* Définition des variables du thème */
+   }
+   ```
+2. Ajoutez un bouton d'activation dans le menu burger de `index.html` :
+   ```html
+   <button class="theme-btn btn-nom-theme" onclick="setTheme('nom-du-theme')">🎨 MON THÈME</button>
+   ```
+3. Déclarez le nouveau thème dans la liste de validation JavaScript de la fonction `setTheme()`.
+
+---
+
+## 🛠️ Fiche Technique des Technologies
+
+- **Frontend** : HTML5, CSS3 (variables natives, Grid, Flexbox, animations), JavaScript Vanilla (ES6+, Intersection Observer, URLSearchParams).
+- **Analytics** : Script respectueux de la vie privée auto-hébergé via **Umami**.
+- **Serveur Web** : Image Nginx légère et sécurisée exécutée sous Docker.
+- **Hébergement** : VPS sécurisé, SSL Let's Encrypt géré de manière automatisée par Coolify.
+
+---
+*Développé avec soin par Stéphane Liabeuf — 2026*

memory/feedback_preview_before_push.md

@@ -0,0 +1,11 @@
+---
+name: preview-before-push
+description: Toujours montrer un aperçu visuel (screenshot) avant de commiter et pousser
+type: feedback
+---
+
+Toujours faire un screenshot de prévisualisation et attendre la validation de l'utilisateur avant de lancer le commit & push.
+
+**Why:** L'utilisateur veut valider le rendu visuel avant que les changements partent en production sur Coolify.
+
+**How to apply:** Après chaque modification visible dans le navigateur, prendre un screenshot, le montrer, et demander confirmation avant de commiter/pousser.