> 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 :
1. Lit le paramètre d'URL `?cv=` pour sélectionner le fichier JSON à charger
2. Fetche le JSON correspondant via `fetch()`
3. Injecte dynamiquement tout le contenu dans le DOM (hero, nav, expériences, compétences, secteurs, formation, footer)
4. 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.
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.
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
### Navigation & UX
- **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=`
- **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
- **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.
