Projet
Bat-ordinateur
Le site web du bat-ordinateur. Rien de moins.
Genèse du projet
Ce n’est pas un site web. Ce n’est pas un portfolio. C’est un manifeste.
Ce site Web est une expérience narrative et interactive inspirée de l’univers de Batman. Chaque page, chaque animation et chaque ligne de texte est pensée comme une entrée confidentielle dans le Bat-ordinateur. Ce projet fusionne storytelling, design et code pour créer un portfolio qui ne se montre pas — il se révèle.
Technologies utilisées
Tout l’aspect CSS est soit avec TailwindCss ou fait dans des fichiers sass. Des animations sont créées par du CSS, du JavaScript et GSAP. Le site est construit en tant que PWA. Et c’était la première fois que j’utilisais de l’audio dans du HTML.
Défis rencontrés
En utilisant des composants déjà faits en tailwind, plusieurs fois j’ai dû refaire le design pour qu’il se colle à l’esprit du site. De plus, le code trouvé sur des sites de composants fiables ne respectait pas les exigences de la vérification du HTML par le site de w3c. J’ai aussi mis en place une animation trouvée sur le site de Codepen qui m’a donné aussi un bon défi d’adaptation.
Ce que j’ai appris
Parfois il est plus rapide de coder soi-même les composants ou les animations que d’en prendre des toutes faites et de les adapter. J’ai joué le jeu et j’ai respecté les exigences demandées. Tout l’aspect PWA fut aussi un bon défi et je suis content d’avoir mis en place cette possibilité.
Historique
Projet collégial
C’est dans le cadre d’un l’AEC en développement Front-end que j’ai eu à réaliser ce projet. Ce travail correspond au projet final pour le cours d’intégration d’interface 1 et 2.
Le sujet pouvait aborder n’importe quel thème, mais on devait respecter les exigences de base.
Connaissant le côté “gamer” de l’enseignant, j’ai décidé d’y aller d’une création Web en cachant quelques easter eggs ici et là, dans le but d’agrémenter sa correction.
Le code
HTML, CSS, JS
Au niveau du code, il n’y a rien de remarquable. Le HTML et le CSS devaient répondre aux exigences du valideur de W3C. Le JavaScript était surtout demandé pour la validation du formulaire, mais, dans mon concept, j’ai eu à élaborer davantage le code pour effectuer quelques effets spéciaux.
Animations
J’ai utilisé plusieurs types d’animations. Tout d’abord, dans la présentation, j’ai intégré une animation GSAP de texte de type machine à écrire. J’ai repris le code à cet endroit et je l’ai extrapolé pour chaque ligne nécessaire. Le tout a été intégré dans une timeline.
Un autre endroit où GSAP m’a été utile est la section Entrée #002 de la page d’accueil. J’ai utilisé ScrollTrigger pour déclencher le ScrambleTextPlugin sur les mots “Analyse en cours…”, donnant l’effet que le système est en recherche.
Une animation dont je suis fier, mais elle ne vient pas de moi, c’est le carrousel de la page arsenal. Il est construit à partir d’un code trouvé sur Codepen. J’ai personnalisé les boutons en fonction de mon esthétique, en ajoutant un bouton « pause » pour permettre la lecture.
Les composants Tailwindcss
Sur la page arsenal.html, dans la section des véhicules, se trouvent deux composants Tailwind: les cartes et les modales.
J’ai eu de petites surprises en utilisant ces composants proposés par Tailwindcss Plus. Leurs constructions HTML soulèvent des erreurs dans la validation par le valideur W3C. J’ai fait le choix de les assumer. Ces erreurs ne font aucune différence dans le résultat final.
C’est à ce moment-là que je me suis dit: vive mes codes!
Fonctionnalités
Des surprises
En plus des animations, du style visuel et de l’ambiance générale, ce projet ne serait pas complet sans quelques effets spéciaux. J’ai eu beaucoup de plaisir à enregistrer des entrées de journal audio pour enrichir l’expérience.
J’ai aussi conçu une façon ludique d’accéder au formulaire principal. Si vous réussissez à vous identifier correctement, une page bonus se débloque. C’est une petite récompense cachée pour les plus curieux.
Le site intègre également des effets de suivi du curseur en JavaScript, ainsi qu’un déclenchement audio sur une page mystère. Ces éléments sont là pour surprendre, amuser, et pousser à explorer plus loin.
À vous de les découvrir.
PWA
Une des exigences du projet était de rendre ce site téléchargeable. C’était la première fois que j’apprenais l’existence des PWA et la façon de les créer.
Un outil de plus dans mon arsenal!