Arnaud Balland

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 à la découverte du framework React et de la gestion des routes avec React-router en intégrant les maquettes figma qui sont fournis. Les annonces de logements proviennent d'un fichier JSON.

• Initialiser une application web avec un framework
• Développer les routes d'une application web avec React Router
• Créer des composants avec React

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

Ce projet consiste à réaliser une première approche avec le language Javascript dans le parcours développeur d'application - JavaScript React d'OpenClassrooms. L'objectif est d'implémenter un formulaire d'inscription avec l'ouverture et la fermeture d'une modale. Il est également nécessaire de faire une vérification de certains critères pour chaque input, et d'afficher un message d'erreur si besoin. Lorsque tous les champs du formulaire sont conformes, un message de confirmation apparaît.

• Programmer en JavaScript
• Verification des champs d'un formulaire

Ce projet consiste à mettre en place des effets et animations CSS graphiques avancés ainsi que l'apprentissage de Sass, pour écrire un code CSS maintenable. Seule la maquette de la version mobile est fournie à l'étudiant. Les versions tablette et desktop sont à imaginer et à créer entièrement par l'étudiant.

• Intégration d'une maquette
• Responsive web design
• Assurer la cohérence graphique
• Mettre en place son environnement Front-End
• Versioning avec Git et Github