Réalisations
-
Star Wars
Voir le projet
Reproduction du générique du premier film en HTML/CSS/JS
-
Portfolio
Ce site 🙂
Fait en Sass, JS/POO JS, Twig et PHP pour la partie contact côté back-end ainsi que toute la logique nécessaire au rendu des vues Twig.
J'ai également utilisé les librairies Typed.js, Baffle, Splide.js et Webpack.
-
Script Hive
Voir le projet
Plateforme de recherche de scénarios
En tant que passionné d'écriture scénaristique, je fais partie depuis quelques années de cette communauté de scénaristes multi-plateforme qu'est Script Hive. J'ai participé à la création de leur projet web de centralisation de scénarios en collaboration avec d'autres membres développeurs.
La plateforme est construite en React, Typescript, Sass, Bootstrap et utilise une base de données et un espace de stockage distants sur Supabase via API. Arrivé en cours de projet, j'ai surtout :
-amélioré l'architecture : utilitaires, séparation de logique, components, changements dans la manière de gérer les styles...
-mis en place un gestionnaire d'état global pour diverses fonctionnalités. J'ai à cette occasion choisi et exploré Zustand.
-mieux géré la persistance de la connexion d'un utilisateur et ses données lors de son parcours sur le site, ainsi que faire du contrôle d'accès en fonction
-corrigé/refactoré divers(es) fonctionnalités, styles et éléments d'interface. -
Matrix
Voir le projet
Reproduction d'une partie du générique du premier film
Ayant toujours admiré ce générique, j'ai tenté de refaire le plus fidèlement possible la pluie numérique, le "zoom" de caméra et l'apparition du titre.
Pour cela, je n'ai pas utilisé de canvas mais simplement des éléments HTML et du Javascript, avec des intervalles mêlés à des keyframes.
-
DevLinks
Système de partage de liens pour développeurs
L'objectif était de créer une application React devant utiliser au moins : une API permettant du CRUD sur des entités, du routing, du state management, de la persistance de données côté navigateur, de la gestion d'utilisateurs et de rôles, un préprocesseur CSS et du linting/formatting de code.
J'ai donc eu cette idée d'un système de partage de liens pour développeurs. On peut y consulter une liste de ressources utiles succintement décrites, soumises par les utilisateurs et approuvées (avec notification mail) par des administrateurs. Chacun peut gérer les informations de son compte, se créer des favoris et filtrer les différentes listes.
La stack technique est composée de :
-Create React App, avec Redux Toolkit, Framer Motion et React Router
-Laravel, avec API custom, authentification par JWT et scraping PHP pour préremplir les informations des liens
-Composer, NPM, ESLint, Prettier
-Tailwind, Sass et FontAwesome
-Axios.Démo disponible sur demande
-
Image color picker
Voir le projet
Système de capture de couleurs sur images
Réalisé en JS, AJAX et PHP. On peut y extraire automatiquement les principales couleurs d'une image, ou manuellement en pointant celles désirées. Les couleurs sont copiables dans le presse-papier et exportables en CSS.
Pour les transitions gauche/droite, j'ai utilisé la librairie JS GSAP. En ce qui concerne l'extraction des couleurs en mode palette, j'exploite la classe PHP Image Color Extract.
-
VBCH
Voir le projet
Site du volley-ball club de Haguenau
Réalisé avec Baptiste Houllé, Marie Kieffer, Laura Kling, Ettore Maninchedda et Yannick Purwins initialement dans le cadre d'un cours.
L'objectif était de (re)faire tout ou partie du site d'une association à but non lucratif, ainsi que créer des vidéos didacticielles. Nous avons d'abord recueilli les besoins du club, analysé l'existant et élaboré un cahier des charges. Sur cette base, nous avons décidé de revoir tout le site qui existait déjà. Marie et Laura se sont occupées du maquettage graphique des pages, Ettore et Yannick de la partie vidéo/photo et Baptiste et moi du développement.
La stack technique est composée de :
-Wordpress : Bedrock et thème sur mesure avec Timber, Twig et ACF. Des APIs Wordpress ont été développées pour certaines fonctionnalités.
-Sass, JS et PHP (avec des parties en POO pour ces 2 derniers). L'API Player YouTube est également utilisée.
-Composer, NPM, Webpack. -
Balles
Voir le projet
Exercice de Javascript orienté-objet avec canvas
-
The snake
Voir le projet
Relecture du célèbre jeu en Javascript orienté-objet avec canvas
-
MOVIMAGE
Jeu de devinettes autour d'images de films
L'objectif est de trouver le titre d'un film aléatoire à partir de son affiche ou d'une image liée (tirée du film, artwork, etc...), en utilisant des indices sur le film ou non. On peut paramétrer son langage, son temps de jeu, le nombre d'indices et la façon dont l'image va être cachée (pixellisée ou floutée, avec des exemples de niveau).
La stack technique est composée de :
-l'API TMDB
-Vue.js 3, avec Pinia.js et Vue Router
-Typescript
-Tailwind 4 et DaisyUI
-Shepherd.js (il y a un tour explicatif de l'application)
-Vite.Démo disponible sur demande