169 lines
7.6 KiB
Markdown
169 lines
7.6 KiB
Markdown
# 💼 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*
|