Ember Roll
salmon · avocado · chili
Self-initiated design + code demo
Sushi Bar: адаптивний інтерфейс із живими станами
Не копія клієнтського макета й не вигаданий ресторан. Це окремий design-to-code demonstrator: каталог, фільтри та кошик працюють, а responsive логіка змінює композицію, а не лише ширину карток.
- Ціль
- Перевірювана адаптивна верстка
- Стек
- React · semantic HTML · CSS · client state
- Viewport
- 390 · 768 · 1440
- Статус
- Self-initiated demonstrator
Live responsive interface
Фільтруйте меню й додайте товари
Kyiv · open until 22:30Quiet craft.
Quiet craft.
Bold taste.
Seasonal sushi, precise cuts and warm rice — delivered without losing the ritual.
Explore menu ↓fresh
daily
One content system. Three deliberate layouts. No squeezed desktop cards on mobile.
3907681440
Walkthrough · 33 seconds
Responsive-стани від desktop до mobile
Definition of Done
Адаптивність перевіряється поведінкою
- 390 px: navigation скорочена, hero і menu переходять у одну колонку;
- 768 px: картки використовують двоколонкову сітку без overflow;
- 1440 px: hero має окрему арт-композицію, каталог — чотири картки;
- filter state озвучується через aria-pressed і live region;
- cart counter має доступну назву з кількістю та сумою.