notes d’implémentation · 2026
À propos du site
Ce site est volontairement statique. Les pages publiques sont d’abord des documents complets : HTML, CSS et ressources locales portent le contenu ; un peu de JavaScript natif n’intervient que lorsque l’interaction apporte réellement quelque chose.
La règle est simple : le contenu doit rester lisible sans framework, sans couche de traduction côté client et sans rendu piloté par JavaScript.
01
Architecture
Statique par choix.
Le portfolio est généré sous forme de documents HTML5 complets à partir de petits gabarits et de JSON structuré. Un générateur fondé sur la bibliothèque standard de Python 3 produit chaque version linguistique à l’avance ; le navigateur n’assemble pas le site à l’exécution.
Le site est servi par GitHub Pages depuis la branche main. Le portfolio n’a derrière lui ni CMS, ni framework applicatif, ni base de données, ni application côté serveur.
- exécution
- HTML5 · CSS · JavaScript natif
- construction
- Python 3 · JSON · gabarits HTML
- hébergement
- GitHub Pages
02
Contenu & langues
Sept éditions, aucune traduction à l’exécution.
L’anglais, le chinois traditionnel de Hong Kong, le chinois simplifié, le japonais, l’allemand, le français et le russe sont générés comme éditions statiques distinctes, avec URL canoniques et liens alternatifs hreflang et métadonnées propres à chaque langue.
Les textes littéraires suivent des règles plus strictes que les libellés d’interface. Quand cela est défini, le chinois traditionnel fait foi ; les miroirs littéraires simplifiés ne changent que l’écriture et sont contrôlés par hachage de la source, tandis que des tests dédiés vérifient la structure des lignes et des strophes des traductions.
- locales
- en-GB · zh-Hant-HK · zh-Hans · ja · de · fr · ru
- textes littéraires
- OpenCC · hachages source · contrôle de la structure des lignes
- métadonnées
- canonical · hreflang · Open Graph
03
Mise en page & typographie
Du CSS éditorial plutôt qu’un framework de composants.
La mise en page utilise CSS Grid, subgrid, container queries, logical properties, custom properties et des dimensions fluides via clamp(). Les media queries restent des solutions de repli prudentes ; quand les container queries sont disponibles, chaque module se réorganise selon sa propre largeur.
Les polices sont auto-hébergées en WOFF2. EB Garamond sert principalement au texte latin, Courier Prime et Cousine aux métadonnées, Shippori Mincho au chinois traditionnel et au japonais, Noto Serif SC au chinois simplifié ; un minuscule sous-ensemble I.Ming complète les rares glyphes hongkongais manquants. Les sous-ensembles CJK sont reconstruits avec fontTools et Brotli ; la source Noto est épinglée par commit et SHA-256.
- mise en page
- Grid · subgrid · requêtes de conteneur · propriétés logiques
- polices
- EB Garamond · Courier Prime · Cousine · Shippori Mincho · Noto Serif SC · I.Ming
- couleurs
- clair/sombre · prefers-color-scheme
04
Accessibilité
Adapter la lecture sans retirer de contenu.
La structure repose sur des zones sémantiques, un titre principal, des liens d’évitement, un focus clavier clairement visible, des noms de langue complets et des cibles tactiles fiables. Les préférences système reduced motion, contraste renforcé et forced colours sont respectées.
Un panneau de lecture persistant peut activer une police sans sérif, agrandir le texte, augmenter les espacements, raccourcir les lignes, simplifier la mise en page, réduire le mouvement et augmenter le contraste. Tout cela relève de l’amélioration progressive et les réglages sont stockés uniquement dans le navigateur.
- préférences
- sans sérif · texte agrandi · espacements · largeur de ligne · mise en page simple · mouvement · contraste
- stockage
- localStorage uniquement
- contrôles
- audit structurel maison · audit navigateur axe-core
05
Images et performances
Médias responsives, sans moteur de galerie à l’exécution.
Les photographies et planches de recherche utilisent picture/srcset avec variantes WebP et JPEG, dimensions explicites et tailles responsives. L’image d’ouverture est prioritaire ; les médias plus bas dans la page sont chargés en différé et décodés de façon asynchrone.
Les sections sous la ligne de flottaison peuvent utiliser content-visibility. View Transitions et scroll-linked motion restent des améliorations progressives facultatives ; reduced motion désactive les animations.
- images
- picture · srcset · WebP · JPEG
- chargement
- dimensions explicites · chargement différé · décodage asynchrone
- CSS progressif
- content-visibility · View Transitions · chronologies de défilement
06
Génération, QA et déploiement
Le résultat généré est lui-même testé.
Le dépôt vérifie que les pages générées sont à jour, que les schémas de locale concordent, que la structure des textes littéraires n’a pas dérivé, que les zones sémantiques et contrôles d’accessibilité restent intacts, que les liens locaux et leurs ancres se résolvent, que les images ont un texte alternatif et que la syntaxe JavaScript est valide.
La QA navigateur ajoute des contrôles géométriques dans plusieurs langues et à différentes largeurs de fenêtre, des audits axe-core et une validation HTML. Dans GitHub Actions, les contrôles légers passent d’abord, puis la suite navigateur s’exécute à chaque push et pull request ; GitHub Pages publie indépendamment les mêmes fichiers statiques depuis main.
- contrôles du dépôt
- génération · langues · accessibilité · liens/ressources · syntaxe JS
- QA navigateur
- Playwright · axe-core · html-validate
- livraison
- GitHub Actions · GitHub Pages
07
Principes
Le contenu source, les fichiers générés et le comportement du navigateur restent des couches distinctes : on modifie les données structurées et les gabarits, on reconstruit, puis on vérifie les documents produits.
L’amélioration progressive est volontairement facultative. Une fonction CSS non prise en charge, JavaScript désactivé ou un stockage local indisponible ne doivent ni masquer le travail ni empêcher la navigation.
Vie privée à l’exécution
Le portfolio ne charge ni analytics, ni réseau publicitaire, ni web font tierce, ni script de suivi, et ne dépose aucun cookie. Le seul état persistant du navigateur est l’enregistrement local des préférences de lecture.