Aller au contenu
Business Agile
Réalisations
Web · Projet artistique, photographie · sept. 2026

FabArto

Une page d'attente outillée comme un vrai site, prête à devenir le portfolio d'un artiste.

Lighthouse bureau · mesuré le 22 septembre 2026

86
Performance
100
Accessibilité
100
Bonnes pratiques
100
SEO
LCP
2,5 s
Largest Contentful Paint
CLS
0
Cumulative Layout Shift
TBT
0 ms
Total Blocking Time

FabArto est le projet artistique de Fabrice LABIT, photographe parisien pour qui j'ai aussi réalisé le site de Maison Ozaé. Le site fabarto.eu est aujourd'hui une page d'attente : une image plein écran, le nom du projet et deux liens, vers Patreon et Instagram. Le besoin était modeste en apparence : occuper le domaine proprement le temps que l'œuvre prenne forme, sans devoir tout reconstruire le jour où le vrai site arrivera. Il fallait donc une page légère aujourd'hui, mais posée sur des fondations capables de porter demain un portfolio complet, avec ses galeries et son référencement.

En images

Page d'attente FabArto sur mobile
Sur mobile, l'image se recompose et les liens vers Patreon et Instagram restent visibles.

Le projet en détail

J'ai créé la première version en avril 2025 avec Vite, React et Tailwind CSS, puis je l'ai placée derrière Traefik en juin 2025, sur le même serveur OVH que maisonozae.eu. La page s'adapte à tous les écrans, avec des textes et une image qui se recomposent du téléphone au grand écran.

En septembre 2026, j'ai migré la page vers la pile que j'utilise sur tous mes sites : TanStack Start, Tailwind CSS v4 et TypeScript, avec des balises head gérées par route. Elle servira de base au futur site, qui pourra grandir page par page sans changement d'outillage. C'était aussi l'occasion de mettre en place la chaîne complète sur un projet très petit : image Docker servie par nginx sous un utilisateur non root, déploiement par environnement derrière Traefik, test du composant d'accueil et pipeline de vérification sur chaque merge request, découpée en trois jobs parallèles pour le lint, les tests et le typage.

Plusieurs règles que j'applique désormais sur tous les projets viennent de celui-ci. Le fichier de routes généré par TanStack Router doit être versionné, sinon le build casse sur un clone propre alors qu'il passe en local. L'utilisateur nginx doit être rattaché explicitement à son groupe, faute de quoi le processus tourne avec un mauvais identifiant sans que rien ne le signale. Et une pipeline qui ne vérifie le code qu'après la fusion arrive trop tard : la vérification doit tourner avant.

Ce projet illustre la maintenance telle que je la conçois : même une page d'une seule route mérite un déploiement reproductible et des contrôles automatiques, parce que c'est ce qui permet de la faire évoluer sans risque. Le jour où FabArto deviendra un portfolio complet, le socle sera déjà là, testé et en production.

Ce qui a été fait

  1. 01

    Page d'attente responsive, image plein écran et liens Patreon et Instagram

  2. 02

    Migration vers TanStack Start, base du futur site

  3. 03

    Image Docker nginx sous utilisateur non root

  4. 04

    Déploiement par environnement derrière Traefik

  5. 05

    Lint, tests et typage vérifiés sur chaque merge request

Questions fréquentes

Pourquoi industrialiser une simple page d'attente ?

Parce qu'elle deviendra un site : poser dès le départ le déploiement, les tests et la vérification automatique coûte peu sur une page unique et évite de le faire dans l'urgence le jour où le site grandit.

Qu'est-ce qu'une pipeline de vérification sur merge request ?

Ce sont des contrôles lancés automatiquement avant toute fusion de code, ici le lint, les tests et le typage en trois jobs parallèles. Une erreur est ainsi détectée avant d'atteindre la branche de développement, et non après.

peut-on héberger une petite page statique de façon fiable ?

FabArto tourne dans une image Docker nginx sur un serveur OVH, derrière Traefik qui gère le certificat HTTPS. Le même serveur héberge d'autres sites, chacun isolé dans son conteneur avec son propre déploiement.

Autres réalisations

Un projet ? Parlons-en cette semaine.

Un brief court, une réponse sous 48 h, une estimation ferme après cadrage.

Décrire mon projet