Un SaaS B2B en forte croissance au service d'équipes marketing internationales. Le nom du client, son produit et son identité visuelle ont été remplacés sur ce livrable par une marque fictive, Hoooz, pour préserver la confidentialité. Tout ce qui est montré sur cette page est le vrai travail technique, appliqué à un produit substitut.
Lancer un site marketing qui parle à cinq marchés dès le jour un, sans équipe dev en interne, sans abonnement mensuel Webflow ou HubSpot, et sans sacrifier les Core Web Vitals. Le contenu doit pouvoir être édité par des non-développeurs. Les traductions doivent rester synchronisées. Les performances doivent tenir au fil des ajouts de pages.
Générateur de site statique écrit en Node vanilla, zéro dépendance. Accueil, à propos, tarifs, contact, mentions légales, confidentialité et 404, chacun traduit en EN, FR, DE, ES et IT. CMS Decap connecté à git. Déploiement Netlify avec redirects edge et détection de langue. Formulaire de contact avec protection honeypot. Couverture JSON-LD complète, hreflang réciproque et sitemap.
Chaque texte, chaque traduction, chaque prix vit dans des fichiers JSON que le client peut modifier via une interface visuelle. Un petit script Node lit tout au moment du build et écrit 31 fichiers HTML statiques. Le navigateur reçoit du HTML pur, une feuille de style, un script. Aucun runtime de framework, aucune hydratation, aucune cascade. Le site charge en moins d'une seconde en 4G et reste à ce niveau quand le contenu grandit.
Cinq langues. Une source de vérité. Zéro framework.
Le contenu vit dans huit fichiers JSON, un par page, chacun contenant un objet imbriqué par langue. Le pipeline de build, un seul script Node sans dépendance npm, lit le JSON et écrit un fichier HTML par page et par langue. Trente-et-un fichiers statiques au total, générés en moins d'une seconde.
Chaque page embarque des balises hreflang réciproques, une URL canonique, des métadonnées Open Graph dans le bon format de locale et des données structurées JSON-LD. Le sitemap énumère toutes les paires de langues pour que Google comprenne quelle version servir à quel marché. Aucun élément de la configuration multilingue ne dépend d'un outil tiers.
Un site statique n'a de valeur que si les gens qui connaissent le produit peuvent le mettre à jour. L'interface d'administration est Decap CMS, open-source, adossée à git. Le client se connecte, modifie une page, clique sur publier. Un commit arrive sur la branche principale. Netlify détecte le changement, lance le build, redéploie les 31 pages.
Aucun développeur entre une coquille et sa correction. Pas de base de données CMS à maintenir. Pas de plugin à mettre à jour. Chaque traduction est un champ JSON isolé avec un libellé clair, validé par le schéma défini dans la configuration de l'admin. Le workflow éditorial est optionnel : les changements peuvent partir en prod immédiatement ou passer par une PR de relecture.
Scores Lighthouse mesurés sur le build Hoooz en production. Au vert, par construction.
Performance
Accessibilité
Bonnes pratiques
SEO
Comment ces chiffres sont atteints
Un script principal de 557 lignes gère toute l'interface : progression de scroll, révélations mot à mot, compteurs animés, un terminal qui cycle entre les états SCANNING, LOCKING, DEPLOYED, un toggle de tarification qui glisse entre mensuel et annuel et change de devise en place, un cursor blob qui suit le pointeur et s'adoucit sur les éléments interactifs, des boutons magnétiques qui attirent vers la zone de clic.
Chaque animation repose sur IntersectionObserver ou requestAnimationFrame, chacune respecte prefers-reduced-motion. Pas de bibliothèque d'animation, pas de framework, pas de moteur physique. Juste la plateforme.
Le site est construit mobile-first et s'adapte via douze breakpoints entre 600px et 1280px, en propriétés logiques CSS, typographie fluide par clamp() et espacement conscient du conteneur. Aucun code mobile séparé. Aucune avalanche de media queries. Le même markup sert tous les écrans.
Hoooz est livré comme un site marketing qui charge en moins d'une seconde, score 99 en performance Lighthouse, et peut être édité par n'importe qui dans l'équipe du client sans toucher une ligne de code. La stack est délibérément ennuyeuse : HTML, CSS, JavaScript, un script Node pour le build, un CMS adossé à git, un host statique. Aucun framework à migrer quand les versions changent. Aucun abonnement mensuel de plateforme. Aucune dépendance à pourrir dans dix-huit mois. Le site fonctionnera encore, et scorera encore, dans trois ans. C'est tout l'intérêt de sites codés à la main, appartenant au client.
Hoooz®
Site SaaS marketing multilingue.
Pyrene®
Nutrition française pour l'ultra-endurance.
Le Courti®
Maison d'hôtes en bord de mer.
Menao®
App B2B pour artisans et professionnels.
Ultra Bike France®
Série d'événements d'ultra-cyclisme français.
Pace®
Coaching triathlon et sports d'endurance.
Parlez-m'en — je reviens vers vous sous 24 heures avec une proposition d'appel découverte gratuit.
Pas encore prêt ?
Parcourir les autres projets ↑