Contexte
Passionné par les polices de caractères et le street art, je capture et collecte des photos, qui s'accumulent sur mon téléphone depuis des années.
Je me suis donc lancé dans le développement d'une galerie virtuelle, calquée sur celle de DuckDuckGo que j'aime beaucoup, pour exposer toutes ces images capturées au fil du temps.
Challenge
Je visais plusieurs objectifs :
- Aiguiser mes compétences en développement web
- Créer une galerie performante et esthétique
- Gérer efficacement de nombreuses images
- Approfondir l'approche composants en web
Bien sûr, cette galerie se devrait d'être utilisable sur téléphone et écran large.
UI Design
Les images capturées sont très colorées, il était donc essentiel ne de
pas perturber le visionnage et d'avoir une charte graphique neutre.
Ici, seulement 3 couleurs : un fond gris, le blanc pour les textes
et un fond plus clair pour les états "hover" et "active".
Itération 1
Choix de la stack
Sur les conseils d'un ami développeur front-end, Guillaume Denier, j'ai choisi Astro comme framework pour créer cette galerie. Génération statique, proche des standards web, approche composants accessible : parfait pour un développeur non-professionnel qui veut monter en compétences progressivement.
Promesses tenues !
Hébergement sur GitHub Pages
Le code est hébergé sur GitHub. Galleries est un site statique, je n'y collecte aucune donnée. L'hébergement sur GitHub Pages était un choix naturel compte tenu du pipeline CI/CD totalement intégré.
Organisation des collections par thème
Les 2 galeries reposent sur les Content Collection de Astro. Et pour bénéficier d'une meilleure connaissance du système, l'une est en markdown, l'autre en JSON.
Développement d'une galerie responsive
Les Content Collections de Astro sont parfaites pour un blog. Mais pour ce projet, j'ai dû développer en TypeScript tout le fonctionnement de la galerie : gestion du format des images (portrait vs paysage), gestion de la navigation, gestion du clavier, etc.
Itération 2
Constat : La flemme
Au fil du temps, les images s'accumulaient quand même beaucoup sur mon téléphone, et ma motivation pour les ajouter au site baissait. Modéliser mon propre "user journey" m'a éclairé. Le traitement d'une image me prend beaucoup trop de temps : ouvrir l'image, récupérer sa position, chercher cette position sur OpenStreetMap, puis renseigner les métadonnées associées dans un fichier Astro créé pour l'occasion, redimensionner l'image et la compresser. C'est très (trop) long.
Enter Gemini
Avec Gemini, j'ai pu créer en 2 heures de travail un script qui me soulage au maximum de toute la partie chronophage. Une fois les images sur mon ordinateur, le script se charge de tous les traitements. Je n'ai plus qu'à renseigner ce qu'il ne peut pas faire à ma place.
Itération 3
Constat : La flemme bis
Malgré le script, je me suis surpris à toujours accumuler les photos. Certes, le script accélère le process global, mais pas assez pour m'inciter à publier plus rapidement mes images.
Ce que le script écrit avec Gemini fait :
- Scanne le dossier inbox
- Redimensionne les images
- Extrait la géolocation et la date de shooting
- Crée les fichiers Astro nécessaires pour les nouvelles images
Mais restait à ma charge :
- De transférer les photos de mon dossiers Downloads dans inbox
- D'ajouter un nom aux photos
- Renseigner les métadonnées
Et comme il fallait faire ça image par image, c'est là que je perdais encore du temps.
Bonjour Claude, ça skill ?
Avant de parler de Claude, j'ai décidé de supprimer le nom des images, qui ne rimait à rien, et de mettre en avant les artistes et le type des fonts.
Puis, avec Claude, j'ai rédigé un SKILL qui prend en charge toute la partie pénible et répétitive de l'ajout des images sur le site.
- Transférer les images du dossier Downloads vers inbox
- Lancer un sous agent pour caractériser les images, le sous agent est par exemple en mesure de déterminer si une font est serif ou sans-serif. Quel gain de temps !
- Pour les oeuvres de street art, le sous agent est aussi capable d'identifier la signature de l'artiste
- Valider l'ajout des images
Le gain est aussi dans la manière dont le workflow s'exécute. Au lieu d'avoir à modifier chaque fichier individuellement, Claude me fait une liste de propositions, que je valide, amende, ou refuse, en une seule passe.
En situation
Ecran large
Mobile
Apprentissages et Résultats
- Compétences TypeScript renforcées : typage, gestion d'événements, responsivité.
- Expérience concrête de développement augmenté par l'IA (vibe coding), ici avec Claude et Gemini, de l'expression de besoins initiale au script fonctionnel final.
- Expérience concrête de mise en oeuvre de l'IA agentique via le SKILL Claude, qui orchestre toute la procédure d'ajout de nouvelles images.
- Ce projet m'a permis de rencontrer certains des artistes exposés ici, comme Ador, Ratz One et Stend, que je remercie pour m'avoir autorisé à reproduire leur travail.