Alwaysdata Catalyst
Catalyst pour Alwaysdata .
Le projet
Alwaysdata Catalyst est une nouvelle offre d'accompagnement au choix d'hébergement sur mesure.
Le site est une vitrine pour présenter cette nouvelle offre.
Direction Artistique / Maquettes : Olivier Bergère.
TL;DR
- Intégration statique ;
- HTML et CSS (Sass) ;
- Javascript (ES5) ;
- Animation SVG ;
- Node.js, NPM et Gulp ;
- Git, Github (+ Github Actions).
Mon rôle
Je dois fournir au client une intégration qui sera apposé ensuite sur un générateur de site statique (11ty). La vitesse de chargement étant très importante pour Alwaysdata, je vais devoir mettre en œuvre des solutions pour la performance et faire des choix sur certains point sur lesquels j'ai habituellement un peu plus de liberté sur d'autres projets.
En détails
Le site comprend une page d'accueil et une page d'étude de cas. Pour faire la promotion de cette nouvelle offre, un encart sera mis en place sur le site principal d'Alwaysdata.
J'ai profité durant ce projet de découvrir et mettre en place Github Actions pour faire une intégration continue avec une tâche de linter, une pour Prettier et une tâche Rsync pour synchroniser les fichiers sur le serveur.
La vitesse de chargement du site est primordiale pour Alwaysdata, j'ai limité sur ce projet l'utilisation de librairies JavaScript. C'est un bon exercice pour réfléchir à faire des composants et comportements le plus nativement possible en HTML, CSS, tout en gardant un site accessible. Le site reste également fonctionnel et lisible même sans l'aide de JavaScript si celui-ce n'est pas chargé ou désactivé.
Olivier, le Directeur Artistique du projet, a proposé de faire des animations sur les principales illustrations. J'ai donc animé ces illustrations SVG qui se lancent lors de leurs apparitions au scroll, il s'agit d'animations d'apparition d'éléments en fade-in, et de dessin de lignes.