🧹 Client : DNB Services, entreprise de débarras, nettoyage et petits travaux basée à Tarbes, intervenant dans un rayon de 50 km (particuliers, notaires, agences, syndics). Site en production sur dnbservices.fr.
Le brief : rassurer en 5 secondes
Le débarras et le nettoyage sont des métiers où la confiance se joue tout de suite : on laisse un inconnu entrer chez soi, parfois dans des situations sensibles (succession, logement très encombré). L'objectif n'était donc pas de faire "joli" pour faire joli, mais de construire un site qui prouve le sérieux de l'équipe en quelques secondes de scroll, avec une preuve visuelle avant/après plutôt que de longs discours.
Résultat : un one-page dense mais très lisible, propulsé en HTML/CSS/JS vanilla — aucun framework, chargement quasi instantané, et un formulaire de devis relié à deux backends d'envoi d'e-mail pour ne jamais perdre un lead.
Ce que voit le visiteur
Les détails d'interaction — la partie invisible
Le site n'utilise aucune librairie d'animation externe. Toutes les micro-interactions sont écrites main dans main.js avec les API natives du navigateur :
Un curseur custom suit la souris avec un léger effet d'inertie (interpolation), et grossit au survol des liens. Les boutons d'appel à l'action se déplacent légèrement vers le curseur quand on s'en approche (effet "magnétique"), rendu uniquement sur les appareils avec souris (matchMedia('(hover:hover) and (pointer:fine)')).
Une fonction mesure la largeur réelle de chaque titre après chargement des polices et réduit la taille de police si un mot dépasse sa colonne — pour que "On vide. On nettoie. Vous respirez." reste toujours parfaitement centré, sur tous les écrans.
Si une image ne charge pas, un SVG de secours généré à la volée (dégradé + logo) la remplace automatiquement — le site ne montre jamais d'icône d'image cassée, même en cas de souci réseau.
Le header se compacte au scroll et se masque quand on descend (pour laisser de la place au contenu), puis réapparaît en remontant. Une fine barre de progression en haut de l'écran indique où on en est dans la page.
Envoi des devis : deux backends pour ne rien perdre
Pour un artisan, un devis qui n'arrive jamais est un client perdu. Le formulaire de contact est donc relié à deux systèmes d'envoi indépendants :
- PHP + PHPMailer — la route principale en production, avec journalisation des leads (
leads.jsonl) et une petite interface d'administration pour les consulter. - Node.js + Express + Nodemailer — un serveur alternatif, pratique en développement local et comme filet de sécurité.
Cette redondance simple garantit qu'un problème sur un environnement d'hébergement n'empêche jamais un client potentiel de joindre l'entreprise.
Stack technique
Aucun framework front. Chargement instantané, poids minimal, maintenance simple pour un site vitrine mono-page.
Animations d'apparition au scroll (reveal), compteurs de statistiques animés et déclenchement du teasing du slider avant/après.
Slider avant/après pilotable à la souris, au doigt et au clavier (flèches gauche/droite), avec support ARIA pour l'accessibilité.
Traitement du formulaire de devis en production, avec journalisation des leads et espace admin dédié.
Backend alternatif pour l'envoi d'e-mails, utilisé en développement et comme solution de secours.
Formats optimisés pour la performance, avec génération d'un visuel de secours si une image ne charge pas.
Ce que ce projet démontre concrètement
DNB Services n'est pas une démo : c'est un site en production, pour un vrai client, avec de vrais devis à traiter. Il montre qu'un artisan multiservices peut avoir une vitrine au niveau d'une grande enseigne — animations soignées, preuve visuelle avant/après, formulaire fiable — sans passer par une agence ni un budget à cinq chiffres.
Vous êtes artisan ou entreprise de services ?
Ce type de site — vitrine premium, preuve visuelle, formulaire de devis fiable — peut être adapté à votre métier. Discutons-en.