💼 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 :

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 :

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 :

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 :

   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 :

   [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 :

   <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