Portfolio

Mon moodboard, mes couleurs et mes typographies.

Figma a été mon outil de design et de prototypage. Mon moodboard représente le design minimaliste noir et blanc que je ciblais; mes couleurs sont en lien avec ma rose qui représente mon nom de famille. J'ai choisi des typographies lourdes comme 'Nexa Rust Black Sans' et fines comme 'PP Neue Montreal'.

La création de mon logo

Je voulais un logo qui me représente, alors j'ai choisi la rose puisque j'aime la couleur et ce qu'elle représente : la douceur et la simplicité. J'ai réalisé le logo avec Illustrator et ensuite je l'ai importé en calques dans After Effects. J'ai animé le tout avec des positions, des rotations et un effet de tremblement.

Wireframes, maquettes et design system

Mes wireframes ont été réalisés rapidement pour passer à la réalisation des maquettes. Mon design system comporte mes composantes réutilisables telles que mon menu principal, mes boutons, mes différents formats de logo.

Composante JavaScript avec Lottie Web

Le conteneur de mon animation d'arrière-plan est positionné en fixed, puis l'animation et son SVG sont en position absolue avec des valeurs qui les font prendre toute la longueur et la largeur de l'écran. L'animation est importée avec la librairie Lottie Web pour avec un fond transparent.

Composante JavaScript pour un curseur personnalisé

Les curseurs sont changés sur la balise html et mes balises ancre. Ensuite, une deuxième image est ajoutée en image d'arrière-plan pour suivre le curseur principal et effectuer une rotation constante; le délai de suivi et la position du curseur sont gérés en javascript avec un écouteur d'événement sur les déplacements de celui-ci.

Composante JavaScript pour les thèmes

Le thème à la base est sombre, mais il est possible de changer pour un thème clair. Cette composante est principalement construite avec un simple toggle de classe. Cependant, pour que la navigation d'une page à l'autre ne provoque pas le retour au thème sombre original, j'ajoute les données dans le local storage puis j'ajoute la transition d'opacité sur mon body après une seconde pour qu'elle ne soit effectuée qu'à l'intérieur d'une même page, et non lors de la navigation entre pages.

Composante JavaScript avec la librairie Locomotive Scroll

Les effets de parallaxe lors du défilement sont gérés avec l'instanciation de la constante locomotive de la librairie locomotive-scroll. Ensuite, chaque élément ayant des data-scrolly avec une spécification (fromLeft, fromBottom, etc.) fait apparaître les éléments avec une transition sur la translation et l'opacité de l'élément ciblé.