Le contexte
Floflotographie est un portfolio de photographie sportive. Le site rassemble les images par discipline: athlétisme, sports mécaniques, hockey sur glace et lifestyle. Le visiteur peut parcourir les galeries, lire une page à propos, consulter les projets récents et suivre le compte Instagram du photographe. L'ensemble est disponible en français et en anglais.
Le besoin de départ était simple: laisser les photos occuper l'espace sans sacrifier la vitesse sur mobile. Un portfolio photo accumule vite des fichiers lourds, et une galerie mal préparée transforme une belle image en page lente. Nous avons donc traité la performance comme une contrainte de conception dès le premier écran.
Une mise en page éditoriale
La page d'accueil place un grand titre derrière une photographie. Le contraste entre le texte et l'image change selon la photo, mais la structure reste lisible. Les pages par discipline alternent les blocs de texte et les grilles d'images. Chaque catégorie affiche son nombre de photographies, par exemple 49 images pour l'athlétisme, ce qui donne une idée du volume avant d'entrer dans la galerie.
Les transitions sont courtes, le mode sombre suit la préférence du système et la navigation reste la même d'une page à l'autre. Le site ne cherche pas à imiter une application. Il garde une logique de portfolio: une entrée claire, des séries identifiables et des images qui prennent le dessus sur l'interface. La page projets reprend les publications avec des couvertures générées par le même script que les galeries.
Le parcours reste court: une page d'accueil, quatre thèmes, une page à propos et une page projets. Le fil d'Ariane, le compteur de photos et le lien de retour aux thèmes donnent des repères sans ajouter de menus. Sur mobile, la grille se resserre, les titres gardent leur hiérarchie et les images se chargent à la taille de l'écran.
Le travail se passe avant le navigateur
Le script d'images est la pièce centrale du projet. Il lit les fichiers JPG sources et génère quatre largeurs en AVIF et en WebP, plus une version JPG de secours. Il écrit aussi des manifestes typés par thème et un visuel de remplacement dans les métadonnées de chaque image.
Ce traitement a deux conséquences. D'abord, les pages ne chargent que les visuels qu'elles affichent, avec des dimensions connues à l'avance, ce qui évite les décalages pendant le chargement. Ensuite, le script ne retraite que les fichiers modifiés et supprime les dérivés qui ne correspondent plus à une source. Le build reste donc prévisible, même quand le portfolio grossit.
Chaque page possède ses métadonnées, ses données structurées Schema.org et une image Open Graph générée à la volée. Les moteurs de recherche et les partages sociaux reçoivent une image adaptée sans intervention manuelle. La version anglaise reprend les mêmes pages avec ses propres textes et ses propres métadonnées.
Le script tourne en amont du build, pas à la demande du navigateur. Un visiteur ne déclenche donc jamais de conversion d'image, et le serveur ne fait que servir des fichiers déjà prêts.
Le socle
Le site repose sur TanStack Start, React 19, TypeScript, Tailwind CSS v4 et Paraglide JS pour les deux langues. Le rendu serveur passe par Nitro sur un serveur Node. Les routes publiques sont prérendues, et les images suivent le pipeline Sharp décrit plus haut.
Le code reste volontairement proche du contenu. Les galeries lisent les manifestes, les pages de discipline partagent la même structure et les composants d'image exposent les tailles disponibles. Il n'y a pas de base de données à maintenir pour publier une nouvelle série.
Résultat
Ajouter des photos revient à déposer des fichiers dans un dossier. Le build s'occupe des formats, des tailles et des manifestes, puis les galeries se mettent à jour. Le portfolio garde une page légère sur mobile tout en affichant les images en grand sur écran large.
Le site est en ligne sur floflotographie.be.
