## Introduction

Dans le cadre d'une mission de ma micro-entreprise, j'ai été chargé de la refonte du site de l’Abbaye de Cercanceaux. Avec mon client, nous avons dû résoudre plusieurs problèmes liés à un site vieillissant, notamment en matière de sécurité, d’accessibilité et de performance. L’abbaye, riche de son histoire, avait besoin d’un site reflétant sa valeur tout en garantissant une expérience utilisateur moderne et sécurisée. En plus des failles fonctionnelles, l'ancien site affichait des scores faibles dans les évaluations de performance et d’accessibilité, limitant son potentiel de référencement et d’engagement.

## Un site ancien et manquant de sécurité

L’ancien site de l’abbaye présentait plusieurs problèmes critiques :
- **Failles de sécurité** : Pas de protocole HTTPS, formulaires de contact non protégés, et une grande vulnérabilité aux spams 

> Avec plus de 1800 messages reçus de novembre 2019 à janvier 2024, soit plus d’un par jour !

- **Contenu et images dépassés** : Des visuels vieillissants et un contenu peu optimisé limitaient l’attrait du site et son référencement.
- **Navigation limitée** : L’arborescence et la structure du site ne permettaient pas une découverte aisée des informations importantes, notamment sur l’histoire de l’abbaye et les services de réservation.
- **Scores faibles Lighthouse** : Le site affichait de mauvais scores dans les domaines de :
  - **Performance** : Faible à cause de l’optimisation limitée des ressources et de l’absence de mises à jour.
  - **Accessibilité** : Aucun texte alternatif (balises "alt") pour les images, ce qui impacte l’expérience des utilisateurs ayant des déficiences visuelles et le SEO.
  - **Best Practices** : Utilisation injustifiée de cookies tiers, notamment pour le lecteur vidéo tiers, posant des risques en matière de confidentialité.
  - **SEO** : L’absence de balises "meta" et de structure de contenu optimisée limitait la visibilité du site dans les moteurs de recherche.

> Les score Google Lighthouse ou Google PageSpeed Insights, sont importants pour le référencement naturel, et pour l'expérience des utilisateurs.

## Objectifs de la Refonte

La refonte visait à transformer l’image numérique de l’abbaye pour répondre aux enjeux suivants :
- **Renforcer la Sécurité et la Fiabilité** : Sécuriser les formulaires et mettre en place HTTPS.
- **Moderniser l’Expérience Utilisateur et les Visuels** : Avec mon client, nous avons enrichi les pages avec des images actuelles et un contenu pertinent.
- **Optimiser la Structure et la Navigation** : Simplifier l’accès aux informations clés et guider les visiteurs de manière intuitive.
- **Augmenter les Scores Lighthouse en SEO, Performance et Accessibilité** : En intégrant des _alt_ pour les images, des balises _meta_, et en réduisant l’utilisation de cookies tiers.

## Solutions Apportées

### Sécurisation et Optimisation des Formulaires

**Mise en place du HTTPS sur l'ensemble du site** : Cela assure la sécurité des données envoyées et reçues, notamment à travers le formulaire.

Le formulaire de contact a été refondu pour inclure :
- **hCaptcha** : Un CAPTCHA protège désormais l'envoi de formulaire et empêche le spam.
> hCaptcha est reconnu pour être soucieux des données des utilisateurs.
- **Formulaire de réservation détaillé** : Permet aux visiteurs de préciser leurs besoins (type d’événement, nombre de personnes, prestations souhaitées), facilitant la gestion des demandes.

### Choix de WordPress et Thème Personnalisé

