Кейс · Сайт · TypeScript

ceramics-vue: «Муфель», концепт сайта керамической студии

Концепт сайта вымышленной керамической студии на Vue 3 с пререндером каждой страницы в статический HTML (vite-ssg): 7 страниц, 5 динамических страниц курсов и 404. Расписание с фильтрами, запись на пробное через mailto, калькулятор обжига с кривой в SVG. Студии, отзывов и цен не существует, формулы помечены «демо».

  • Vue 3
  • Vue Router
  • TypeScript
  • Vite
  • vite-ssg
  • SVG
  • CSP
  • axe
  • Cloudflare Pages
  • GitHub Actions
Открыть живой сайт ewsirdev-ceramics.pages.devКод по запросу в Telegram

01 · Как выглядит

Скриншоты

Скриншот проекта «ceramics-vue: «Муфель», концепт сайта керамической студии» на экране 1280 пикселей
Десктоп, 1280 px
Скриншот проекта «ceramics-vue: «Муфель», концепт сайта керамической студии» на экране телефона, 390 пикселей
Телефон, 390 px

02 · О проекте

Что это и зачем

Концепт сайта вымышленной керамической студии на Vue 3 с пререндером каждой страницы в статический HTML (vite-ssg): 7 страниц, 5 динамических страниц курсов и 404. Расписание с фильтрами, запись на пробное через mailto, калькулятор обжига с кривой в SVG. Студии, отзывов и цен не существует, формулы помечены «демо».

Ограничения

Концепт: данные и формулы вымышлены.

Форма не отправляет данные, а открывает письмо в почтовой программе; сервера нет.

Что внутри

  • Vue 3 + vite-ssg: 7 страниц и 5 страниц курсов пререндерены в HTML
  • Калькулятор обжига: объём, вес, сушка, режим, длительность и кривая SVG по демо-формулам
  • CSP script-src 'self' без inline-скриптов; check-security проваливает сборку при inline-коде или стиле
  • Firefox 390, 768, 1280, 1920: axe 0, CLS 0, консоль чистая; CI: lint, typecheck, test, build, check:links, npm audit, gitleaks

03 · Как запустить

Запуск одной командой

git clone <репозиторий по запросу> ceramics-vue
cd ceramics-vue
npm ci
npm run dev

04 · Код

Репозиторий приватный

Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.

Запросить код