From cb9903122ad082756bba77cf68659df0f86c2bf1 Mon Sep 17 00:00:00 2001 From: "LIABEUF, Stephane (External)" Date: Wed, 27 May 2026 09:02:35 +0200 Subject: [PATCH] Update Doc , Readme and preview --- DOCUMENTATION.md | 29 +++-- README.md | 169 +++++++++++++++++++++++++ memory/feedback_preview_before_push.md | 11 ++ 3 files changed, 196 insertions(+), 13 deletions(-) create mode 100644 README.md create mode 100644 memory/feedback_preview_before_push.md diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index 259f370..523e2ad 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -29,14 +29,17 @@ Aucun framework, aucun bundler, aucune dépendance serveur — le site est du ** ``` cv-web-liabeuf/ -├── index.html ← Moteur de rendu unique (HTML + CSS + JS) -├── 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 -├── favicon.svg ← Favicon SVG initiales SL + dégradé Cornerstone CGI -├── DOCUMENTATION.md ← Ce fichier -└── .gitignore ← Exclut .claude/ (dossier de travail Claude Code) +├── index.html ← Moteur de rendu unique (HTML + CSS + JS) +├── 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 (GitOps) +├── ecosystem.html ← Page dashboard présentant l'écosystème Coolify auto-hébergé +├── favicon.svg ← Favicon SVG initiales SL + dégradé Cornerstone CGI +├── 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 -- Page `infrastructure.html` décrivant la stack complète : Edition → Forgejo → Coolify → Nginx → HTTPS -- Lien retour dynamique vers `index.html?cv={param}` via `URLSearchParams` -- Favicon et bouton retour intégrés +### Pages Annexes Dynamiques +- **Page Infrastructure** (`infrastructure.html`) : Décrit le pipeline GitOps complet (Edition → Forgejo → Coolify → Nginx → HTTPS) avec graphismes de monitoring de flux. +- **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é). +- **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. --- diff --git a/README.md b/README.md new file mode 100644 index 0000000..176cf86 --- /dev/null +++ b/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 + + ``` +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* diff --git a/memory/feedback_preview_before_push.md b/memory/feedback_preview_before_push.md new file mode 100644 index 0000000..eefaeda --- /dev/null +++ b/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.