Skip to content
miito.devThe Workshop · File 0176
Back to the register

Pho Kam Long — website

The restaurant's website at phokamlong.com, in English, French and Vietnamese, with a menu the staff edit themselves.

Directive
R-003
Class
Client
Role
Design and build
Client
Pho Kam Long
Period
Jan 2025 – Jun 2026
Status
Delivered
The Pho Kam Long website: the home page, the menu, and back.

The account§ 01

The first site went up in January 2025. It was rebuilt from 2026 on Next.js 16, Panda CSS and Sanity, so the menu, hours and photographs are edited in a studio rather than in code.

It is read in Canadian English, Canadian French and Vietnamese, and now lives in one repository with the restaurant's POS and server.

Outcomes

  • Live at phokamlong.com.
  • Three languages: en-CA, fr-CA and vi.
  • Menu, hours and photographs edited by the restaurant in Sanity Studio.

Timeline

  1. First site
  2. Rebuild begins
  3. Joins the restaurant's monorepo
  4. Deployed on Vercel

In figures§ 02

  • 3languages: English, French and Vietnamese
  • 150+dishes on the menu, searched as you type
  • 2faces, Playfair Display and Be Vietnam Pro

What it does§ 03

  1. Three languages

    Every page in en-CA, fr-CA and vi, switched from the header, with a type pair that carries Vietnamese.

  2. Hours, live

    The header knows whether the restaurant is open now and when it opens next.

  3. A searchable menu

    Categories along the top and a search box that filters the dishes as you type.

  4. A page per dish

    Each dish with its photograph, sizes and prices, and others like it.

  5. Find us

    Hours by day, the address, a map and directions in one place.

  6. Edited by the restaurant

    The menu, hours and photographs live in Sanity Studio, so the staff change them without code.

Pages§ 04

  • Fig. 1Home
  • Fig. 2The menu, with search
  • Fig. 3A dish's own page
  • Fig. 4Find us

Three languages§ 05

The same page in each of its languages, headings and slogans translated rather than left in English.

  • Fig. 5English (Canada)
  • Fig. 6Français (Canada)
  • Fig. 7Tiếng Việt

On a phone§ 06

  • Fig. 8The home page on a phone, with the tab bar along the foot.
  • Fig. 9The menu on a phone.
  • Fig. 10A dish's page on a phone.
  • Fig. 11Find us on a phone.

Palette§ 07

From the site's design tokens, in OKLCH.

  • Backgroundoklch(97.7% 0.0102 81.8)The page
  • Surfaceoklch(94% 0.0165 79.35)Alternating sections
  • Inkoklch(22.2% 0.011 60.87)Type, the footer, buttons
  • Primaryoklch(54.3% 0.1556 34.13)Order Online, links, focus
  • Accent softoklch(81.5% 0.0887 49.74)Highlights
  • Openoklch(58.3% 0.1124 152.76)The open-now dot

How it fits together§ 08

  1. Restaurant staffChange the menu, hours and photographs
    Edits
  2. Sanity StudioThe content, in three languages
    Webhook
  3. Next.js 16 on VercelPages rebuilt when the content changes
    HTTPS
  4. GuestsOn a phone or at a desk