Ce site

Je voulais un site qui fait ce que je fais au quotidien : ouvert, sobre et sous mon contrôle. Pas de cookies, pas d’analytique, rien qui vienne du serveur de quelqu’un d’autre.

Il devait aussi fonctionner en français et en anglais, parce que je travaille dans les deux langues, et je devais pouvoir continuer à le modifier moi-même.

J’ai choisi Astro parce qu’il produit du HTML simple : la page est lisible avant même qu’un script s’exécute. Tailwind et Untitled UI me donnent les tokens de design, et les polices sont hébergées sur le site, donc aucune requête ne part vers un fournisseur de polices.

Il tourne chez OVHcloud, un hébergeur français, sur un nom de domaine qui m’appartient. Rien n’y est attaché : le build est statique et peut aller chez n’importe quel hébergeur. Une politique de sécurité stricte bloque tout ce que je n’ai pas prévu, c’est donc le navigateur qui me prévient quand je me trompe.

Je voulais qu’il ressemble à la fois à un lieu et à un outil. Le fond est chaleureux, avec des pastilles vert sauge et de douces courbes de niveau. Le contenu est rangé dans de petits panneaux d’instrument, avec des bordures fines, des étiquettes en mono et des LED. Le panneau de fiche technique de cette page en fait partie.

L’accueil est un tableau de bord vivant : une horloge, la position réelle du soleil au-dessus de Montpellier, depuis combien de temps je travaille dans les projets numériques, et le poids de la page elle-même. Tout est calculé dans votre navigateur à partir de l’heure. Rien n’est téléchargé.

Je voulais qu’il soit vivant sans fatiguer. Les instruments bougent par petits pas, les effets d’arrière-plan suivent votre défilement, et un interrupteur dans l’en-tête coupe tout. Par défaut, il suit aussi le réglage de réduction des animations de votre système.

Je vise le niveau AA des WCAG 2.2 et je le teste, mais je ne prétends pas que le site est conforme : cela demande de vraies personnes et de vraies technologies d’assistance. J’ai utilisé des éléments natifs partout où c’était possible, et la couleur ne porte jamais seule une information.

J’ai fixé des budgets et fait échouer le build quand je les dépasse : environ 135 Ko pour l’accueil, pour une limite de 230, aucune requête tierce, aucun style en ligne. Il y a aussi des contrôles d’accessibilité et de typographie française, comme l’espace insécable avant un deux-points ou un point d’interrogation.

Ils ont attrapé de vraies erreurs. Des styles en ligne passaient sur mon serveur de développement et ont été bloqués par la vraie politique de sécurité une fois le site en ligne.

Deux effets utilisaient des fonctions de défilement que les navigateurs basés sur Firefox n’ont pas, donc le schéma du périmètre et la frise du parcours ne faisaient rien. Je les ai réécrits en script pour qu’ils marchent partout. Sur téléphone, la page saccadait aussi au défilement, donc les gros shaders d’arrière-plan restent désormais éteints sur les écrans tactiles.

La carte de visite 3D est désactivée le temps que je la mette à jour.