Comme pour d’autres [projets de refonte](https://axelgodefroy.fr/projet/transports-jamet), WordPress a été choisi pour sa flexibilité et sa facilité d’usage :
- **Thème personnalisé** : Un thème sur mesure permet de minimiser les plugins, ce qui améliore la performance et réduit les failles de sécurité.
- **Édition simplifiée** : L’équipe peut désormais facilement mettre à jour le contenu et les visuels.

### Modernisation Visuelle et Expérience Utilisateur

Pour rendre le site plus attrayant :
- **Vidéo en bannière et images actualisées** : Ces éléments visuels donnent une première impression immersive aux visiteurs.
- **Nouvelle arborescence** : L’organisation en sections telles que _/decouvrir_ (informations sur l’histoire et les salles), _/reserver_, _/evenements_, et _/diaporama_ permet une navigation simple et intuitive.

### Optimisation SEO et Scores Lighthouse

Pour maximiser la visibilité et améliorer l’expérience utilisateur, des optimisations SEO avancées ont été mises en œuvre :
- **Images avec texte alternatif (balises "alt")** : Toutes les images sont désormais accompagnées de descriptions pour améliorer l’accessibilité et le SEO.
- **Balises Meta et données structurées** : Ajout de balises _meta_ et de données structurées pour permettre un meilleur affichage dans les moteurs de recherche et une meilleure indexation.
- **Fil d’Ariane et témoignages** : Ces éléments renforcent la crédibilité du site et sa navigation.
- **Réduction des cookies tiers** : Suppression du lecteur vidéo utilisant des cookies tiers.

> **📎 Accès**
> Application accessible à l'adresse suivante : [www.abbaye-cercanceaux.fr](https://www.abbaye-cercanceaux.fr)


Ancienne page accueil de Page accueil du site de l'Abbaye de cercanceaux

abbaye_OLD_THUMB.webp

Page accueil du site de l'Abbaye de cercanceaux

abbaye_FULL_HOME.webp

large_abbaye_THUMB.webp

medium_abbaye_THUMB.webp

small_abbaye_THUMB.webp

thumbnail_abbaye_THUMB.webp

abbaye_THUMB.webp

L'Abbaye De Cercanceaux

Développement Web

Webdesign

## Introduction
J'ai eu l'opportunité durant mes activités de freelance de entreprendre la refonte du site web des Transports Jamet, une entreprise spécialisée dans le transport de marchandises en vrac dans le sud de la Seine et Marne. L'objectif principal était de moderniser le site existant datant de 2008, afin d'améliorer la visibilité en ligne de l'entreprise, renforcer son image de marque et attirer de nouveaux clients.

## Contexte
L'entreprise, spécialisée dans le transport de marchandises en vrac telles que les bennes TP, agricoles, gravats, etc., avait besoin de se démarquer dans un secteur concurrentiel en exploitant les avantages du monde numérique. La refonte du site s'est avérée cruciale pour rester compétitif et répondre aux attentes d'une clientèle de plus en plus connectée.

## Objectifs de la Refonte
1. **Améliorer la Présence en Ligne:** La refonte du site visait à augmenter la visibilité de l'entreprise sur le web, attirant ainsi de nouveaux clients et renforçant sa position sur le marché.

2. **Moderniser l'Image de Marque:** Avec un site datant de 2008, l'entreprise avait besoin d'une image moderne pour inspirer confiance et crédibilité à ses clients potentiels.

3. **Faciliter le Recrutement:** La création de pages dédiées aux offres d'emploi avec des formulaires de candidature en ligne devait simplifier le processus de recrutement et attirer des profils qualifiés / motivés.

## Maquette sur Figma
Avant même de commencer le développement, j'ai créé des maquettes détaillées de chaque page du site en utilisant l'outil Figma. Cela a permis à l'entreprise de visualiser le futur site, de s'impliquer dans le processus de conception, et de faire des ajustements en amont.

## Pourquoi wordpress ?
Le choix de WordPress pour la refonte a été stratégique. Le développement d'un thème sur mesure a permis d'assurer un site plus sécurisé, avec une personnalisation avancée, tout en limitant l'utilisation de plugins pour réduire les vulnérabilités potentielles.

L'ancien site, inaccessible aux modifications par l'équipe, sera désormais facilement mis à jour grâce à WordPress, offrant une interface conviviale. Sur le plan SEO, WordPress offre une structure optimisée, des balises méta gérables, et des fonctionnalités facilitant le référencement. Ainsi, ce choix vise à renforcer la visibilité en ligne de l'entreprise et à améliorer son classement dans les moteurs de recherche.

## Fonctionnalités Clés
1. **Formulaire de Contact pour Devis:** Un formulaire de contact intuitif a été intégré pour simplifier le processus de demande de devis, encourageant ainsi l'interaction entre l'entreprise et ses prospects.

2. **Formulaire de Candidature en Ligne:** Pour faciliter le recrutement, un formulaire dédié a été ajouté, permettant aux candidats de postuler en ligne de manière efficace.

## Conclusion
La refonte du site pour l'entreprise de transport de marchandises en vrac a été bien plus qu'une simple mise à jour visuelle. Elle a permis d'atteindre les objectifs cruciaux tels que l'amélioration de la présence en ligne, la modernisation de l'image de marque et la simplification du processus de recrutement. Ce projet témoigne de l'importance de l'adaptation continue dans un environnement numérique en constante évolution.

> **📎 Accès**
> Site des transports jamet accessible à l'adresse suivante : [https://transports-jamet.fr](https://transports-jamet.fr)

TJ_FULL-min.webp

Ancienne page du site des transports jamet

chrome-capture-2024-0-9 (1).webp

Bannière du site transports jamet - Plusieurs Camions Jamet

large_TJ_THUMB.webp

medium_TJ_THUMB.webp

small_TJ_THUMB.webp

thumbnail_TJ_THUMB.webp

TJ_THUMB.webp

Transports Jamet

## Introduction

Lorsque mon frère, architecte de profession, a décidé de se lancer en freelance, il m'a confié la création de son site internet pour présenter ses projets. Son objectif était de se démarquer dans un secteur compétitif en mettant en valeur ses réalisations et son expertise auprès de clients potentiels. Le défi principal de ce projet était de concevoir une plateforme à la fois élégante et fonctionnelle, **pour mettre en valeur ses projets** tout en offrant une expérience utilisateur optimal.

Dans cet article, je vais vous guider à travers les étapes clés de la création du site, en commençant par la phase de design et de conception. Nous avons effectué un benchmark approfondi, en nous inspirant de plateformes comme **Pinterest** et **Dribbble** pour identifier les meilleures pratiques en matière de design d’architecture. Nous avons ensuite utilisé **Figma** pour créer une maquette visuelle intuitive, adaptée aux besoins spécifiques d'un architecte freelance.

Ensuite, je vous parlerai des choix technologiques que nous avons faits, en particulier l'utilisation de **React JS** pour développer un site performant, réactif et facilement maintenabl. Ainsi que l'utilisation du CMS Headless Strapi pour faciliter l'édition du site. Vous découvrirez également les raisons derrière ces choix et comment ils ont permis d’offrir une expérience utilisateur fluide et moderne.

## Conception 
### Recherches et benchemark
Lorsque j'ai commencé la conception du site web pour mon frère, architecte freelance, il n'y avait pas de charte graphique définie, ce qui m'a offert une grande liberté créative. Pour définir une direction claire, j'ai d'abord réalisé un benchmark sur des plateformes comme Pinterest et Dribbble, à la recherche d'inspirations visuelles adaptées aux sites de présentation de projets d'architecture. Mon objectif était de concevoir un site épuré et professionnel, mettant en valeur les réalisations de mon frère.

Je me suis rapidement rendu compte que la clé était un design sobre et sombre, afin de faire ressortir les visuels des projets architecturaux. Les images de ses réalisations devaient être l’élément central du site, permettant aux visiteurs de se concentrer sur le travail sans être distraits par une interface trop chargée. À partir des exemples analysés, j’ai vu que les designs minimalistes donnaient un résultat plus percutant, en particulier dans les secteurs créatifs comme l’architecture.

### Choix esthétiques et fonctionnels

Sans charte graphique imposée, j’ai décidé qu’il n'était pas nécessaire de créer un UI kit détaillé, estimant que cela prendrait trop de temps sans apporter de réelle valeur ajoutée au projet. L'important était d’aller à l’essentiel : un site simple, mais élégant, où les images des projets sont au cœur de l'expérience utilisateur.

J’ai opté pour une palette de couleurs sombres, principalement des tons gris foncé et noir avec une legère touche de bleu clair, offrant un contraste sophistiqué avec les images des projets. Ce choix permet de faire ressortir les visuels tout en conservant un aspect professionnel et moderne.

### Animations et interactivité

Pour rendre le site plus agréable a utilisé, j'ai ajouté quelques animations légères. Celles-ci incluent des transitions douces lors du défilement ou des effets subtils de survol sur les images. L’idée était d’apporter un dynamisme discret, créant une expérience agréable sans détourner l’attention de l’essentiel : les projets architecturaux.

### Maquettes visuelles

J’ai ensuite réalisé les maquettes visuelles sur Figma, ce qui m’a permis de formaliser ces idées en une structure concrète. Les maquettes illustrent la disposition des éléments, la hiérarchie des contenus, et l’aspect visuel général des différentes pages. Cela a permis d’assurer une cohérence dans le design avant de passer à la phase de développement. Vous pouvez consulter les maquettes complètes en annexe pour avoir une idée précise de la mise en forme finale du site.

![Vignette page accueil site d'architecture](https://api.axelgodefroy.fr/uploads/Aymeric_737970b847_9dd936975e.png)

## Développement

Pour ce projet j'ai décider d'utiliser React, j'étais plutôt a l'aise avec cette technologie, a ce moment j'utilisais

### Front-end (React JS) 
Le front-end en React est responsable de l'affichage et de l'interaction utilisateur. Il envoie des requêtes HTTP GET pour obtenir les données nécessaires à la présentation des projets architecturaux.
Ces requêtes sont adressées à l'API exposée par Strapi pour récupérer les informations sur les projets, les images, les descriptions, et d’autres contenus associés.

### API de Strapi
Strapi reçoit les requêtes HTTP du front-end et gère ces demandes en effectuant des opérations sur la base de données.
Les opérations incluent la récupération, la mise à jour, ou l'ajout de nouvelles informations. Strapi renvoie les données au front-end sous forme de réponses JSON.
L'avantage de CMS c'est qu'il est totalement personnalisable, on créer chaque entité à travers une interface simple d'utilisation. De la meme façon l'API peut être surchargée et personnalisée à souhait.

### Base de données
J'ai utiliser une base de donnée SQLite, en effet le projet ne nécessite pas vraiment de performance énorme, ni fonction spécial. Disponible sur d'autres SGBD.

### Déploiement avec Docker
Pour le déploiement, j’ai utilisé Docker pour conteneuriser les applications front-end et back-end. Docker ma permis de déployer très rapidement le projet sur un serveur peronnel sans impacté les autres projets que j'avais dèjà mis en place.

![diagram_archi_infra.webp](https://api.axelgodefroy.fr/uploads/diagram_archi_infra_d3321bdf20.webp)

> **📎 Liens utiles**
> [La conteneurisation c'est quoi ?](https://www.redhat.com/fr/topics/cloud-native-apps/what-is-containerization)
> 
> [Headless CMS : Le futur de la gestion du contenu](https://www.sortlist.fr/blog/headless-cms)

## Conclusion

La réalisation de ce projet m'a offert l'opportunité de développer de nouvelles compétences en matière de mise en place d'une architecture de développement moderne. J'ai particulièrement apprécié l'utilisation de CMS headless tels que Strapi, qui a facilité la gestion du site pour mon frère. Grâce à Strapi, j'ai pu proposer une interface de gestion simplifiée pour permettre à mon frère de mettre à jour facilement son site, sans avoir à se préoccuper de la complexité du backend.

La mise en place de l'environnement Docker pour le déploiement du site a été un véritable défi, mais cela m'a permis d'acquérir des compétences essentielles en matière de conteneurisation et de déploiement d'applications modernes.

> **Accès**
> Application terminé mais pour l'instant non public, disponible lors d'un entretien.


Maquette page accueil du site d'architecture

maquette_page_home_archi

Vignette page accueil site d'architecture

large_Aymeric_737970b847.png

medium_Aymeric_737970b847.png

small_Aymeric_737970b847.png

thumbnail_Aymeric_737970b847.png

thumbnail_home_archi_project_thumb

Portfolio Web Architecte

# Roleplay IA 

- **Rôle :** Tech Lead Web @ Reality Academy  
- **Période :** 2024 – 2025  
- **Produit :** https://www.reality-academy.fr/roleplay-ia
- **Stack :** `Python` • `FastAPI` • `LangChain` • `WebSockets` • `SSE` • `Docker` • `STT / TTS Streaming` • `RAG Multi-Agents` • `Clean Architecture` • `LLMOps / RAGAS`

---

## Vue d'ensemble du projet

L'objectif de ce projet est l'industrialisation d'une plateforme SaaS de mises en situation virtuelles propulsées par l'IA générative. La solution permet d'immerger des apprenants dans des scénarios vocaux interactifs pour développer leurs compétences relationnelles et de négociation (vente, management, gestion de conflit).

Sur le plan de l'ingénierie, le défi résidait dans le fait de concilier une interaction vocale fluide et ultra-réactive avec un système d'analyse capable de délivrer un débriefing pédagogique instantané et pertinent à la fin de chaque session.

---

## Conception du moteur temps réel & streaming audio

Pour offrir une expérience de conversation naturelle, la gestion de la latence a été l'enjeu central de la conception. Un échange vocal ne tolère pas les délais de réponse classiques d'une API synchrone.

### Architecture de la chaîne de traitement
J'ai architecturé une chaîne de traitement asynchrone fonctionnant en flux tendu : le signal vocal transmis par l'utilisateur est transcrit à la volée (*Speech-to-Text*), envoyé en streaming à l'agent conversationnel (*LLM*), puis découpé phrase par phrase pour alimenter le moteur de synthèse vocale (*Text-to-Speech*). L'audio est restitué au client via un canal **WebSocket** dès le premier bloc de parole disponible, réduisant au strict minimum le *Time-To-First-Token* (TTFT).

### Signalisation et résilience réseau
L'expérience utilisateur est renforcée par l'intégration d'un composant de *Voice Activity Detection* (VAD), qui permet de gérer proprement les interruptions de parole sans casser l'état de la session. Parallèlement, un canal **Server-Sent Events (SSE)** est utilisé pour pousser en direct les événements système, tels que les éléments d'évaluation ou les indices de coaching pendant la simulation.

L'ensemble du moteur repose sur une **Clean Architecture** sous **FastAPI**, conteneurisée avec **Docker** et opérée sur un cluster à haute disponibilité (3 réplicas) pour garantir la stabilité sous charge.

---

## Pipeline d'analytics & scoring comportemental

Au-delà de la simulation vocale, la valeur ajoutée du système repose sur sa capacité à débriefer l'apprenant de manière factuelle. J'ai conçu un moteur d'évaluation hybride qui intervient immédiatement à la clôture de la session.

### Évaluation métier et analyse NLP
Le système combine deux niveaux d'analyse :
- **Un RAG multi-agents** qui compare la transcription globale aux référentiels pédagogiques du scénario afin de vérifier le respect des consignes métiers (*hard skills*).
- **Un pipeline NLP dédié** qui extrait automatiquement **19 sous-métriques comportementales** (*soft skills*). Ces indicateurs analysent le rythme d'élocution, la gestion des objections, la structuration du discours ainsi que les marqueurs d'empathie ou de confiance.

### Restitution et observabilité LLMOps
À l'issue de cette analyse, le système génère instantanément une fiche de restitution synthétique accompagnée de recommandations ciblées (*coaching tips*). 

Pour maintenir la qualité de ce pipeline au fil des évolutions, j'ai mis en place un cadre d'observabilité **LLMOps** reposant sur des benchmarks multi-modèles et un protocole d'évaluation continue (*LLM-as-a-judge* via RAGAS), garantissant ainsi la stabilité des scores entre les versions.

---

## ⚡ Performances & Latences (Data Grafana)

Pour garantir une expérience d'immersion naturelle, l'architecture a été optimisée autour du **Time-To-First-Token (TTFT)** sur la route conversationnelle, tout en déportant les calculs lourds d'évaluation sur des pipelines asynchrones.

### Latences du moteur temps réel (In-Session)

- **Route conversationnelle :** 
  - Médiane (P50) : **1,00 s**
  - Percentile 95 (P95) : **2,00 s**

- **Premier token LLM (Interlocuteur streaming) :** 
  - P50 : **841 ms** | P90 : **1,26 s**

- **Synthèse vocale (TTS - 1er chunk audio) :** 
  - P50 : **1,25 s** | P90 : **1,91 s** + le temps du premier token LLM

### Traitement analytique & Débriefing (Post-Session)

- **Évaluation des métriques comportementales (NLP) :** P50 à **3,08 s**
- **Évaluation globale:** P50 entre **11,5 s**

---

## Impact & chiffres clés

- **Production :** Plus de 100 scénarios de roleplays industrialisés et déployés sur la plateforme.
- **Infrastructure :** Architecture microservices résiliente sous FastAPI et Docker.
- **Analytics :** 19 sous-indicateurs comportementaux mesurés automatiquement par session.

Capture d’écran 2026-07-27 à 22.57.23.webp

Capture d’écran 2026-07-27 à 22.56.48.webp

Capture d’écran 2026-07-27 à 22.52.51.webp

large_RO.webp

medium_RO.webp

small_RO.webp

thumbnail_RO.webp

RO.webp

Roleplay IA - Reality Academy

# Ambilight
- **Rôle :** Projet Personnel (R&D & Side-Project)  
- **Période :** 2024  
- **Stack :** `Python` • `Traitement d'image` • `Réseau UDP` • `Linux` • `Raspberry Pi` • `Bandeau LED WS2812`

---

## Vue d'ensemble du projet

Ce projet est une expérimentation visant à concevoir un système d'éclairage immersif ("Ambilight") sur-mesure pour un setup de travail et de divertissement. L'objectif technique était de construire une pipeline en Python capable de capturer le contenu de l'écran principal, d'analyser les bordures d'image en temps réel et d'en déduire les couleurs dominantes pour piloter un bandeau LED adressable (WS2812) relié à un Raspberry Pi.

Ce projet perso m'a permis de me challenger sur des problématiques d'ingénierie système précises : **le traitement d'image à bas budget CPU**, **la gestion de la latence de capture** et **l'optimisation du transport réseau en flux continu**.

---

## Architecture & Défis d'Ingénierie

### 1. Pipeline de traitement d'image & Budget temps réel

Pour que l'immersion soit crédible, le délai entre l'affichage d'un frame à l'écran et l'allumage des LED correspondantes doit être imperceptible. L'enjeu principal en Python était de maîtriser le budget CPU pour éviter tout ralentissement de la machine hôte.

- **Capture & Downsampling :** Échantillonnage continu du flux vidéo et découpage de l'image en zones géométriques alignées sur la disposition physique du bandeau LED.
- **Extraction & Lissage des couleurs :** Traitement matriciel sur chaque zone pour extraire la couleur moyenne/dominante. Un filtrage temporel (smoothing) a été intégré pour éliminer le scintillement (flicker) sur les changements de scène rapides, maintenant un équilibre entre réactivité et stabilité visuelle.

### 2. Transport UDP & Communication embarquée

- **Protocole de diffusion :** Choix d'un transport via datagrammes **UDP** de l'hôte vers le Raspberry Pi. La faible surcharge d'UDP et l'absence de mécanisme de réémission en font le protocole idéal pour du streaming de frames d'éclairage (où la fraîcheur de la donnée prime sur la livraison garantie).
- **Format de payload & Réception :** Sérialisation d'un paquet binaire compact contenant la matrice de couleurs RGB. Côté Raspberry Pi, un service léger réceptionne le flux et le traduit immédiatement en signaux pour le contrôleur du bandeau WS2812.

---

## Réalisations & Acquis Techniques

- **Ingénierie temps réel :** Moteur de capture et de traitement conçu avec une fréquence de rafraîchissement stable et une charge CPU contenue.
- **Système hybride Software / Embedded :** Orchestration complète de la chaîne, depuis la capture vidéo applicative sur PC jusqu'au rendu physique sur matériel embarqué via le réseau local.
- **Arbitrage technique :** Gestion fine des compromis entre taux de rafraîchissement (FPS), lissage visuel pour l'œil humain et tolérance aux pertes de paquets UDP.

Menu

Godefroy
Axel

Formation

L'Abbaye De Cercanceaux

L'Abbaye De Cercanceaux

Transports Jamet

Transports Jamet

Portfolio Web Architecte

Portfolio Web Architecte

Roleplay IA - Reality Academy

Roleplay IA - Reality Academy

Ambiligth Python

Ambiligth Python

Menu

GodefroyAxel

Formation

L'Abbaye De Cercanceaux

L'Abbaye De Cercanceaux

Transports Jamet

Transports Jamet

Portfolio Web Architecte

Portfolio Web Architecte

Roleplay IA - Reality Academy

Roleplay IA - Reality Academy

Ambiligth Python

Ambiligth Python

Godefroy
Axel