Étude de Cas : Développement du Site Web pour un Coach Sportif

Objectif du Projet

Ce document est une étude de cas détaillée du processus de développement du site web pour Baptiste Auvray, un coach de calisthenics de haut niveau. L’objectif principal était de créer un site vitrine professionnel pour présenter ses programmes d’entraînement, mais aussi de l’équiper de fonctionnalités e-commerce pour lui permettre de les vendre directement en ligne.

Le projet a été mené sur une période de 4 jours, en collaboration étroite avec le client pour s’assurer que le produit final soit non seulement esthétique et fonctionnel, mais aussi parfaitement aligné avec sa vision et ses objectifs commerciaux.

Le site final est visible en ligne à l’adresse suivante : https://tolgaozt.github.io/website-baptiste-calisthenics-coach/

Technologies et Approche

Pour garantir des performances optimales, une maintenance simple et des coûts d’hébergement nuls, le choix s’est porté sur un site statique hébergé sur GitHub Pages.

HTML5 Sémantique : Pour une structure solide, accessible et optimisée pour le référencement.
CSS3 Moderne : Utilisation intensive de Flexbox, Grid, des variables CSS pour une modularité maximale, et des animations @keyframes pour dynamiser l’interface.
JavaScript “Vanilla” (ES6+) : Tout le dynamisme du site (animations, carrousels, sélecteur de langue) a été codé en JavaScript pur, sans dépendre de lourdes librairies externes, assurant ainsi une légèreté et une rapidité de chargement maximales.

Étapes Clés et Résolution de Problèmes

Le développement a été marqué par plusieurs défis techniques intéressants, nécessitant une approche itérative et une résolution de problèmes ciblée.

1. Le “Hero Section” Dynamique et Immersif

Screenshot - Hero Section

Le client souhaitait une introduction visuellement percutante. Nous avons implémenté un effet de parallaxe complexe sur plusieurs couches (texte, deux images de personnages, un sol). Le défi était de s’assurer que l’animation, initialement contrôlée par la souris sur PC, ne dégrade pas l’expérience sur mobile. Après avoir testé une version basée sur le gyroscope, nous avons conclu, en accord avec le client, que l’effet était plus une distraction qu’un atout sur petit écran. La solution finale a été de désactiver la logique de parallaxe sur mobile via JavaScript, tout en s’assurant que le positionnement statique des éléments, défini en CSS, restait parfait.

2. Le Carrousel de Témoignages Robuste

Screenshot - Carrousel Témoignages

Baptiste souhaitait remplacer les témoignages textuels par des captures d’écran de messages de clients. Le défi majeur était de créer un carrousel capable d’afficher des images de tailles et de proportions différentes sans que la mise en page ne “saute” à chaque changement de slide.

Solution initiale : Un carrousel simple avec des flèches.
Problème : Le décalage était incorrect sur mobile, et l’absence de “glisser au doigt” était frustrante.
Débogage : Après plusieurs itérations, nous avons identifié que le bug de décalage venait d’un mauvais calcul de la largeur du slide. Le bug de “clic fantôme” qui relançait l’animation venait d’un conflit entre les événements touchstart et mousedown.
Solution finale : J’ai réécrit la logique du carrousel avec un script unifié qui gère à la fois le “cliquer-glisser” sur PC et le “glisser au doigt” sur mobile, en différenciant un simple “tap” d’un véritable “drag”. Le résultat est un carrousel fluide, prédictible et agréable à utiliser sur tous les appareils.

3. Un Site Entièrement Multilingue

Screenshot - Traductions EN/FR/ES

Une demande clé était d’ajouter le français et l’espagnol sur l’ensemble du site. Sur un site statique, cela peut être complexe. La solution adoptée a été :

D’intégrer les traductions directement dans le HTML via des balises <span lang="xx">.
De créer une logique JavaScript qui change une classe sur la balise <body> (ex: <body class="lang-fr">).
Le CSS se charge ensuite d’afficher uniquement les <span> correspondant à la langue active.

Cette méthode est extrêmement performante (le changement est instantané) et a permis de traduire tout le site, y compris le contenu des composants chargés dynamiquement comme la navbar et le footer.

4. Un Formulaire de Contact “Backendless”

Screenshot - Formulaire de Contact

Un site statique ne peut pas envoyer d’emails. Après une première tentative avec FormSubmit qui s’est avérée peu fiable (problèmes de livraison de l’email d’activation), j’ai migré le système vers Web3Forms. Cette alternative s’est montrée plus robuste et offrait l’avantage d’un tableau de bord pour tracer les soumissions, garantissant qu’aucun message de client ne serait perdu.

Gestion du Projet et Communication Client

Ce projet a été un excellent exercice de communication et de gestion des attentes. Le client, passionné et plein d’idées, a exprimé le souhait de développer un espace membres complet avec systèmes de paiement intégrés (Stripe, PayPal…).

Mon rôle a été de lui expliquer de manière transparente la différence de complexité et de coût entre le site vitrine actuel (réalisable dans son petit budget) et une application web dynamique (qui se chiffre en milliers d’euros).

Plutôt que de refuser, je lui ai proposé une solution stratégique et immédiate : utiliser la plateforme Gumroad. Cette approche lui permet de commencer à vendre ses programmes immédiatement, avec une gestion des paiements et de la livraison des fichiers entièrement sécurisée et automatisée, en échange d’une simple commission sur les ventes. J’ai ensuite intégré les liens de paiement direct sur le site. Cette solution a parfaitement répondu à son besoin immédiat tout en lui laissant la porte ouverte pour investir dans une solution sur mesure plus tard, une fois son modèle économique validé.

Leçons Apprises et Conclusion

Ce projet de 4 jours a été incroyablement formateur. Il a renforcé mes compétences en JavaScript vanilla pour la création d’interactions complexes, ma capacité à déboguer des problèmes de compatibilité mobile, et surtout, mon approche de la gestion de projet.

En agissant non seulement comme un développeur mais aussi comme un conseiller technique, j’ai pu guider le client vers des solutions réalistes et efficaces qui respectent ses contraintes budgétaires tout en répondant à ses objectifs. Le résultat est un site web rapide, esthétique, entièrement fonctionnel et prêt à générer des revenus.