Tous les projets

Toasté Brunch

Le site d’un restaurant de brunch à Soumagne, imaginé autour de la tranche de pain de sa carte imprimée : pains perdus, toasts garnis, burgers et cafés glacés.

Cadre: Projet personnel
Restaurant: Toasté Brunch, Soumagne
Type: Site vitrine, 6 pages
Rôle: Direction artistique, design et développement
Année: 2026
Statut: Non publié
Outils: HTML, CSS, JavaScript, Node.js

Accueil du site Toasté Brunch : le titre « Brunch maison » en grand sur fond brun, et l’assiette du toast au saumon posée devant.

Contexte

Toasté Brunch sert des pains perdus, des toasts garnis, des burgers et des cafés glacés rue César de Paepe, à Soumagne. Ce site est un projet personnel, fait pour le plaisir : il n’est pas en ligne. Il part de ce que le restaurant avait déjà : sa carte imprimée, découpée en tranches de pain, et une charte qui va de la crème au brun, comme les degrés de cuisson d’une tranche.

Mon rôle

Direction artistique, design et développement des six pages : accueil, carte, infos pratiques, mentions légales, confidentialité et page d’erreur. Un petit générateur produit le site : la carte, les horaires et les questions fréquentes se modifient dans des fichiers de contenu.

Défis techniques

La tranche de pain de la carte devenue un composant CSS : le dôme garde ses proportions, le corps s’allonge avec le texte et les traits de croûte gardent leur épaisseur à toutes les tailles.
Une ouverture « servie » : une vraie assiette du restaurant, détourée d’un simple cercle, glisse en tournant devant le titre, puis continue de tourner au défilement.
L’état « ouvert » ou « fermé » calculé en direct à l’heure de Bruxelles, à partir des vrais horaires.
Un plan du quartier redessiné depuis OpenStreetMap aux couleurs du restaurant, à la place d’une carte Google : ni cookie ni script tiers.

Outils

HTML
CSS
JavaScript
Node.js
SVG
OpenStreetMap
JSON-LD

Résultat

Lighthouse sur mobile : de 98 à 100 en performance, 100 en accessibilité, en bonnes pratiques et en SEO, sur l’accueil, la carte et les infos pratiques. Le site n’est pas en ligne : les captures ci-dessous viennent de sa version locale.

Le site, page par page

Captures réelles, sur ordinateur, tablette et téléphone. Le téléphone, l’e-mail et le numéro d’entreprise du restaurant sont floutés, comme les noms des auteurs des avis.

Section Côté salé : le texte et les onglets à gauche, à droite la carte des toasts dans une grande tranche de pain crème, avec les prix. — Côté salé : la carte des toasts dans une tranche de pain, avec un onglet par rubrique.

Section « Une boisson pour chaque moment » sur fond vieux rose, avec quatre photos de boissons. — Les boissons, sur le vieux rose de la charte.

Page d’erreur : une tranche de pain carbonisée à côté du titre « Celle-ci est trop grillée ». — La page d’erreur : la tranche oubliée dans le grille-pain.

Page La carte : les rubriques à gauche, puis les pancakes et pains perdus et les burgers, chacun dans sa tranche, avec les prix. — La carte, une tranche par rubrique.

Plan du quartier aux couleurs du restaurant, avec l’adresse et les horaires dans un encart. — Le plan, redessiné depuis OpenStreetMap.

La carte sur tablette : les pancakes et pains perdus dans leur tranche. — Sur tablette : la carte.

Accueil sur téléphone : le titre « Brunch maison » et l’assiette du toast au saumon. — L’accueil sur téléphone.

Côté salé sur téléphone : les onglets, puis la carte des toasts dans sa tranche. — Côté salé, en une colonne.

Menu mobile ouvert : La carte, Le lieu, Infos pratiques et le bouton Réserver. — Le menu mobile.

Page d’accueil complète : l’ouverture, la présentation, le salé, les pains perdus, les boissons, le lieu, les avis, les questions fréquentes, le plan et le pied de page. — La page d’accueil entière : survolez la fenêtre pour la parcourir.