Arnaud Balland

Cocktailchemy est une landing page dynamique que j’ai développée en suivant un tutoriel de JavaScript Mastery. Ce projet m’a permis d’explorer en profondeur les possibilités offertes par GSAP (GreenSock Animation Platform), une bibliothèque JavaScript puissante dédiée aux animations fluides et performantes.

À travers ce projet, j’ai appris à orchestrer des animations complexes sur des éléments HTML, à gérer les timelines et à améliorer l’interactivité utilisateur grâce à des effets visuels engageants. L’accent a été mis sur le design d’une interface fluide et captivante, intégrant transitions, animations au scroll, et micro-interactions.

• Maîtriser les animations web avec GSAP
• Créer des transitions fluides et professionnelles
• Structurer une landing page attractive
• Optimiser l'expérience utilisateur avec des animations réactives
• Approfondir l’intégration des timelines et des scroll triggers

Ce portfolio a été réalisé en suivant la formation Three.js Journey de Bruno Simon. L'objectif était d'apprendre à créer des expériences interactives en 3D avec Three.js, une bibliothèque JavaScript puissante pour le rendu graphique. Grâce à une approche axée sur l'apprentissage pratique, j'ai appris les fondamentaux, découvert et utilisé des outils modernes comme React Three Fiber et React-three/drei, et exploré des concepts avancés (shaders, raycasting, post-processing, optimisation des performances).

En parallèle, la formation m'a permis d'acquérir les bases de Blender et de la modélisation 3D, afin de créer et d'intégrer mes propres éléments visuels dans les scènes interactives.

• Créer des expériences immersives en 3D
• Concevoir des shaders personnalisés
• Optimiser les performances
• Appliquer des concepts avancés de développement web 3D
• Apprendre les bases de Blender et de la modélisation 3D

Ce projet consiste à faire évoluer une application vers une technologie actuelle. 4 plugins sont à remplacer (datePicker, modal, menu dropdown, tableaux de données) et sur l'un de ces 4 plugins, l'étudiant doit créer le composant sous React et publier la librairie sur NPM. J'ai fait le choix de recréer le composant modal en suivant les attentes des utilisateurs. Également pour des raisons d'optimisation de l'application, du code spliting a dû être mis en place.

• Refondre une application pour réduire la dette technique
• Développer une librairie React et la publier en ligne sur NPM
• Déployer une application front-end
• Analyser la performance d'une application web avec lighthouse
• Optimiser le chargement des composants React avec Lazy Loading

Ce projet consiste à créer une application web permettant aux utilisateurs de la plateforme ArgentBank de se connecter et de gérer leurs comptes et profils. Dans une seconde partie du projet, il est demandé de déterminer les endpoints d'API nécessaires pour gérer certaines fonctionnalités pour les transactions.

• S'authentifier à une API
• Intéragir avec une API
• Modéliser une API (endpoints)
• Gérer les accès à des routes avec une authentification requise
• Implémenter un gestionnaire d'état dans une application React

Ce projet consiste à mettre en place un tableau de bord avec react et une bibliothèque de graphiques basée sur des composants React. L'étudiant doit se concentrer sur la version desktop. Choix de l'utilisation de la bibliothèque Recharts pour l'intégration des graphiques. Également la rédaction d'une documentation technique en anglais dans le fichier README et documenter les fonctions et méthodes avec JsDoc.

• Séparation logique du code dans des composants réutilisables
• Gestion des calls asynchrones et des promesses
• Développer des éléments graphiques avancés à l'aide de bibliothèques JavaScript
• Interagir avec un service Web
• Produire de la documentation technique en anglais

Ce projet consiste à approfondir ses connaissances en Javascript avec la création d'algorithmes de tri. Pour cela il a été demandé de développer 2 versions d'algorithme de recherche, comparer leur performance et sélectionner la plus performante. Puis créer un schéma (algorigramme) des algorithmes afin de pouvoir communiquer ensuite à l'équipe Back-end leur fonctionnement.

• Analyser un problème informatique
• Développer un algorithme pour résoudre un problème
• Utilisation de méthodes avancées JavaScript