ilia
21c75cdcba
L0–L7 folders stack on scroll with aligned max depth, labeled tabs that stay consistent when L7 joins the rail, Cal embeds, preview screenshots, Playwright tests, and updated README. Co-authored-by: Cursor <cursoragent@cursor.com>
levkin.ca
Design concepts for the Levkin software development company homepage.
| Option | Path | Vibe |
|---|---|---|
| Spec | /spec/ |
RFC documentation, endpoints, iliadobkin.com |
| Cards | /stack/ |
Dark overlapping sticky cards — click a layer to bring it forward |
| Folder | /stack-folder/ |
Manila folders, staggered tabs (L0–L7), site previews |
Open / to compare all three.
Develop
cd ~/Documents/code/levkin.ca
npm install
npm run dev
Vite serves the multi-page app (default http://localhost:5173). If that port is busy, pass another: npx vite --port 5175.
| Page | URL |
|---|---|
| Compare | / |
| Spec | /spec/ |
| Cards | /stack/ |
| Folders | /stack-folder/ |
Build
npm run build
# output in dist/
Folder site (/stack-folder/)
Eight manila folders (L0–L7) with labeled tabs. Scroll stacks earlier tabs on a shared rail; L7 rises into the row last. Scroll depth is capped when all tabs align (is-folded).
- L0 — Company + Cal embed
- L1 — Scope + spec preview
- L2 — Services
- L3–L5 — Automation, CaseWare, QA previews
- L6 — Git repos preview
- L7 — Terms + Cal embed
Modules: shared/stack-scroll.js (scroll/fold), folder-rail.js (side rail), folder-cal.js (Cal.com embeds).
Preview screenshots
Each linked folder shows a screenshot; refresh captures with dev server running:
npm run dev # separate terminal
npm run capture-previews
Writes PNGs to stack-folder/previews/.
Tests (Playwright)
Requires dev server on the URL you pass:
npm run dev
STACK_URL=http://localhost:5173/stack-folder/ npm run test:folder
STACK_URL=http://localhost:5173/stack-folder/ npm run test:stack-scroll
test:folder checks tab alignment at max scroll and L7 jump. test:stack-scroll covers scroll/blur behavior on the card stack.
Related sites
- auto.levkin.ca — automation
- caseware.levkin.ca — CaseWare consulting
- jobs.levkin.ca — job orchestration
- git.levkin.ca — source control
- iliadobkin.com — SDET portfolio · quality engineering