LIABEUF, Stephane (External) cb9903122a Update Doc , Readme and preview

2026-05-27 09:02:35 +02:00

9.5 KiB

Raw Blame History

CV Web — Stéphane Liabeuf

CV en ligne auto-hébergé, multi-versions et multi-thèmes, déployé automatiquement via Forgejo + Coolify.

Présentation du projet

Ce projet est un CV interactif 100 % auto-hébergé, conçu pour être présenté à des interlocuteurs différents (recruteurs, clients, DSI, équipes UX) avec une version adaptée à chaque cible, le tout à partir d'un seul fichier HTML et de fichiers de données JSON interchangeables.

Le site est accessible à l'adresse : https://cv.stephaneliabeuf.fr

Architecture technique

Principe fondamental

L'ensemble du rendu est assuré par un seul fichier index.html qui :

Lit le paramètre d'URL ?cv= pour sélectionner le fichier JSON à charger
Fetche le JSON correspondant via fetch()
Injecte dynamiquement tout le contenu dans le DOM (hero, nav, expériences, compétences, secteurs, formation, footer)
Applique le thème visuel choisi (stocké en localStorage)

Aucun framework, aucun bundler, aucune dépendance serveur — le site est du HTML/CSS/JS vanilla servi par Nginx.

Fichiers du projet

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 (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)

Versions du CV

Le paramètre ?cv= dans l'URL permet de charger une version différente du CV sans changer l'URL de base :

