Case · Site · TypeScript
kladka-site: Kladka, a demo site for a timber-frame studio
A demo multi-page site for a fictional timber-frame studio: 5 projects with generated drawings, services, prices with an estimator, a journal. Company, prices and timelines are made up.
- Astro
- TypeScript
- Content collections
- SVG
- WebGL
- axe
- htmlhint
- GitHub Actions
01 · How it looks
Screenshots
02 · About
What it is and why
Kladka is a demonstration multi-page site for a fictional timber-frame construction studio. The company, team, prices and timelines are made up, and every page carries a note saying so.
Built on Astro 7 (static output, TypeScript, content collections). The design is a drawing sheet: gridded plywood, graphite, ochre, self-hosted fonts. The hero has a WebGL ribbon with an SVG fallback.
Limitations
The English version covers only the home page, catalog, prices and contacts.
Text inside the SVG drawings uses a system font.
Lighthouse was not run.
What is inside
- 24 pages: 19 RU, 4 EN and a 404 - home, a catalog and 5 projects (plan, area, timeline, materials, stages, a Gantt chart, 4 drawings), services, how we work, prices with an estimator, about, FAQ, a 4-article journal, contacts with a placeholder form, privacy policy
- All 20 drawings are generated by code as SVG from project data; 24 OG images are rendered by a script
- Strict CSP with no inline code; site-meta kit: robots, sitemap with hreflang, llms.txt, security.txt; JSON-LD Organization, Service, Article, FAQPage
- 756 links and anchors without errors, htmlhint 0, axe 0 on every page at 390 and 1280, npm audit 0
- Deployed to Cloudflare Pages
03 · How to run
Run it locally
git clone <repository on request> kladka-site
cd kladka-site
npm install
npm run dev04 · Code
The repository is private
The source is in a private repository. Message me on Telegram and I will open access.
Request the code