Vite · SCSS · бренд-витрина

Virelle

Интернет-витрина пижам и нижнего белья — коллекции, посадка и спокойная элегантность

Frontend · UX · E-commerce storefront HTMLSCSSJavaScriptViteVercel
Скриншот проекта «Virelle»

Задача

Что нужно было решить

Бренду пижам и белья нужна витрина, где эстетика и точная посадка важнее «корзины ради корзины»: коллекции и карточки товара с характером, размерная сетка без догадок и понятный путь к заказу — без тяжёлой e-commerce платформы на старте.

Решение

Что я сделал

Собрал Vite multi-page storefront (главная, каталог, карточка, корзина) на SCSS design system: атмосфера бренда, каталог и карточка товара, калькулятор размеров, корзина в localStorage и демо-оформление заказа на сайте. Проработал адаптив и деплой на Vercel; код открыл в публичном репозитории.

Компромиссы

Чем пришлось пожертвовать

Корзина живёт в localStorage, без бэкенда. Хостинг бесплатный, отклик мгновенный, а вся витрина — статика, которую невозможно положить нагрузкой. Цена решения прямая: корзина не переезжает между устройствами и настоящей оплаты нет. Для задачи «показать бренд и посадку» это правильный размен, но развернуть в реальный магазин без бэкенда уже не получится — и это заложено в кейс честно.

Результат

Что получилось

Живая бренд-витрина на virelle-chi.vercel.app и открытый GitHub: кейс показывает UI/UX и фронтенд-инженерию под fashion e-com — от героя до корзины, без претензии на полный биллинг и склад.

Итог в трёх словах

  • Каталог и карточки
  • Размерный калькулятор
  • Корзина
  • Open source

Стек

  • HTML
  • SCSS
  • JavaScript
  • Vite
  • Vercel