URL	Fichier JSON	Cible
`cv.stephaneliabeuf.fr`	`cv-data.json`	Version généraliste (défaut)
`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 les pages infrastructure.html et ecosystem.html et conservé lors du retour au CV.

Structure d'un fichier JSON de données

Chaque fichier JSON suit la même structure :

{
  "identity": {
    "prenom": "Stéphane",
    "nom": "Liabeuf",
    "titre": "...",
    "entreprise": "CGI Group",
    "localisation": "Clermont-Ferrand",
    "accroche": "...",
    "description": "...",
    "disponibilite": "...",
    "contact": {
      "email": "",
      "telephone": "",
      "linkedin": "https://www.linkedin.com/in/stephaneliabeuf/",
      "github": "",
      "site": "https://www.stephaneliabeuf.fr"
    },
    "seo": {
      "title": "...",
      "description": "...",
      "keywords": "...",
      "og_image": "...",
      "canonical": "..."
    }
  },
  "stats": [ { "valeur": "25+", "label": "années XP" } ],
  "experiences": [
    {
      "groupe": "CGI // Directeur Conseil Service",
      "groupe_style": "primary",
      "postes": [
        {
          "periode": "...",
          "entreprise": "...",
          "role": "...",
          "programme": "...",
          "objectif": "...",
          "description": "...",
          "resultats": ["..."],
          "tags": ["Tag:mag", "Tag:grn"]
        }
      ]
    }
  ],
  "competences": [
    {
      "categorie": "Techniques",
      "items": [
        { "nom": "Gestion de projet", "annees": "25A", "niveau": 100, "label": "EXPERT" }
      ]
    }
  ],
  "secteurs": ["User Experience", "E-Commerce", "..."],
  "formation": [
    { "annee": "1999", "diplome": "...", "etablissement": "...", "details": "..." }
  ],
  "certifications": ["CMMI", "PMI (2005)", "..."]
}

Système de tags colorés

Les tags d'expérience acceptent un suffixe de couleur :

Syntaxe	Couleur
`"Tag:mag"`	Magenta / accent
`"Tag:grn"`	Vert succès
`"Tag"` (sans suffixe)	Couleur neutre du thème

Thèmes visuels

Le site propose 4 thèmes accessibles via le menu burger (icône ≡ en haut à droite) :

Thème	Identifiant	Ambiance
⚡ Cyberpunk	`cyberpunk`	Fond noir, néons cyan/magenta, police Orbitron
💥 Bande Dessinée	`bd`	Fond papier, bulles, ombres portées, Comic Neue
💼 IT Professionnel	`itpro`	Bleu corporate, clean, Inter
◆ CGI	`cgi`	Branding officiel CGI — violet #5236AB, dégradé Cornerstone

Le thème choisi est persisté en localStorage et restauré à chaque visite.

Le dégradé Cornerstone CGI (#E31937 → #A82465 → #5236AB) est appliqué sur le prénom, les bordures hero, les barres de compétences et les éléments d'accent du thème CGI.

Fonctionnalités

Barre de progression de lecture — fine barre colorée (adaptée au thème) en position: fixed; top: 0 qui avance au scroll
Ancre active dans la nav — IntersectionObserver sur les 4 sections, highlight du lien courant
Scroll reveal — les sections apparaissent en fadeIn à l'entrée dans le viewport
Typing effect — animation de saisie sur le badge "Bienvenue sur le CV en ligne de"

SEO & partage

Métadonnées OG dynamiques — og:title, og:description, og:image, twitter:card injectés depuis le champ seo du JSON, spécifiques à chaque version ?cv=
Schema.org Person — données structurées JSON-LD injectées dynamiquement
Favicon SVG — initiales SL sur fond dégradé Cornerstone, rendu parfait dans tous les navigateurs

Export

Bouton ⬇ PDF dans la nav — déclenche window.print() avec un CSS @media print dédié : fond blanc, typo Georgia, sections lisibles, progress bar et boutons masqués

Multi-versions

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

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.

Infrastructure de déploiement

Local (dev)
  │
  ├── Antigravity (GUI Git)
  ├── Claude Code (IA — worktree isolé)
  │
  ▼
Forgejo (forge.stephaneliabeuf.fr)
  │  Auto-hébergé · Dépôt privé · Historique complet
  │
  ▼ webhook push
Coolify (orchestrateur auto-hébergé)
  │  Détecte chaque push sur main · Build · Rolling update
  │
  ▼
Conteneur Nginx
  │  Sert les fichiers statiques (HTML, CSS, JS, JSON, SVG)
  │
  ▼
https://cv.stephaneliabeuf.fr
  └── SSL/TLS géré par Coolify (Let's Encrypt)

Workflow de développement

Claude Code travaille dans un worktree git isolé (/.claude/worktrees/...)
Les modifications sont commitées et poussées directement sur main (pas de PR)
Coolify détecte le push et redéploie automatiquement
Le développeur fait git pull en local pour resynchroniser son repo

Le worktree est exclu du dépôt via .gitignore (.claude/).

Ajouter une nouvelle version de CV

Créer cv-data-{nom}.json en copiant la structure de cv-data.json
Adapter identity, stats, experiences, competences, secteurs, formation

Ajouter {nom} à la liste cvAllowed dans index.html :

const cvAllowed = ['ux', 'dsi', '{nom}'];

Commiter et pusher — Coolify déploie automatiquement
Accès : https://cv.stephaneliabeuf.fr?cv={nom}

Ajouter un nouveau thème

Dans index.html, ajouter un bloc CSS [data-theme="montheme"] { ... } en ciblant les sélecteurs existants

Ajouter le bouton dans #theme-menu :

<button class="theme-btn btn-montheme" onclick="setTheme('montheme')">🎨 MON THÈME</button>

Ajouter le style du bouton .theme-btn.btn-montheme { ... }
Ajouter 'montheme' dans la liste de validation de setTheme()

Technologies utilisées

Composant	Technologie
Rendu	HTML5 / CSS3 / JS vanilla
Fonts	Google Fonts (Orbitron, Share Tech Mono, Comic Neue, Inter)
Icône	SVG inline (favicon)
Hébergement	Nginx (conteneur Docker via Coolify)
Git	Forgejo (auto-hébergé)
CI/CD	Coolify (webhook → deploy automatique)
SSL	Let's Encrypt via Coolify
Dev IA	Claude Code (Anthropic)
GUI Git	Antigravity

Documentation — Mai 2026

9.5 KiB Raw Blame History