AGENTS.md

This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.

Contexte du projet

Portfolio professionnel de Yves Marti — chargé de mission déchets & SIG en Normandie. Site statique Jekyll hébergé sur GitHub Pages, entièrement en français.

URL de production : https://yvesmarti.fr

Commandes utiles

Développement local

bundle install          # Installer les dépendances Ruby (première fois)
bundle exec jekyll serve  # Lancer le serveur local → http://localhost:4000
bundle exec jekyll build  # Générer le site dans _site/

Le site se déploie automatiquement sur GitHub Pages à chaque push sur main. Il n’y a pas de pipeline CI/CD supplémentaire, pas de tests automatisés.

Architecture du site

Structure générale

Le site mélange deux modes de fonctionnement :

Pages Jekyll (avec layout) — utilisent _layouts/default.html ou _layouts/page.html :

index.html — Page d’accueil, layout default
outils.html — Liste des outils, layout page
realisations/index.html — Portfolio réalisations, layout default avec CSS/JS dédiés
realisations/*.html — Pages de détail des réalisations, layout page ou default

Pages autonomes (sans layout Jekyll) — HTML/CSS/JS auto-contenus, pas de nav/footer partagés :

cv/index.html — CV interactif, optimisé impression, styles inline
outils/*.html — Outils web fonctionnels (géocodage, isochrones, etc.)
outils/suivi/index.html — PWA de suivi terrain (service worker inclus)

Layouts

_layouts/default.html — layout maître : head complet (SEO, Open Graph, JSON-LD, GTM), _includes/header.html, `<main><header class="ot-hero">

Boîte à outils

Outils SIG & Géomatique

Applications web pour la géomatique, l'environnement et l'analyse de données territoriales.

</header>

Géomatique & Cartographie

Géomatique & Cartographie

Création d'Isochrones via ORS

Générez des zones d'accessibilité temporelle autour d'un point pour analyser la couverture territoriale.

Géomatique & Cartographie

Géocodage Inverse

Obtenez une adresse à partir de coordonnées GPS pour identifier rapidement un lieu.

Géomatique & Cartographie

Géocodage adresses

Transformez une adresse en coordonnées GPS exploitables.

Géomatique & Cartographie

Visualiseur de Photos

Visualisez l'emplacement de vos photos sur une carte interactive.

Géomatique & Cartographie

Photo Geo Manager

Renommez vos photos automatiquement en fonction de leur géolocalisation GPS.

Géomatique & Cartographie

Extraction de données OSM

Récupérez des données OpenStreetMap pour une zone donnée.

Géomatique & Cartographie

Suivi Collecte Déchets

Suivez et gérez vos collectes de déchets sur une carte interactive.

Analyse de Données

Analyse de Données

Outil d'analyse statistique

Emplacement disponible pour un outil d'analyse statistique.

Analyse de Données

Exploration de données

Emplacement disponible pour un outil d'exploration de données.

Environnement & Déchets

Environnement & Déchets

Générateur de Calendrier de Collecte

Créez un calendrier personnalisé pour vos collectes de déchets (ordures ménagères, recyclage, etc.).

Environnement & Déchets

Dimensionnement de dalles

Configurez et dimensionnez vos dalles pour points d'apport volontaire avec bacs et claustra.

Environnement & Déchets

Implantation de colonnes enterrées

Planifiez et visualisez l'implantation de colonnes enterrées (PAV) sur une carte interactive avec gestion des contraintes terrain.

Environnement & Déchets

Outil environnemental

Emplacement disponible pour un outil environnemental.

Autres outils pratiques

Autres outils pratiques

Générateur de QR codes

Créez des QR codes (URL, contact vCard, WiFi) directement dans le navigateur, sans serveur ni transfert de données.

Autres outils pratiques

Annotateur de carte

Annotez vos captures satellite pour délimiter les zones de présentation des bacs, puis exportez en PNG.

Autres outils pratiques

Encart GPS pour photos

Générez un encart de localisation précis pour vos photos, à partir des données GPS EXIF du fichier ou de coordonnées saisies manuellement.

Ressources

Sites et outils recommandés

Logiciels et ressources web que j'utilise et recommande

Recordly

Enregistrez votre écran simplement et rapidement, sans configuration lourde - idéal pour créer des tutoriels ou documenter une démarche.

Caesium

Compressez vos photos en lot sans perte de qualité visible. Open source, disponible sur Windows, macOS et Linux.

Logiciel Gratuit

WinDirStat

Visualisez l'espace disque de votre PC sous forme de treemap colorée pour identifier rapidement les dossiers et fichiers volumineux. Outil indispensable avant de faire du tri.

Logiciel Gratuit

PowerToys

Suite d'utilitaires Microsoft pour power users Windows : renommage de fichiers en lot, sélecteur de couleurs, gestionnaire de fenêtres, aperçu avancé et bien plus.

Logiciel Gratuit

</main>, _includes/footer.html, chargement de main.js et optionnellement page.extra_js/page.extra_css`.

_layouts/page.html — hérite de default, ajoute automatiquement une section .page-header avec titre (page.title) et sous-titre (page.subtitle) sur fond --color-primary.

Données (`_data/`)

Tout le contenu modifiable est dans des fichiers YAML :

Fichier	Utilisé dans
`timeline.yml`	Timeline horizontale défilante — section `#parcours` de `index.html`
`competences.yml`	Grille de compétences filtrables — section `section-dark` de `index.html`
`stats.yml`	Compteurs animés — section `section-dark` de `index.html`
`outils.yml`	Catalogue d’outils par catégorie — `outils.html`
`realisations.yml`	Cards du portfolio — injecté en JSON dans `realisations/index.html` via [{"id":1,"title":"Auto-École Marti","desc":"Site vitrine pour l'auto-école familiale. Présentation des formations, tarifs et contacts, adapté aux mobiles.","type":"site","tags":["HTML","CSS","Jekyll"],"emoji":"🚗","image":"/assets/images/preview-autoecole-marti.webp","url":"https://autoecolemarti.fr"},{"id":2,"title":"Automatiser la prospection Redevance Spéciale avec Power Query","desc":"Interroger les APIs publiques françaises depuis Excel pour constituer automatiquement la liste des entreprises assujetties sur un territoire intercommunal.","type":"etude","tags":["Power Query","Excel","APIs"],"emoji":"📊","url":"/realisations/etude-de-cas-redevance-speciale.html"},{"id":3,"title":"APIs open data utiles pour les données territoriales","desc":"Sélection d'APIs publiques pour automatiser la collecte, structurer les référentiels géographiques et enrichir les analyses locales.","type":"astuce","tags":["Open Data","APIs","GIS"],"emoji":"🔗","url":"/realisations/api-utiles.html"},{"id":4,"title":"Carte isochrone interactive","desc":"Outil HTML/JS autonome pour calculer et visualiser des zones d'accessibilité temporelle à partir d'un point sur la carte.","type":"outil","tags":["Leaflet","JS","OSRM"],"emoji":"🗺️","url":"/outils"},{"id":5,"title":"Géocoder des adresses en masse","desc":"Un outil simple pour envoyer un fichier CSV d'adresses à la BAN et récupérer les coordonnées géographiques, sans installation.","type":"outil","tags":["BAN","CSV","JS"],"emoji":"📍","url":"/outils"},{"id":6,"title":"Visualiser des photos géolocalisées sur une carte","desc":"Déposer un dossier de photos EXIF et les voir apparaître sur une carte Leaflet - utile pour les relevés terrain.","type":"astuce","tags":["EXIF","Leaflet","JS"],"emoji":"📸","url":"/outils"},{"id":7,"title":"Guide des formules Excel","desc":"Référence interactive des principales formules Excel : syntaxe, exemples concrets et conseils d'utilisation, organisés par catégorie.","type":"guide","tags":["Excel","HTML","CSS","JS"],"emoji":"📗","url":"https://yvesmarti.fr/guide-excel/"},{"id":8,"title":"Guide des marchés publics","desc":"Guide pratique pour comprendre et naviguer dans les procédures de marchés publics : seuils, types de procédures, rédaction des pièces essentielles.","type":"guide","tags":["Marchés publics","Commande publique","HTML"],"emoji":"📋","url":"https://yvesmarti.fr/guide-marches-publics/"},{"id":9,"title":"Guide de la comptabilité publique territoriale","desc":"Guide pratique pour comprendre la comptabilité en fonction publique territoriale : principes budgétaires, sections de fonctionnement et d'investissement, écritures et nomenclatures.","type":"guide","tags":["Comptabilité","FPT","HTML"],"emoji":"📒","url":"https://yvesmarti.fr/guide-compta-fpt/"}]
`experiences.yml`	Non utilisé directement côté front à ce jour
`formations.yml`	Non utilisé directement côté front à ce jour

Système de design — état actuel

Variables CSS principales (`assets/css/style.css`)

--color-primary: #1a3a32   /* vert forêt foncé — héros, sections sombres, nav */
--color-accent:  #3d8b6e   /* vert moyen — liens, accents, bordures actives */
--color-light:   #f7f9f8   /* fond clair principal */
--color-warm:    #e8ded4   /* fond beige chaleureux — sections intermédiaires */
--color-text:    #2c2c2c
--color-muted:   #6b7c75

