levkin.ca/stack/index.html
ilia 21c75cdcba Rebuild stack-folder with sticky tab rail and site previews.
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>
2026-05-21 21:30:05 -04:00

103 lines
5.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Levkin — Stack</title>
<meta name="description" content="Levkin — company specification by layer." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./stack.css" />
</head>
<body>
<nav class="nav">
<a href="/">← options</a>
<span class="variants"><a href="/spec/">spec</a> · <a href="/stack-folder/">folder</a></span>
<span class="depth" id="depth">L0</span>
</nav>
<main class="stack-mount">
<section class="layer layer-0" data-layer="0">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="0">L0</button><span class="layer-name">company</span></header>
<h1>Levkin Inc.</h1>
<p class="tagline">LK-SPEC-1.0 · Software development · Canada</p>
<p class="layer-copy">Builds and maintains production software — custom apps, automation, practice systems. Scoped, documented, handoff-ready.</p>
<p class="avail">ACTIVE · Taking new engagements · remote NA &amp; EU</p>
</div>
</section>
<section class="layer layer-1" data-layer="1">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="1">L1</button><span class="layer-name">scope</span></header>
<h2>1. Scope</h2>
<p class="layer-copy">Boutique practice — clear start, deliverable, and handoff. Discovery → fixed proposal → delivery → optional support.</p>
</div>
</section>
<section class="layer layer-2" data-layer="2">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="2">L2</button><span class="layer-name">application</span></header>
<h2>2.1 Custom software</h2>
<p class="layer-copy">Web apps, APIs, internal tools — chosen to fit the problem, not a preset stack.</p>
</div>
</section>
<section class="layer layer-3" data-layer="3">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="3">L3</button><span class="layer-name">automation</span><a href="https://auto.levkin.ca" class="layer-link">auto.levkin.ca ↗</a></header>
<h2>2.2 Automation</h2>
<p class="layer-copy">Background workflows — reporting, notifications, data sync, ops off your plate.</p>
</div>
</section>
<section class="layer layer-4" data-layer="4">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="4">L4</button><span class="layer-name">enterprise</span><a href="https://caseware.levkin.ca" class="layer-link">caseware.levkin.ca ↗</a></header>
<h2>2.3 CaseWare</h2>
<p class="layer-copy">Templates, releases, practice customization — small fixes to full pipeline overhauls.</p>
</div>
</section>
<section class="layer layer-5" data-layer="5">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="5">L5</button><span class="layer-name">quality</span><a href="https://iliadobkin.com" class="layer-link">iliadobkin.com ↗</a></header>
<h2>2.4 Quality &amp; testing</h2>
<p class="layer-copy">Test strategy, automation, release confidence — experienced QA lead without full-time hire.</p>
</div>
</section>
<section class="layer layer-6" data-layer="6">
<div class="layer-inner">
<header class="layer-head"><button type="button" class="layer-id" data-goto="6">L6</button><span class="layer-name">contact</span></header>
<h2>Terms &amp; contact</h2>
<p class="layer-copy">Fixed scope · production-ready · handoff-friendly · right-sized.</p>
<div class="contact-row">
<a class="btn" href="https://cal.levkin.ca/ilia/consult">Book 15 min</a>
<a class="btn btn-ghost" href="mailto:ilia@levkine.ca?subject=Project%20enquiry">ilia@levkine.ca</a>
</div>
</div>
</section>
<div class="stack-stop" aria-hidden="true"></div>
</main>
<footer class="site-foot"><a href="https://git.levkin.ca">git.levkin.ca</a><span>levkin.ca</span></footer>
<div class="stack-ruler" aria-label="Jump to layer">
<button type="button" data-goto="0" data-layer="0">L0</button>
<button type="button" data-goto="1" data-layer="1">L1</button>
<button type="button" data-goto="2" data-layer="2">L2</button>
<button type="button" data-goto="3" data-layer="3">L3</button>
<button type="button" data-goto="4" data-layer="4">L4</button>
<button type="button" data-goto="5" data-layer="5">L5</button>
<button type="button" data-goto="6" data-layer="6">L6</button>
</div>
<script type="module">
import { initStackScroll } from '../shared/stack-scroll.js';
initStackScroll();
</script>
</body>
</html>