Color Match : Jeu Web Interactif de Synthèse Chromatique
Programmation Front-End et Logique de Superposition
L’Enjeu
Le défi initial de ce projet était de transposer numériquement les mécaniques de « Code Couleur », un jeu de réflexion physique de mon enfance. Le but était d’adapter son principe fondamental : identifier et superposer des tuiles transparentes, une à une, pour reproduire une image cible. Il fallait donc développer un moteur web capable de gérer dynamiquement la synthèse chromatique et d’analyser l’ordre d’empilement exact pour valider la réussite du joueur.
La Réflexion
Pour recréer fidèlement le comportement physique des plaques de couleur transparentes, le cheminement technique s’est orienté vers une manipulation avancée du Document Object Model (DOM). Le pourquoi de cette approche réside dans le besoin de recalculer en temps réel le résultat visuel de plusieurs couches superposées. L’algorithme a été pensé pour comparer en continu la séquence d’actions du joueur avec la solution de la couleur cible, exigeant une gestion très stricte des états de l’application.
L’Exécution
Le projet repose sur le développement d’une architecture JavaScript sur-mesure. Le code gère les événements interactifs et met à jour dynamiquement les propriétés CSS liées aux modes de fusion (blend modes) et aux niveaux d’opacité (Canal Alpha). Le système intègre des contrôles de validation croisés pour s’assurer que la combinaison finale, et son ordre d’empilement, correspondent parfaitement au défi généré.
OPIF : Adaptation Digitale et Enrichie du Jeu de Plateau « PIFO »
Ingénierie et Logique de Jeu Interactive
L’Enjeu
Le défi initial de ce projet personnel était de traduire les mécaniques d’un jeu de cartes physique en une application web ludique et fonctionnelle. Il s’agissait de dépasser les limites matérielles du jeu original en intégrant une base de données de thématiques insolites et variées (allant du prix d’un Big Mac à l’indice de bonheur), nécessitant une gestion dynamique des statistiques pour chaque pays.
La Réflexion
Pour garantir une expérience fluide lors de nos sessions de jeu, le choix s’est porté sur le développement d’une architecture purement front-end, permettant une exécution rapide et un hébergement local simplifié. La réflexion s’est concentrée sur la manière de structurer ces nouvelles données hétérogènes (pourcentages, devises, volumes, superficies) afin que le moteur de jeu puisse les comparer dynamiquement sans latence. Ce cheminement intellectuel a permis de construire un algorithme capable d’interpréter n’importe quel type de métrique ajoutée à la volée.
L’Exécution
L’application a été entièrement codée pour assurer une compatibilité multi-supports immédiate, la rendant jouable aussi bien sur PC que sur mobile. Le développement s’est appuyé sur la création et l’intégration d’objets de données complexes manipulés via JavaScript pour générer les manches en temps réel. Le prototype fonctionnel a ensuite été déployé sur un espace d’hébergement universitaire.
Alternance – Chargé de Communication – Office de Tourisme Destination Fougères
Développement Web & Optimisation SEO
L’Enjeu
Renforcer l’attractivité de la destination sur les moteurs de recherche tout en garantissant un parcours utilisateur fluide et pertinent sur le site vitrine, véritable porte d’entrée numérique du territoire.
La Réflexion
L’expérience utilisateur devait être placée au centre de l’architecture du site. La démarche s’est concentrée sur la facilitation de l’accès à l’information touristique et sur le renforcement du maillage local, afin de capter efficacement les requêtes ciblées des futurs visiteurs.
L’Exécution
J’ai opéré directement sur le CMS WordPress, en optimisant la structure des filtres de recherche et en intégrant de nouvelles pages. L’application rigoureuse des standards de référencement naturel (SEO) a permis d’optimiser l’infrastructure technique globale pour une meilleure visibilité locale.
Les Motards Ont Du Cœur 53
Création d’un Écosystème WordPress Sur-Mesure
L’Enjeu
Le brief universitaire exigeant la conception d’une plateforme web pour le dépôt des livrables, et le site des Motards étant une version EmonSIte obsolète et peu intuitive. Nous avons proposé aux motards d’élargir leur demande d’origine afin de pouvoir leur livrer un site robuste, prêt à l’emploi, optimisée pour le référencement, et dont le back-office devait être extrêmement simplifié pour permettre aux bénévoles d’ajouter du contenu sans risque de casser l’interface graphique.
La Réflexion
Pour répondre aux exigences de performance et de design strict, le choix s’est délibérément porté sur le développement d’un thème personnalisé, écartant l’usage de templates génériques lourds. La structure de l’information a été pensée pour mettre en valeur les circuits de l’événement et les partenaires, tout en guidant l’utilisateur vers des ressources éducatives sur le don.
L’Exécution
Le développement a impliqué l’intégration technique sous WordPress en utilisant des Custom Post Types (CPT) et des champs personnalisés avancés (ACF) pour structurer les données dynamiques. Des scripts JavaScript ont été développés pour intégrer des fonctionnalités interactives fluides, telles qu’un compte à rebours événementiel, un slider interactif et des transitions de pages optimisées.
Travail d’équipe & Collaboration
Ce projet global est le fruit d’une réflexion et d’une production conjointes menées dans le cadre d’un travail de groupe. J’ai eu le plaisir de piloter cette refonte globale et de concevoir cet écosystème de communication en étroite collaboration avec mes camarades Tony Delage, David Traversier, Adrien Lagrange-Vergauwen et Éloïse Commere. La mise en commun de nos différentes expertises — de la direction artistique au développement web, en passant par la stratégie digitale et la production audiovisuelle — a été le véritable moteur pour aboutir à un projet professionnel, pérenne et clé en main au profit des Motards Ont Du Cœur 53.
Mon PORTFOLIO / Promotion Professionnelle, POST-FORMATION
Le Sur-Mesure au service de la Performance
L’Enjeu
S’affranchir des limites des constructeurs de pages (builders) pour proposer une expérience fluide, rapide et totalement personnalisée.
La Réflexion
Le choix d’un thème WordPress entièrement personnalisé répond à deux besoins : la flexibilité totale sur le front-end pour respecter la direction artistique, et une gestion intuitive du contenu en back-end (Custom Post Types pour les projets). L’objectif était d’allier la robustesse d’un CMS à la créativité d’un site « from scratch ».
L’Exécution
- Développement 100% responsive.
- Intégration de fonctionnalités interactives : menu latéral transformant le site en « mur créatif » pour le visiteur, barres de progression dynamiques.
- Respect des standards W3C et optimisation SEO structurelle.
Rédaction et Conception d’un Jeu Narratif
Architecture Logique et System Design
L’Enjeu
Développer une architecture complexe intégrant la gestion de ressources et d’états de santé au sein du moteur narratif Twine, initialement conçu pour des structures arborescentes simples.
La Réflexion
L’objectif était de détourner les fonctionnalités natives du moteur pour simuler un système de survie dynamique. En utilisant la logique conditionnelle et la manipulation du DOM, le projet transforme une fiction interactive en une véritable simulation technique où chaque interaction impacte les variables de santé, de chaleur et de lucidité du personnage en temps réel.
L’Exécution
- Optimisation de la structure logique pour garantir une expérience fluide malgré la densité des calculs de variables en arrière-plan.
- Programmation de systèmes de variables complexes pour le suivi des états de survie du joueur.
- Implémentation de scripts JS personnalisés pour gérer les cycles de froid et la dégradation des ressources.
Webdocumentaire Alice Stevens : Démarche Créative d’une Artiste Mayennaise.
Développement Web & Ingénierie Front-End
L’Enjeu
Le défi technique principal résidait dans la création d’une expérience fluide et ininterrompue au sein d’une architecture onepage riche en contenus multimédias. Il fallait garantir un affichage optimal de l’arborescence complexe du webdocumentaire tout en prévenant les baisses de performances ou les surcharges de mémoire liées au nombre important de capsules vidéos et sonores.
La Réflexion
Pour maintenir une navigation rapide sans sacrifier la qualité, la stratégie s’est orientée vers une gestion dynamique des ressources via JavaScript, avec un système d’optimisation par chargement et déchargement conditionnel des éléments non visibles. Du côté de l’intégration, la disposition organique exigeait de s’affranchir du flux structurel classique. L’expérience ayant été pensée comme une exploration paysagère vaste, le choix technique et ergonomique a été de cibler exclusivement les environnements desktop, assumant l’absence de version mobile pour préserver l’intégrité de la navigation horizontale.
L’Exécution
J’ai développé la logique applicative en JavaScript pour orchestrer le montage et le démontage des médias dans le DOM, assurant ainsi une consommation mémoire minimale du navigateur. L’intégration a nécessité un usage intensif et millimétré des positionnements absolus en CSS. Cette approche a permis de garantir une responsivité parfaite sur l’ensemble des tailles d’écrans horizontaux (PC). En contrepartie, ce placement chirurgical rend le site incompatible avec les formats mobiles, un parti pris totalement assumé pour aboutir à un rendu visuel fidèlement ancré dans les exigences universitaires du projet et de la direction artistique.
Travail d’équipe & Collaboration
Ce webdocumentaire est le fruit d’une réflexion et d’une production conjointes menées dans le cadre d’un projet de groupe. J’ai eu le plaisir de co-concevoir cette direction artistique organique et de déployer cette plateforme interactive en étroite collaboration avec mes camarades Tony Delage et David Traversier. La mise en commun de nos différentes expertises — de la captation audiovisuelle au développement front-end, en passant par la structuration éditoriale — a été le véritable moteur pour aboutir à cet écosystème numérique immersif et fidèle à l’univers de SAJE.