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
Avec ce projet, 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
Astro fournissait le support parfait via ses Content Collections. Néanmoins, ce système était prévu plus pour un affichage type blog que pour une galerie. Il m'a donc fallu 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 beaucoup (trop).
Enter Gemini
En utilisant 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.
En situation
Ecran large
Mobile
Apprentissages et Résultats
- Site fonctionnel qui expose mes collections, adapté pour gérer quelques centaines d'images.
- Reproduction fidèle de la galerie de DuckDuckGo à quelques détails prêts.
- 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 Gemini, de l'expression de besoins initiale, aux itérations jusqu'au script fonctionnel final.
- 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.