Atelier No.02

Wielostronicowy serwis restauracji premium, który łączy wyrafinowany kierunek wizualny z dynamicznym menu, galerią, formularzem kontaktowym, PWA i techniczną gotowością do publikacji.

Przegląd projektu

Atelier No.02 pokazuje premium podejście do statycznego serwisu restauracyjnego: od strony głównej, menu i galerii po formularz, offline, potwierdzenie wysyłki i PWA.

Projekt został przygotowany jako referencyjna realizacja portfolio, w której dopracowana estetyka idzie w parze z konkretną architekturą front-endu, dostępnością, SEO i procesem buildowym.

Zakres obejmuje stronę główną oraz dedykowane podstrony: o restauracji, menu, galerię, kontakt, strony prawne, widok offline, potwierdzenie formularza i stronę 404. Dzięki temu Atelier No.02 jest pełniejszym serwisem restauracyjnym, nie tylko pojedynczym landingiem.

Warstwa interakcji obejmuje dynamiczne renderowanie menu z data/menu.json, filtrowanie i wyszukiwanie dań, lightbox galerii, przełącznik motywu, mobilny drawer z kontrolą fokusa, formularz kontaktowy oraz komunikaty online/offline.

StronyBiznesGastronomiaPremium

Zakres i akcenty

Case study łączy premium język wizualny z praktycznym zakresem serwisu restauracyjnego: menu, galerią, formularzem, stanami offline i standardem builda.

01

Struktura i dynamiczne menu

Serwis obejmuje komplet podstron restauracyjnych, a pozycje menu są utrzymywane w data/menu.json i renderowane po stronie klienta.

02

Menu, lightbox i formularz

Podstrona menu obsługuje filtrowanie i wyszukiwanie dań, galeria korzysta z lightboxa, a formularz ma walidację i komunikaty statusu wysyłki.

03

SEO, PWA i jakość builda

Projekt zawiera JSON-LD, sitemap, Service Workera, fallback offline, responsywne obrazy, preloading oraz pipeline optymalizacji oparty o Sharp.

Technologie i standard

Atelier No.02 zostało zbudowane w lekkim, statycznym stacku HTML, CSS i JavaScript, z narzędziami wspierającymi jakość kodu, obrazy, dostępność i publikację statyczną.

Warstwa runtime opiera się na HTML5, modułowym CSS podzielonym na base, layout, components i pages oraz JavaScript ES Modules. Build korzysta z PostCSS, cssnano, esbuild, Sharp i fast-glob.

  • funkcje domenowe są rozdzielone w modułach menu, galerii, nawigacji i formularza,
  • kontrole jakości obejmują ESLint, html-validate, linkinator i pa11y-ci,
  • artefakt publikacyjny powstaje przez build-dist.js, z konfiguracją _headers i _redirects.
Mockup mobilny projektu Atelier No.02 prezentowany w widoku telefonu
Mockup tabletowy projektu Atelier No.02 prezentowany w widoku tabletu

Dalszy krok

Zobacz wielostronicowy serwis Atelier No.02 albo wróć do pełnego portfolio.

Atelier No.02 pokazuje zakres pracy nad premium front-endem restauracyjnym: od menu renderowanego z danych i galerii po SEO, dostępność, PWA, obrazy oraz przygotowanie projektu do publikacji.