1174 lines
34 KiB
HTML
1174 lines
34 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="xdfnx — Senior Full Stack Engineer. Systems built for pressure. Rust, C++, scalable web applications, core infrastructure optimization." />
|
||
<title>xdfnx — Senior Full Stack Engineer</title>
|
||
<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&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
||
rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #07070a;
|
||
--bg-2: #0b0b0f;
|
||
--surface: #101016;
|
||
--surface-2: #15151d;
|
||
--line: #1d1d26;
|
||
--line-2: #262630;
|
||
--ink: #f1f0ee;
|
||
--ink-dim: #9b9ba4;
|
||
--ink-faint: #56565f;
|
||
--accent: #c2a878;
|
||
--accent-bright: #e3cb98;
|
||
--accent-dim: #7c6a47;
|
||
--danger: #c9574a;
|
||
--ease: cubic-bezier(0.2, 0.7, 0.2, 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: 0.01em;
|
||
}
|
||
|
||
/* atmosphere */
|
||
.grain {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
opacity: 0.035;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><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(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||
background-size: 80px 80px;
|
||
opacity: 0.18;
|
||
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
|
||
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
|
||
}
|
||
.glow {
|
||
position: fixed;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
border-radius: 50%;
|
||
filter: blur(120px);
|
||
opacity: 0.5;
|
||
}
|
||
.glow.a {
|
||
top: -180px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 700px;
|
||
height: 420px;
|
||
background: radial-gradient(circle, rgba(194, 168, 120, 0.12), transparent 70%);
|
||
}
|
||
.glow.b {
|
||
top: 60vh;
|
||
right: -200px;
|
||
width: 520px;
|
||
height: 520px;
|
||
background: radial-gradient(circle, rgba(60, 80, 120, 0.1), transparent 70%);
|
||
}
|
||
|
||
/* layout */
|
||
.wrap {
|
||
max-width: 1180px;
|
||
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(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
background: rgba(7, 7, 10, 0.72);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.bar-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 62px;
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: 0 28px;
|
||
}
|
||
.brand {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
color: var(--ink);
|
||
}
|
||
.brand span {
|
||
color: var(--accent);
|
||
}
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 30px;
|
||
align-items: center;
|
||
}
|
||
.nav-links a {
|
||
color: var(--ink-dim);
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
transition: color 0.25s var(--ease);
|
||
}
|
||
.nav-links a:hover {
|
||
color: var(--ink);
|
||
}
|
||
.nav-cta {
|
||
color: var(--accent) !important;
|
||
}
|
||
|
||
/* hero */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 130px 0 90px;
|
||
}
|
||
.hero-grid {
|
||
display: grid;
|
||
gap: 34px;
|
||
max-width: 880px;
|
||
}
|
||
.eyebrow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--ink-dim);
|
||
}
|
||
.pulse {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
position: relative;
|
||
box-shadow: 0 0 0 0 rgba(194, 168, 120, 0.6);
|
||
}
|
||
.pulse::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -5px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--accent);
|
||
opacity: 0.6;
|
||
animation: ping 2.4s var(--ease) infinite;
|
||
}
|
||
@keyframes ping {
|
||
0% {
|
||
transform: scale(0.7);
|
||
opacity: 0.7;
|
||
}
|
||
70% {
|
||
transform: scale(1.6);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
.status-pill {
|
||
border: 1px solid var(--line-2);
|
||
padding: 5px 12px;
|
||
border-radius: 999px;
|
||
color: var(--ink);
|
||
}
|
||
.status-pill b {
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
|
||
h1.hero-title {
|
||
font-size: clamp(46px, 8.5vw, 104px);
|
||
line-height: 0.98;
|
||
font-weight: 700;
|
||
letter-spacing: -0.035em;
|
||
color: var(--ink);
|
||
}
|
||
h1.hero-title .soft {
|
||
color: var(--ink-faint);
|
||
font-weight: 300;
|
||
}
|
||
h1.hero-title .accent {
|
||
color: var(--accent);
|
||
}
|
||
.hero-sub {
|
||
font-size: clamp(16px, 2vw, 20px);
|
||
color: var(--ink-dim);
|
||
max-width: 620px;
|
||
font-weight: 300;
|
||
}
|
||
.hero-sub b {
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
}
|
||
.cta-row {
|
||
display: flex;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
margin-top: 6px;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 14px 24px;
|
||
border-radius: 2px;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
font-family: "JetBrains Mono", monospace;
|
||
letter-spacing: 0.04em;
|
||
transition: all 0.3s var(--ease);
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
}
|
||
.btn.primary {
|
||
background: var(--accent);
|
||
color: #15120a;
|
||
border-color: var(--accent);
|
||
}
|
||
.btn.primary:hover {
|
||
background: var(--accent-bright);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 30px -10px rgba(194, 168, 120, 0.5);
|
||
}
|
||
.btn.ghost {
|
||
color: var(--ink);
|
||
border-color: var(--line-2);
|
||
background: transparent;
|
||
}
|
||
.btn.ghost:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
}
|
||
.btn .arr {
|
||
transition: transform 0.3s var(--ease);
|
||
}
|
||
.btn:hover .arr {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
gap: 40px;
|
||
margin-top: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-meta div {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--ink-faint);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.hero-meta b {
|
||
color: var(--ink-dim);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* section heading */
|
||
.sec {
|
||
padding: 110px 0;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.sec-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 18px;
|
||
margin-bottom: 54px;
|
||
}
|
||
.sec-id {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.sec-title {
|
||
font-size: clamp(28px, 4vw, 40px);
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.sec-rule {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--line);
|
||
}
|
||
|
||
/* about */
|
||
.about-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 0.9fr;
|
||
gap: 60px;
|
||
align-items: start;
|
||
}
|
||
.about-lead {
|
||
font-size: clamp(20px, 2.4vw, 26px);
|
||
line-height: 1.45;
|
||
font-weight: 300;
|
||
color: var(--ink);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.about-lead .hl {
|
||
color: var(--accent);
|
||
}
|
||
.about-body {
|
||
color: var(--ink-dim);
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
margin-top: 22px;
|
||
max-width: 560px;
|
||
}
|
||
.variant-note {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--ink-faint);
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
}
|
||
.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: 2px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.variant::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: var(--accent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s var(--ease);
|
||
}
|
||
.variant:hover::before {
|
||
opacity: 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: 0.14em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
display: block;
|
||
}
|
||
|
||
/* stats */
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1px;
|
||
background: var(--line);
|
||
border: 1px solid var(--line);
|
||
}
|
||
.stat {
|
||
background: var(--bg);
|
||
padding: 40px 30px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.stat::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 100% 0%, rgba(194, 168, 120, 0.06), transparent 50%);
|
||
opacity: 0;
|
||
transition: opacity 0.4s var(--ease);
|
||
}
|
||
.stat:hover::after {
|
||
opacity: 1;
|
||
}
|
||
.stat-num {
|
||
font-size: clamp(44px, 6vw, 64px);
|
||
font-weight: 600;
|
||
letter-spacing: -0.03em;
|
||
color: var(--ink);
|
||
line-height: 1;
|
||
}
|
||
.stat-num .plus {
|
||
color: var(--accent);
|
||
}
|
||
.stat-label {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--ink-faint);
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
margin-top: 10px;
|
||
}
|
||
.stat-desc {
|
||
color: var(--ink-dim);
|
||
font-size: 13px;
|
||
margin-top: 8px;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* experience */
|
||
.timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.job {
|
||
display: grid;
|
||
grid-template-columns: 160px 1fr;
|
||
gap: 40px;
|
||
padding: 42px 0;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.job:last-child {
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.job-period {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 13px;
|
||
color: var(--accent);
|
||
letter-spacing: 0.04em;
|
||
padding-top: 4px;
|
||
}
|
||
.job-body h3 {
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.job-co {
|
||
color: var(--ink-dim);
|
||
font-weight: 300;
|
||
font-size: 15px;
|
||
margin-top: 2px;
|
||
}
|
||
.job-co span {
|
||
color: var(--ink-faint);
|
||
}
|
||
.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-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 20px;
|
||
}
|
||
.tag-chip {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--ink-dim);
|
||
border: 1px solid var(--line-2);
|
||
padding: 5px 11px;
|
||
border-radius: 2px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.tag-chip.hi {
|
||
color: var(--accent);
|
||
border-color: var(--accent-dim);
|
||
}
|
||
|
||
/* arsenal */
|
||
.arsenal {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
.arm-card {
|
||
border: 1px solid var(--line);
|
||
background: linear-gradient(180deg, var(--surface), var(--bg));
|
||
padding: 34px 30px;
|
||
border-radius: 2px;
|
||
position: relative;
|
||
transition: all 0.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 0.4s var(--ease);
|
||
}
|
||
.arm-card:hover {
|
||
border-color: var(--line-2);
|
||
transform: translateY(-4px);
|
||
}
|
||
.arm-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
.arm-num {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--ink-faint);
|
||
letter-spacing: 0.14em;
|
||
}
|
||
.arm-title {
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
margin: 14px 0 12px;
|
||
letter-spacing: -0.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: 6px;
|
||
margin-top: 20px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.arm-stack span {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--ink-dim);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* work */
|
||
.work-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.work {
|
||
display: grid;
|
||
grid-template-columns: 90px 1fr 280px;
|
||
gap: 36px;
|
||
padding: 46px 0;
|
||
border-top: 1px solid var(--line);
|
||
align-items: start;
|
||
transition: padding 0.4s var(--ease);
|
||
}
|
||
.work:last-child {
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.work:hover {
|
||
padding-left: 8px;
|
||
}
|
||
.work-idx {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
letter-spacing: 0.08em;
|
||
padding-top: 6px;
|
||
}
|
||
.work-main h3 {
|
||
font-size: clamp(22px, 2.6vw, 30px);
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.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-side {
|
||
padding-top: 8px;
|
||
}
|
||
.work-side .lbl {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 10px;
|
||
color: var(--ink-faint);
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
.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: 5px 10px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* final cta */
|
||
.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, 0.07), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.cta-eyebrow {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 26px;
|
||
position: relative;
|
||
}
|
||
h2.cta-title {
|
||
font-size: clamp(38px, 6vw, 68px);
|
||
font-weight: 600;
|
||
letter-spacing: -0.035em;
|
||
line-height: 1.02;
|
||
position: relative;
|
||
max-width: 820px;
|
||
margin: 0 auto;
|
||
}
|
||
h2.cta-title .soft {
|
||
color: var(--ink-faint);
|
||
font-weight: 300;
|
||
}
|
||
.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: 38px;
|
||
position: relative;
|
||
}
|
||
|
||
/* footer */
|
||
footer {
|
||
border-top: 1px solid var(--line);
|
||
padding: 50px 0 60px;
|
||
}
|
||
.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: 0.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: 0.04em;
|
||
transition: color 0.25s var(--ease);
|
||
}
|
||
.foot-right a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* reveal */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(24px);
|
||
transition:
|
||
opacity 0.9s var(--ease),
|
||
transform 0.9s var(--ease);
|
||
}
|
||
.reveal.in {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
.reveal.d1 {
|
||
transition-delay: 0.08s;
|
||
}
|
||
.reveal.d2 {
|
||
transition-delay: 0.16s;
|
||
}
|
||
.reveal.d3 {
|
||
transition-delay: 0.24s;
|
||
}
|
||
.reveal.d4 {
|
||
transition-delay: 0.32s;
|
||
}
|
||
|
||
/* responsive */
|
||
@media (max-width: 880px) {
|
||
.nav-links a:not(.nav-cta) {
|
||
display: none;
|
||
}
|
||
.about-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
}
|
||
.stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.arsenal {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.job {
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
}
|
||
.job-period {
|
||
padding-top: 0;
|
||
}
|
||
.work {
|
||
grid-template-columns: 1fr;
|
||
gap: 18px;
|
||
}
|
||
.work-side {
|
||
padding-top: 0;
|
||
}
|
||
.hero {
|
||
padding-top: 110px;
|
||
}
|
||
.sec {
|
||
padding: 80px 0;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
.reveal {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="grid-bg"></div>
|
||
<div class="glow a"></div>
|
||
<div class="glow b"></div>
|
||
<div class="grain"></div>
|
||
|
||
<header class="bar">
|
||
<div class="bar-inner">
|
||
<div class="brand">xdfnx<span>.</span></div>
|
||
<nav class="nav-links">
|
||
<a href="#about">About</a>
|
||
<a href="#work">Work</a>
|
||
<a href="#arsenal">Arsenal</a>
|
||
<a href="#contact" class="nav-cta">Contact →</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap">
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-grid">
|
||
<div class="eyebrow reveal">
|
||
<span class="pulse"></span>
|
||
<span class="status-pill"><b>Open</b> for Complex Projects</span>
|
||
</div>
|
||
|
||
<h1 class="hero-title reveal d1">
|
||
Systems built<br />
|
||
<span class="soft">for</span> <span class="accent">pressure</span><span class="accent">.</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. Rust & C++ 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">→</span></a>
|
||
<a href="#work" class="btn ghost">View Work</a>
|
||
</div>
|
||
|
||
<div class="hero-meta reveal d4">
|
||
<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>
|
||
</section>
|
||
|
||
<!-- ABOUT -->
|
||
<section class="sec" id="about">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">01 / ABOUT</span>
|
||
<h2 class="sec-title">The Engineer</h2>
|
||
<span class="sec-rule"></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">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">02 / SIGNAL</span>
|
||
<h2 class="sec-title">By the Numbers</h2>
|
||
<span class="sec-rule"></span>
|
||
</div>
|
||
|
||
<div class="stats reveal">
|
||
<div class="stat">
|
||
<div class="stat-num">6<span class="plus">+</span></div>
|
||
<div class="stat-label">Years Experience</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">100<span class="plus">%</span></div>
|
||
<div class="stat-label">Performance Focused</div>
|
||
<div class="stat-desc">Every cycle accounted for.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- EXPERIENCE -->
|
||
<section class="sec" id="experience">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">03 / RECORD</span>
|
||
<h2 class="sec-title">Professional Experience</h2>
|
||
<span class="sec-rule"></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">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">04 / ARSENAL</span>
|
||
<h2 class="sec-title">Technical Arsenal</h2>
|
||
<span class="sec-rule"></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">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-id">05 / SELECTED WORK</span>
|
||
<h2 class="sec-title">Case Studies</h2>
|
||
<span class="sec-rule"></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">
|
||
<div class="cta-eyebrow reveal">06 / TRANSMISSION OPEN</div>
|
||
<h2 class="cta-title reveal d1">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">
|
||
<a href="mailto:contact@xdfnx.cfd" class="btn primary">contact@xdfnx.cfd <span class="arr">→</span></a>
|
||
<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="mailto:contact@xdfnx.cfd">contact@xdfnx.cfd</a>
|
||
<a href="#about">Top ↑</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// scroll reveal
|
||
const io = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((e) => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add("in");
|
||
io.unobserve(e.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" },
|
||
);
|
||
document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
|
||
|
||
// subtle parallax on glow
|
||
const glows = document.querySelectorAll(".glow");
|
||
window.addEventListener(
|
||
"scroll",
|
||
() => {
|
||
const y = window.scrollY;
|
||
glows.forEach((g, i) => {
|
||
g.style.transform = `translateY(${y * (i ? -0.06 : 0.04)}px)` + (i ? ` translateX(0)` : `translateX(-50%)`);
|
||
});
|
||
},
|
||
{ passive: true },
|
||
);
|
||
</script>
|
||
</body>
|
||
</html>
|