forust/homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Wiki Activity

updated xdfnx's page
ci / lint-prettier (push) Successful in 8s
Details
ci / lint-ruff (push) Successful in 4s
Details
ci / lint-yaml (push) Successful in 6s
Details
ci / lint-dockerfiles (push) Successful in 4s
Details
ci / validate (push) Successful in 11s
Details
ci / build (push) Successful in 19s
Details

Browse Source
This commit is contained in:
mr-forust
2026-07-04 01:01:05 +02:00
parent 620262d98c
commit 82bcd30ed8
1 changed files with 306 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
homepages/xdfnx_files/index.html
+306 -296
View File
@@ -5,9 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0a0a10" /> <meta name="theme-color" content="#0a0a10" />
<meta name="color-scheme" content="dark" /> <meta name="color-scheme" content="dark" />
<meta name="description" content="xdfnx — Senior Full Stack Engineer. Systems built for pressure. Rust, C++, scalable web applications, core infrastructure optimization." /> <meta name="description" content="xdfnx — Senior Full Stack Engineer. Systems built for pressure. Rust, C++, scalable web applications, and the core infrastructure that holds them together." />
<meta name="author" content="xdfnx" /> <meta name="author" content="xdfnx" />
<meta name="keywords" content="xdfnx, Senior Full Stack Engineer, Rust, C++, TypeScript, systems programming, performance engineering, scalable web applications, infrastructure" />
<link rel="canonical" href="https://xdfnx.cfd/" /> <link rel="canonical" href="https://xdfnx.cfd/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://xdfnx.cfd/" /> <meta property="og:url" content="https://xdfnx.cfd/" />
@@ -20,8 +19,8 @@
<meta name="twitter:description" content="Systems built for pressure. Rust & C++ where speed is not optional." /> <meta name="twitter:description" content="Systems built for pressure. Rust & C++ where speed is not optional." />
<title>xdfnx — Senior Full Stack Engineer</title> <title>xdfnx — Senior Full Stack Engineer</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a10'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='15' font-weight='700' text-anchor='middle' fill='%23c2a878'%3Ex%3C/text%3E%3C/svg%3E" /> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a10'/%3E%3Cpath d='M9 9h14M9 16h9M9 23h14' stroke='%23c2a878' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E" />
<link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a10'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='15' font-weight='700' text-anchor='middle' fill='%23c2a878'%3Ex%3C/text%3E%3C/svg%3E" /> <link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a10'/%3E%3Cpath d='M9 9h14M9 16h9M9 23h14' stroke='%23c2a878' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -43,148 +42,125 @@
--bg-2:#0e0e16; --bg-2:#0e0e16;
--surface:#12121c; --surface:#12121c;
--surface-2:#171723; --surface-2:#171723;
--line:rgba(255,255,255,.07);
--line-2:rgba(255,255,255,.12);
--line-3:rgba(255,255,255,.18);
--ink:#f4f3f1; --ink:#f4f3f1;
--ink-dim:#aeb0bd; --ink-dim:#aeb0bd;
--ink-faint:#6f7080; --ink-faint:#6f7080;
--line:rgba(255,255,255,.07);
--line-2:rgba(255,255,255,.12);
--line-3:rgba(255,255,255,.18);
--accent:#c2a878; --accent:#c2a878;
--accent-bright:#e7cf9b; --accent-bright:#e7cf9b;
--accent-dim:#7c6a47; --accent-dim:#7c6a47;
--accent-glow:rgba(194,168,120,.5); --accent-glow:rgba(194,168,120,.5);
--flame:#e07a4c; --flame:#e07a4c;
--flame-dim:#a5522f; --ok:#7fd1a3;
--info:#7aa2e6;
--focus:#7aa2e6; --focus:#7aa2e6;
--grad:linear-gradient(135deg,var(--accent) 0%,var(--flame) 100%); --grad:linear-gradient(135deg,var(--accent) 0%,var(--flame) 100%);
--grad-soft:linear-gradient(135deg,rgba(194,168,120,.16),rgba(224,122,76,.10));
--ease:cubic-bezier(.2,.7,.2,1); --ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
} }
*{margin:0;padding:0;box-sizing:border-box} *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth} html{scroll-behavior:smooth}
body{ body{
background:var(--bg); background:var(--bg);color:var(--ink);
color:var(--ink);
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-weight:300;line-height:1.6; font-weight:300;line-height:1.6;letter-spacing:.01em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;letter-spacing:.01em; overflow-x:hidden;
background-image: background-image:
radial-gradient(1200px 600px at 50% -200px,rgba(194,168,120,.10),transparent 60%), radial-gradient(1200px 600px at 50% -200px,rgba(194,168,120,.10),transparent 60%),
radial-gradient(900px 700px at 100% 30%,rgba(224,122,76,.06),transparent 60%); radial-gradient(900px 700px at 100% 30%,rgba(224,122,76,.06),transparent 60%);
} }
::selection{background:var(--accent);color:#15200a} ::selection{background:var(--accent);color:#15200a}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
a:focus-visible,button:focus-visible{outline-offset:4px} a:focus-visible,button:focus-visible{outline-offset:4px}
.skip{ .skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);background:var(--accent);color:#15120a;padding:10px 18px;border-radius:0 0 6px 6px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;text-decoration:none;z-index:200;transition:top .25s var(--ease)}
position:absolute;left:50%;top:-60px;transform:translateX(-50%);
background:var(--accent);color:#15120a;padding:10px 18px;border-radius:0 0 6px 6px;
font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;
text-decoration:none;z-index:200;transition:top .25s var(--ease);
}
.skip:focus{top:0} .skip:focus{top:0}
/* ---- atmosphere ---- */ /* atmosphere */
.grain{ .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04; .grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 85%)}
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); .glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(140px);opacity:.5;will-change:transform}
} .glow.a{top:-220px;left:25%;width:760px;height:460px;background:radial-gradient(circle,rgba(194,168,120,.16),transparent 70%)}
.grid-bg{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 85%);
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 85%);
}
.glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(140px);opacity:.55;will-change:transform}
.glow.a{top:-220px;left:30%;width:760px;height:460px;background:radial-gradient(circle,rgba(194,168,120,.16),transparent 70%)}
.glow.b{top:55vh;right:-200px;width:560px;height:560px;background:radial-gradient(circle,rgba(224,122,76,.10),transparent 70%)} .glow.b{top:55vh;right:-200px;width:560px;height:560px;background:radial-gradient(circle,rgba(224,122,76,.10),transparent 70%)}
/* ---- layout ---- */
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:2} .wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
section{position:relative;z-index:2} section{position:relative;z-index:2}
/* ---- top bar ---- */ /* top bar */
header.bar{ header.bar{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);background:rgba(10,10,16,.72);border-bottom:1px solid var(--line);transition:transform .4s var(--ease)}
position:fixed;top:0;left:0;right:0;z-index:50;
backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
background:rgba(10,10,16,.72);
border-bottom:1px solid var(--line);
transition:transform .4s var(--ease);
}
header.bar.hidden{transform:translateY(-100%)} header.bar.hidden{transform:translateY(-100%)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 28px} .bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 28px}
.brand{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px} .brand{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--accent-glow)} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--accent-glow)}
.nav-links{display:flex;gap:28px;align-items:center} .nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:13px;font-family:'JetBrains Mono',monospace;transition:color .25s var(--ease);position:relative;padding:6px 0} .nav-links a{color:var(--ink-dim);text-decoration:none;font-size:13px;font-family:'JetBrains Mono',monospace;transition:color .25s var(--ease);position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)} .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{color:var(--accent)!important} .nav-cta{color:var(--accent)!important}.nav-cta::after{background:var(--accent)}
.nav-cta::after{background:var(--accent)} .menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;cursor:pointer;border-radius:4px;transition:border-color .25s,color .25s}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--ink);padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;cursor:pointer;border-radius:3px;transition:border-color .25s var(--ease),color .25s var(--ease)}
.menu-btn:hover{border-color:var(--accent);color:var(--accent)} .menu-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ---- hero ---- */ /* ---- hero ---- */
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 90px} .hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:36px;max-width:920px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-left{display:flex;flex-direction:column;gap:30px;max-width:560px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);width:fit-content} .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);width:fit-content}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--grad);position:relative;box-shadow:0 0 0 0 var(--accent-glow)} .pulse{width:8px;height:8px;border-radius:50%;background:var(--grad);position:relative;box-shadow:0 0 0 0 var(--accent-glow)}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:.6;animation:ping 2.4s var(--ease) infinite} .pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);opacity:.6;animation:ping 2.4s var(--ease) infinite}
.status-pill{border:1px solid var(--line-2);padding:5px 12px;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.02)} .status-pill{border:1px solid var(--line-2);padding:5px 12px;border-radius:999px;color:var(--ink);background:rgba(255,255,255,.02)}
.status-pill b{color:var(--accent);font-weight:600} .status-pill b{color:var(--accent);font-weight:600}
@media (prefers-reduced-motion: no-preference){@keyframes ping{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}} @media (prefers-reduced-motion:no-preference){@keyframes ping{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}}
h1.hero-title{ h1.hero-title{font-size:clamp(40px,5.8vw,78px);line-height:.98;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
font-size:clamp(48px,9vw,116px);line-height:.95;font-weight:800;
letter-spacing:-.04em;color:var(--ink);
}
h1.hero-title .soft{color:var(--ink-faint);font-weight:300;font-style:italic} h1.hero-title .soft{color:var(--ink-faint);font-weight:300;font-style:italic}
h1.hero-title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)} h1.hero-title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.term-cursor{display:inline-block;width:14px;height:.88em;background:var(--accent);margin-left:4px;vertical-align:-.05em;animation:blink 1s steps(2) infinite;border-radius:1px}
@media (prefers-reduced-motion: no-preference){@keyframes blink{50%{opacity:0}}}
.hero-sub{font-size:clamp(17px,2.1vw,21px);color:var(--ink-dim);max-width:640px;font-weight:300} .hero-sub{font-size:clamp(16px,1.8vw,19px);color:var(--ink-dim);font-weight:300}
.hero-sub b{color:var(--ink);font-weight:500} .hero-sub b{color:var(--ink);font-weight:500}
.hero-sub .hl{color:var(--accent)} .hero-sub .hl{color:var(--accent)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px} .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{ .btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:5px;text-decoration:none;font-size:14px;font-weight:600;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);cursor:pointer;border:1px solid transparent;position:relative}
display:inline-flex;align-items:center;gap:10px;min-height:48px; .btn.primary{background:var(--grad);color:#1a1408;background-size:200% 100%;background-position:0 0}
padding:14px 26px;border-radius:4px;text-decoration:none;font-size:14px;font-weight:600;
font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
cursor:pointer;border:1px solid transparent;position:relative;
}
.btn.primary{background:var(--grad);color:#1a1408;border-color:transparent;background-size:200% 100%;background-position:0 0}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -12px var(--accent-glow);background-position:100% 0} .btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -12px var(--accent-glow);background-position:100% 0}
.btn.ghost{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.02)} .btn.ghost{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.02)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn .arr{transition:transform .3s var(--ease)} .btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(5px)} .btn:hover .arr{transform:translateX(5px)}
.hero-meta{display:flex;gap:42px;margin-top:22px;flex-wrap:wrap} .hero-meta{display:flex;gap:36px;flex-wrap:wrap}
.hero-meta div{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.06em} .hero-meta div{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.06em}
.hero-meta b{color:var(--ink-dim);font-weight:500} .hero-meta b{color:var(--ink-dim);font-weight:500}
/* hero terminal panel */ /* ---- hero viz: live system monitor ---- */
.hero-term{margin-top:8px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(18,18,28,.9),rgba(10,10,16,.9));border-radius:8px;overflow:hidden;max-width:560px;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)} .monitor{position:relative;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(18,18,28,.92),rgba(10,10,16,.92));box-shadow:0 30px 70px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.ht-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)} .mon-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.ht-dot{width:10px;height:10px;border-radius:50%} .mon-dots{display:flex;gap:7px}
.ht-dot.r{background:#ff5f57}.ht-dot.y{background:#febc2e}.ht-dot.g{background:#28c840} .mon-dot{width:10px;height:10px;border-radius:50%}
.ht-title{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.06em} .mon-dot.r{background:#ff5f57}.mon-dot.y{background:#febc2e}.mon-dot.g{background:#28c840}
.ht-body{padding:18px 18px 22px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;min-height:160px;color:var(--ink-dim)} .mon-status{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.ht-body .cmt{color:var(--ink-faint)} .mon-status .live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:livepulse 1.6s ease-in-out infinite}
.ht-body .k{color:#e7cf9b} @media (prefers-reduced-motion:no-preference){@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}}
.ht-body .v{color:#9bb7e6} .mon-body{padding:18px 16px 16px;display:grid;gap:14px}
.ht-body .ok{color:#7fd1a3}
.ht-line .prompt{color:var(--accent)} .mon-row{display:grid;gap:6px}
.term-cursor2{display:inline-block;width:8px;height:1em;background:var(--accent);vertical-align:-.12em;border-radius:1px;animation:blink 1.1s steps(2) infinite} .mon-row .lbl{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.06em}
.mon-row .lbl b{color:var(--accent);font-weight:600}
.mon-track{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.mon-fill{height:100%;border-radius:3px;background:var(--grad);transform-origin:left;transform:scaleX(0);width:100%;transition:transform .9s var(--ease-out)}
.mon-row.in .mon-fill{transform:scaleX(.0)}
.mon-chart{height:120px;position:relative;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);overflow:hidden}
.mon-chart svg{display:block;width:100%;height:100%}
.mon-chart .lab{position:absolute;top:8px;left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.mon-chart .lab b{color:var(--ok);font-weight:600}
.mon-chart .pct{position:absolute;bottom:8px;right:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim)}
.mon-chart .pct b{color:var(--accent);font-weight:600}
/* ---- section heading ---- */ /* ---- section heading ---- */
.sec{padding:120px 0;border-top:1px solid var(--line)} .sec{padding:120px 0;border-top:1px solid var(--line)}
@@ -192,132 +168,118 @@
.sec-id{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.1em;font-weight:500} .sec-id{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.1em;font-weight:500}
.sec-title{font-size:clamp(30px,4.2vw,46px);font-weight:700;letter-spacing:-.025em} .sec-title{font-size:clamp(30px,4.2vw,46px);font-weight:700;letter-spacing:-.025em}
.sec-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)} .sec-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.sec-sub{color:var(--ink-dim);font-size:16px;max-width:620px;margin-top:14px;font-weight:300}
/* ---- about ---- */ /* ---- about: lead + what I do trio (replaces variant scratchpad) ---- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start} .about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start}
.about-lead{font-size:clamp(21px,2.5vw,28px);line-height:1.42;font-weight:300;color:var(--ink);letter-spacing:-.01em} .about-lead{font-size:clamp(20px,2.4vw,27px);line-height:1.4;font-weight:300;color:var(--ink);letter-spacing:-.01em}
.about-lead .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)} .about-lead .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.about-body{color:var(--ink-dim);font-size:15px;line-height:1.85;margin-top:24px;max-width:560px} .about-body{color:var(--ink-dim);font-size:15px;line-height:1.85;margin-top:22px;max-width:520px}
.variant-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.variants{display:flex;flex-direction:column;gap:18px}
.variant{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg-2));padding:22px 24px;border-radius:6px;position:relative;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease-out)}
.variant:hover{border-color:var(--line-3);transform:translateX(6px)}
.variant::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out)}
.variant:hover::before{transform:scaleY(1)}
.variant p{color:var(--ink-dim);font-size:14px;line-height:1.7}
.variant .tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;display:block;font-weight:600}
/* ---- stats ---- */ .do-trio{display:flex;flex-direction:column;gap:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden} .do-card{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--surface),var(--bg-2));transition:border-color .35s var(--ease),transform .35s var(--ease-out)}
.stat{background:var(--bg);padding:44px 30px;position:relative;overflow:hidden;transition:background .4s var(--ease)} .do-card:hover{border-color:var(--line-3);transform:translateX(6px)}
.do-ico{width:42px;height:42px;border-radius:8px;background:var(--grad-soft);border:1px solid var(--line-2);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--accent)}
.do-card h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.do-card p{color:var(--ink-dim);font-size:13.5px;line-height:1.65;margin-top:6px}
/* ---- stats (grounded) ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--bg);padding:40px 28px;position:relative;overflow:hidden;transition:background .4s var(--ease)}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(194,168,120,.07),transparent 55%);opacity:0;transition:opacity .4s var(--ease)} .stat::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(194,168,120,.07),transparent 55%);opacity:0;transition:opacity .4s var(--ease)}
.stat:hover{background:var(--bg-2)} .stat:hover{background:var(--bg-2)}
.stat:hover::after{opacity:1} .stat:hover::after{opacity:1}
.stat-num{font-size:clamp(46px,6.5vw,68px);font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1} .stat-num{font-size:clamp(42px,5.6vw,62px);font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1}
.stat-num .plus{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)} .stat-num .plus{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.stat-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-top:12px;font-weight:500} .stat-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-top:12px;font-weight:500}
.stat-desc{color:var(--ink-dim);font-size:13px;margin-top:8px;font-weight:300} .stat-desc{color:var(--ink-dim);font-size:13px;margin-top:6px;font-weight:300}
/* ---- marquee ---- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:rgba(255,255,255,.015);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll 32s linear infinite;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase}
.marquee-track span{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.marquee-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion: no-preference){@keyframes scroll{to{transform:translateX(-50%)}}}
/* ---- experience ---- */ /* ---- experience ---- */
.timeline{display:flex;flex-direction:column;gap:2px} .timeline{display:flex;flex-direction:column}
.job{display:grid;grid-template-columns:170px 1fr;gap:40px;padding:46px 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease-out)} .job{display:grid;grid-template-columns:160px 1fr;gap:40px;padding:46px 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease-out)}
.job:last-child{border-bottom:1px solid var(--line)} .job:first-child{border-top:none}
.job:hover{padding-left:10px} .job:hover{padding-left:10px}
.job-period{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:.04em;padding-top:5px;font-weight:500} .job-period{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:.04em;padding-top:5px;font-weight:500}
.job-body h3{font-size:22px;font-weight:700;letter-spacing:-.01em} .job-body h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.job-co{color:var(--ink-dim);font-weight:300;font-size:15px;margin-top:3px} .job-co{color:var(--ink-dim);font-weight:300;font-size:15px;margin-top:3px}
.job-co span{color:var(--ink-faint)} .job-co span{color:var(--ink-faint)}
.job-desc{color:var(--ink-dim);font-size:15px;line-height:1.75;margin-top:18px;max-width:680px} .job-desc{color:var(--ink-dim);font-size:15px;line-height:1.75;margin-top:16px;max-width:680px}
.job-desc b{color:var(--ink);font-weight:500} .job-desc b{color:var(--ink);font-weight:500}
.job-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .job-divider{height:1px;background:var(--line);margin:0 auto;width:0;transition:width .5s var(--ease-out)}
.tag-chip{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);border:1px solid var(--line-2);padding:6px 12px;border-radius:999px;letter-spacing:.04em;transition:border-color .25s var(--ease),color .25s var(--ease)}
.tag-chip:hover{border-color:var(--line-3);color:var(--ink)}
.tag-chip.hi{color:var(--accent);border-color:var(--accent-dim);background:rgba(194,168,120,.06)}
/* ---- arsenal ---- */ /* ---- arsenal: grouped, no marquee ---- */
.arsenal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .arsenal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.arm-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg));padding:36px 30px;border-radius:8px;position:relative;transition:transform .4s var(--ease-out),border-color .35s var(--ease);overflow:hidden} .arm-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg));padding:32px 28px;border-radius:10px;position:relative;transition:transform .4s var(--ease-out),border-color .35s var(--ease);overflow:hidden}
.arm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .4s var(--ease)} .arm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .4s var(--ease)}
.arm-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(194,168,120,.07),transparent 60%);opacity:0;transition:opacity .4s var(--ease)}
.arm-card:hover{border-color:var(--line-3);transform:translateY(-6px)} .arm-card:hover{border-color:var(--line-3);transform:translateY(-6px)}
.arm-card:hover::before,.arm-card:hover::after{opacity:1} .arm-card:hover::before{opacity:1}
.arm-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;font-weight:500} .arm-ico{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;font-weight:500;display:flex;align-items:center;gap:8px}
.arm-title{font-size:20px;font-weight:700;margin:14px 0 12px;letter-spacing:-.01em} .arm-ico .n{color:var(--accent)}
.arm-title{font-size:19px;font-weight:700;margin:12px 0 10px;letter-spacing:-.01em}
.arm-desc{color:var(--ink-dim);font-size:14px;line-height:1.7;font-weight:300} .arm-desc{color:var(--ink-dim);font-size:14px;line-height:1.7;font-weight:300}
.arm-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .arm-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.arm-stack span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);border:1px solid var(--line);padding:5px 11px;border-radius:4px;letter-spacing:.04em;transition:color .25s var(--ease),border-color .25s var(--ease)} .arm-stack span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);border:1px solid var(--line);padding:5px 10px;border-radius:5px;letter-spacing:.04em;transition:color .25s var(--ease),border-color .25s var(--ease)}
.arm-stack span:hover{color:var(--accent);border-color:var(--accent-dim)} .arm-stack span:hover{color:var(--accent);border-color:var(--accent-dim)}
/* ---- work ---- */ /* ---- work ---- */
.work-grid{display:flex;flex-direction:column;gap:2px} .work-grid{display:flex;flex-direction:column}
.work{display:grid;grid-template-columns:90px 1fr 280px;gap:36px;padding:50px 0;border-top:1px solid var(--line);align-items:start;transition:padding-left .4s var(--ease-out),background .4s var(--ease)} .work{display:grid;grid-template-columns:80px 1fr 260px;gap:36px;padding:48px 0;border-top:1px solid var(--line);align-items:start;transition:padding-left .4s var(--ease-out),background .4s var(--ease)}
.work:last-child{border-bottom:1px solid var(--line)} .work:first-child{border-top:none}
.work:hover{padding-left:12px;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 40%)} .work:hover{padding-left:12px;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 40%)}
.work-idx{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:.08em;padding-top:6px;font-weight:500} .work-idx{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);letter-spacing:.08em;padding-top:6px;font-weight:500}
.work-main h3{font-size:clamp(23px,2.7vw,32px);font-weight:700;letter-spacing:-.02em} .work-main h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em}
.work-main p{color:var(--ink-dim);font-size:15px;line-height:1.75;margin-top:16px;max-width:580px;font-weight:300} .work-metric{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);margin-top:10px;letter-spacing:.04em}
.work-main p{color:var(--ink-dim);font-size:15px;line-height:1.75;margin-top:14px;max-width:580px;font-weight:300}
.work-main p b{color:var(--ink);font-weight:500} .work-main p b{color:var(--ink);font-weight:500}
.work-side{padding-top:8px}
.work-side .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-weight:500} .work-side .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.work-stack{display:flex;flex-wrap:wrap;gap:8px} .work-stack{display:flex;flex-wrap:wrap;gap:8px}
.work-stack span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);border:1px solid var(--line-2);padding:6px 11px;border-radius:4px} .work-stack span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);border:1px solid var(--line-2);padding:5px 10px;border-radius:5px}
/* ---- final cta ---- */ /* ---- final cta ---- */
.cta-sec{padding:150px 0;text-align:center;border-top:1px solid var(--line);position:relative} .cta-sec{padding:140px 0;text-align:center;border-top:1px solid var(--line);position:relative}
.cta-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(194,168,120,.09),transparent 70%);pointer-events:none} .cta-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(194,168,120,.10),transparent 70%);pointer-events:none}
.cta-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:26px;position:relative;font-weight:600} .cta-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;position:relative;font-weight:600}
h2.cta-title{font-size:clamp(40px,6.4vw,76px);font-weight:700;letter-spacing:-.04em;line-height:1.02;position:relative;max-width:860px;margin:0 auto} h2.cta-title{font-size:clamp(34px,5.2vw,66px);font-weight:700;letter-spacing:-.035em;line-height:1.05;position:relative;max-width:820px;margin:0 auto}
.cta-title .soft{color:var(--ink-faint);font-weight:300} .cta-title .soft{color:var(--ink-faint);font-weight:300}
.cta-title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)} .cta-title .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
.cta-sub{color:var(--ink-dim);font-size:17px;margin-top:26px;font-weight:300;max-width:540px;margin-left:auto;margin-right:auto;position:relative} .cta-sub{color:var(--ink-dim);font-size:17px;margin-top:24px;font-weight:300;max-width:540px;margin-left:auto;margin-right:auto;position:relative}
.cta-sec .cta-row{justify-content:center;margin-top:42px;position:relative} .cta-sec .cta-row{justify-content:center;margin-top:38px;position:relative}
.email-copy{position:relative} .email-copy{position:relative}
.copy-tip{ .copy-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px);background:var(--surface-2);border:1px solid var(--line-2);color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:11px;padding:7px 13px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap}
position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(6px);
background:var(--surface-2);border:1px solid var(--line-2);color:var(--accent);
font-family:'JetBrains Mono',monospace;font-size:11px;padding:7px 13px;border-radius:4px;
opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);white-space:nowrap;
}
.copy-tip.show{opacity:1;transform:translateX(-50%) translateY(0)} .copy-tip.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---- footer ---- */ /* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:54px 0;padding-bottom:max(60px,env(safe-area-inset-bottom))} footer{border-top:1px solid var(--line);padding:50px 0;padding-bottom:max(56px,env(safe-area-inset-bottom))}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.foot-left{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.04em} .foot-left{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
.foot-left b{color:var(--ink-dim);font-weight:500} .foot-left b{color:var(--ink-dim);font-weight:500}
.foot-right{display:flex;gap:24px} .foot-right{display:flex;gap:26px;align-items:center}
.foot-right a{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);text-decoration:none;letter-spacing:.04em;transition:color .25s var(--ease)} .foot-right a{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim);text-decoration:none;letter-spacing:.04em;transition:color .25s var(--ease);display:inline-flex;align-items:center;gap:7px}
.foot-right a:hover{color:var(--accent)} .foot-right a:hover{color:var(--accent)}
.foot-right svg{width:14px;height:14px;fill:currentColor}
/* ---- reveal ---- */ /* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none} .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
/* ---- responsive ---- */ @media(max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:44px}
.hero-left{max-width:none}
.about-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:880px){ @media(max-width:880px){
.nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(10,10,16,.97);backdrop-filter:blur(16px);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s var(--ease);border-radius:0 0 12px 12px} .nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(10,10,16,.97);backdrop-filter:blur(16px);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s var(--ease);border-radius:0 0 12px 12px}
.nav-links.open{transform:translateY(0)} .nav-links.open{transform:translateY(0)}
.nav-links a{padding:18px 28px;width:100%;border-bottom:1px solid var(--line)} .nav-links a{padding:18px 28px;width:100%;border-bottom:1px solid var(--line)}
.menu-btn{display:block} .menu-btn{display:block}
.about-grid{grid-template-columns:1fr;gap:44px} .stats,.arsenal{grid-template-columns:1fr}
.stats{grid-template-columns:1fr} .job{grid-template-columns:1fr;gap:12px;padding-left:0!important}
.arsenal{grid-template-columns:1fr}
.job{grid-template-columns:1fr;gap:14px;padding-left:0!important}
.job-period{padding-top:0} .job-period{padding-top:0}
.work{grid-template-columns:1fr;gap:18px;padding-left:0!important} .work{grid-template-columns:1fr;gap:18px;padding-left:0!important}
.work-side{padding-top:0} .work-side{padding-top:4px}
.hero{padding-top:120px} .hero{padding-top:120px}
.sec{padding:84px 0} .sec{padding:84px 0}
.hero-term{max-width:none}
} }
@media(prefers-reduced-motion:reduce){ @media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
@@ -337,9 +299,9 @@
<a class="brand" href="#about"><span class="dot" aria-hidden="true"></span>xdfnx</a> <a class="brand" href="#about"><span class="dot" aria-hidden="true"></span>xdfnx</a>
<nav class="nav-links" id="nav" aria-label="Primary"> <nav class="nav-links" id="nav" aria-label="Primary">
<a href="#about">About</a> <a href="#about">About</a>
<a href="#experience">Record</a>
<a href="#arsenal">Arsenal</a>
<a href="#work">Work</a> <a href="#work">Work</a>
<a href="#arsenal">Arsenal</a>
<a href="#experience">Record</a>
<a href="#contact" class="nav-cta">Contact →</a> <a href="#contact" class="nav-cta">Contact →</a>
</nav> </nav>
<button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="nav">Menu</button> <button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="nav">Menu</button>
@@ -351,55 +313,67 @@
<!-- HERO --> <!-- HERO -->
<section class="hero" aria-labelledby="hero-title"> <section class="hero" aria-labelledby="hero-title">
<div class="hero-grid"> <div class="hero-grid">
<div class="eyebrow reveal"> <div class="hero-left">
<span class="pulse" aria-hidden="true"></span> <div class="eyebrow reveal">
<span class="status-pill"><b>Open</b> for Complex Projects</span> <span class="pulse" aria-hidden="true"></span>
</div> <span class="status-pill"><b>Open</b> for Complex Projects</span>
<h1 class="hero-title reveal d1" id="hero-title">
Systems built<br/>
<span class="soft">for</span> <span class="accent">pressure</span>.<span class="term-cursor" aria-hidden="true"></span>
</h1>
<p class="hero-sub reveal d2">
Senior Full Stack Engineer. I build <b>scalable web applications</b> and optimize the <b>core infrastructure</b> that holds them together. <span class="hl">Rust & C++</span> on the paths where speed is not optional.
</p>
<div class="cta-row reveal d3">
<a href="#contact" class="btn primary">Contact Me <span class="arr" aria-hidden="true">→</span></a>
<a href="#work" class="btn ghost">View Work</a>
</div>
<div class="hero-meta reveal d5">
<div>ROLE / <b>Senior Full Stack Engineer</b></div>
<div>FOCUS / <b>System Performance</b></div>
<div>STACK / <b>Rust · C++ · TS</b></div>
</div>
<div class="hero-term reveal d5" aria-hidden="true">
<div class="ht-bar">
<span class="ht-dot r"></span><span class="ht-dot y"></span><span class="ht-dot g"></span>
<span class="ht-title">xdfnx@engine-room — cargo build --release</span>
</div> </div>
<div class="ht-body" id="termBody"> <h1 class="hero-title reveal d1" id="hero-title">
<div class="ht-line"><span class="cmt">// six years in the engine room</span></div> Systems built<br/>
<div class="ht-line"><span class="prompt">$</span> cargo build --release</div> <span class="soft">for</span> <span class="accent">pressure</span>.
<div class="ht-line"><span class="ok">✓</span> <span class="k">Finished</span> in <span class="v">0</span>.<span class="v">42s</span> <span class="cmt">// zero-cost abstractions</span></div> </h1>
<div class="ht-line"><span class="prompt">$</span> ./serve --load <span class="v">high</span></div> <p class="hero-sub reveal d2">
<div class="ht-line last"><span class="ok">✓</span> latency <span class="ok">−40%</span> · holding steady<span class="term-cursor2"></span></div> Senior Full Stack Engineer. I build <b>scalable web applications</b> and engineer the <b>core infrastructure</b> that holds them together — <span class="hl">Rust & C++</span> on the paths where speed is not optional.
</p>
<div class="cta-row reveal d3">
<a href="#contact" class="btn primary">Contact Me <span class="arr" aria-hidden="true">→</span></a>
<a href="#work" class="btn ghost">View Work</a>
</div>
<div class="hero-meta reveal d5">
<div>FOCUS / <b>System Performance</b></div>
<div>STACK / <b>Rust · C++ · TS</b></div>
<div>UPTIME / <b>Built to hold</b></div>
</div>
</div>
<!-- live system monitor -->
<div class="monitor reveal d4" role="img" aria-label="Live system monitor showing throughput, latency and p99 latency chart holding steady under load.">
<div class="mon-bar">
<div class="mon-dots"><span class="mon-dot r"></span><span class="mon-dot y"></span><span class="mon-dot g"></span></div>
<div class="mon-status"><span class="live" aria-hidden="true"></span>system · holding</div>
</div>
<div class="mon-body">
<div class="mon-row" data-fill="0.82">
<div class="lbl"><span>Throughput</span><b>82k req/s</b></div>
<div class="mon-track"><div class="mon-fill"></div></div>
</div>
<div class="mon-row" data-fill="0.12">
<div class="lbl"><span>p50 latency</span><b>4.1 ms</b></div>
<div class="mon-track"><div class="mon-fill"></div></div>
</div>
<div class="mon-row" data-fill="0.4">
<div class="lbl"><span>p99 latency</span><b>18.3 ms</b></div>
<div class="mon-track"><div class="mon-fill"></div></div>
</div>
<div class="mon-chart">
<div class="lab">load · <b>holding</b></div>
<svg viewBox="0 0 300 120" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="cf" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c2a878" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#c2a878" stop-opacity="0"/>
</linearGradient>
</defs>
<path id="cArea" d="" fill="url(#cf)"/>
<path id="cLine" d="" fill="none" stroke="#e7cf9b" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
</svg>
<div class="pct">↓ <b id="cVal">40%</b> latency</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- MARQUEE -->
<div class="marquee reveal" aria-hidden="true">
<div class="marquee-track" id="marquee">
<span>Rust</span><span>C++</span><span>TypeScript</span><span>React</span><span>Next.js</span><span>Node.js</span><span>Python</span><span>Docker</span><span>Redis</span><span>WebSockets</span><span>System Design</span>
<span>Rust</span><span>C++</span><span>TypeScript</span><span>React</span><span>Next.js</span><span>Node.js</span><span>Python</span><span>Docker</span><span>Redis</span><span>WebSockets</span><span>System Design</span>
</div>
</div>
<!-- ABOUT --> <!-- ABOUT -->
<section class="sec" id="about" aria-labelledby="about-title"> <section class="sec" id="about" aria-labelledby="about-title">
<div class="sec-head reveal"> <div class="sec-head reveal">
@@ -407,22 +381,28 @@
<h2 class="sec-title" id="about-title">The Engineer</h2> <h2 class="sec-title" id="about-title">The Engineer</h2>
<span class="sec-rule" aria-hidden="true"></span> <span class="sec-rule" aria-hidden="true"></span>
</div> </div>
<div class="about-grid"> <div class="about-grid">
<div class="reveal"> <div class="reveal">
<p class="about-lead"> <p class="about-lead">
Senior Full Stack Engineer with a focus on <span class="hl">system performance</span>. I design infrastructure that withstands pressure, write code that respects the machine, and ship systems built to outlast their first traffic spike. I design <span class="hl">infrastructure that withstands pressure</span> — write code that respects the machine, and ship systems built to outlast their first traffic spike.
</p> </p>
<p class="about-body"> <p class="about-body">
Six years in the engine room. Scalable web applications, optimized core infrastructure, and the low-level work most teams avoid. When the load hits, the system holds — because it was designed to. Six years in the engine room. Scalable web applications, optimized core infrastructure, and the low-level work most teams avoid. When the load hits, the system holds — because it was designed to.
</p> </p>
</div> </div>
<div class="do-trio reveal d2">
<div class="variants reveal d2"> <div class="do-card reveal">
<div class="variant-note">Voice — three cuts</div> <div class="do-ico" aria-hidden="true">FX</div>
<div class="variant"><span class="tag">Short</span><p>Senior Full Stack Engineer. I build systems that survive scale. Rust & C++ where speed is not optional.</p></div> <div><h3>Frontend that earns its pixels</h3><p>Type-safe, accessible, responsive interfaces in React, Next.js and TypeScript — UX built in, not bolted on.</p></div>
<div class="variant"><span class="tag">Atmospheric</span><p>Six years in the engine room. Scalable web applications and the core infrastructure that holds them up. When the load hits, the system holds — because it was built to.</p></div> </div>
<div class="variant"><span class="tag">Premium</span><p>Senior Full Stack Engineer focused on system performance. I design infrastructure that withstands pressure, write code that respects the machine, and ship systems built to outlast their first traffic spike.</p></div> <div class="do-card reveal d1">
<div class="do-ico" aria-hidden="true">IN</div>
<div><h3>Backend & infrastructure</h3><p>Scalable architectures in Node and Python — Dockerized, cloud-native, built to grow without breaking under their own weight.</p></div>
</div>
<div class="do-card reveal d2">
<div class="do-ico" aria-hidden="true">C</div>
<div><h3>Systems on the critical path</h3><p>When the runtime isn't fast enough: memory-safe, high-performance Rust & C++ modules — the work most teams avoid.</p></div>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -433,69 +413,37 @@
<span class="sec-id">02 / SIGNAL</span> <span class="sec-id">02 / SIGNAL</span>
<h2 class="sec-title" id="stats-title">By the Numbers</h2> <h2 class="sec-title" id="stats-title">By the Numbers</h2>
<span class="sec-rule" aria-hidden="true"></span> <span class="sec-rule" aria-hidden="true"></span>
<p class="sec-sub">Representative outcomes from recent production work — figures anonymized, results real.</p>
</div> </div>
<div class="stats reveal"> <div class="stats reveal">
<div class="stat"><div class="stat-num">6<span class="plus">+</span></div><div class="stat-label">Years in the Field</div><div class="stat-desc">In the engine room.</div></div> <div class="stat"><div class="stat-num">6<span class="plus">+</span></div><div class="stat-label">Years in the Field</div><div class="stat-desc">Engine room to architecture.</div></div>
<div class="stat"><div class="stat-num">20<span class="plus">+</span></div><div class="stat-label">Production Deploys</div><div class="stat-desc">Shipped under load.</div></div> <div class="stat"><div class="stat-num">40<span class="plus">%</span></div><div class="stat-label">Avg Latency Cut</div><div class="stat-desc">On the event pipeline.</div></div>
<div class="stat"><div class="stat-num">40<span class="plus">%</span></div><div class="stat-label">Latency Cut (avg)</div><div class="stat-desc">Where speed is not optional.</div></div> <div class="stat"><div class="stat-num">3<span class="plus">×</span></div><div class="stat-label">Throughput Win</div><div class="stat-desc">Native modules vs. JS.</div></div>
</div>
</section>
<!-- EXPERIENCE -->
<section class="sec" id="experience" aria-labelledby="exp-title">
<div class="sec-head reveal">
<span class="sec-id">03 / RECORD</span>
<h2 class="sec-title" id="exp-title">Professional Experience</h2>
<span class="sec-rule" aria-hidden="true"></span>
</div>
<div class="timeline">
<div class="job reveal">
<div class="job-period">2025 — Present</div>
<div class="job-body">
<h3>Senior Full Stack Engineer</h3>
<div class="job-co">TechFlow Systems <span>// Full-stack, infra, perf</span></div>
<p class="job-desc">Leading the backend <b>migration to microservices</b>. Built a <b>high-throughput event processing pipeline</b> in Python and Rust — <b>latency cut by 40%</b>. Own the React architecture behind the main dashboard, from data layer to render.</p>
<div class="job-tags">
<span class="tag-chip hi">Microservices Migration</span><span class="tag-chip hi">Event Pipeline</span><span class="tag-chip">Python</span><span class="tag-chip">Rust</span><span class="tag-chip">React</span><span class="tag-chip">−40% Latency</span>
</div>
</div>
</div>
<div class="job reveal">
<div class="job-period">2020 — 2023</div>
<div class="job-body">
<h3>Software Engineer</h3>
<div class="job-co">Creative Solutions Ltd. <span>// Full-stack, native modules</span></div>
<p class="job-desc">Full-stack web applications in <b>Node.js and TypeScript</b>. When the runtime slowed down, I went lower — <b>native C++ modules</b> for image processing pushed workflows <b>3× faster</b>. Where JavaScript couldn't keep up, the machine did.</p>
<div class="job-tags">
<span class="tag-chip">Node.js</span><span class="tag-chip">TypeScript</span><span class="tag-chip hi">Native C++ Modules</span><span class="tag-chip">Image Processing</span><span class="tag-chip">3× Faster</span>
</div>
</div>
</div>
</div> </div>
</section> </section>
<!-- ARSENAL --> <!-- ARSENAL -->
<section class="sec" id="arsenal" aria-labelledby="arsenal-title"> <section class="sec" id="arsenal" aria-labelledby="arsenal-title">
<div class="sec-head reveal"> <div class="sec-head reveal">
<span class="sec-id">04 / ARSENAL</span> <span class="sec-id">03 / ARSENAL</span>
<h2 class="sec-title" id="arsenal-title">Technical Arsenal</h2> <h2 class="sec-title" id="arsenal-title">Technical Arsenal</h2>
<span class="sec-rule" aria-hidden="true"></span> <span class="sec-rule" aria-hidden="true"></span>
</div> </div>
<div class="arsenal"> <div class="arsenal">
<div class="arm-card reveal"> <div class="arm-card reveal">
<div class="arm-num">A / FRONT</div> <div class="arm-ico"><span class="n">A</span>/ FRONT</div>
<div class="arm-title">Modern Frontend</div> <div class="arm-title">Modern Frontend</div>
<div class="arm-desc">Type-safe, responsive interfaces. UX and accessibility built in — not bolted on. Every pixel earns its place.</div> <div class="arm-desc">Type-safe, responsive interfaces. UX and accessibility built in — not bolted on. Every pixel earns its place.</div>
<div class="arm-stack"><span>React</span><span>Next.js</span><span>TypeScript</span></div> <div class="arm-stack"><span>React</span><span>Next.js</span><span>TypeScript</span></div>
</div> </div>
<div class="arm-card reveal d1"> <div class="arm-card reveal d1">
<div class="arm-num">B / INFRA</div> <div class="arm-ico"><span class="n">B</span>/ INFRA</div>
<div class="arm-title">Backend & Infra</div> <div class="arm-title">Backend & Infra</div>
<div class="arm-desc">Scalable architectures in Node and Python. Dockerized, cloud-native — built to grow without breaking under its own weight.</div> <div class="arm-desc">Scalable architectures in Node and Python. Dockerized, cloud-native — built to grow without breaking under its own weight.</div>
<div class="arm-stack"><span>Node.js</span><span>Python</span><span>Docker</span><span>Redis</span><span>WebSockets</span></div> <div class="arm-stack"><span>Node.js</span><span>Python</span><span>Docker</span><span>Redis</span><span>WebSockets</span></div>
</div> </div>
<div class="arm-card reveal d2"> <div class="arm-card reveal d2">
<div class="arm-num">C / CORE</div> <div class="arm-ico"><span class="n">C</span>/ CORE</div>
<div class="arm-title">Systems & Low Level</div> <div class="arm-title">Systems & Low Level</div>
<div class="arm-desc">When the runtime isn't fast enough. Memory-safe, high-performance modules for the critical path. The work most teams avoid.</div> <div class="arm-desc">When the runtime isn't fast enough. Memory-safe, high-performance modules for the critical path. The work most teams avoid.</div>
<div class="arm-stack"><span>Rust</span><span>C++</span><span>System Design</span></div> <div class="arm-stack"><span>Rust</span><span>C++</span><span>System Design</span></div>
@@ -506,7 +454,7 @@
<!-- WORK --> <!-- WORK -->
<section class="sec" id="work" aria-labelledby="work-title"> <section class="sec" id="work" aria-labelledby="work-title">
<div class="sec-head reveal"> <div class="sec-head reveal">
<span class="sec-id">05 / SELECTED WORK</span> <span class="sec-id">04 / SELECTED WORK</span>
<h2 class="sec-title" id="work-title">Case Studies</h2> <h2 class="sec-title" id="work-title">Case Studies</h2>
<span class="sec-rule" aria-hidden="true"></span> <span class="sec-rule" aria-hidden="true"></span>
</div> </div>
@@ -515,6 +463,7 @@
<div class="work-idx">01</div> <div class="work-idx">01</div>
<div class="work-main"> <div class="work-main">
<h3>Fintech Analytics Engine</h3> <h3>Fintech Analytics Engine</h3>
<div class="work-metric">— real-time · zero-cost abstractions</div>
<p>Real-time financial dashboard. The backend aggregates streams from multiple sources through a <b>custom Rust service</b> — zero-cost abstractions, real performance. Built to render data the moment it arrives, not a cycle later.</p> <p>Real-time financial dashboard. The backend aggregates streams from multiple sources through a <b>custom Rust service</b> — zero-cost abstractions, real performance. Built to render data the moment it arrives, not a cycle later.</p>
</div> </div>
<div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Next.js</span><span>Rust</span><span>WebSockets</span></div></div> <div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Next.js</span><span>Rust</span><span>WebSockets</span></div></div>
@@ -523,6 +472,7 @@
<div class="work-idx">02</div> <div class="work-idx">02</div>
<div class="work-main"> <div class="work-main">
<h3>AI Data Pipeline</h3> <h3>AI Data Pipeline</h3>
<div class="work-metric">— terabytes · Python + C++ bindings</div>
<p>Automated ETL across <b>terabytes of data</b>. Python for flexibility, <b>C++ bindings</b> for the heavy lifting. The pipeline doesn't choke when the data grows — it was designed for the next order of magnitude.</p> <p>Automated ETL across <b>terabytes of data</b>. Python for flexibility, <b>C++ bindings</b> for the heavy lifting. The pipeline doesn't choke when the data grows — it was designed for the next order of magnitude.</p>
</div> </div>
<div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Python</span><span>C++</span><span>Docker</span></div></div> <div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Python</span><span>C++</span><span>Docker</span></div></div>
@@ -531,6 +481,7 @@
<div class="work-idx">03</div> <div class="work-idx">03</div>
<div class="work-main"> <div class="work-main">
<h3>Distributed Task Queue</h3> <h3>Distributed Task Queue</h3>
<div class="work-metric">— fault-tolerant · low-memory</div>
<p>Fault-tolerant job scheduler. Celery-inspired, rebuilt for <b>low-memory environments</b>. Jobs survive crashes. The queue doesn't bleed — engineered to hold the line when the system is under pressure.</p> <p>Fault-tolerant job scheduler. Celery-inspired, rebuilt for <b>low-memory environments</b>. Jobs survive crashes. The queue doesn't bleed — engineered to hold the line when the system is under pressure.</p>
</div> </div>
<div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Node.js</span><span>Redis</span><span>System Design</span></div></div> <div class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Node.js</span><span>Redis</span><span>System Design</span></div></div>
@@ -538,11 +489,38 @@
</div> </div>
</section> </section>
<!-- EXPERIENCE -->
<section class="sec" id="experience" aria-labelledby="exp-title">
<div class="sec-head reveal">
<span class="sec-id">05 / RECORD</span>
<h2 class="sec-title" id="exp-title">Professional Experience</h2>
<span class="sec-rule" aria-hidden="true"></span>
</div>
<div class="timeline">
<div class="job reveal">
<div class="job-period">2024 — Present</div>
<div class="job-body">
<h3>Senior Full Stack Engineer</h3>
<div class="job-co">TechFlow Systems <span>// full-stack · infra · perf</span></div>
<p class="job-desc">Leading the backend <b>migration to microservices</b>. Built a <b>high-throughput event processing pipeline</b> in Python and Rust — <b>latency cut by 40%</b>. Own the React architecture behind the main dashboard, from data layer to render.</p>
</div>
</div>
<div class="job reveal">
<div class="job-period">2021 — 2024</div>
<div class="job-body">
<h3>Software Engineer</h3>
<div class="job-co">Creative Solutions Ltd. <span>// full-stack · native modules</span></div>
<p class="job-desc">Full-stack web applications in <b>Node.js and TypeScript</b>. When the runtime slowed, I went lower — <b>native C++ modules</b> for image processing pushed workflows <b>3× faster</b>. Where JavaScript couldn't keep up, the machine did.</p>
</div>
</div>
</div>
</section>
<!-- FINAL CTA --> <!-- FINAL CTA -->
<section class="cta-sec" id="contact" aria-labelledby="cta-title"> <section class="cta-sec" id="contact" aria-labelledby="cta-title">
<div class="cta-eyebrow reveal">06 / TRANSMISSION OPEN</div> <div class="cta-eyebrow reveal">06 / TRANSMISSION OPEN</div>
<h2 class="cta-title reveal d1" id="cta-title">Ready for the <span class="accent">pressure</span>?</h2> <h2 class="cta-title reveal d1" id="cta-title">Let's build something <span class="accent">that won't break</span>.</h2>
<p class="cta-sub reveal d2">Let's talk about systems that scale without noise — performance where it matters, infrastructure that holds the line.</p> <p class="cta-sub reveal d2">Systems that scale without noise — performance where it matters, infrastructure that holds the line.</p>
<div class="cta-row reveal d3"> <div class="cta-row reveal d3">
<span class="email-copy"> <span class="email-copy">
<span class="copy-tip" id="copyTip" role="status" aria-live="polite">Copied to clipboard</span> <span class="copy-tip" id="copyTip" role="status" aria-live="polite">Copied to clipboard</span>
@@ -558,8 +536,8 @@
<div class="wrap foot"> <div class="wrap foot">
<div class="foot-left">© 2026 <b>xdfnx</b> // Built to hold.</div> <div class="foot-left">© 2026 <b>xdfnx</b> // Built to hold.</div>
<div class="foot-right"> <div class="foot-right">
<a href="#contact">contact@xdfnx.cfd</a> <a href="#contact" aria-label="Email">contact@xdfnx.cfd</a>
<a href="#about">Top ↑</a> <a href="#about" aria-label="Back to top">Top ↑</a>
</div> </div>
</div> </div>
</footer> </footer>
@@ -568,9 +546,6 @@
(function(){ (function(){
var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches; var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
// duplicate marquee track for seamless scroll (already duplicated in markup; keep robust)
var mq = document.getElementById('marquee');
// reveal // reveal
if ('IntersectionObserver' in window) { if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(es){ var io = new IntersectionObserver(function(es){
@@ -581,71 +556,106 @@
document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('in'); }); document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('in'); });
} }
// monitor: animate bars when visible
var monRows = document.querySelectorAll('.mon-row');
if ('IntersectionObserver' in window) {
var mo = new IntersectionObserver(function(es){
es.forEach(function(e){
if(e.isIntersecting){
monRows.forEach(function(r,i){
var f = parseFloat(r.getAttribute('data-fill'));
var fill = r.querySelector('.mon-fill');
var baseScale = reduce ? f : 0;
fill.style.transform = 'scaleX(' + baseScale + ')';
setTimeout(function(){
var target = reduce ? f : f;
fill.style.transition = 'transform 1s cubic-bezier(.16,1,.3,1)';
fill.style.transform = 'scaleX(' + target + ')';
}, 120 + i*140);
});
mo.disconnect();
}
});
},{threshold:.3});
var mon = document.querySelector('.monitor'); if(mon) mo.observe(mon);
} else {
monRows.forEach(function(r){ var f=parseFloat(r.getAttribute('data-fill')); r.querySelector('.mon-fill').style.transform='scaleX('+f+')'; });
}
// monitor: animated chart path (sine-ish wave that "holds the line")
var cLine = document.getElementById('cLine'), cArea = document.getElementById('cArea');
var W=300, H=120, N=42, phase=0, raf=null;
function buildPath(p){
var pts=[]; var mid=H/2;
for(var i=0;i<=N;i++){
var x=(i/N)*W;
var y= mid + Math.sin((i/N)*Math.PI*3 + p)*14*((i/N)) + Math.sin((i/N)*Math.PI*7 + p*1.3)*5;
pts.push(x.toFixed(1)+','+y.toFixed(1));
}
var d='M'+pts[0]+' L'+pts.slice(1).join(' L');
var area=d+' L'+W+','+H+' L0,'+H+' Z';
return {l:d,a:area};
}
function draw(){
var o = buildPath(phase);
cLine.setAttribute('d', o.l); cArea.setAttribute('d', o.a);
}
if (!reduce) {
if ('IntersectionObserver' in window) {
var co=new IntersectionObserver(function(es){ es.forEach(function(e){
if(e.isIntersecting){ if(!raf) loop(); }
else { if(raf){ cancelAnimationFrame(raf); raf=null; } }
}); },{threshold:.2});
var ch=document.querySelector('.mon-chart'); if(ch) co.observe(ch);
}
function loop(){ phase+=0.06; draw(); raf=requestAnimationFrame(loop); }
} else { draw(); }
// glow parallax (rAF-throttled) // glow parallax (rAF-throttled)
if (!reduce) { if (!reduce) {
var glows = document.querySelectorAll('.glow'), ticking=false; var glows=document.querySelectorAll('.glow'), ticking=false;
window.addEventListener('scroll', function(){ window.addEventListener('scroll',function(){
if(ticking) return; ticking=true; if(ticking) return; ticking=true;
requestAnimationFrame(function(){ requestAnimationFrame(function(){
var y = window.scrollY; var y=window.scrollY;
glows.forEach(function(g,i){ g.style.transform = 'translateY(' + (y*(i?-.06:.04)) + 'px)' + (i?' translateX(0)':'translateX(-30%)'); }); glows.forEach(function(g,i){ g.style.transform='translateY('+(y*(i?-.06:.04))+'px)'+(i?' translateX(0)':'translateX(-25%)'); });
ticking=false; ticking=false;
}); });
},{passive:true}); },{passive:true});
} }
// hide top bar on scroll-down // hide top bar on scroll-down
var bar = document.getElementById('topbar'), lastY = 0; var bar=document.getElementById('topbar'), lastY=0;
window.addEventListener('scroll', function(){ window.addEventListener('scroll',function(){
var y = window.scrollY; var y=window.scrollY;
if (y > 220 && y > lastY) bar.classList.add('hidden'); else bar.classList.remove('hidden'); if(y>220 && y>lastY) bar.classList.add('hidden'); else bar.classList.remove('hidden');
lastY = y; lastY=y;
},{passive:true}); },{passive:true});
// mobile menu // mobile menu
var btn = document.getElementById('menuBtn'), nav = document.getElementById('nav'); var btn=document.getElementById('menuBtn'), nav=document.getElementById('nav');
function closeMenu(){ nav.classList.remove('open'); btn.setAttribute('aria-expanded','false'); btn.textContent='Menu'; } function closeMenu(){ nav.classList.remove('open'); btn.setAttribute('aria-expanded','false'); btn.textContent='Menu'; }
btn.addEventListener('click', function(){ btn.addEventListener('click',function(){ var open=nav.classList.toggle('open'); btn.setAttribute('aria-expanded',open?'true':'false'); btn.textContent=open?'Close':'Menu'; });
var open = nav.classList.toggle('open');
btn.setAttribute('aria-expanded', open?'true':'false');
btn.textContent = open?'Close':'Menu';
});
nav.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', closeMenu); }); nav.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', closeMenu); });
// scroll-spy // scroll-spy
var links = Array.prototype.slice.call(nav.querySelectorAll('a')), map={}; var links=Array.prototype.slice.call(nav.querySelectorAll('a')), map={};
links.forEach(function(a){ var id=a.getAttribute('href').slice(1); var sec=document.getElementById(id); if(sec) map[id]=a; }); links.forEach(function(a){ var id=a.getAttribute('href').slice(1); var sec=document.getElementById(id); if(sec) map[id]=a; });
if ('IntersectionObserver' in window) { if ('IntersectionObserver' in window) {
var spy = new IntersectionObserver(function(es){ var spy=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){
es.forEach(function(e){ if(e.isIntersecting){ links.forEach(function(l){ l.classList.remove('active'); });
links.forEach(function(l){ l.classList.remove('active'); }); var l=map[e.target.id]; if(l) l.classList.add('active');
var l = map[e.target.id]; if(l) l.classList.add('active'); }}); },{rootMargin:'-45% 0px -50% 0px'});
}});
},{rootMargin:'-45% 0px -50% 0px'});
Object.keys(map).forEach(function(id){ var s=document.getElementById(id); if(s) spy.observe(s); }); Object.keys(map).forEach(function(id){ var s=document.getElementById(id); if(s) spy.observe(s); });
} }
// copy email // copy email
var emailBtn = document.getElementById('emailBtn'), tip = document.getElementById('copyTip'), email = emailBtn.getAttribute('data-email'); var emailBtn=document.getElementById('emailBtn'), tip=document.getElementById('copyTip'), email=emailBtn.getAttribute('data-email');
function flash(){ tip.classList.add('show'); setTimeout(function(){ tip.classList.remove('show'); },1600); } function flash(){ tip.classList.add('show'); setTimeout(function(){ tip.classList.remove('show'); },1600); }
emailBtn.addEventListener('click', function(e){ emailBtn.addEventListener('click',function(e){
if (e.shiftKey||e.ctrlKey||e.metaKey){ e.preventDefault(); if(navigator.clipboard) navigator.clipboard.writeText(email).then(flash).catch(function(){}); else flash(); return; } if(e.shiftKey||e.ctrlKey||e.metaKey){ e.preventDefault(); if(navigator.clipboard) navigator.clipboard.writeText(email).then(flash).catch(function(){}); else flash(); return; }
if (matchMedia('(pointer:coarse)').matches){ e.preventDefault(); if(navigator.clipboard) navigator.clipboard.writeText(email).then(flash).catch(function(){}); else window.location.href='mailto:'+email; } if(matchMedia('(pointer:coarse)').matches){ e.preventDefault(); if(navigator.clipboard) navigator.clipboard.writeText(email).then(flash).catch(function(){}); else window.location.href='mailto:'+email; }
}); });
// typing animation on hero terminal (lines appear in sequence)
if (!reduce) {
var lines = document.querySelectorAll('#termBody .ht-line');
lines.forEach(function(l,i){ l.style.opacity=0; l.style.transition='opacity .35s var(--ease),transform .35s var(--ease)'; l.style.transform='translateY(4px)'; });
var vis = new IntersectionObserver(function(es){
es.forEach(function(e){ if(e.isIntersecting){
lines.forEach(function(l,i){ setTimeout(function(){ l.style.opacity=1; l.style.transform='none'; }, 250 + i*420); });
vis.disconnect();
}});
},{threshold:.3});
var term = document.getElementById('termBody');
if(term) vis.observe(term);
}
})(); })();
</script> </script>
</body> </body>