Hello world : un nouveau SoBra, construit avec l’IA

Publié le Web & frontend Braindump

SoBra a une nouvelle identité, un nouveau site et, pour la première fois, un blog. J’ai tout fait avec l’IA. Voici comment.

Le nouveau logo

Le logo est un SoBra écrit à la main, souligné d’un trait ample. Au bout de ce trait se trouve un point orange, la seule touche de couleur.

Sur sobra.be, ce point fait presque tout. Il tombe dans le logo au chargement, devient ensuite votre curseur et se raccroche à sa place quand vous l’en approchez. Si votre appareil demande moins de mouvement, vous voyez directement le résultat final.

Comment je travaille avec l’IA

Le brainstorming et la planification, je les fais surtout avec OpenAI. L’exécution et le design, je les confie à Claude (Opus 5.5).

Claude reçoit des instructions claires, dans des fichiers Markdown qui servent de contexte. J’ai aussi rédigé mes propres skills (des fichiers SKILL.md) sur ma façon de travailler et ce qui compte pour moi : comment j’écris, comment je pense, à quoi je fais attention. Grâce à cela, l’IA prend en charge l’essentiel du travail, aussi bien pour construire le site que pour écrire les textes. Cet article est né de la même façon.

Je reste le marionnettiste. Je décide de ce qui se passe et je définis ce qui est bon ou pas. Je fixe la manière d’écrire, du ton à la rédaction technique. Ensuite, je laisse l’IA terminer les tâches et me montrer le résultat. La relecture, je la fais moi-même.

Pourquoi comme ça

Je n’ai pas besoin de CMS. Un article est un dossier de fichiers texte, et le build en fait une page en trois langues. Le site reste très léger, et tout est optimisé comme je le ferais à la main.

Je passe donc moins de temps sur mon propre site et plus sur le travail pour mes clients.

Sous le capot

Le site tourne sans framework : du HTML classique, du SCSS avec des cascade layers et une poignée de petits modules JavaScript, assemblés avec Vite. Quelques techniques utilisées :

  • Les View Transitions pour passer d’une page à l’autre : une bulle de la couleur du point grandit depuis l’endroit où vous cliquez.
  • Les scroll-driven animations en CSS, pour que le texte s’illumine pendant que vous faites défiler, sans JavaScript.
  • Une astuce vidéo HDR de superwhite, par dtinth, pour afficher un blanc plus blanc que blanc sur un écran HDR.

Le site cache aussi quelques secrets. Je ne vous dirai pas où.

Ce qui arrive ici

Sur Nostrabramus, vous trouverez de courts articles sur l’IA, le web et le SEO, et sur ce que je trouve en ligne. Toujours avec les sources, en néerlandais, en anglais et en français. Pourquoi ce nom ? Vous le lirez dans Pourquoi ce blog s’appelle-t-il Nostrabramus ?.