TimTools
Projet réalisé en 2023
Web | Projet Étudiant
Ma boîte à outils est une plateforme en ligne que j'ai créée pour améliorer ma productivité.
Réalisé par : moi-même
Tous les composants ont été créés par moi !
Logiciels que j’ai utilisés :
VS code
Le contexte !
Dans le cadre de ma formation, j'ai développé un site web mettant en lumière les compétences acquises au cours de mes études. Le projet présente des exemples concrets tels que l’effet "scrolly" pour des transitions fluides, un en-tête fixe pour une navigation intuitive, ainsi que des sections dynamiques. Ce site démontre mes aptitudes en HTML, CSS et JavaScript, tout en intégrant des animations interactives et des mises en page réactives. J’ai conçu l’ensemble pour qu’il soit à la fois esthétique et fonctionnel, offrant une expérience d'exploration enrichissante.
image de l'accueil
Carousel
Le composant Carousel permet d'afficher plusieurs éléments visuels dans un espace limité grâce à un effet de défilement horizontal. Grâce à la technique du scrolly, l’expérience utilisateur est enrichie en synchronisant le défilement du contenu avec celui de la page. Cette combinaison entre scrolly et carousel crée une présentation dynamique, idéale pour des portfolios ou des présentations interactives.
GIF de la composante Carousel
GIF de la composante Carousel
Header
Le composant Header responsive s'adapte de manière fluide au défilement de la page. En utilisant la technique de détection de défilement, le header peut changer d'apparence, par exemple en réduisant sa taille, en modifiant sa transparence, ou en ajoutant des effets visuels. Ce comportement permet de maximiser l’espace visible tout en garantissant une navigation accessible à tout moment. Grâce à ce header réactif, l’expérience utilisateur est plus fluide et dynamique, notamment sur les appareils mobiles.
GIF de l'apparition et de la disparition du header.
Image du code de la composante Header.
Scrolly
Le composant Scrolly permet de générer des effets interactifs en fonction du défilement de la page. En synchronisant le mouvement de l’utilisateur avec des animations ou des changements de contenu, Scrolly renforce l’engagement visuel. Par exemple, certains éléments peuvent apparaître, se transformer ou disparaître au fur et à mesure du scroll, créant ainsi une expérience immersive et dynamique. Ce composant est particulièrement utile pour les pages narratives, les portfolios créatifs, ou les présentations interactives.
GIF de la composante Scrolly
Image du code de la composante Scrolly.