Du JavaScript modulaire
Un fichier par rôle : navigation, carte, effet 3D, animations et réservation. Le rendu de la carte importe l'effet 3D comme un module ES.
Étude de cas
SITE VITRINE RESTAURANT
Un site vitrine pour un restaurant gastronomique fictif, L'Étoile d'Or : carte filtrable, effets 3D sur les plats, formulaire de réservation et animations au défilement, en Tailwind CSS et JavaScript.
Le restaurant est fictif. Le formulaire de réservation est une démonstration : il n'envoie rien.
LE DÉFI
Faire ressentir l'univers d'un restaurant gastronomique, élégant et chaleureux, avec une interface sobre qui conduit le visiteur vers deux actions : découvrir la carte, réserver une table.
Sans framework, le site devait rester léger, avec un JavaScript découpé par rôle plutôt qu'un seul gros fichier.
CE QUE FAIT L'APPLICATION
- Carte de 6 plats avec filtres par catégorie : tous, entrées, plats, desserts.
- Effet 3D au survol des plats, sans bibliothèque.
- Barre de navigation qui change au défilement, et menu mobile.
- Sections qui apparaissent progressivement pendant le défilement.
- Formulaire de réservation : nom, e-mail, téléphone, nombre de personnes, date, heure et demandes particulières.
- Mise en page adaptée au mobile.
DÉCISIONS TECHNIQUES
La carte est une donnée
Les plats sont un tableau d'objets. Les filtres et les cartes sont générés par le code : ajouter un plat revient à ajouter un objet.
Tailwind compilé en un seul fichier
Tailwind est configuré à part et compilé en un fichier CSS minifié, sans bibliothèque de composants.
Un effet 3D léger
L'inclinaison des cartes suit le pointeur grâce à une transformation en perspective, en une cinquantaine de lignes.
APERÇU
MISE EN LIGNE
- CSS Tailwind compilé et minifié.
- Aucune dépendance JavaScript, hormis les icônes Lucide.
- Hébergement statique sur Vercel.
Suite