Aller au contenu

Zacharie RousselonEn indépendant

Pérou Amitié Solidarité

Le site d’une association de solidarité avec le Pérou. Je le construis et je le tiens à jour, à partir de ce que ses membres m’envoient.

En bref

L’association finance des projets dans les Andes par le don et le parrainage. Ses membres m’envoient les nouvelles du terrain, je les mets en ligne, et le site doit mener à ces deux actions sans détour.

Nature
Site d’association
État
En ligne, 34 pages au plan du site le 21 septembre 2026
Rôle
Conception, code, déploiement, et toutes les mises à jour
Pile
Astro 6, contenus en Markdown typés, une feuille de style écrite à la main

Mots-clésAstro · Markdown · collections typées · CSS · OKLCH · light-dark() · mode sombre · accessibilité · Content Security Policy · GitHub Actions · CI/CD · FTPS · lftp · stylelint · RGPD · relation client

Page « Faire un don » de perouamitiesolidarite.org sur ordinateurLa même page sur un téléphone de 360 px
La page de don, le 21 septembre 2026.

Comment ça marche

Les contenus sont en Markdown. Le build vérifie la forme de chaque contenu, produit les images aux bonnes tailles, et calcule l’empreinte de chaque script pour l’inscrire dans la politique de sécurité du site. Le déploiement se fait en deux temps, pour que le code des dépendances ne voie jamais un secret.

  1. Job 1 : compiler, sans aucun secretBuildles dépendances s’exécutent ici
  2. Job 1 : compiler, sans aucun secretgardeContrôles sur le produitaucun style ni script en ligne, empreintes inscrites
  3. Job 2 : téléverser, avec les secretsOuverture du pare-feupour le serveur de build seulement
  4. Job 2 : téléverser, avec les secretsgardeTémoin de cibleun fichier lu sur le serveur confirme le bon site
  5. Job 2 : téléverser, avec les secretsEnvoi chiffré
  6. Job 2 : téléverser, avec les secretsgardeContrôle en lignecode 200, politique de sécurité, HSTS
  7. Job 2 : téléverser, avec les secretsFermeture du pare-feuquoi qu’il arrive
Le déploiement, en deux jobs. Les secrets n’existent que dans le second. Un bloc plein est une garde.

Ce que j’ai décidé

Page Parrainage en thème clairLa même page en thème sombre
La même page dans les deux thèmes. Douze jetons de couleur portent les deux, sans feuille séparée.
  • Des couleurs en OKLCH, et un lint qui refuse le reste. Douze jetons portent à la fois le thème clair et le thème sombre. Une couleur écrite en dur casserait l’un des deux, donc les notations hexadécimale, rgb et hsl font échouer le contrôle.
  • Des points de rupture en em. Ils s’activent aussi quand le visiteur a agrandi sa police.
  • Tout contenu est visible au chargement. Aucune animation ne part d’une opacité nulle.

Ce qui a raté

  • Des sections animées restaient invisibles en production. C’est l’origine de la règle sur l’opacité.
  • Une syntaxe récente de requêtes média cassait le menu sur les iPhone d’avant iOS 16.4. Plusieurs heures de recherche, puis une règle : syntaxe classique uniquement.
  • Un mot long élargissait la page au-delà de l’écran quand la police était à 200 %. Depuis, une colonne unique s’écrit minmax(0, 1fr).
  • Trois témoignages sans source étaient entrés dans un commit de mise en forme. La première règle du dépôt en vient : un agent n’écrit jamais de témoignage, même pour l’exemple.

Outils

  • Astro 6, collection de contenus typée, sharp pour les images.
  • CSS écrit à la main, stylelint, Prettier.
  • GitHub Actions en deux jobs, lftp en FTPS, API de l’hébergeur pour le pare-feu.

Ce que ça prouve

Que je sais tenir un site dans la durée pour quelqu’un d’autre, et transformer chaque incident en règle datée que la machine vérifie.

Me contacter