kevin-dev.com

Ce site, c’est la troisième version de mon portfolio. Les deux premières, je les ai faites en suivant des tutoriels YouTube, la première en 2021, pendant mon DUT, et la deuxième en 2022. C’est vraiment comme ça que j’ai appris le HTML, le CSS et le JavaScript : reproduire, casser, comprendre pourquoi ça casse, recommencer. Sur la deuxième, je commençais à mettre ma touche, comme le thème sombre automatique ou mon âge qui se met à jour tout seul. Elle m’a servi plus de quatre ans.

Les deux étaient des sites statiques, sur Netlify. Pour changer une ligne, j’ouvrais le HTML, je modifiais le texte à la main, je poussais sur Git et j’attendais le redéploiement. Ça va pour mettre son CV à jour une fois par an, mais dès qu’on veut écrire, ça devient vite pénible. Je voulais pouvoir ajouter un projet ou écrire un article depuis une interface, sans toucher au code.

Cette troisième version, c’est le site que vous lisez : mes projets, les technos que j’utilise, mon CV et un formulaire de contact, en français et en anglais. Il sait aussi tenir un blog et une liste d’interventions. Derrière, il y a une administration rien que pour moi, protégée par une double authentification. Le code est public sur GitHub.

Écrire sans toucher au code

C’est la partie que personne ne voit, et celle qui m’a demandé le plus de travail. Au départ, l’éditeur avait un bouton pour afficher l’aperçu du Markdown. Deux jours après le début du projet, je l’ai fait remplacer par un éditeur où j’écris normalement, avec Ctrl+B, Ctrl+I, les tableaux et les images, et d’où je peux passer à tout moment sur le Markdown brut, en couleur. Les deux vues travaillent sur le même texte, l’une avec Tiptap, l’autre avec CodeMirror. Voilà le formulaire de ce projet, avec le choix entre les deux juste au-dessus de la barre d’outils :

Une image glissée ou collée part dans la médiathèque, qui la convertit en WebP en plusieurs tailles, et l’éditeur me demande son texte alternatif. Pour relire un brouillon, je n’ai pas d’adresse de prévisualisation à part. Une fois connecté, je le vois à sa vraie adresse, avec un bandeau.

Ce qu’il y a dedans

Le site tourne sur AdonisJS, d’abord parce que je voulais tester une autre techno. J’avais déjà fait plusieurs projets avec Next.js, et j’avais envie d’un framework plus classique, qui fournit d’origine son ORM, sa validation et ses sessions. Ce qui m’a convaincu, c’est surtout ce qu’il y a autour. La doc est claire et à jour, les mainteneurs annoncent leurs choix à l’avance, et la communauté est petite mais présente. Pour un site que je veux garder des années, cette stabilité compte plus que la nouveauté.

Pour l’architecture, je suis parti du site de Romain Lanz, un des mainteneurs d’AdonisJS. Le front est en React, sans API au milieu. Avec Inertia, chaque contrôleur passe ses données directement à sa page, avec des types partagés d’un bout à l’autre. Le site n’a qu’un seul client, alors une API interne aurait juste été un contrat de plus à maintenir.

Le Markdown est rendu en HTML quand j’enregistre, pas à chaque visite. Le rendu passe par remark et rehype, avec Shiki pour la coloration du code, et les pages publiques ne lisent que ce HTML déjà prêt. Si je change la façon de rendre le Markdown, je dois réenregistrer mes contenus, et c’est voulu, comme ça le HTML en ligne est toujours celui que j’ai relu.

Un style à moi

Après deux versions tirées de tutoriels, je voulais un design à moi. Le résultat est sobre, avec un fond presque blanc, de l’encre sombre et une seule couleur, un rouge profond pris au rideau derrière moi sur la photo de l’accueil. Il y a aussi un thème sombre, qui suit celui de l’appareil, et les polices sont servies par le site lui-même.

Sur mon serveur

C’est un des premiers sites que je gère de A à Z. Avant, mes sites étaient sur Vercel ou Netlify, qui s’occupaient de tout. Pour celui-ci, je voulais tout faire moi-même, avec mes propres services, ma base de données et mes sauvegardes, et c’était un bon site pour commencer. Il tourne sur mon VPS, sous Dokploy, à côté de mes autres projets, et les visites sont comptées par ma propre instance d’Umami.

Travailler avec Claude

Le site est fait avec Claude Code depuis le premier jour. Le 21 juillet au soir, je lui ai décrit ce que je voulais et les technos auxquelles je pensais, en lui demandant de me poser plein de questions sur l’architecture avant d’écrire quoi que ce soit. On en a tiré un cahier des charges. Le lendemain, on a cherché le design ensemble, en partant de ce que je voulais voir sur l’accueil, et le 23, le site était en ligne.

Fin août, Romain Lanz a publié un boilerplate pour construire une application AdonisJS avec des agents de code. Je voulais un code assez rangé pour que Claude sache tout seul où créer et où retrouver les choses, alors j’en ai repris une bonne partie. Le métier est sorti des contrôleurs, et chaque lecture de la base a maintenant un nom et son propre fichier, au lieu d’être noyée dans deux cents lignes de contrôleur.

Les choix d’architecture sont écrits dans des ADR, de petites notes qui disent ce qui a été décidé et pourquoi, et chaque couche du code a ses propres consignes pour Claude, lues seulement quand on y touche. Tout ce qui peut se vérifier est aussi devenu une règle de lint. Le client ne peut rien importer du serveur, useMemo est refusé puisque le compilateur React s’en occupe déjà, et le tiret cadratin aussi.

Le boilerplate est en monorepo, avec un design system à part, et il remplace Lucid, l’ORM d’AdonisJS, par Kysely. J’y ai pensé, et j’ai laissé les deux de côté. shadcn/ui est fait pour vivre dans le projet, et le site est le seul à utiliser ses composants. Kysely aurait changé le moteur sans rien ranger. Maintenant que chaque requête a son fichier, je pourrai toujours le changer un fichier à la fois.

Il y a eu des ratés, évidemment. Début août, des tests lancés sans leur configuration ont tourné sur la base de développement, et à la fin, toutes ses tables avaient disparu, sans un message. Depuis, les tests refusent de démarrer si le nom de la base ne finit pas par « _test ».

Les décisions, elles, restent les miennes : les technos de départ, l’éditeur, l’aperçu à la vraie adresse, ce que j’ai repris du boilerplate et ce que j’ai laissé.

Où en est le site

Le site est en ligne depuis le 23 juillet 2026. Pour l’instant, j’y ai mis mes projets, et le blog attend son premier article. J’espère qu’il vous plaira. Si vous voulez échanger, me poser une question ou simplement dire bonjour, la page de contact est là pour ça.