653 lines
40 KiB
HTML
653 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<meta name="theme-color" content="#0a0a10" />
|
||
<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="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/" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://xdfnx.cfd/" />
|
||
<meta property="og:title" content="xdfnx — Senior Full Stack Engineer" />
|
||
<meta property="og:description" content="Systems built for pressure. Rust & C++ where speed is not optional." />
|
||
<meta property="og:site_name" content="xdfnx" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="xdfnx — Senior Full Stack Engineer" />
|
||
<meta name="twitter:description" content="Systems built for pressure. Rust & C++ where speed is not optional." />
|
||
<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="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="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context":"https://schema.org","@type":"Person","name":"xdfnx",
|
||
"jobTitle":"Senior Full Stack Engineer","url":"https://xdfnx.cfd/",
|
||
"email":"contact@xdfnx.cfd",
|
||
"description":"Systems built for pressure. Rust & C++ where speed is not optional.",
|
||
"knowsAbout":["Rust","C++","TypeScript","System Performance","Scalable Web Applications","Infrastructure"]
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
:root{
|
||
--bg:#0a0a10;
|
||
--bg-2:#0e0e16;
|
||
--surface:#12121c;
|
||
--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-dim:#aeb0bd;
|
||
--ink-faint:#6f7080;
|
||
--accent:#c2a878;
|
||
--accent-bright:#e7cf9b;
|
||
--accent-dim:#7c6a47;
|
||
--accent-glow:rgba(194,168,120,.5);
|
||
--flame:#e07a4c;
|
||
--flame-dim:#a5522f;
|
||
--focus:#7aa2e6;
|
||
--grad:linear-gradient(135deg,var(--accent) 0%,var(--flame) 100%);
|
||
--ease:cubic-bezier(.2,.7,.2,1);
|
||
--ease-out:cubic-bezier(.16,1,.3,1);
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
background:var(--bg);
|
||
color:var(--ink);
|
||
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
||
font-weight:300;line-height:1.6;
|
||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||
overflow-x:hidden;letter-spacing:.01em;
|
||
background-image:
|
||
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%);
|
||
}
|
||
::selection{background:var(--accent);color:#15200a}
|
||
|
||
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
|
||
a:focus-visible,button:focus-visible{outline-offset:4px}
|
||
|
||
.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);
|
||
}
|
||
.skip:focus{top:0}
|
||
|
||
/* ---- atmosphere ---- */
|
||
.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>");
|
||
}
|
||
.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%)}
|
||
|
||
/* ---- layout ---- */
|
||
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
|
||
section{position:relative;z-index:2}
|
||
|
||
/* ---- top 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);
|
||
}
|
||
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}
|
||
.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 .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 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:hover,.nav-links a.active{color:var(--ink)}
|
||
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
|
||
.nav-cta{color:var(--accent)!important}
|
||
.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:3px;transition:border-color .25s var(--ease),color .25s var(--ease)}
|
||
.menu-btn:hover{border-color:var(--accent);color:var(--accent)}
|
||
|
||
/* ---- hero ---- */
|
||
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 90px}
|
||
.hero-grid{display:grid;grid-template-columns:1fr;gap:36px;max-width:920px}
|
||
.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::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 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}}}
|
||
|
||
h1.hero-title{
|
||
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 .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 b{color:var(--ink);font-weight:500}
|
||
.hero-sub .hl{color:var(--accent)}
|
||
|
||
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
|
||
.btn{
|
||
display:inline-flex;align-items:center;gap:10px;min-height:48px;
|
||
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.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 .arr{transition:transform .3s var(--ease)}
|
||
.btn:hover .arr{transform:translateX(5px)}
|
||
|
||
.hero-meta{display:flex;gap:42px;margin-top:22px;flex-wrap:wrap}
|
||
.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 terminal panel */
|
||
.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)}
|
||
.ht-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
|
||
.ht-dot{width:10px;height:10px;border-radius:50%}
|
||
.ht-dot.r{background:#ff5f57}.ht-dot.y{background:#febc2e}.ht-dot.g{background:#28c840}
|
||
.ht-title{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
|
||
.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)}
|
||
.ht-body .cmt{color:var(--ink-faint)}
|
||
.ht-body .k{color:#e7cf9b}
|
||
.ht-body .v{color:#9bb7e6}
|
||
.ht-body .ok{color:#7fd1a3}
|
||
.ht-line .prompt{color:var(--accent)}
|
||
.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}
|
||
|
||
/* ---- section heading ---- */
|
||
.sec{padding:120px 0;border-top:1px solid var(--line)}
|
||
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:58px}
|
||
.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-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
|
||
|
||
/* ---- about ---- */
|
||
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;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 .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}
|
||
.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 ---- */
|
||
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
|
||
.stat{background:var(--bg);padding:44px 30px;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:hover{background:var(--bg-2)}
|
||
.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 .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-desc{color:var(--ink-dim);font-size:13px;margin-top:8px;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 ---- */
|
||
.timeline{display:flex;flex-direction:column;gap:2px}
|
||
.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:last-child{border-bottom:1px solid var(--line)}
|
||
.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-body h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
|
||
.job-co{color:var(--ink-dim);font-weight:300;font-size:15px;margin-top:3px}
|
||
.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 b{color:var(--ink);font-weight:500}
|
||
.job-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
|
||
.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{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::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::before,.arm-card:hover::after{opacity:1}
|
||
.arm-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);letter-spacing:.14em;font-weight:500}
|
||
.arm-title{font-size:20px;font-weight:700;margin:14px 0 12px;letter-spacing:-.01em}
|
||
.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 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:hover{color:var(--accent);border-color:var(--accent-dim)}
|
||
|
||
/* ---- work ---- */
|
||
.work-grid{display:flex;flex-direction:column;gap:2px}
|
||
.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:last-child{border-bottom:1px solid var(--line)}
|
||
.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-main h3{font-size:clamp(23px,2.7vw,32px);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-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-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}
|
||
|
||
/* ---- final cta ---- */
|
||
.cta-sec{padding:150px 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-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}
|
||
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}
|
||
.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-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-sec .cta-row{justify-content:center;margin-top:42px;position:relative}
|
||
|
||
.email-copy{position:relative}
|
||
.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: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)}
|
||
|
||
/* ---- footer ---- */
|
||
footer{border-top:1px solid var(--line);padding:54px 0;padding-bottom:max(60px,env(safe-area-inset-bottom))}
|
||
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
|
||
.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-right{display:flex;gap:24px}
|
||
.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:hover{color:var(--accent)}
|
||
|
||
/* ---- reveal ---- */
|
||
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
|
||
.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}
|
||
|
||
/* ---- responsive ---- */
|
||
@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.open{transform:translateY(0)}
|
||
.nav-links a{padding:18px 28px;width:100%;border-bottom:1px solid var(--line)}
|
||
.menu-btn{display:block}
|
||
.about-grid{grid-template-columns:1fr;gap:44px}
|
||
.stats{grid-template-columns:1fr}
|
||
.arsenal{grid-template-columns:1fr}
|
||
.job{grid-template-columns:1fr;gap:14px;padding-left:0!important}
|
||
.job-period{padding-top:0}
|
||
.work{grid-template-columns:1fr;gap:18px;padding-left:0!important}
|
||
.work-side{padding-top:0}
|
||
.hero{padding-top:120px}
|
||
.sec{padding:84px 0}
|
||
.hero-term{max-width:none}
|
||
}
|
||
@media(prefers-reduced-motion:reduce){
|
||
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
|
||
.reveal{opacity:1;transform:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main">Skip to content</a>
|
||
<div class="grid-bg" aria-hidden="true"></div>
|
||
<div class="glow a" aria-hidden="true"></div>
|
||
<div class="glow b" aria-hidden="true"></div>
|
||
<div class="grain" aria-hidden="true"></div>
|
||
|
||
<header class="bar" id="topbar">
|
||
<div class="bar-inner">
|
||
<a class="brand" href="#about"><span class="dot" aria-hidden="true"></span>xdfnx</a>
|
||
<nav class="nav-links" id="nav" aria-label="Primary">
|
||
<a href="#about">About</a>
|
||
<a href="#experience">Record</a>
|
||
<a href="#arsenal">Arsenal</a>
|
||
<a href="#work">Work</a>
|
||
<a href="#contact" class="nav-cta">Contact →</a>
|
||
</nav>
|
||
<button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="nav">Menu</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap" id="main">
|
||
|
||
<!-- HERO -->
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="hero-grid">
|
||
<div class="eyebrow reveal">
|
||
<span class="pulse" aria-hidden="true"></span>
|
||
<span class="status-pill"><b>Open</b> for Complex Projects</span>
|
||
</div>
|
||
|
||
<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 class="ht-body" id="termBody">
|
||
<div class="ht-line"><span class="cmt">// six years in the engine room</span></div>
|
||
<div class="ht-line"><span class="prompt">$</span> cargo build --release</div>
|
||
<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>
|
||
<div class="ht-line"><span class="prompt">$</span> ./serve --load <span class="v">high</span></div>
|
||
<div class="ht-line last"><span class="ok">✓</span> latency <span class="ok">−40%</span> · holding steady<span class="term-cursor2"></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 -->
|
||
<section class="sec" id="about" aria-labelledby="about-title">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">01 / ABOUT</span>
|
||
<h2 class="sec-title" id="about-title">The Engineer</h2>
|
||
<span class="sec-rule" aria-hidden="true"></span>
|
||
</div>
|
||
|
||
<div class="about-grid">
|
||
<div class="reveal">
|
||
<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.
|
||
</p>
|
||
<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.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="variants reveal d2">
|
||
<div class="variant-note">Voice — three cuts</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 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 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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STATS -->
|
||
<section class="sec" aria-labelledby="stats-title">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">02 / SIGNAL</span>
|
||
<h2 class="sec-title" id="stats-title">By the Numbers</h2>
|
||
<span class="sec-rule" aria-hidden="true"></span>
|
||
</div>
|
||
<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">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">Latency Cut (avg)</div><div class="stat-desc">Where speed is not optional.</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>
|
||
</section>
|
||
|
||
<!-- ARSENAL -->
|
||
<section class="sec" id="arsenal" aria-labelledby="arsenal-title">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">04 / ARSENAL</span>
|
||
<h2 class="sec-title" id="arsenal-title">Technical Arsenal</h2>
|
||
<span class="sec-rule" aria-hidden="true"></span>
|
||
</div>
|
||
<div class="arsenal">
|
||
<div class="arm-card reveal">
|
||
<div class="arm-num">A / FRONT</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-stack"><span>React</span><span>Next.js</span><span>TypeScript</span></div>
|
||
</div>
|
||
<div class="arm-card reveal d1">
|
||
<div class="arm-num">B / 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-stack"><span>Node.js</span><span>Python</span><span>Docker</span><span>Redis</span><span>WebSockets</span></div>
|
||
</div>
|
||
<div class="arm-card reveal d2">
|
||
<div class="arm-num">C / CORE</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-stack"><span>Rust</span><span>C++</span><span>System Design</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WORK -->
|
||
<section class="sec" id="work" aria-labelledby="work-title">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">05 / SELECTED WORK</span>
|
||
<h2 class="sec-title" id="work-title">Case Studies</h2>
|
||
<span class="sec-rule" aria-hidden="true"></span>
|
||
</div>
|
||
<div class="work-grid">
|
||
<article class="work reveal">
|
||
<div class="work-idx">01</div>
|
||
<div class="work-main">
|
||
<h3>Fintech Analytics Engine</h3>
|
||
<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 class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Next.js</span><span>Rust</span><span>WebSockets</span></div></div>
|
||
</article>
|
||
<article class="work reveal">
|
||
<div class="work-idx">02</div>
|
||
<div class="work-main">
|
||
<h3>AI Data Pipeline</h3>
|
||
<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 class="work-side"><div class="lbl">Stack</div><div class="work-stack"><span>Python</span><span>C++</span><span>Docker</span></div></div>
|
||
</article>
|
||
<article class="work reveal">
|
||
<div class="work-idx">03</div>
|
||
<div class="work-main">
|
||
<h3>Distributed Task Queue</h3>
|
||
<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 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>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL CTA -->
|
||
<section class="cta-sec" id="contact" aria-labelledby="cta-title">
|
||
<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>
|
||
<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>
|
||
<div class="cta-row reveal d3">
|
||
<span class="email-copy">
|
||
<span class="copy-tip" id="copyTip" role="status" aria-live="polite">Copied to clipboard</span>
|
||
<a href="mailto:contact@xdfnx.cfd" class="btn primary" id="emailBtn" data-email="contact@xdfnx.cfd">contact@xdfnx.cfd <span class="arr" aria-hidden="true">→</span></a>
|
||
</span>
|
||
<a href="#work" class="btn ghost">View Work</a>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="wrap foot">
|
||
<div class="foot-left">© 2026 <b>xdfnx</b> // Built to hold.</div>
|
||
<div class="foot-right">
|
||
<a href="#contact">contact@xdfnx.cfd</a>
|
||
<a href="#about">Top ↑</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function(){
|
||
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
|
||
if ('IntersectionObserver' in window) {
|
||
var io = new IntersectionObserver(function(es){
|
||
es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
|
||
},{threshold:.12, rootMargin:'0px 0px -8% 0px'});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
} else {
|
||
document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('in'); });
|
||
}
|
||
|
||
// glow parallax (rAF-throttled)
|
||
if (!reduce) {
|
||
var glows = document.querySelectorAll('.glow'), ticking=false;
|
||
window.addEventListener('scroll', function(){
|
||
if(ticking) return; ticking=true;
|
||
requestAnimationFrame(function(){
|
||
var y = window.scrollY;
|
||
glows.forEach(function(g,i){ g.style.transform = 'translateY(' + (y*(i?-.06:.04)) + 'px)' + (i?' translateX(0)':'translateX(-30%)'); });
|
||
ticking=false;
|
||
});
|
||
},{passive:true});
|
||
}
|
||
|
||
// hide top bar on scroll-down
|
||
var bar = document.getElementById('topbar'), lastY = 0;
|
||
window.addEventListener('scroll', function(){
|
||
var y = window.scrollY;
|
||
if (y > 220 && y > lastY) bar.classList.add('hidden'); else bar.classList.remove('hidden');
|
||
lastY = y;
|
||
},{passive:true});
|
||
|
||
// mobile menu
|
||
var btn = document.getElementById('menuBtn'), nav = document.getElementById('nav');
|
||
function closeMenu(){ nav.classList.remove('open'); btn.setAttribute('aria-expanded','false'); btn.textContent='Menu'; }
|
||
btn.addEventListener('click', function(){
|
||
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); });
|
||
|
||
// scroll-spy
|
||
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; });
|
||
if ('IntersectionObserver' in window) {
|
||
var spy = new IntersectionObserver(function(es){
|
||
es.forEach(function(e){ if(e.isIntersecting){
|
||
links.forEach(function(l){ l.classList.remove('active'); });
|
||
var l = map[e.target.id]; if(l) l.classList.add('active');
|
||
}});
|
||
},{rootMargin:'-45% 0px -50% 0px'});
|
||
Object.keys(map).forEach(function(id){ var s=document.getElementById(id); if(s) spy.observe(s); });
|
||
}
|
||
|
||
// copy 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); }
|
||
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 (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>
|
||
</body>
|
||
</html>
|