Kingsbury Creative
Le défi
On avait besoin d'un site qui démontre tout ce qu'on dit aux clients qu'on peut faire — sans utiliser aucun des outils qu'on leur dit de ne pas utiliser. Pas de WordPress, pas de constructeurs de pages, pas de frameworks. Le site lui-même devait être le portfolio.
Il devait aussi être entièrement bilingue (anglais et français), assez rapide pour bien scorer sur les Core Web Vitals, accessible, et visuellement assez distinctif pour se démarquer de tous les autres sites d'agences dans la vallée de l'Outaouais.
L'approche
On a écrit chaque ligne à partir de zéro. PHP 8 gère le routage et l'i18n bilingue avec des préfixes d'URL (/en/, /fr/). Vite compile le CSS et JavaScript avec remplacement de modules à chaud pendant le développement.
La section héro présente une animation canvas sur mesure — les « Build Lines » — avec des lignes ondulées, des points voyageurs qui s'illuminent en traversant des nœuds, et une interaction à la souris. GSAP et ScrollTrigger alimentent toutes les animations liées au défilement : sections de processus épinglées, révélations de sections, et le morphing des panneaux de services.
Lenis fournit un défilement fluide synchronisé avec ScrollTrigger. Le système de design vit dans des propriétés CSS personnalisées — on change un fichier et tout le site change de thème.
Le résultat
Le site se lance avec un poids total de page sous les 400 Ko (après optimisation des images), des polices auto-hébergées, zéro requêtes bloquantes, et un score Lighthouse de performance dans le vert.
Il est entièrement bilingue avec des balises hreflang appropriées, accessible selon WCAG 2.1, et inclut des œufs de Pâques pour les curieux (voir le code source, essayez le code Konami, ou demandez pour la Vallée).
Le site est le portfolio. Chaque animation de défilement, chaque interaction, chaque décision de design est une démonstration en direct du travail qu'on fait pour les clients.