Case · Site · TypeScript
ceramics-vue: "Muffle", a ceramics studio site concept
A concept for a fictional ceramics studio on Vue 3 with every page prerendered to static HTML (vite-ssg): 7 pages, 5 dynamic course pages and a 404. A schedule with filters, a trial-class booking via mailto, a kiln calculator with an SVG curve. The studio, reviews and prices do not exist; formulas are marked "demo".
- Vue 3
- Vue Router
- TypeScript
- Vite
- vite-ssg
- SVG
- CSP
- axe
- Cloudflare Pages
- GitHub Actions
01 · How it looks
Screenshots
02 · About
What it is and why
A concept for a fictional ceramics studio on Vue 3 with every page prerendered to static HTML (vite-ssg): 7 pages, 5 dynamic course pages and a 404. A schedule with filters, a trial-class booking via mailto, a kiln calculator with an SVG curve. The studio, reviews and prices do not exist; formulas are marked "demo".
Limitations
A concept: data and formulas are made up.
The form sends no data, it opens a letter in a mail client; there is no server.
What is inside
- Vue 3 + vite-ssg: 7 pages and 5 course pages prerendered to HTML
- A kiln calculator: volume, weight, drying, programme, duration and an SVG curve from demo formulas
- CSP script-src 'self' with no inline scripts; check-security fails the build on inline code or style
- Firefox at 390, 768, 1280, 1920: axe 0, CLS 0, clean console; CI: lint, typecheck, test, build, check:links, npm audit, gitleaks
03 · How to run
Run it locally
git clone <repository on request> ceramics-vue
cd ceramics-vue
npm ci
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