v0.2.0: profile content, terminal aesthetic, two-column layout

- 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
This commit is contained in:
Jeff Smith 2026-04-09 13:19:35 -06:00
parent 23bdadf85f
commit 04c19fabb6
10 changed files with 412 additions and 28 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*.xmp

View file

@ -2,5 +2,9 @@ FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html COPY index.html /usr/share/nginx/html/index.html
COPY style.css /usr/share/nginx/html/style.css COPY style.css /usr/share/nginx/html/style.css
COPY favicon.svg /usr/share/nginx/html/favicon.svg
COPY profile.webp /usr/share/nginx/html/profile.webp
COPY profile.jpg /usr/share/nginx/html/profile.jpg
COPY fonts/ /usr/share/nginx/html/fonts/
EXPOSE 80 EXPOSE 80

4
favicon.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="12" fill="#0e1116"/>
<text x="32" y="44" text-anchor="middle" font-family="ui-monospace, 'JetBrains Mono', Menlo, monospace" font-size="40" font-weight="700" fill="#7ee787">u</text>
</svg>

After

Width:  |  Height:  |  Size: 287 B

BIN
fonts/inter-400.woff2 Normal file

Binary file not shown.

BIN
fonts/inter-700.woff2 Normal file

Binary file not shown.

Binary file not shown.

View file

@ -3,13 +3,141 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>unbiasedgeek</title> <title>Jeff Smith -- unbiasedgeek</title>
<link rel="stylesheet" href="style.css"> <meta name="description" content="Jeff Smith (unbiasedgeek) -- Site Reliability Engineer in Pleasant Grove, Utah. Homelab, infrastructure, and agentic AI tooling.">
<!-- Open Graph / social previews -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://unbiasedgeek.com/">
<meta property="og:title" content="Jeff Smith -- unbiasedgeek">
<meta property="og:description" content="Site Reliability Engineer in Pleasant Grove, Utah. Self-hosted developer tools, agentic AI, and a homelab built around a fleet of Dell servers.">
<meta property="og:image" content="https://unbiasedgeek.com/profile.jpg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Jeff Smith -- unbiasedgeek">
<meta name="twitter:description" content="SRE, homelabber, agentic AI tinkerer. A bold, brutal truth is worth more than a rose-colored half-truth.">
<meta name="twitter:image" content="https://unbiasedgeek.com/profile.jpg">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<main> <main>
<h1>unbiasedgeek</h1> <header>
<p>Placeholder. Real content coming soon.</p> <picture>
<source srcset="/profile.webp" type="image/webp">
<img src="/profile.jpg" alt="Jeff Smith" class="avatar" width="140" height="140">
</picture>
<div class="header-text">
<h1>Jeff Smith</h1>
<pre class="terminal"><span class="prompt">$</span> <span class="cmd">unbiasedgeek</span>
One who believes a bold, brutal truth is worth
more than a rose-colored half-truth.</pre>
<p class="location">Site Reliability Engineer &middot; Pleasant Grove, Utah</p>
</div>
</header>
<div class="layout">
<div class="main-col">
<section class="bio">
<p>
I've been working in IT since 1998, starting out as a system
administrator wrangling Windows NT 3.5 and Linux boxes before
either of them was particularly forgiving. I knew I'd end up
working with computers back in the third grade and never
seriously questioned it. Over the years the work has shifted
from racking servers and keeping them alive to writing the
code and infrastructure that does the keeping-alive for me --
which is roughly how I ended up as a Site Reliability
Engineer. Off the clock I build self-hosted developer tools
and agentic AI systems, mostly in Go and Python, and run a
homelab built around a fleet of Dell enterprise servers, a
Cisco Nexus 10G switch, and a 10 Gbps symmetric residential
fiber connection -- which I'm slowly bringing under proper
infrastructure-as-code management.
</p>
<p>
When I'm not at a keyboard you'll find me on a trail
somewhere, hunting raids in Pokemon Go (already planning for
GoFest 2026), or losing an evening to anything space-related
-- rockets, telescopes, the slow strange physics of it all.
I'm a lifelong video game collector across retro and modern,
console and PC, with a soft spot for city builders and
systems games like Factorio and Pokopia -- anything with a
satisfying loop and a spreadsheet hiding underneath.
Currently reading <em>Thinking in Systems</em>, and bouncing
between Helldivers 2 missions with my weekly game group and
Pokopia on the Switch 2.
</p>
</section>
<section class="now">
<h2>What I'm working on</h2>
<ul>
<li>
<a href="https://forgejo.labbity.unbiasedgeek.com/archeious/harbormind">harbormind</a><span class="tech"><span>Go</span></span>
<span class="desc">self-hosted, AI-agnostic chat with tree-based conversation hierarchy</span>
</li>
<li>
<a href="https://forgejo.labbity.unbiasedgeek.com/archeious/luminos">luminos</a><span class="tech"><span>Python</span><span>Claude API</span></span>
<span class="desc">file system intelligence tool; agentic directory analysis via the Claude API</span>
</li>
<li>
<a href="https://forgejo.labbity.unbiasedgeek.com/archeious/marchwarden">marchwarden</a><span class="tech"><span>Python</span><span>MCP</span></span>
<span class="desc">a network of agentic research specialists coordinated by a principal investigator agent</span>
</li>
<li>
<a href="https://forgejo.labbity.unbiasedgeek.com/homelab/homelab-IaC">homelab-IaC</a><span class="tech"><span>Terraform</span><span>Ansible</span><span>Docker</span></span>
<span class="desc">Terraform + Ansible bringing a fleet of surplus enterprise servers under management</span>
</li>
</ul>
</section>
</div>
<aside class="sidebar">
<section class="links">
<h2>Find me</h2>
<ul>
<li><a href="https://forgejo.labbity.unbiasedgeek.com/archeious">Forgejo</a></li>
<li><a href="https://github.com/Archeious">GitHub</a></li>
<li><a href="mailto:jeff@unbiasedgeek.com">Email</a></li>
<li><a href="https://www.linkedin.com/in/jeff-smith-4b5538167/">LinkedIn</a></li>
</ul>
</section>
<section class="interests">
<h2>Interests</h2>
<ul class="tags">
<li>infrastructure as code</li>
<li>homelab</li>
<li>linux</li>
<li>agentic AI</li>
<li>self-hosted</li>
<li>go</li>
<li>python</li>
<li>systems thinking</li>
<li>hiking</li>
<li>pokemon go</li>
<li>space</li>
<li>city builders</li>
<li>factorio</li>
<li>game collecting</li>
</ul>
</section>
<section class="not-into">
<h2>Not into</h2>
<p>
Cryptocurrency (recovering crypto-bro). Charged, one-sided
tech holy wars -- vim vs. emacs, tabs vs. spaces, take your
pick.
</p>
</section>
</aside>
</div>
<footer>
<p>&copy; 2026 Jeff Smith</p>
</footer>
</main> </main>
</body> </body>
</html> </html>

