levkin.ca
Homepage design concepts for Levkin Inc.
| 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 (pve10 LXC 220)
npm run build:www
git add www/ && git commit -m "Rebuild www" && git push origin main
ssh root@10.0.10.10 'pct exec 220 -- bash -c "cd /var/www/levkin && git pull origin main"'
Requires DNS: levkin.ca and www.levkin.ca A → your home IP (same as other *.levkin.ca sites). Caddy on VM 106 proxies to 10.0.10.60:80.
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 jumpstack-folder/folder-rail.js— side railstack-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.