Le problème des pages de recrutement
Personne ne se lève le matin avec l'envie de lire les valeurs et les effectifs d'une entreprise. NAC avait besoin que sa section recrutement change la donne, qu'elle projette suffisamment de modernité et de soin pour que des ingénieurs aient réellement envie de postuler. Le designer a mis le paquet : des animations personnalisées sur chaque page, un slider pleine page pour la page d'accueil, chaque section avec son propre code couleur. J'avais environ un mois pour tout concrétiser.
Un slider que j'apprécie vraiment
En général, je n'aime pas les sliders. La plupart du temps, c'est le signe que personne n'a su décider quoi mettre en premier sur la page. Celui-ci est différent. Chaque slide a son propre petit univers d'animations et de détails visuels, plus proche d'une visite guidée que d'un carousel paresseux. J'ai utilisé GSAP pour les animations et Vivus pour dessiner l'illustration SVG principale à l'écran.
Les graphiques de la page À propos
La page À propos devait présenter les données de l'entreprise d'une manière qui ne fasse pas fuir les gens. J'ai construit la plupart des graphiques animés from scratch pour correspondre au design. Les graphiques en camembert utilisent Chart.js. Pas question de les coder à la main.
Des transitions de page qui m'ont marqué
C'était ma première fois avec des transitions de page animées, et j'ai accroché. J'ai utilisé Highway.js pour changer de page sans rechargement complet, puis j'ai ajouté des animations de transition par-dessus. Le meilleur : les transitions sont codées par couleur. Elles mélangent la couleur de la page que l'on quitte avec celle vers laquelle on se dirige. C'est le genre de détail que la plupart des gens ne remarqueront pas consciemment, mais qui donne l'impression que le site entier est une seule chose continue plutôt qu'un ensemble de pages séparées.
Le reste
WordPress gère le routage et le formulaire de contact. J'ai configuré les serveurs de staging et de production. Le site est toujours en ligne aujourd'hui.