Typographie — toutes chargées depuis Google Fonts :

--font-display: 'DM Serif Display' — titres H1/H2, .lead, citations
--font-body: 'Source Sans 3' — corps de texte par défaut
'Space Grotesk' (700) — timeline HTL, titres géo
'Space Mono' — dates monospace, hints
'Outfit' (700) — titres de postes .tl__title
'Lora' (italic) — descriptions .tl__desc

Mode sombre — basculement via [data-theme="dark"] sur <html>, persisté dans localStorage. Un script inline dans <head> (anti-FOUC) le restaure avant le rendu. Les variables CSS sont surchargées dans [data-theme="dark"] { ... }.

Incohérences de style à unifier (objectif déclaré)

Trois systèmes de couleurs coexistent actuellement :

Style principal (style.css) — accent : #3d8b6e
Page CV (cv/index.html, styles inline) — utilise --teal: #2a7a5e (teinte différente), pas de dark mode, font-family: Lora + Source Sans 3
Réalisations (realisations.css) — utilise #2a7a65 hardcodé, font-family: system-ui au lieu de Source Sans 3

La page CV est entièrement autonome pour permettre l’impression propre. Si l’on unifie ses couleurs, il faudra modifier les variables CSS inline dans cv/index.html.

Séparateurs en vague SVG

