Un nouveau souffle pour le site
Le 15 septembre 2025, j'ai lancé une série de travaux dont l'ambition était simple : rendre le site plus clair pour les visiteurs et plus facile à faire évoluer pour les développeurs. Ce billet raconte le chemin parcouru en dix jours — les décisions prises, les problèmes rencontrés et, surtout, ce que cela change pour vous.
Pourquoi moderniser maintenant ?
Les sites statiques vieillissent vite quand on les nourrit sans structure : styles éparpillés, contenus en dur dans les templates, dépendances externes, et des comportements mobiles imprévisibles. Plutôt que d'appliquer rustines sur rustines, l'approche choisie a été de clarifier la séparation entre contenu, affichage et logique, puis d'améliorer l'expérience utilisateur (UX) à plusieurs niveaux.
Le récit des travaux (en clair)
Tout a commencé par une étape d'inventaire et de préparation : la configuration CI a été posée le 15/09 pour sécuriser les déploiements et faciliter les vérifications automatiques. Ensuite, pendant les 16 et 17 septembre, j'ai attaqué la migration des styles — suppression des références à writ.min.css et mise en place de CSS locaux — afin de reprendre la main sur l'apparence du site sans dépendre d'une feuille de styles externe.
Le 17/09 a été consacré au design system : une palette, une typographie et quelques règles de composants réutilisables ont été définies. Cela permet d'assurer une cohérence visuelle immédiate et de simplifier tout changement ultérieur. À partir du 18/09, la modernisation s'est déployée sur les pages principales : la page Compétences a été ré-écrite pour tirer ses données d'un fichier JSON plutôt que d'avoir du contenu figé dans le template ; la page Missions a vu sa structure de données refondue (client → contrats) pour un tri et un rendu plus pertinents.
Les derniers jours (24–25/09) ont été dédiés aux finitions : corrections d'affichage sur mobile, stabilisation du theme-switcher, ajustements d'animations et ajout d'actifs (nouveau logo, logo SACEM). Le tout s'est construit par petites itérations, avec des commits fréquents et des PRP (plans de réalisation) mis à jour pour tracer l'avancement.
Ce que cela change pour vous (visiteur)
- Chargement plus cohérent : les styles locaux réduisent les variations visuelles et limitent les temps d'attente liés à ressources externes.
- Navigation plus fluide, en particulier sur mobile : menu stable, transitions cohérentes et éléments tactiles remis au point.
- Un thème sombre/clair fonctionnel : il suit la préférence système et conserve votre choix.
- Pages "Compétences" et "Missions" plus fiables : tri clair des éléments, popups et logos correctement affichés.
Un mot aux développeurs et aux curieux
Si vous aimez creuser, voici l'essentiel technique à retenir :
Séparation contenu/présentation
- Les contenus sont extraits dans _data/*.json et les vues sont rendues via des includes Liquid. Avantage : modification des données sans toucher aux templates, tests plus simples, et possibilité de réutiliser ces données côté API ou scripts.
Design system
- Variables et composants centralisés dans un fichier design-system.css ; fichiers CSS spécifiques par page (home.css, etc.) pour limiter la portée des règles et faciliter le debug.
Theme-switcher
- Détection automatique de la préférence système ; indicateur visuel accessible et suppression des micro-interactions problématiques qui désynchronisaient l'affichage sur certains périphériques mobiles.
Structure des missions
- Passage à un modèle client → contrats, ce qui simplifie le tri par importance et l'affichage des périodes (date_fin ajoutée aux clients).
Test et CI
- Pipeline CI initialisée le 15/09 pour intégrer linting/checks et faciliter les déploiements reproductibles.