React Router
Je gère la navigation de ce site côté client. J’utilise React Router pour donner un effet multipage classique, tout en gardant la réactivité d’une application SPA.
New Portfolio
- React JS
- SASS
- TypeScript
Image 1 sur 1
About project
Un exemple vaut mille mots
J’ai créé ce site portfolio pour exposer mes réalisations et décrire leurs fonctionnalités. Je me suis également servie de ce projet pour approfondir mes connaissances en React JS et TypeScript.
Tout d’abord, j’ai réalisé la maquette haute fidélité pour trois types d’écran : desktop, tablette, portable. J’ai exclu l'étape de maquette base fidélité (wireframe) du processus. En effet, ce site est basé sur l’ancienne version et donc le parcours utilisateur a déjà été tracé.
J’ai décidé de diviser le développement, la mise en ligne et les tests fonctionnels en plusieurs lots. Cela m’a permis de mettre en ligne la version 1 au plus vite, de tester le site après chaque mise en ligne sur les navigateurs principaux et de corriger les éventuels bugs.
Liens
Caractéristiques
Animation de l’icône hamburger.
J’ai ajouté cette animation CSS de l’icône SVG pour apporter de la personnalité à l’interface, la rendre plus dynamique et donner une touche originale au site.
Animation des bulles.
Pour animer les bulles de compétences, j’ai choisi deux types d’animation. La première est la transition CSS qui se déclenche dès que la bulle devient visible sur l'écran. Pour détecter cette apparition, j’ai créé un Custom Hook qui utilise l’API Intersection Observer. La deuxième est une véritable animation CSS avec des keyframes.
Animation des compétences des langues.
Pour cette animation, j’utilise le même principe que pour les bulles de compétences : la transition de CSS et Custom Hook
Multilangues.
Ce site est disponible en multi langues. Pour cela, je me sers de la bibliothèque i18n qui traduit automatiquement à partir des fichiers JSON.
Formats d’images adaptés au web.
Pour ce site, j’utilise les formats d’images adaptés pour le web. Toutes les images vectorielles sont en format SVG et les photos en format webp, ce qui réduit drastiquement la taille des images tout en gardant la qualité. Grâce à la propriété CSS background-image et des media queries, j'adapte les images aux différents types d’écran. (Image Switching)
