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 Paper</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./paper.css" />
+</head>
+<body>
+  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><span id="depth">L0</span></nav>
+  <main class="mount">
+    <div class="scroll-section" data-layer="0"><article class="sheet s0"><span class="edge"></span><div class="inner"><h1>Levkin</h1><p class="sub">Software development · Canada</p><p>15+ years · 8h→2min releases · taking new work</p></div></article></div>
+    <div class="scroll-section" data-layer="1"><article class="sheet s1"><span class="edge"></span><div class="inner"><h2>Custom software</h2><p>Apps, APIs, internal tools</p></div></article></div>
+    <div class="scroll-section" data-layer="2"><article class="sheet s2"><span class="edge"></span><div class="inner"><h2>Automation</h2><p><a href="https://auto.levkin.ca">auto.levkin.ca</a> — n8n, CI/CD, LLMs</p></div></article></div>
+    <div class="scroll-section" data-layer="3"><article class="sheet s3"><span class="edge"></span><div class="inner"><h2>CaseWare</h2><p><a href="https://caseware.levkin.ca">caseware.levkin.ca</a> — MNP, JazzIt</p></div></article></div>
+    <div class="scroll-section" data-layer="4"><article class="sheet s4"><span class="edge"></span><div class="inner"><h2>Quality engineering</h2><p><a href="https://iliadobkin.com">iliadobkin.com</a> — Senior SDET portfolio</p></div></article></div>
+    <div class="scroll-section" data-layer="5"><article class="sheet s5"><span class="edge"></span><div class="inner"><h2>Operations</h2><p><a href="https://jobs.levkin.ca">jobs.levkin.ca</a></p></div></article></div>
+    <div class="scroll-section scroll-section--final" data-layer="6"><article class="sheet s6"><span class="edge"></span><div class="inner"><h2>Engage</h2><p><a href="https://cal.levkin.ca/ilia/consult">Book 15 min</a> · <a href="mailto:hello@levkine.ca">hello@levkine.ca</a></p></div></article></div>
+    <div class="stop"></div>
+  </main>
+  <footer class="foot">levkin.ca · <a href="https://git.levkin.ca">git</a></footer>
+  <script src="./paper.js" type="module"></script>
+</body>
+</html>
@@ -0,0 +1,46 @@
+:root {
+  --nav: 2.5rem; --stick: 0.85rem; --step: 0.95rem; --unit: 54vh;
+  --desk: #3d3832; --paper: #f6f3eb; --ink: #1a1814;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Literata', Georgia, serif; background: var(--desk); color: var(--ink); }
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+  display: flex; gap: 1rem; padding: 0.5rem 1rem;
+  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem;
+  background: rgba(61,56,50,0.92); color: #c4b8a8;
+}
+.nav a { color: #9a9288; text-decoration: none; }
+#depth { margin-left: auto; color: #8b7355; font-weight: 600; }
+.mount { max-width: 480px; margin: 0 auto; padding: var(--nav) 1.25rem 0; }
+.scroll-section { height: var(--unit); }
+.scroll-section--final { height: calc(var(--unit) * 0.48); min-height: 220px; }
+.stop { height: 1px; margin-bottom: 3rem; }
+.sheet {
+  position: sticky;
+  background: var(--paper);
+  border: 1px solid #d4cfc4;
+  padding: 0;
+  box-shadow: 2px 3px 0 #e0dcd2, 4px 6px 0 #d8d4c8, 0 16px 32px rgba(0,0,0,0.2);
+}
+.edge {
+  display: block;
+  height: 6px;
+  background: linear-gradient(180deg, #ebe6dc, #f6f3eb);
+  border-bottom: 1px solid #e0dcd2;
+}
+.inner { padding: 1.15rem 1.35rem 1.25rem; }
+.inner h1 { font-size: 1.85rem; font-weight: 600; }
+.inner h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
+.sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #6a6458; margin-bottom: 0.5rem; }
+.inner p { font-size: 0.9rem; color: #4a4844; line-height: 1.55; }
+.inner a { color: #2a4a6b; }
+.s0 { top: calc(var(--nav) + var(--stick)); z-index: 1; transform: rotate(-0.4deg); margin-left: 0; }
+.s1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; transform: rotate(0.3deg); margin-left: 6px; }
+.s2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; transform: rotate(-0.2deg); margin-left: 12px; }
+.s3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; transform: rotate(0.5deg); margin-left: 8px; }
+.s4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; transform: rotate(-0.3deg); margin-left: 14px; }
+.s5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; transform: rotate(0.2deg); margin-left: 10px; }
+.s6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; transform: rotate(0deg); margin-left: 4px; }
+.foot { text-align: center; padding: 0 1rem 2.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #7a7468; }
+.foot a { color: #7a7468; }
@@ -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 = `L${a}`;
+}
+window.addEventListener('scroll', tick, { passive: true });
+tick();