Refonte de mon portfolio avec Next.js et Keystatic

Ce site tournait depuis plus d'un an sans grande évolution. Le hero affichait un laptop 3D de 5 Mo, les pages ne rendaient aucun HTML côté serveur, et publier le moindre projet demandait d'éditer deux fichiers JSON puis de pousser un commit. Voici ce qui a changé, et pourquoi.

Le diagnostic

Le point de départ était un audit sans complaisance : architecture, design, SEO. Le plus gros problème n'était pas visuel.

Le bug SSR invisible

Toutes les pages étaient des composants client, et le fournisseur de thème affichait un spinner tant que la préférence sombre/clair n'était pas lue depuis le localStorage. Résultat, le HTML servi aux moteurs de recherche ne contenait strictement rien. Le correctif tenait en quelques lignes (rendre le mode sombre par défaut côté serveur, réconcilier après hydratation), mais il fallait le voir.

Le nouveau système visuel

La refonte a remplacé l'accumulation par un système : une palette off-black/off-white avec un seul accent cyan hérité de l'ancienne identité, la police Geist pour le texte et sa version mono pour les dates et les tags, un seul rayon de bordure pour les cartes et des boutons en pilule.

Le laptop 3D et la vidéo de fond ont été supprimés au profit d'un hero purement typographique posé sur le champ d'étoiles. Neuf mégaoctets d'assets sont partis au passage. Le mode clair a reçu sa propre déclinaison, étoiles recalibrées pour rester lisibles sur fond pâle.

Le contenu sorti du code

La partie la plus structurante est invisible : les projets phares et les articles de ce blog sont des fichiers dans un dossier content/, édités via une interface d'admin Keystatic sur /keystatic. En production, chaque publication devient un commit GitHub automatique, et Vercel redéploie. Écrire cet article n'a demandé ni éditeur de code ni ligne de commande.

Croiser sans dupliquer

Un projet peut apparaître dans le blog d'une case à cocher, un article peut s'afficher dans la vitrine des projets phares de la même façon. Chaque contenu n'est écrit qu'une fois et sa carte pointe toujours vers sa page canonique.