Construire ce portfolio
Astro, des articles en Markdown, une typo qui sert d'image et une seule animation qui sait s'effacer. Les choix derrière ce site.
Article d'exemple, écrit pendant la construction du site pour montrer le format. Relis-le, adapte-le à ta voix ou supprime-le.
Un portfolio, c’est d’abord une page qu’on ouvre entre deux réunions. Il doit charger vite, se lire sur un téléphone et donner envie de cliquer sur un projet. Tout le reste est décoration, et la décoration a un coût.
Pourquoi Astro
Le site est presque entièrement statique : des pages, des projets, des articles. Astro génère du HTML au build et n’envoie du JavaScript que là où il sert vraiment. Ici, ça se résume à un seul petit script : le bouton de thème, le menu mobile et l’aperçu qui suit le curseur sur la liste des projets.
Pas de framework côté client, pas de bundle de plusieurs centaines de kilo-octets pour afficher du texte.
Un article, un fichier
Publier un article, c’est ajouter un fichier Markdown dans src/content/blog/fr/. Le frontmatter est typé par un schéma : si un champ manque ou n’a pas le bon type, le build échoue avec un message clair au lieu de publier une page cassée.
---
title: Mon retour d'expérience
summary: Une ou deux phrases pour la liste et les réseaux.
date: 2026-11-20
tags: [Production, Go]
draft: false
---Le temps de lecture, les pages par tag, le flux RSS et le sitemap se calculent tout seuls à partir de ces fichiers.
La typo comme image
La direction artistique repose sur une idée : les titres sont l’image. Anton, une linéale très condensée, occupe toute la largeur de l’écran, parfois en contour seul. Le texte courant est en Inter, beaucoup plus calme.
Les projets sans visuel reçoivent une couverture générée à partir de leurs initiales. Pas d’image à produire, et un ensemble qui reste cohérent même quand un projet n’a pas de capture d’écran.
Un titre géant fait le travail d’une photo, sans la peser.
Une seule animation, et elle sait s’effacer
Au chargement, les lettres du titre montent une à une. C’est le seul mouvement que personne n’a déclenché. Les autres répondent à une action : un survol, une ouverture de menu.
Et si le système demande de réduire les animations, elles disparaissent :
@media (prefers-reduced-motion: reduce) {
.char {
transform: none;
animation: none;
}
}Ce qui reste à faire
Remplacer les placeholders par de vrais projets, écrire les prochains articles, et brancher un nom de domaine. Le reste est en place.