Tordu Jardin - Ce blog, méta

Le jardin numérique que vous lisez en ce moment. Un blog déguisé en jeu vidéo : barres d’XP, stades de croissance, HUD forestier, et une direction artistique acide qui ne ressemble à rien d’autre.

III - Croissance 1 mois 2026-02-08 2026-03-14
XP
60%

Pourquoi

Je construis des projets en permanence, mais personne ne les voit. Le code vit sur GitLab, les notes dans des fichiers locaux, les décisions dans ma tête. Quand quelqu’un demande “tu fais quoi en ce moment ?”, la réponse est toujours trop longue ou trop courte. Il me fallait un endroit pour raconter ces projets, pas juste les lister.

Le concept de “jardin numérique” m’a parlé : un espace entre le blog et le wiki, où les idées poussent à des rythmes différents. Certaines sont des graines (un prototype d’un jour), d’autres sont persistantes (un design system de 3 ans). Le jardin reflète ça avec des stades de croissance, comme des niveaux dans un jeu.

L’identité visuelle

Le jardin surcharge les tokens de Totem, mon design system, pour créer une palette “jungle tropicale” : mango, ember, orchid, helico, lime, canary. C’est radical, acide, à l’opposé du “Soft Minimal” de Totem. C’est aussi la preuve que l’architecture de Totem fonctionne : charger des tokens différents avant ceux du design system, et tout se recolore automatiquement.

Les fiches empruntent au vocabulaire du jeu vidéo : barres d’XP, stades de croissance, HUD avec des stats du jardin (voir Patterns UI de jeux vidéo). C’est un portfolio déguisé en RPG. Un clin d’œil à mes années RPG Maker.

Comment les fiches naissent

Chaque fiche de projet est générée par une exploration automatisée du code source : le README, le package.json, l’historique git, les fichiers de mémoire Claude. Un agent analyse tout ça et produit un premier brouillon que je retravaille ensuite. Le jardin se cultive avec ses propres outils, les fiches sont générées via Summoner qui orchestre les sessions Claude en parallèle.

Stats

Premier commit8 février 2026
Branche activemain
Fiches projet10
Design systemTotem (variante acide)

Stack technique

Astro 5

Framework SSG

Générer un site statique sans JS côté client

SCSS + Totem

Direction artistique

Surcharger les tokens pour la palette jungle tropicale

Fiches projet enrichies, carnet complet

10 fiches projet générées par analyse automatisée des dépôts. 18 articles de carnet couvrant tous les projets. Screenshots Puppeteer automatisés.

  • 10 fiches projet avec frontmatter structuré (stats, stack, screenshots, journal)
  • 18 articles de carnet liés aux projets
  • Screenshots Puppeteer desktop + mobile
Composants garden, game design

XP bars, growth badges, glow hovers, pixel grid overlay. Les mécaniques de jeu vidéo prennent forme dans garden-components.scss.

  • XP bars animées style RPG
  • Growth badges (graine/pousse/croissance/persistant)
  • Glow hovers + pixel grid overlay
  • HUD stats panel
Palette jungle tropicale

Intégration de la variante acide dans Totem. garden-tokens.scss surcharge les !default : mango, ember, orchid, helico, lime, canary. Typographie brutaliste Unbounded + Space Mono.

  • garden-tokens.scss : palette Jungle Tropicale
  • garden-theme.scss : CSS custom properties
  • Typographie : Unbounded, Space Mono, Instrument Serif
Init Astro 5, content collections

Scaffolding du jardin numérique. Astro 5, content collections auto-générées, intégration Totem via SCSS. Premières pages : index, jardin, manifeste.

  • Init Astro 5 avec content collections
  • Intégration SCSS Totem via !default
  • Pages : index, jardin, manifeste, contact