/* whoami — code-editor aesthetic, dark, near-monochrome + single accent. */ @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --bg: #0b0e14; --bg-elev: #11151c; --bg-bar: #0e1219; --border: #1d232e; --fg: #c3cbd9; --fg-dim: #767f8f; --fg-faint: #4a5260; --accent: #7ee787; --accent-soft: rgba(126, 231, 135, 0.12); --link: #6cb6ff; --radius: 10px; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; padding: clamp(12px, 4vw, 48px); } a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: var(--link); } .window { max-width: 880px; margin: 0 auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.8); } .titlebar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--bg-bar); border-bottom: 1px solid var(--border); } .dots { display: inline-flex; gap: 7px; } .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--fg-faint); } .filename { color: var(--fg-dim); font-size: 13px; } /* language switcher — no-JS baseline: inline link list in titlebar */ .lang-switcher { margin-left: auto; display: inline-flex; align-items: center; gap: 0; font-size: 12px; color: var(--fg-faint); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; } .lang-k { color: var(--fg-dim); } .lang-eq { color: var(--fg-faint); } .lang-list { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0; } .lang-list li { display: inline-flex; align-items: center; } .lang-list li + li::before { content: "/"; color: var(--fg-faint); padding: 0 3px; } .lang-v { color: var(--accent); font-family: var(--mono); font-size: 12px; } .lang-current { color: var(--accent); } a.lang-link { color: var(--fg-dim); border-bottom: none; } a.lang-link:hover, a.lang-link:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; border-bottom: none; } /* progress bar — shown during locale fetch; driven by JS class on . Uses transform:scaleX() instead of width so the animation runs on the compositor thread (no layout reflow). */ .progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent); z-index: 9999; transform-origin: left center; transform: scaleX(0); transition: transform 0.2s ease; pointer-events: none; opacity: 0; } body.lang-loading .progress-bar { opacity: 1; transform: scaleX(0.7); transition: transform 2s ease-out; } body.lang-done .progress-bar { opacity: 0; transform: scaleX(1); transition: transform 0.1s ease, opacity 0.3s ease 0.1s; } @media (prefers-reduced-motion: reduce) { .progress-bar, body.lang-loading .progress-bar, body.lang-done .progress-bar { transition: none; } } .editor { padding: clamp(20px, 5vw, 44px); } .block { padding-block: 26px; } .block + .block { border-top: 1px solid var(--border); } .block:first-child { padding-top: 6px; } .comment { color: var(--fg-dim); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 18px; text-transform: lowercase; } .prompt { color: var(--fg-dim); margin: 0 0 14px; font-size: 14px; } .prompt .sym { color: var(--accent); } .prompt .typed { color: var(--fg); } .cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--accent); margin-left: 3px; vertical-align: text-bottom; animation: blink 1.05s step-end infinite; } /* steady while actively typing/erasing; blinks only when idle (awaiting input). */ .cursor.solid { animation: none; opacity: 1; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .name { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; margin: 0 0 6px; color: #f0f3f8; font-weight: 700; letter-spacing: -0.01em; } .role { color: var(--accent); margin: 0 0 16px; font-weight: 500; } .tagline { color: var(--fg); margin: 0 0 22px; max-width: 60ch; } .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .facts li { display: flex; gap: 14px; } .facts .k { color: var(--fg-dim); min-width: 110px; flex: none; } .facts .k::before { content: "→ "; color: var(--accent); } .facts .v { color: var(--fg); } .stats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; } .stats li { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px; text-align: center; } .stats strong { display: block; font-size: 24px; color: var(--accent); } .stats span { color: var(--fg-dim); font-size: 12px; } .prose { margin: 0 0 12px; color: var(--fg); max-width: 68ch; } .job, .edu { margin-bottom: 26px; } .job:last-child, .edu:last-child { margin-bottom: 0; } .job-role, .edu-inst { margin: 0 0 4px; font-size: 16px; color: #eef2f7; font-weight: 500; } .at { color: var(--accent); font-weight: 400; } .now { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; } .job-meta, .edu-meta { margin: 0 0 10px; color: var(--fg-dim); font-size: 13px; } .job-summary { margin: 0 0 10px; color: var(--fg); } .job-highlights { margin: 0 0 12px; padding-left: 0; list-style: none; } .job-highlights li { position: relative; padding-left: 22px; margin-bottom: 6px; } .job-highlights li::before { content: "-"; position: absolute; left: 6px; color: var(--accent); } .tag { display: inline-block; font-size: 12px; color: var(--fg); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; margin: 0 6px 6px 0; } .stack, .langs, .langs-spoken { margin: 0; } .skills { margin: 0; } .skill-row { display: flex; gap: 16px; padding: 8px 0; flex-wrap: wrap; } .skill-row dt { color: var(--fg-dim); min-width: 130px; flex: none; } .skill-row dd { margin: 0; } .statusbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: var(--bg-bar); border-top: 1px solid var(--border); color: var(--fg-faint); font-size: 12px; } @media (max-width: 520px) { .facts li { flex-direction: column; gap: 2px; } .facts .k { min-width: 0; } .skill-row dt { min-width: 0; } /* prevent the switcher from overflowing the titlebar on small screens */ .lang-switcher { padding: 2px 6px; } } /* the cursor keeps blinking even under reduced motion: it is a tiny, expected terminal affordance ("awaiting input"), not large-scale motion. */