1. Context
• Company: OhMyFood, a FoodTech startup (NY → Paris).
• Team: Artdantech, Paul (project lead), UX/UI designer (mockups + prototype + animations).
• Deliverables: static multi‑page website (Home + 4 restaurant pages), Sass compiled to CSS, prototype‑accurate animations, mobile‑first responsiveness, an “animations” README, deployment (GitHub Pages).
• Starting point: mobile/desktop mockups + Figma prototype (interactions/animations), provided images and copy, creative brief.
2. Need
• Build a mobile‑first experience listing restaurants and their menus, with smooth interactions and animations (loader, favorites, card hover, dish selection).
• Implement 4 restaurant pages from a shared template (only content changes).
• Use Sass (modular structure, variables/mixins), ensure accessibility and performance, and document how animations work.
3. Client / Stakeholders
• End users selecting dishes in advance (mobile-first).
• Product team (Paul) ensuring compliance with the brief and Figma prototype.
• Design team ensuring visual fidelity and animation consistency.
4. Goals
4.1 Functional
• Home page: hero, “How it works” section (steps), restaurants list (clickable cards, favorites).
• Restaurant pages: starters / mains / desserts, dish selection (visual feedback), order CTA.
• Visible, consistent animations: hover transitions, progressive item reveal, favorite heart, entry loader.
4.2 Technical
• Sass integration (mobile‑first) compiled to CSS; tablet/desktop breakpoints (min-width).
• Strict adherence to mockups/prototype (spacing, typography, colors, states).
• Accessibility: semantic HTML5, alt text, visible focus, prefers-reduced-motion, acceptable contrast.
• Quality: W3C‑valid HTML/CSS, readable code with BEM, modern browser compatibility (Chrome/Firefox/Safari/Edge).
5. Constraints / Challenges
• True mobile‑first: base CSS targets mobile; enhancements added progressively via media queries.
• Rich animations must remain performant (transform/opacity) and accessible (reduced motion).
• Share styles across 4 restaurant pages without CSS duplication (template + content only).
• Pixel‑perfect alignment to mockups, including hover/pressed states and micro‑interactions.
6. Process / Methodology
6.1 Analysis
• Map components: Header, Footer, Steps, Restaurant Card, “New” badge, Favorite heart, MenuItem with check, CTA buttons, Loader, responsive grids.
• Extract design tokens: colors, typography, spacing, radius, shadows, animation durations/easings; centralize in Sass variables.
6.2 Breakdown into GitHub issues
• Setup: public repo + GitHub Pages, folder structure, Sass pipeline (Dart Sass), README.
• Home mobile (no animations) → add animations → responsive (tablet, desktop).
• Restaurant page #1 (mobile) → animations (reveal, selection) → responsive.
• Duplicate restaurant pages #2–#4 (content only).
• Accessibility (focus, alt, reduced motion), W3C validation, image optimization, finalize animation documentation.
6.3 Architecture & logic
• Project tree: see GitHub repo.
• Responsive: mobile by default; @media (min-width: 768px) tablet; (min-width: 1024px/1200px) desktop; container max-width: 1440px.
• Restaurant template: same DOM and class names; only content (titles, images, prices) changes.
• Animations (logic + documentation):
- Loader: full-screen overlay, spin/fade keyframes, short duration (1–1.5s), GPU-friendly transform/opacity; hidden via animationend or a class toggle.
- Card/menu item reveal: fade-up keyframes with staggered delays via :nth-child() (animation-delay).
- Favorite heart: double icon (filled + outline) or gradient with background-clip; transition via opacity/background-size; keyboard/focus support; persistent state simulated via .is-liked class.
- Dish selection: container with right-aligned price and a “check” area sliding in from the right (transform: translateX(...)), check icon rotation (+180°) and fade-in; reverses on hover out/blur; timings/easing controlled by Sass variables ($ease, $t-fast, $t-med).
- CTA buttons: gradient + shadow; hover = subtle scale + stronger shadow; active = short scale down.
- Accessibility: @media (prefers-reduced-motion: reduce) disables non-essential keyframes, reduces durations, removes staggers.
6.4 Technical choices (rationale)
• Modular Sass: variables/mixins for palette, typography, z-index, timings; ordered imports (light 7‑1).
• Animation performance: prefer transform/opacity, avoid expensive layout recalculations, limit animated box-shadows; use will-change sparingly.
• Layout: Flex/Grid depending on the section; images with object-fit: cover; ellipsis for long dish names/descriptions on mobile.
• Documentation: a dedicated “Animations” README describing each effect (goal, classes, keyframes, timings, a11y behavior).
6.5 Main flows
• Home load → brief loader → hero + “How it works” (hover steps) → restaurant list (cards + favorites).
• Open a restaurant → staggered reveal of sections (Starters/Mains/Desserts) → dish selection (check slides + icon rotation) → “Order” CTA.
• Toggle favorites from Home or restaurant pages (animated heart).
6.6 Tests & quality
• W3C validation (HTML/CSS); Stylelint/Prettier on Sass; Sass compilation with no warnings.
• A11y: tab order, visible focus, alt text, contrast; test prefers-reduced-motion; keyboard access to “selected/favorite” states.
• Responsive: checks at 320/375/414/768/1024/1200/1440px; stable grids and images.
• Performance: Lighthouse mobile; optimize image weight; avoid continuous costly animations; ensure near-zero CLS.
7. Analysis
• A mobile-first approach and modular Sass architecture enable fast iteration across pages and breakpoints. Treating animations as documented “components” (shared tokens, reusable keyframes, reduced-motion support) ensures consistency, performance, and accessibility.
8. Technical decisions
• Sass (Dart Sass) with variables/mixins for theming and timings; BEM for predictable class naming.
• Progressive enhancement with min-width media queries; Grid/Flex as needed; object-fit; text-overflow ellipsis for mobile layouts.
• Animations built on transform/opacity; user preferences respected; gradients/shadows kept under control to reduce rendering cost.
9. Resolution logic
• Build Home mobile (static) → add animations → expand responsive; build one restaurant template (mobile) → add animations → expand responsive; duplicate for the remaining restaurants; finalize a11y/perf/validation; document animations and Sass structure in README.
10. Stack used
• HTML5, Sass (Dart Sass) → compiled CSS; BEM.
• Tools: VS Code, Live Server, Stylelint/Prettier, Autoprefixer (PostCSS), Lighthouse, Axe, W3C Validators.
• Deployment: GitHub + GitHub Pages; Git workflow (issues/branches/PR).
• Assets: optimized images (right formats/sizes), icons (Font Awesome or SVG depending on mockup).
11. Final result
• OhMyFood website faithful to mockups/prototype, responsive mobile-first, with 4 restaurants built from a shared template.
• Polished, performant, documented animations (loader, favorite hearts, reveals, dish selection, CTAs).
• Clean and validated code (HTML/CSS), baseline accessibility ensured, clear and maintainable Sass structure, delivered and published (GitHub Pages).