Sushi Show

A sample website for Marcin, a sushi chef – workshops and training first, catering next to them. Nuxt 4, Tailwind CSS and fast loading.

  • Nuxt 4
  • Vue 3
  • Tailwind CSS 4
  • @nuxt/image

A sample website – contact details and prices are examples; not visible in Google for now.

Sushi Show – first screen of the website
  • 95/100mobile performance in Lighthouse
  • 100/100accessibility in Lighthouse
  • 274 kBdownloaded by the home page on mobile
  • 2.7 sLCP on mobile

What I built

I met Marcin in one of the sushi restaurants. I admired how much heart he puts into his food, and I once told him that if he ever wants to advertise and grow, I will gladly help. That is how this project started – a ready website Marcin can use when he wants to show his workshops to more people. I made the first version in Nuxt when I was learning Vue, so this project means a lot to me. Recently I refreshed it and made it faster.

Main features

  • Workshops and training first – that is what matters most to Marcin, catering is next to them
  • A schedule of upcoming workshops from a Google Sheet – past dates hide themselves, you see up to 4 next ones
  • Photos in AVIF with a WebP fallback, in 2–3 widths, generated when the site is built
  • A gallery of workshop photos with a full-screen view
  • A contact form via Web3Forms – without a key it opens an email app with a ready message
  • Image sizes set in the code (the page does not jump while loading) and button contrast that meets WCAG AA

How it looks

Full-page screenshots – click one to see it bigger. Measurements: Lighthouse 12.8, the site built locally, mobile – Moto G Power, slow 4G.

  • The whole page on desktop – from workshops and the schedule to catering and contact
  • The same page on mobile

1 / 2

Sushi Show – the whole page on desktop

The whole page on desktop – from workshops and the schedule to catering and contact

← All projects