←

Em Sherif Deli

The menu website for Em Sherif Deli in downtown Beirut: Lebanese comfort food, man'oushe at dawn, shawarma past noon, every item and price on one page, with a brand drawn from Lebanese azulejo tiles.

Lebanese comfort, the Em Sherif way.

The menu website for Em Sherif Deli in downtown Beirut: Lebanese comfort food, man'oushe at dawn, shawarma past noon, every item and price on one page, with a brand drawn from Lebanese azulejo tiles.

live · Restaurant · React · Vite · Beirut

  • 2026Designed and built
  • 1 fileHolds the whole menu
  • 3Typefaces, Latin and Arabic
  • 0Image files for the tile band
emsherifdeli.com, the home section. Click to open.emsherifdeli.com, the home section. Click to open.

Design and build, end to end

I designed the site's visual system and built it as a React app the team can update without touching a component: change a price in one data file and the menu, the ticker and the navigation follow.

  • Visual system: navy and cream, azulejo tile band, Michroma, Chakra Petch and Aref Ruqaa
  • Menu architecture: food, manaqish, sandwiches, sweets, drinks, story, merch, visit
  • React 18 and Vite build, one component per section
  • Motion: stroke draw-in and scroll reveal that respect reduced motion
  • Merch and the drinks menu for the phone

What it does

  1. 01

    The whole menu on one page

    Food, manaqish, sandwiches, sweets and drinks, every item with its price in US dollars, grouped the way the counter sells them.

  2. 02

    A ticker of the classics

    A moving strip of mezze, man'oushe, farrouj, kibbeh, soft serve, muhammara and shawarma across the hero.

  3. 03

    The story timeline

    A short history of the deli told as a timeline, driven from the same data file as the menu.

  4. 04

    Merch

    A section for the deli's own merch, from tees to beads.

  5. 05

    Visit

    Address, phone, email and opening hours, with a map link.

  6. 06

    Bilingual brand

    English set in Michroma and Chakra Petch, Arabic calligraphy in Aref Ruqaa, side by side in the logo and the headings.

How it was built

  1. Content in one file

    All menu items, prices, ticker words, nav links and the story timeline live in one data file. Editing content never means editing a component.

  2. A design system in CSS

    Tokens, layout, motion and the azulejo divider band in one global stylesheet. The tile artwork is embedded as a data URI, so there are no image files to deploy for it.

  3. Motion that behaves

    A hook measures strokes for the draw-in and wires scroll-reveal observers. A class is added to the html element before paint so reveals never flash, and everything respects prefers-reduced-motion.

Stack

Frontend
React 18 and Vite, one component per page section.
Type
Michroma, Chakra Petch and Aref Ruqaa from Google Fonts.
Hosting
Static build, live at emsherifdeli.com.