diff --git a/index.html b/index.html index 6466490..6fffc91 100644 --- a/index.html +++ b/index.html @@ -214,7 +214,7 @@

Stack

-

Scroll through layers — L0 foundation to L6 interface. Services as a literal stack of cards.

+

Sticky card stack L0–L4. Scroll peels layers back — tight, architectural, no bloat.

layers · scroll · architectural
diff --git a/stack/index.html b/stack/index.html index 4a59c9b..e67726d 100644 --- a/stack/index.html +++ b/stack/index.html @@ -14,11 +14,10 @@
-
@@ -26,18 +25,17 @@ foundation

Levkin

-

Software development · Canada · remote

-

A boutique engineering practice — production systems, automation, and enterprise tooling. Not a body shop. Fixed scope, documented handoff, optional stewardship.

+

Software · Canada · remote

+

Boutique engineering — production systems, automation, enterprise. Fixed scope, documented handoff.

- 15+ years - 8h → <2min releases - 24/7 automation + 15+ yrs + 8h→2m + 24/7
-

Currently taking on new engagements

+

Taking new engagements

-
@@ -45,15 +43,13 @@ application

Custom software

-

Web apps, APIs, internal tools. Stack-agnostic — boring, proven tech preferred.

+

Web apps, APIs, internal tools.

    -
  • TypeScript / Node · Python · C# / .NET
    • -
  • PostgreSQL · SQL Server · React · Vue
    • +
  • TS · Python · .NET · PostgreSQL · React
-
@@ -62,15 +58,10 @@ auto.levkin.ca ↗

Automation

-

Scripts, no-code workflows, CI/CD, webhooks, LLM integrations — runs while you sleep.

-
    -
  • n8n · Zapier · Make · GitHub Actions
    • -
  • Jenkins · Azure DevOps · Python · Bash
    • -
+

n8n · Zapier · CI/CD · webhooks · LLMs

-
@@ -79,63 +70,39 @@ caseware.levkin.ca ↗

CaseWare & CaseView

-

Features, templates, release automation for audit & accounting. CaseWare International, MNP, JazzIt.

-
    -
  • C# · .NET · SQL Server · JavaScript CI
    • -
+

15+ years · CaseWare Intl, MNP, JazzIt · C# · .NET · release pipelines

-
L4 - quality - iliadobkin.com ↗ + surface
-

Quality engineering

-

Senior SDET — test automation, CI/CD, trace-driven debugging.

-
-
- - -
-
-
- L5 - operations - jobs.levkin.ca ↗ -
-

Job Ops

-

Internal hiring orchestrator — authenticated, per-user job lists.

-
-
- - -
-
-
- L6 - interface -
-

Engage

-

Discover → Proposal → Ship → Maintain (optional). Fixed-scope quotes after a 15-minute call.

+

Quality & ops

+

SDET · test automation · CI/CD traces.

+

+ iliadobkin.com + · + jobs.levkin.ca +

- Book 15 min → - hello@levkine.ca + Book 15 min + hello@levkine.ca
-

Retries · docs · tests before prod · smallest solution that fits

- +

Retries · docs · tests first · smallest fit

