levkin.ca

Homepage design concepts for Levkin Inc.

Status: active. Production: levkin.ca (/ → spec, /folders/ → stack).

Page	Path	Description
Spec	/spec/	Company story as RFC-style documentation
Folder	/stack-folder/	Manila folders L0–L7, sticky tab stack, site previews

Production (levkin.ca): / → spec, /folders/ → stack. Dev picker at / only when running npm run dev (not deployed).

Develop

npm install
npm run dev

Dev server: http://localhost:5175 (5173 is often taken by other apps)

Page	URL
Home	/
Spec	/spec/
Folders	/stack-folder/

Build

npm run build
# dist/ — Vite multi-page output

npm run build:www
# www/ — production layout for nginx (commit www/ before deploy)

Deploy

Deployed to the homelab web LXC via the private ansible repo (see internal docs).

Folder stack (/stack-folder/)

Eight layers with labeled tabs. Scroll pins earlier tabs on a shared rail; L7 joins last. Scroll stops when all tabs align.

• shared/stack-scroll.js — scroll depth, fold state, layer jump
• stack-folder/folder-rail.js — side rail
• stack-folder/folder-cal.js — Cal.com embeds

Preview screenshots

npm run dev          # separate terminal
npm run capture-previews

Writes PNGs used in stack-folder/previews/ (spec, auto, caseware, iliadobkin, git-repos, cal dark/light).

Test

npm run dev
STACK_URL=http://localhost:5175/stack-folder/ npm run test:folder

Playwright runs desktop (tab alignment at max scroll) and mobile (bottom tab rail, no horizontal overflow, L3 jump).

Test on a phone

Dev server listens on your LAN (host: true in Vite config):

npm run dev
# open http://<your-lan-ip>:5175/stack-folder/ on the phone (same Wi‑Fi)

Production: levkin.ca/folders/ — on viewports ≤720px the side rail becomes a bottom tab bar (L0–L7) with safe-area padding for iOS.

Related sites

• auto.levkin.ca
• caseware.levkin.ca
• github.com/Gitilia (public mirrors)
• cal.levkin.ca
• iliadobkin.com

License

Private repo.