Ohmyfood est une interface de réservation de restaurants gastronomiques "mobile-first", développée exclusivement en HTML/CSS avec SASS, sans aucun JavaScript pour les animations.

Ce projet a été réalisé dans le cadre de ma formation de Développeur Web. L'objectif principal était de mettre en œuvre des animations CSS avancées pour améliorer l'expérience utilisateur tout en respectant une approche Mobile First.

• Utiliser SASS pour structurer le code CSS (système de variables, mixins, nesting).
• Implémenter des animations CSS complexes (Loader, effets au survol, apparitions séquentielles).
• Assurer un design responsive cohérent (Mobile, Tablette, Desktop).
• Respecter une maquette graphique rigoureuse via Figma.

Le projet met l'accent sur une expérience fluide et "app-like". Voici un aperçu des animations implémentées :

Un loader personnalisé s'affiche au chargement de la page d'accueil pour simuler une expérience d'application moderne.

Les boutons d'action disposent d'un effet de gradient et d'ombre portée au survol pour un retour visuel immédiat.

Une animation de remplissage progressive avec un dégradé de couleurs pour marquer ses restaurants favoris.

Les plats apparaissent avec un léger décalage temporel (effet cascade) lors de l'ouverture d'un menu de restaurant.

Un indicateur de validation animé (check) s'affiche lors de la sélection d'un plat dans le menu.

• Un navigateur web moderne
• Node.js (si vous souhaitez modifier et recompiler les styles SASS)

1. Clonez le dépôt :

   git clone https://github.com/AndreaP2A/Ohmyfood.git

2. Accédez au dossier :

   cd Ohmyfood

3. Installez les dépendances :

   npm install

4. Lancez la compilation SASS en mode observation (watch) :

   npm run compile

5. Ouvrez le fichier index.html dans votre navigateur.

L'organisation des fichiers suit l'architecture 7-1 Pattern pour une gestion claire du SASS :

.
├── assets/             # Images, fonts et CSS compilé
├── sass/               # Fichiers sources SASS
│   ├── base/           # Reset et typographie de base
│   ├── components/     # Boutons, cartes, loader, etc.
│   ├── layout/         # Header, footer, navigation
│   ├── pages/          # Styles spécifiques à l'accueil et aux menus
│   ├── utils/          # Variables, fonctions et mixins
│   └── main.scss       # Point d'entrée principal
├── src/                # Pages HTML des restaurants
└── index.html          # Page d'accueil

Le projet est accessible en ligne via GitHub Pages : 👉 Consulter la démo Ohmyfood

Andréa PORCHE

• GitHub : @AndreaP2A
• Portfolio : Découvrir mes autres projets
• Email : [email protected]