Les Coulisses de la Gym

Immersion interactive au cœur d'un club de gymnastique préparant les championnats de France.

Projet réalisé en équipe dans le cadre de ma formation, visant à documenter la vie associative et sportive à travers une plateforme multimédia.
Voir le site en direct

Mon Rôle

Développeur Full-stack & Photographe / Vidéaste

L'Équipe

5 Étudiants (Rédaction, Montage, Design, Développement)

Stack Technique

HTML5, CSS3, JavaScript Vanilla

Le Défi : Raconter l'effort

L'objectif était de créer un web-documentaire immersif présentant le club de Courtry. Il fallait harmoniser des contenus hétérogènes : vidéos, galeries photos, podcasts et articles de fond pour offrir une expérience fluide sur tous les supports.

En tant que développeur unique, j'ai transformé la vision de l'équipe en un site interactif, tout en participant activement à la captation des médias sur le terrain (photos au Reflex et vidéos au smartphone).

Contributions majeures

Développement intégral : Programmation de l'interface et des interactions sans framework externe.
Captation Multimédia : Réalisation de clichés techniques et artistiques lors des entraînements.
Rédaction : Auteur de l'article de fond sur l'évolution réglementaire du justaucorps.

Interface principale du web-documentaire

Architecture & Interactivité

Pour ce projet, j'ai mis l'accent sur une navigation intuitive et des composants JavaScript sur-mesure pour dynamiser le contenu statique.

                    // Fonction générique de carrousel développée pour le projet
                    function setupCarousel(container, items, prevBtn, nextBtn) {
                    let activeIndex = 0;
                    // Gestion des classes 'active', 'prev', 'next'
                    // pour l'effet Cover Flow
                    updateCarousel();

                    nextBtn.addEventListener('click', () => {
                    activeIndex = (activeIndex + 1) % items.length;
                    updateCarousel();
                    });
                    }
                

Composants Custom JS

J'ai développé plusieurs fonctionnalités clés pour enrichir l'UX :

Carrousel "Cover Flow" : Un système de navigation fluide pour la galerie photo et les articles, gérant dynamiquement les plans de profondeur en CSS.
Lecteur Audio Thématique : Intégration d'un lecteur interactif avec une animation de vinyle tournant pour les témoignages audio.
Système de Modales : Pour permettre une lecture immersive des articles sans quitter la page principale.

Bilan du projet

Ce travail a été une excellente opportunité de lier mes compétences techniques en développement web à ma passion pour l'image. J'ai dû :

Coordonner l'intégration de médias produits par l'ensemble du groupe (5 personnes).
Optimiser les performances pour garantir un chargement rapide malgré le poids des ressources visuelles.
Respecter scrupuleusement l'identité visuelle définie par l'équipe design tout en l'enrichissant d'animations interactives.

Pages Web

100%

Vanilla JS

Galerie Photo