Restore L6 stack with scroll stop; add folder, paper, trace variants.

Fix card stacking with scroll-section drivers; expand Spec iliadobkin.com docs. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-20 22:47:14 -04:00
parent b03a9972cf
commit 531acf6969
16 changed files with 519 additions and 390 deletions
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Levkin — Stack Trace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./trace.css" />
+</head>
+<body>
+  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><span id="depth">#0</span></nav>
+  <main class="mount">
+    <div class="scroll-section" data-layer="0"><article class="frame f0"><code>at Levkin.foundation (levkin.ca:0)</code><div class="frame-body"><strong>Levkin</strong><p>Canadian software practice · 15+ yrs · remote</p></div></article></div>
+    <div class="scroll-section" data-layer="1"><article class="frame f1"><code>at Levkin.application (levkin.ca:1)</code><div class="frame-body"><strong>custom_software()</strong><p>TS · Python · .NET · APIs</p></div></article></div>
+    <div class="scroll-section" data-layer="2"><article class="frame f2"><code>at Levkin.automation (auto.levkin.ca:2)</code><div class="frame-body"><strong>automation_pipeline()</strong><p>n8n · CI/CD · LLMs</p></div></article></div>
+    <div class="scroll-section" data-layer="3"><article class="frame f3"><code>at Levkin.caseware (caseware.levkin.ca:3)</code><div class="frame-body"><strong>enterprise_module()</strong><p>CaseWare · MNP · JazzIt</p></div></article></div>
+    <div class="scroll-section" data-layer="4"><article class="frame f4"><code>at Levkin.quality (iliadobkin.com:4)</code><div class="frame-body"><strong>sdet_suite()</strong><p><a href="https://iliadobkin.com">iliadobkin.com</a> — traces · Playwright</p></div></article></div>
+    <div class="scroll-section" data-layer="5"><article class="frame f5"><code>at Levkin.operations (jobs.levkin.ca:5)</code><div class="frame-body"><strong>job_ops()</strong><p>internal · auth required</p></div></article></div>
+    <div class="scroll-section scroll-section--final" data-layer="6"><article class="frame f6"><code>at Levkin.engage (interface:6)</code><div class="frame-body"><strong>main()</strong><p><a href="https://cal.levkin.ca/ilia/consult">book_consult()</a> · <a href="mailto:hello@levkine.ca">send_mail()</a></p></div></article></div>
+    <div class="stop"></div>
+  </main>
+  <footer class="foot"><span>// end of stack</span><a href="https://git.levkin.ca">git.levkin.ca</a></footer>
+  <script src="./trace.js" type="module"></script>
+</body>
+</html>
@@ -0,0 +1,48 @@
+:root {
+  --nav: 2.5rem; --stick: 0.9rem; --step: 1rem; --unit: 54vh;
+  --bg: #0d0d0f; --mono: 'IBM Plex Mono', monospace;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: var(--mono); background: var(--bg); color: #b8b4af; font-size: 0.8rem; }
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  display: flex; gap: 1rem; padding: 0.5rem 1rem; font-size: 0.62rem;
+  background: rgba(13,13,15,0.95); border-bottom: 1px solid #2a2a30;
+}
+.nav a { color: #5a5854; text-decoration: none; }
+.nav a:hover { color: #7eb87a; }
+#depth { margin-left: auto; color: #7eb87a; }
+.mount { max-width: 560px; margin: 0 auto; padding-top: var(--nav); }
+.scroll-section { height: var(--unit); }
+.scroll-section--final { height: calc(var(--unit) * 0.5); min-height: 200px; }
+.stop { height: 1px; margin-bottom: 3rem; }
+.frame {
+  position: sticky;
+  margin: 0 1rem;
+  border-left: 3px solid #3a3a44;
+  background: #141418;
+  padding: 0.65rem 0 0.65rem 1rem;
+  box-shadow: 0 4px 0 #0a0a0c, 0 8px 20px rgba(0,0,0,0.35);
+}
+.frame code {
+  display: block;
+  font-size: 0.68rem;
+  color: #6b9b6b;
+  margin-bottom: 0.45rem;
+}
+.frame-body strong { color: #e8e6e3; font-weight: 500; }
+.frame-body p { color: #6b6966; font-size: 0.75rem; margin-top: 0.2rem; }
+.frame-body a { color: #8b9cb3; text-decoration: none; }
+.frame-body a:hover { color: #7eb87a; }
+.f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; border-color: #c4a574; }
+.f1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; }
+.f2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; }
+.f3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; }
+.f4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; border-color: #6b8b9b; }
+.f5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; }
+.f6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; border-color: #7eb87a; }
+.foot {
+  display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto;
+  padding: 0 1.5rem 2.5rem; font-size: 0.6rem; color: #3a3a40;
+}
+.foot a { color: #3a3a40; text-decoration: none; }
@@ -0,0 +1,10 @@
+const sections = document.querySelectorAll('.scroll-section');
+const depthEl = document.getElementById('depth');
+const mid = () => window.innerHeight * 0.42;
+function tick() {
+  let a = 0;
+  sections.forEach((s) => { const r = s.getBoundingClientRect(); if (r.top <= mid() && r.bottom > mid()) a = +s.dataset.layer; });
+  depthEl.textContent = `#${a}`;
+}
+window.addEventListener('scroll', tick, { passive: true });
+tick();