Кейс · Сайт · TypeScript

landscape-bureau-nuxt: «Изолиния», концепт сайта ландшафтного бюро

Концепт многостраничного сайта вымышленного ландшафтного бюро на Nuxt 4 со статической генерацией: шесть страниц проектов по динамическому маршруту, фильтр растений по свету, влажности и форме, бриф-форма. Данные лежат в JSON, планы участков рисует код. Бюро, заказчиков и площади выдуманы.

Nuxt 4
Vue 3
TypeScript
Static generation
SVG
CSP
axe
Cloudflare Pages
GitHub Actions

Открыть живой сайт ewsirdev-landscape.pages.dev Код по запросу в Telegram

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

Скриншоты

Скриншот проекта «landscape-bureau-nuxt: «Изолиния», концепт сайта ландшафтного бюро» на экране 1280 пикселей — Десктоп, 1280 px

Скриншот проекта «landscape-bureau-nuxt: «Изолиния», концепт сайта ландшафтного бюро» на экране телефона, 390 пикселей — Телефон, 390 px

02 · О проекте

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

Ограничения

Концепт: бэкенда нет, бриф-форма открывает почтовый клиент с готовым письмом.

Описания растений общие и не заменяют рекомендации питомника.

Английской версии нет.

Что внутри

Nuxt 4 generate: все динамические маршруты пререндерены
CSP без unsafe-inline на Nuxt: выключены entryImportMap и инлайн-стили, window.__NUXT__ вынесен в файл _nuxt/inline-<hash>.js, check-security проваливает сборку при inline-скрипте
Планы участков генерирует код (SVG по данным проекта)
Firefox 390, 768, 1280, 1920: axe, CLS, горизонтальный скролл, консоль проверены

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

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

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

04 · Код

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

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

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