Aller au contenu
Kalivins
Menu

Toutes les démonstrations

Ce site2026

Site vitrine auditable

Le site que vous lisez. La seule pièce de mon portfolio que vous pouvez vérifier vous-même, en ouvrant l’onglet réseau de votre navigateur.

Technologies
Next.js 16 · TypeScript strict · Tailwind v4 · SQLite · Docker · Caddy
Démontre
Web sur mesure
Capture de Site vitrine auditable

Le problème

Je relance mon activité sans portefeuille de clients à montrer. Or un prestataire technique se juge sur son travail, pas sur ses adjectifs. Écrire « code sur mesure, rapide et accessible » ne coûte rien et ne prouve rien : n’importe quel concurrent écrit la même phrase.

Il me fallait un argument qu’un prospect puisse contrôler lui-même, sans me faire confiance et sans compétence technique particulière.

Vérifiez-le maintenant

Vous êtes en train de le vérifier. Cette page est la démonstration, et vous avez déjà l’outil qu’il faut : celui qui est intégré à votre navigateur.

Appuyez sur F12, ouvrez l’onglet Réseau, et rechargez. Vous verrez tout ce que cette page télécharge, d’où ça vient, et combien ça pèse. Trois choses vous sauteront aux yeux.

Une seule police de caractères pour tout le site. Aucune requête vers un service extérieur, donc aucune donnée qui parte ailleurs pendant que vous lisez. Et un poids que vous pouvez comparer.

Le 13 août 2026, mesurée depuis un serveur et non depuis mon ordinateur, cette page pèse 252 ko sur téléphone, dont 0 provenant d’un tiers. Sur les 41 sites d’entreprises bisontines mesurés en août, le poids médian est de 2 668 ko, dix fois plus. Le plus lourd atteint 29,9 Mo.

Vous remarquerez aussi ce qui manque : il n’y a pas de bandeau cookies. Ce n’est pas un oubli. Un bandeau sert à recueillir votre accord pour des traceurs, et il n’y en a aucun ici : je n’ai rien à vous demander. Ce que ce choix me coûte est écrit plus bas.

Comment ça marche

Trois bibliothèques extérieures, en plus du framework. Zod pour valider les formulaires, Nodemailer pour envoyer un courriel, MDX pour écrire les textes que vous lisez. Next et React sont le framework, et se comptent à part. Le reste vient de ce que le langage fournit déjà : la base de données du formulaire, les images de partage, le formatage des prix.

Court, pour une raison pratique. Chaque bibliothèque est du code que je n’ai pas écrit et que je devrai maintenir. Quand l’une d’elles se troue, c’est votre site qui est ouvert.

Comptez maintenant ce qui envoie du JavaScript à votre navigateur : deux morceaux. Le formulaire de contact, et la navigation, qui doit savoir sur quelle page vous êtes pour le dire aux lecteurs d’écran. 400 octets. Le menu mobile ne coûte rien du tout, c’est un élément HTML prévu pour ça depuis quinze ans. Tout le reste est calculé une fois pour toutes et servi tel quel.

Votre demande de contact est enregistrée avant que le moindre courriel soit tenté. Si le serveur de messagerie tombe, vous perdez une notification et moi rien du tout : la demande est déjà en base. La plupart des formulaires font l’inverse, et c’est leur pire défaut.

Ses limites

Ce site est le seul dont je ne peux pas vous ouvrir le code. Il porte mes conventions de travail, mes brouillons et mon identité, donc il reste privé. Les autres démonstrations sont publiques et se lisent ligne par ligne. Ici, c’est le navigateur qui fait office de preuve.

Une politique de sécurité du contenu incomplète. Le framework injecte des scripts en ligne pour démarrer les pages, ce qui oblige à les autoriser. La version stricte demande de plomber un jeton unique à chaque réponse, à travers le framework. Ça vaut d’être fait ; ça ne vaut pas de prétendre que c’est fait.

Aucune mesure d’audience. Je ne sais donc pas quelles pages vous lisez, ni d’où vous venez. C’est un choix, et il a un coût pour moi.

Sous le capot

Cette section s’adresse aux curieux. Vous pouvez la sauter.

Voici les quatre lignes qui retirent les règles de design de l’outil :

@theme {
  --color-*: initial;   /* la palette par défaut n'existe plus */
  --radius-*: initial;  /* rounded-lg ne produit rien */
  --shadow-*: initial;  /* shadow-md non plus */
  --blur-*: initial;    /* ni backdrop-blur */
}

Après ça, écrire rounded-lg ou bg-blue-500 ne compile plus rien. Une règle qu’aucun outil ne vérifie finit toujours par s’éroder ; celle-ci ne peut pas.

C’est la même logique partout ailleurs. Une note en pied de tableau qui dit « ne pas utiliser telle couleur » tient trois mois. Une couleur qui n’existe plus tient indéfiniment.

Chaque décision de ce genre est documentée à côté du code qu’elle gouverne, avec la raison qui l’a motivée et, quand il y en avait une, la contrepartie acceptée. C’est exactement la documentation que je livre avec vos projets, et celle-là, vous l’aurez entre les mains.

L’essayer

Voici ce que cette page obtient, le 13 août 2026, mesuré depuis un serveur et non depuis mon ordinateur.

  • Accessibilité : 100 sur téléphone comme sur ordinateur.
  • Bonnes pratiques : 100 sur les deux.
  • SEO : 100 sur les deux.
  • Performance : 100 sur ordinateur. Sur téléphone, cinq mesures d’affilée ont donné 94, 96, 97, 99 et 99.

Ce dernier chiffre mérite qu’on s’y arrête, parce qu’il est le seul qu’un prestataire vous montrera, et le seul qui bouge. Cinq points d’écart sur une page qui n’a pas changé d’un octet entre les mesures.

Lighthouse mesure la page et la machine qui la regarde, sans les distinguer. Publier le 99 aurait été publier le meilleur tirage. Vous avez les cinq.

Ouvrez l’audit intégré à votre navigateur, l’onglet Lighthouse, et lancez-le sur cette page. Ou sur celle d’un concurrent, tant qu’à faire. Vous n’obtiendrez pas mes chiffres, et vous savez maintenant pourquoi : si votre ordinateur travaille pendant le test, le score baisse.

« SEO 100 » ne dit pas non plus que vous serez premier sur Google. Seulement que rien n’empêche Google de vous lire.

Captures

  • La grille tarifaire, prix et périmètres côte à côte
    La grille tarifaire, prix et périmètres côte à côte
  • La liste des démonstrations
    La liste des démonstrations