Jeff Smith
04c19fabb6
- Real bio: SRE since 1998, sysadmin -> code arc, homelab scope including the 10G symmetric fiber and Dell + Nexus fleet - Off-keyboard texture: hiking, Pokemon Go (GoFest 2026), space, game collecting, currently reading Thinking in Systems, currently playing Helldivers 2 + Pokopia (Switch 2) - Tagline reframed as a literal terminal session: $ unbiasedgeek with the brutal-truth creed as command output - Phosphor green palette (#7ee787) on a green-tinted dark background with a subtle radial glow - Self-hosted Inter (body) + Share Tech Mono (terminal/headings) - Two-column layout: main content + sticky sidebar (Find me, Interests, Not into); collapses to single column on mobile - Project list with inline tech pills next to each project name - SVG monogram favicon, OpenGraph + Twitter card meta tags - profile photo: square center-crop, 512px, webp + jpg fallback
287 lines
5.1 KiB
CSS
287 lines
5.1 KiB
CSS
/* --- Self-hosted fonts --- */
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("/fonts/inter-400.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
src: url("/fonts/inter-700.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Share Tech Mono";
|
|
src: url("/fonts/share-tech-mono-400.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* --- Tokens --- */
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #0b0f0c;
|
|
--bg-elev: #11171374;
|
|
--fg: #e6f1e6;
|
|
--muted: #8a9b8c;
|
|
--accent: #7ee787;
|
|
--accent-dim: #4ea355;
|
|
--border: #1d251f;
|
|
|
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-sans);
|
|
background:
|
|
radial-gradient(ellipse at top, rgba(126, 231, 135, 0.06), transparent 60%),
|
|
var(--bg);
|
|
background-attachment: fixed;
|
|
color: var(--fg);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
main {
|
|
max-width: 64rem;
|
|
margin: 0 auto;
|
|
padding: 3.5rem 1.5rem 2.5rem;
|
|
}
|
|
|
|
/* --- Two-column body layout (main + sidebar) --- */
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
@media (min-width: 880px) {
|
|
.layout {
|
|
grid-template-columns: minmax(0, 1fr) 18rem;
|
|
gap: 3rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 2rem;
|
|
}
|
|
}
|
|
|
|
.main-col > section:last-child { margin-bottom: 0; }
|
|
.sidebar > section:last-child { margin-bottom: 0; }
|
|
|
|
/* --- Header (two-column on desktop, stacked on mobile) --- */
|
|
|
|
header {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1.25rem;
|
|
margin-bottom: 2.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
header {
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1.75rem;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
display: block;
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid var(--accent-dim);
|
|
box-shadow: 0 0 0 4px rgba(126, 231, 135, 0.08);
|
|
}
|
|
|
|
.header-text { min-width: 0; }
|
|
|
|
h1 {
|
|
font-family: var(--font-mono);
|
|
font-size: clamp(1.85rem, 5vw, 2.6rem);
|
|
margin: 0;
|
|
color: var(--fg);
|
|
letter-spacing: -0.02em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.terminal {
|
|
font-family: var(--font-mono);
|
|
margin: 0.65rem 0 0;
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
color: var(--muted);
|
|
white-space: pre-wrap;
|
|
max-width: 36rem;
|
|
}
|
|
|
|
.terminal .prompt {
|
|
color: var(--accent-dim);
|
|
user-select: none;
|
|
}
|
|
|
|
.terminal .cmd {
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.location {
|
|
margin: 0.85rem 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* --- Sections --- */
|
|
|
|
section {
|
|
margin-bottom: 2.25rem;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--accent);
|
|
margin: 0 0 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
h2::before {
|
|
content: "// ";
|
|
color: var(--muted);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
p { margin: 0 0 0.75rem; }
|
|
|
|
ul { margin: 0; padding: 0 0 0 1.25rem; }
|
|
|
|
.bio p + p { margin-top: 0.75rem; }
|
|
|
|
/* --- Project list with tech pills --- */
|
|
|
|
.now ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.now li {
|
|
margin-bottom: 0.85rem;
|
|
padding-left: 1rem;
|
|
border-left: 2px solid var(--border);
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.now li:hover { border-left-color: var(--accent); }
|
|
|
|
.now a {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.now a:hover { border-bottom-color: var(--accent); }
|
|
|
|
.now .desc {
|
|
display: block;
|
|
color: var(--fg);
|
|
opacity: 0.85;
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.tech {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
margin-left: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tech span {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.5rem;
|
|
border: 1px solid var(--accent-dim);
|
|
color: var(--accent);
|
|
border-radius: 999px;
|
|
background: rgba(126, 231, 135, 0.04);
|
|
}
|
|
|
|
/* --- Interest tags --- */
|
|
|
|
ul.tags {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
ul.tags li {
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--border);
|
|
color: var(--fg);
|
|
padding: 0.2rem 0.65rem;
|
|
border-radius: 999px;
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* --- Links --- */
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
a:hover { border-bottom-color: var(--accent); }
|
|
|
|
.links ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.links li {
|
|
margin-bottom: 0.4rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* --- Footer --- */
|
|
|
|
footer {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
font-family: var(--font-mono);
|
|
}
|