Portfolio Maître d'Oeuvre - BernyConcept

Le projet

BernyConcept est un maître d’œuvre basé en Nouvelle-Aquitaine (région de Poitiers), spécialisé dans l’aménagement de cellules commerciales, la rénovation TCE (Tous Corps d’État) et le design d’intérieur. Le client avait besoin d’un site professionnel pour présenter ses réalisations et attirer de nouveaux projets dans le secteur du commerce de détail.

L’objectif principal : mettre en valeur le portfolio de projets avec un accent sur l’aspect visuel, notamment des comparaisons avant/après pour les rénovations, tout en assurant une performance irréprochable et une conformité RGPD complète.

Solution technique

J’ai choisi Astro 5 comme framework pour sa génération statique et ses performances de chargement exceptionnelles. L’architecture repose sur un rendu statique avec des composants React 19 pour les éléments interactifs comme le slider de comparaison avant/après.

Stack technique

• Astro 5 : Génération statique, routing basé sur les fichiers, optimisation automatique
• React 19 : Composants interactifs (slider avant/après, filtrage de projets par catégorie)
• Tailwind CSS 4 : Design system cohérent et responsive
• TypeScript : Typage strict pour la fiabilité du code
• shadcn/ui (Radix UI) : Composants accessibles et personnalisables
• Sharp : Pipeline d’optimisation d’images (conversion PNG vers JPG, redimensionnement 1920px, compression mozjpeg 80%)
• Go : Microservice backend pour le formulaire de contact (envoi vers Discord via webhook, rate limiting, protection CORS)
• Docker + Nginx : Déploiement conteneurisé avec serveur statique optimisé

Fonctionnalités clés

• Comparaison avant/après : Slider interactif pour visualiser les transformations de chaque projet de rénovation
• Filtrage par catégorie : Cellules commerciales, commerce, bureau, restaurant, monument historique, rénovation
• Optimisation d’images : Pipeline automatisé Sharp pour convertir, redimensionner et compresser toutes les images du portfolio
• Conformité légale : Mentions légales, politique de confidentialité et CGU conformes au droit français

Performance

J’ai optimisé le site pour atteindre des scores Lighthouse quasi parfaits :

Métrique	Score
Performance	95/100
Accessibilité	100/100
Bonnes pratiques	100/100
SEO	100/100

Le pipeline d’optimisation Sharp réduit significativement le poids des images tout en maintenant une qualité visuelle élevée, essentiel pour un portfolio de maître d’œuvre.

Résultat

Le site offre une vitrine professionnelle qui met en valeur le savoir-faire du client à travers des visuels de haute qualité. L’architecture statique garantit des temps de chargement rapides et un référencement naturel optimal, tandis que le slider avant/après permet aux visiteurs de constater concrètement la qualité des rénovations réalisées.