Кейс · Сайт · TypeScript
kladka-site: «Кладка», демо-сайт студии каркасного строительства
Демо-сайт вымышленной студии каркасного строительства: 5 проектов с чертежами, услуги, цены с калькулятором-ориентиром, журнал. Компания, цены и сроки выдуманы, на каждой странице есть пометка.
- Astro
- TypeScript
- Content collections
- SVG
- WebGL
- axe
- htmlhint
- GitHub Actions
01 · Как выглядит
Скриншоты
02 · О проекте
Что это и зачем
«Кладка» — демонстрационный многостраничный сайт вымышленной студии деревянного каркасного строительства. Компания, команда, цены и сроки выдуманы, на каждой странице есть пометка об этом.
Сайт собран на Astro 7 (статическая сборка, TypeScript, content collections). Дизайн «лист чертежа»: фанера с сеткой, графит, охра, шрифты self-host. В hero есть WebGL-«ribbon» с SVG-фолбэком.
Ограничения
Английская версия есть только у главной, каталога, цен и контактов.
Текст внутри SVG-чертежей набран системным шрифтом.
Lighthouse не запускался.
Что внутри
- 24 страницы: 19 RU, 4 EN и 404 — главная, каталог и 5 проектов (план, площадь, сроки, материалы, этапы, диаграмма Ганта, 4 чертежа), услуги, как работаем, цены с калькулятором-ориентиром, о студии, FAQ, журнал из 4 статей, контакты с формой-заглушкой, политика
- Все 20 чертежей рисует код: SVG по данным проекта; 24 картинки OG рендерятся скриптом
- Строгий CSP без inline; kit site-meta: robots, sitemap с hreflang, llms.txt, security.txt; JSON-LD Organization, Service, Article, FAQPage
- 756 ссылок и якорей без ошибок, htmlhint 0, axe 0 по всем страницам на 390 и 1280, npm audit 0
- Выложено на Cloudflare Pages
03 · Как запустить
Запуск одной командой
git clone <репозиторий по запросу> kladka-site
cd kladka-site
npm install
npm run dev04 · Код
Репозиторий приватный
Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.
Запросить код