BIN
profile.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
profile.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

291
style.css
View file

@ -1,8 +1,43 @@
/* --- 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 { :root {
color-scheme: light dark; color-scheme: dark;
--bg: #0e1116; --bg: #0b0f0c;
--fg: #e6edf3; --bg-elev: #11171374;
--accent: #58a6ff; --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; } * { box-sizing: border-box; }
@ -10,31 +45,243 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; font-family: var(--font-sans);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background:
background: var(--bg); radial-gradient(ellipse at top, rgba(126, 231, 135, 0.06), transparent 60%),
var(--bg);
background-attachment: fixed;
color: var(--fg); color: var(--fg);
} line-height: 1.6;
-webkit-font-smoothing: antialiased;
body {
display: grid;
place-items: center;
} }
main { main {
text-align: center; max-width: 64rem;
padding: 2rem; margin: 0 auto;
max-width: 40rem; 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 { h1 {
font-size: clamp(2.5rem, 8vw, 5rem); font-family: var(--font-mono);
margin: 0 0 1rem; font-size: clamp(1.85rem, 5vw, 2.6rem);
color: var(--accent); margin: 0;
color: var(--fg);
letter-spacing: -0.02em;
font-weight: 700;
} }
p { .terminal {
font-size: 1.125rem; font-family: var(--font-mono);
opacity: 0.85; margin: 0.65rem 0 0;
margin: 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);
} }