Overview
Vancobab is a Persian kebab food truck in Vancouver that also caters events. The owners needed a site for two very different visitors: someone on their phone deciding what to eat at the window, and someone planning a wedding for 200 guests.
I designed and built the whole site from scratch, with no framework and no build step. Partway through, the truck's opening moved, so I turned a finished menu-and-ordering site into a pre-launch site that collects interest instead of promising food that wasn't being served yet.
The site
The brief
- Five pages: home, the truck menu, catering packages, the family story, and contact and booking
- Serve two audiences: quick lunch customers on phones, and people planning catering for events
- A look that feels Persian and specific to the family's food, not a generic dark restaurant template
- No ongoing costs: static hosting, no backend, no paid plugins
- Fast and dependable on a phone signal outside a truck window
Design system
The palette comes from the logo and from Persian tilework: the logo's red for action, a saffron gold for detail, and tile turquoise and rug indigo used only in the ornaments.
Typography
Anton for headlines, tall and loud like a truck's signage; Work Sans for body copy; IBM Plex Mono for small labels, prices, and eyebrows.
Persian ornament, chosen with care
The first version used a rotating star medallion and an eight-point star lattice. Seen at a glance, the overlapping squares read as a hexagram, which was not the message for a Persian family business. I replaced both with motifs that don't rely on stars: a line-art toranj medallion around the logo's own flame emblem, an ogee trellis behind every page, pointed-arch badges and window frames, and a thin guard-stripe band like the border of a rug.
One stylesheet, two moods
Catering pages swap the brand accent from red to gold through a single attribute on the page. Lunch reads hot and quick; catering reads warmer and more formal, with no duplicated CSS.
Tech stack
Why it is built this way
A food truck's site has a few jobs: show the food, say where the truck is, and take a catering enquiry. None of that needs a framework or a server. Five static pages load fast on a weak signal, cost nothing to run beyond a domain, and can't break when a plugin updates. The only external service is Web3Forms, which turns the forms into email without a backend.
What I built
The order builder
Customers can pick a ready-made combo or build their own plate in five steps: base, protein, side, sauces, and drink. Sauces allow several picks; every other step takes one. A running subtotal updates as they choose, and the finished order becomes a plain-text summary they read to the cashier. There is deliberately no payment step: the truck takes payment at the window, so the builder's job is to speed up the line, not to replace it. It is parked until the owners set real prices, and returns from the project history on launch day.
The pre-launch turn
When the opening moved, the site was showing a menu with placeholder prices, a location that didn't exist yet, and copy that said the truck was already serving. Visitors who were interested had no way to be reached again. I rewrote the copy for a launch, swapped the menu, catering, and location for designed coming-soon states, and added a "notify me" signup to the home, menu, catering, and About pages.
Every signup and the contact form read one access key from a single config file. Until the owners add their key, each form falls back to a pre-filled email to them, so no visitor hits a dead end.
The truck that parks itself
On a first visit, the truck logo drives in, then shrinks and slides into the header's logo slot using the Web Animations API. It plays once per session, is skipped entirely for anyone who prefers reduced motion, and has a hard stop so it can never hold up the page. I also fixed an edge case where the handoff broke if a logo image hadn't loaded yet.
Phone-first navigation
On phones, navigation moves into a five-tab bar at the bottom of the screen. The Truck tab started as a flame icon, which didn't read as "truck" at tab-bar size, so it became a line-drawn food truck with a serving window that matches the other tab icons.
Motion that never hides content
Sections fade in as they scroll into view, but the hidden starting state only applies once the script has run. If the JavaScript never loads, every word is still on the page.
SEO and sharing
- Canonical URLs, page-level titles and descriptions, a robots.txt, and an XML sitemap
- Open Graph and Twitter tags on every page, with a 107 KB share image so links preview reliably in WhatsApp, iMessage, and X
- The logo cut from 116 KB to 17.7 KB, and favicons rebuilt from a precise crop of the emblem after the first set clipped its red ring
Working with the client
- Removed a "charcoal-grilled" claim from every page once I learned the truck doesn't cook over charcoal, rather than replace it with another guess
- Replaced a placeholder email with the real one, and set the phone number and Instagram to "Coming soon" as plain text instead of linking to a fake number or an empty account
- Kept the finished menu, catering packages, and order builder in the project history, so launch day is a restore, not a rebuild
Outcome
- A live five-page site at vancobab.ca with a Persian identity of its own
- A pre-launch flow that turns curious visitors into a launch list instead of a dead end
- An order builder and full menu ready to switch on when the truck opens
- Zero running cost beyond the domain