Sushi Show

Strona wzór dla Marcina, sushi mastera – warsztaty i szkolenia na pierwszym planie, catering obok. Nuxt 4, Tailwind CSS i szybkie ładowanie.

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

Strona wzór – kontakt i ceny są przykładowe; na razie nie jest widoczna w Google.

Sushi Show – pierwszy ekran strony
  • 95/100wydajność na telefonie w Lighthouse
  • 100/100dostępność w Lighthouse
  • 274 kBpobiera strona główna na telefonie
  • 2,7 sLCP na telefonie

Co zbudowałem

Marcina poznałem w jednej z restauracji sushi. Podziwiałem, z jakim sercem przykłada się do swoich potraw, i powiedziałem mu kiedyś, że jeśli zechce się reklamować i rozwijać, chętnie pomogę. Tak powstał ten projekt – gotowa strona, którą Marcin może wykorzystać, kiedy zechce pokazać swoje warsztaty szerzej. Pierwszą wersję zrobiłem w Nuxt, kiedy uczyłem się Vue, więc to dla mnie projekt z sentymentem. Ostatnio go odświeżyłem i przyspieszyłem.

Najważniejsze cechy

  • Warsztaty i szkolenia na pierwszym planie – to na nich Marcinowi zależy najbardziej, catering jest obok
  • Terminarz najbliższych warsztatów z arkusza Google – przeszłe terminy chowają się same, widać maks. 4 najbliższe
  • Zdjęcia w AVIF z zapasowym WebP, w 2–3 szerokościach, generowane przy budowaniu strony
  • Galeria zdjęć z warsztatów z powiększeniem na cały ekran
  • Formularz kontaktowy przez Web3Forms – bez klucza otwiera program pocztowy z gotową wiadomością
  • Wymiary zdjęć zapisane w kodzie (strona nie skacze przy ładowaniu) i kontrast przycisków zgodny z WCAG AA

Jak to wygląda

Zrzuty całej strony – kliknij zrzut, żeby go powiększyć. Pomiary: Lighthouse 12.8, strona zbudowana lokalnie, telefon – Moto G Power, wolne 4G.

  • Cała strona na komputerze – od warsztatów i terminarza po catering i kontakt
  • Ta sama strona na telefonie

1 / 2

Sushi Show – cała strona na komputerze

Cała strona na komputerze – od warsztatów i terminarza po catering i kontakt

← Wszystkie projekty