+ + diff --git a/stack/stack.css b/stack/stack.css index 84df88c..40a768a 100644 --- a/stack/stack.css +++ b/stack/stack.css @@ -2,8 +2,9 @@ --bg: #0e0e10; --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Instrument Sans', system-ui, sans-serif; - --sticky-top: 3.5rem; - --layer-offset: 2.75rem; + --sticky-top: 3rem; + --layer-offset: 1.35rem; + --layer-scroll: 38vh; } * { box-sizing: border-box; margin: 0; padding: 0; } @@ -14,7 +15,7 @@ body { font-family: var(--sans); background: var(--bg); color: #e8e6e3; - line-height: 1.55; + line-height: 1.5; overflow-x: hidden; } @@ -26,12 +27,13 @@ body { z-index: 100; display: flex; justify-content: space-between; - padding: 1rem 1.5rem; + align-items: center; + padding: 0.65rem 1.25rem; font-family: var(--mono); - font-size: 0.72rem; - background: rgba(14, 14, 16, 0.85); + font-size: 0.68rem; + background: rgba(14, 14, 16, 0.9); backdrop-filter: blur(8px); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .nav a { @@ -42,239 +44,268 @@ body { .nav a:hover { color: #c4a574; } .depth { - color: #6b6966; + color: #c4a574; + font-weight: 600; font-variant-numeric: tabular-nums; } .stack-viewport { - padding: 0 1.5rem 8rem; - max-width: 640px; + padding: 0.5rem 1.25rem 2rem; + max-width: 520px; margin: 0 auto; } -/* Sticky card stack — each layer sticks, next slides over */ .layer { position: sticky; - min-height: 72vh; - margin-bottom: 1.5rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.08); + min-height: auto; + padding-bottom: var(--layer-scroll); + margin-bottom: -calc(var(--layer-scroll) - var(--layer-offset) * 2); + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: - 0 -1px 0 rgba(255, 255, 255, 0.05) inset, - 0 24px 48px rgba(0, 0, 0, 0.45), - 0 4px 12px rgba(0, 0, 0, 0.3); - transform-origin: center top; - transition: transform 0.15s ease-out; + 0 12px 28px rgba(0, 0, 0, 0.35), + 0 2px 6px rgba(0, 0, 0, 0.2); } -.layer-0 { top: var(--sticky-top); z-index: 1; background: #1a1a1e; } -.layer-1 { top: calc(var(--sticky-top) + var(--layer-offset) * 1); z-index: 2; background: #222228; } -.layer-2 { top: calc(var(--sticky-top) + var(--layer-offset) * 2); z-index: 3; background: #2a2a32; } -.layer-3 { top: calc(var(--sticky-top) + var(--layer-offset) * 3); z-index: 4; background: #32323c; } -.layer-4 { top: calc(var(--sticky-top) + var(--layer-offset) * 4); z-index: 5; background: #3a3a46; } -.layer-5 { top: calc(var(--sticky-top) + var(--layer-offset) * 5); z-index: 6; background: #42424e; } -.layer-6 { top: calc(var(--sticky-top) + var(--layer-offset) * 6); z-index: 7; background: #4a4a58; margin-bottom: 4rem; } +.layer-0 { + top: var(--sticky-top); + z-index: 1; + background: #1a1a1e; + margin-bottom: -calc(var(--layer-scroll) - var(--layer-offset)); +} + +.layer-1 { + top: calc(var(--sticky-top) + var(--layer-offset)); + z-index: 2; + background: #222228; +} + +.layer-2 { + top: calc(var(--sticky-top) + var(--layer-offset) * 2); + z-index: 3; + background: #2a2a32; +} + +.layer-3 { + top: calc(var(--sticky-top) + var(--layer-offset) * 3); + z-index: 4; + background: #32323c; +} + +.layer-4 { + top: calc(var(--sticky-top) + var(--layer-offset) * 4); + z-index: 5; + background: #3a3a46; + margin-bottom: 0; + padding-bottom: 1rem; +} .layer-inner { - padding: 2rem 2rem 2.5rem; + padding: 1.25rem 1.35rem 1.35rem; } .layer-head { display: flex; flex-wrap: wrap; align-items: center; - gap: 0.5rem 1rem; - margin-bottom: 1.25rem; - padding-bottom: 0.75rem; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + gap: 0.35rem 0.75rem; + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--mono); - font-size: 0.7rem; + font-size: 0.62rem; } .layer-id { color: #c4a574; font-weight: 600; - letter-spacing: 0.08em; + letter-spacing: 0.06em; } .layer-name { color: #6b6966; text-transform: uppercase; - letter-spacing: 0.12em; + letter-spacing: 0.1em; } .layer-link { margin-left: auto; color: #8b9cb3; text-decoration: none; - font-size: 0.65rem; + font-size: 0.6rem; } .layer-link:hover { color: #c4a574; } .layer h1 { - font-size: clamp(2.5rem, 10vw, 3.5rem); + font-size: clamp(2rem, 8vw, 2.65rem); font-weight: 600; letter-spacing: -0.04em; - margin-bottom: 0.35rem; + margin-bottom: 0.2rem; + line-height: 1.1; } .layer h2 { - font-size: 1.75rem; + font-size: 1.25rem; font-weight: 600; - letter-spacing: -0.03em; - margin-bottom: 0.5rem; + letter-spacing: -0.02em; + margin-bottom: 0.35rem; } .tagline { font-family: var(--mono); - font-size: 0.8rem; + font-size: 0.68rem; color: #6b6966; - letter-spacing: 0.06em; - margin-bottom: 1rem; + margin-bottom: 0.5rem; } .body { color: #a8a6a1; - font-size: 1rem; - max-width: 38ch; - margin-bottom: 1rem; + font-size: 0.9rem; + margin-bottom: 0.65rem; } .chips { display: flex; flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 1rem; + gap: 0.35rem; + margin-bottom: 0.5rem; } .chips span { font-family: var(--mono); - font-size: 0.65rem; - padding: 0.3rem 0.55rem; - background: rgba(196, 165, 116, 0.12); + font-size: 0.58rem; + padding: 0.2rem 0.45rem; + background: rgba(196, 165, 116, 0.1); color: #c4a574; - border: 1px solid rgba(196, 165, 116, 0.25); - border-radius: 4px; + border: 1px solid rgba(196, 165, 116, 0.2); + border-radius: 3px; } .avail { font-family: var(--mono); - font-size: 0.72rem; + font-size: 0.65rem; color: #7eb87a; - letter-spacing: 0.04em; } .stack-list { list-style: none; font-family: var(--mono); - font-size: 0.78rem; + font-size: 0.68rem; color: #6b6966; - line-height: 1.7; +} + +.sat-links { + font-family: var(--mono); + font-size: 0.68rem; + margin-bottom: 0.85rem; +} + +.sat-links a { + color: #8b9cb3; + text-decoration: none; +} + +.sat-links a:hover { color: #c4a574; } + +.sat-links .sep { + color: #3a3a40; + margin: 0 0.25rem; } .contact-row { display: flex; flex-wrap: wrap; - gap: 0.75rem; - margin: 1.25rem 0; + gap: 0.5rem; + margin-bottom: 0.65rem; } .btn { font-family: var(--mono); - font-size: 0.8rem; - padding: 0.65rem 1.1rem; + font-size: 0.72rem; + padding: 0.5rem 0.85rem; background: #c4a574; color: #0e0e10; text-decoration: none; font-weight: 600; - border-radius: 6px; - transition: background 0.15s, color 0.15s; + border-radius: 4px; } -.btn:hover { - background: #e8d4b0; -} +.btn:hover { background: #e8d4b0; } .btn-ghost { background: transparent; color: #c4a574; - border: 1px solid rgba(196, 165, 116, 0.4); + border: 1px solid rgba(196, 165, 116, 0.35); } .btn-ghost:hover { - background: rgba(196, 165, 116, 0.1); - color: #e8d4b0; + background: rgba(196, 165, 116, 0.08); } .guarantees { font-family: var(--mono); - font-size: 0.68rem; - color: #6b6966; - letter-spacing: 0.02em; + font-size: 0.6rem; + color: #5a5854; } -.layer-foot { +.site-foot { display: flex; justify-content: space-between; - margin-top: 2rem; - padding-top: 1rem; - border-top: 1px solid rgba(255, 255, 255, 0.08); + max-width: 520px; + margin: 0 auto; + padding: 1.5rem 1.25rem 3rem; font-family: var(--mono); - font-size: 0.65rem; - color: #6b6966; + font-size: 0.62rem; + color: #4a4844; } -.layer-foot a { - color: #6b6966; +.site-foot a { + color: #4a4844; text-decoration: none; } -.layer-foot a:hover { color: #c4a574; } +.site-foot a:hover { color: #c4a574; } -/* Side ruler — stack depth indicator */ .stack-ruler { position: fixed; - right: 1.25rem; + right: 1rem; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; - gap: 0.35rem; + gap: 0.2rem; font-family: var(--mono); - font-size: 0.55rem; - color: #3a3a40; - letter-spacing: 0.06em; + font-size: 0.5rem; + color: #2e2e34; pointer-events: none; } .stack-ruler span { - padding: 0.15rem 0; - transition: color 0.2s, transform 0.2s; + transition: color 0.15s; } .stack-ruler span.active { color: #c4a574; - transform: translateX(-4px); } -@media (max-width: 700px) { - .stack-ruler { display: none; } - :root { --layer-offset: 1.75rem; } - .layer { min-height: 65vh; } - .layer-inner { padding: 1.5rem 1.25rem 2rem; } -} - -/* Subtle edge highlight — “card” lip */ .layer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; - height: 3px; - border-radius: 12px 12px 0 0; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); + height: 2px; + border-radius: 8px 8px 0 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); pointer-events: none; } + +@media (max-width: 700px) { + .stack-ruler { display: none; } + :root { + --layer-offset: 1rem; + --layer-scroll: 32vh; + } +} diff --git a/stack/stack.js b/stack/stack.js index 16f1ee8..f1188ab 100644 --- a/stack/stack.js +++ b/stack/stack.js @@ -13,7 +13,7 @@ function updateDepth() { } }); - depthEl.textContent = `depth: L${active}`; + depthEl.textContent = `L${active}`; rulerSpans.forEach((span, i) => { span.classList.toggle('active', i === active);