Les vagues entre sections utilisent des <path fill="COULEUR_HARDCODÉE">. Le dark mode les surcharge via :

[data-theme="dark"] .wave-separator path[fill="#f7f9f8"] { fill: #131e17; }

Important : si une couleur de fond de section change, il faut mettre à jour à la fois le fill dans le HTML et la règle CSS du dark mode correspondante.

JavaScript (`assets/js/main.js`)

IIFE vanilla JS (pas de framework), 11 fonctions d’initialisation appelées sur DOMContentLoaded :

Fonction	Rôle
`initMobileMenu`	Menu burger mobile
`initDarkMode`	Toggle thème + localStorage
`initNavScroll`	Nav en pill flottante après 80 px de scroll
`initProgressBar`	Barre de lecture verte en haut
`initScrollAnimations`	IntersectionObserver sur `.animate-on-scroll`
`initCounters`	Compteurs animés `.stat-counter[data-target]`
`initTypewriter`	Effet machine à écrire sur `#hero-typewriter`
`initParallax`	Parallaxe du dégradé héros `.hero-parallax-bg`
`initAnimatedTimeline`	Timeline verticale `#exp-timeline` (scroll-driven, `.tl__item → .is-lit`)
`initHorizontalTimeline`	Timeline horizontale `#parcours` / `#htl-track` (scroll converti en translateX)
`initIsolines`	Canvas Perlin noise animé `#isoline-canvas` dans le héros
`initSkillFilters`	Filtres `.filter-btn` sur `.skill-card[data-categorie]`

assets/js/realisations.js — rendu dynamique des cards via RL_ITEMS (JSON injecté par Jekyll), filtrage par type.

Ajouter un outil

Créer outils/mon-outil.html (page HTML autonome, sans layout Jekyll)
Ajouter une entrée dans _data/outils.yml avec actif: true et le bon lien:

Ajouter une réalisation

Ajouter une entrée dans _data/realisations.yml — la card apparaît automatiquement
Si une page de détail est nécessaire, créer realisations/ma-realisation.html (layout page ou default)