Baramey.

Overview

Baramey v3 est la refonte complète du site vitrine d'un traiteur cambodgien — modernisation de l'image de marque, nouvelle mise en page professionnelle, intégration du menu PDF.

Le site original était vieillissant et mal structuré, ne reflétant pas la qualité du travail du traiteur. Redesign complet : nouvelle identité visuelle, palette de couleurs pensée, typographie soignée, organisation repensée pour améliorer la navigation. Composants React réutilisables, expérience mobile optimisée.

Projet client réalisé en une semaine — premier contact avec les contraintes réelles d'un client : pas de specs détaillées, contraintes techniques imposées, priorités qui évoluent en cours de projet.

Challenge & Problem Statement

Moderniser un site existant en respectant les contraintes client — sans cahier des charges détaillé.

• Concevoir sans spécifications précises — interpréter les attentes du client
• Intégrer un menu PDF obligatoire sans casser le flux de navigation
• Apprendre React et Tailwind en contexte réel, sous contrainte de temps
• Gérer l'évolution des priorités client en milieu de projet

Solution

Pour répondre aux besoins du client et aux défis identifiés, j’ai construit une solution simple, moderne et adaptée à l’activité du traiteur.

Nouvelle structure claire et professionnelle

J’ai repensé entièrement l’organisation du site pour offrir un parcours plus fluide.
La nouvelle architecture met en avant les éléments essentiels : présentation du traiteur, services, menu, galerie et contact.

Refonte visuelle moderne

J’ai développé une interface plus actuelle en m’appuyant sur :

• une palette de couleurs sobres mais chaleureuses,
• une typographie lisible et professionnelle,
• des sections aérées avec une meilleure hiérarchie visuelle,
• un style plus cohérent avec l’identité d’un traiteur moderne.

Respect des besoins du client

Le client tenait à conserver son menu PDF déjà existant.
J’ai donc intégré ce document de manière visible et accessible, garantissant une continuité avec son fonctionnement habituel.

Développement propre et structuré

J’ai construit le site en React avec des composants réutilisables, en structurant chaque section pour faciliter les futures évolutions.
Tailwind m’a permis d’itérer rapidement sur le design tout en assurant un rendu responsive.

Adaptation mobile optimisée

Chaque section a été pensée pour être lisible sur mobile, ce qui est essentiel pour un traiteur puisque beaucoup d’utilisateurs consultent ce type de site depuis un téléphone.

Résultat

Le résultat final est un site plus moderne, bien structuré et fidèle à l'identité du traiteur, offrant une expérience claire et agréable tout en respectant les contraintes du client.

Development

Stack

Application React pure déployée sur Vercel — architecture simple et suffisante pour un site vitrine.

Frontend — React

• React 18 — structure en composants réutilisables
• Tailwind CSS — styling utilitaire, palette et typographie cohérentes
• Vercel — déploiement continu depuis GitHub

Choix de design

• Palette de couleurs inspirée de la cuisine cambodgienne — tons chauds et terracotta
• Typographie hiérarchisée — titres expressifs, corps lisible
• Intégration PDF accessible — lien direct vers le menu sans bloquer le parcours
• Sections reorganisées : accueil, à propos, menu, contact

Décisions techniques notables

• React sans état global : site vitrine statique — pas besoin de state management. Props et composition suffisent, zéro sur-ingénierie.
• Tailwind en contexte client : itérations de design rapides directement dans le code — ajustements visuels sans passer par Figma à chaque retour client.

Outcome & Results

Livrable

Site moderne et professionnel livré : interface claire, identité visuelle cohérente, menu PDF accessible, expérience responsive. Le projet a été interrompu côté client — priorités incompatibles avec les contraintes techniques initiales.

Ce que j'ai appris

• Travailler sans specs : interpréter des attentes floues et proposer des choix justifiés plutôt que d'attendre des instructions précises — une compétence aussi importante que le code.
• La communication client : aligner les attentes tôt évite les pivots douloureux en fin de projet. Cadrer le périmètre dès le début est aussi du métier de développeur.
• React en contexte réel : premier projet React avec un client — apprendre sous contrainte de livraison accélère la maîtrise d'une façon que les projets d'entraînement ne reproduisent pas.

Learnings & Conclusion

Le projet Baramey v3 a été une expérience importante, même s’il n’a pas été finalisé.
Il m’a permis de développer des compétences essentielles autant sur le plan technique que sur la collaboration client.

Apprentissage technique

J’ai pu renforcer mes bases en :

• React (structure, composants, logique front),
• Tailwind (mise en page rapide, responsive),
• organisation et architecture d’un projet front-end,
• création d’une refonte UI/UX cohérente et moderne.

Ce projet m’a permis de comprendre comment aller d’un site existant vers une vision plus professionnelle.

Compréhension des attentes client

La collaboration m’a appris :

• que la vision d’un client peut évoluer en cours de route,
• qu’il faut clarifier les besoins dès le départ,
• que certaines demandes ne sont pas compatibles avec un budget, un délai ou une stack technique,
• que tous les projets ne vont pas au bout, et que cela fait partie du métier.

Ces aspects humains et organisationnels sont aussi importants que les compétences techniques.

Gestion des limites du projet

J’ai compris l’importance de poser un cadre clair :

• définir ce qui est réalisable,
• identifier ce qui est hors scope,
• expliquer les contraintes techniques,
• savoir arrêter un projet lorsque la direction change trop profondément.

Impact sur ma progression

Même sans finalisation, ce projet a été une excellente base pour progresser en UI, en UX et en front-end.
Il m’a permis de mieux affronter les projets suivants avec une approche plus structurée et professionnelle.

Gallery