cv-web-liabeuf/README.md

# 💼 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*