New Year's Eve. Most people are planning celebrations. I was deep in a rabbit hole on X, scrolling through DevOps accounts and their surprisingly creative bios.
The Spark
I stumbled across Sat Naing's terminal portfolio—a fully interactive command-line interface as a personal site. Type help and you get a list of commands. Tab completion works. There are multiple themes. It's a portfolio you use rather than just read.
Then rauchg.com—Guillermo Rauch's site. The Vercel CEO's personal page is aggressively minimal: just text, links, and thoughts. No flashy animations or hero sections. The confidence to ship something that simple says more than any elaborate design.
Paco Coursey's site hit the same nerve—a design engineer at Linear whose entire philosophy is "return to simplicity." Clean typography, purposeful restraint, and a /now page that just says what he's focused on. No portfolio carousel. No testimonials section.
And various shell-themed experiments like WebShellX that turn the browser into a terminal aesthetic.
These weren't standard "Senior DevOps Engineer | Kubernetes | Terraform" lines. They had personality. Terminal prompts as formatting. ASCII art. References to sudo and chmod. The technical identity wasn't hidden behind corporate speak—it was the design itself.
I'd been thinking about starting a blog for months. Generic portfolio templates and CMSs like WordPress never felt right—like wearing someone else's clothes. Seeing these bios clicked something: what if my entire site reflected how I actually work? Terminals. Config files. The tools I use daily.
My new role at Sysdig takes me deeper into the DevOps and SecOps world. Building this seemed like a good way to get hands-on experience while creating something useful.
Sketching with Claude
The first step wasn't code. It was conversation. I'm not a developer — I'm a sales engineer who builds things to understand them.
I spent an evening with Claude, describing what I wanted: a CV site that felt like a terminal session. We iterated on concepts—what would the "about" section look like if it were the output of cat about.md? How would experience entries look as log entries with timestamps and status codes? It should be interesting, fun, and engaging.
Claude helped me think through the information architecture. Not writing code yet—just refining the idea until the structure felt right. Three distinct themes emerged, each reflecting current trends in tech:
- Terminal for the homepage (my daily environment)
- Git log for the blog index (version-controlled thoughts)
- LLM chat for articles (the AI-assisted creation process)
Visual Mockups with Gemini
With the concept clear, I needed to see it. I uploaded my CV and used Gemini to generate HTML mockups—quick, throwaway files that visualized the layout. Nothing production-ready, just enough to feel whether the idea worked visually.
The warm cream background with arctic blue accents came from these iterations. The IBM Plex font pairing. The specific way line numbers should align with YAML content. Details that are hard to describe in words but obvious when you see them wrong.
Building with Claude Code
The actual implementation happened in Claude Code over a few focused sessions. Next.js 14 with the App Router. Tailwind for utility classes, but mostly custom CSS organized by theme.
The homepage component ended up clean:
const roles: Role[] = [
{
title: "Sales Engineer",
company: "Sysdig",
period: "2024—Now",
status: "RUNNING",
description: "Cloud-native security for enterprises..."
},
// ...more roles
];
{roles.map((role) => (
<div className="log-entry" key={role.company}>
<span className="status-tag">[{role.status}]</span>
<h3>{role.title}</h3>
<span className="company-name">@ {role.company}</span>
</div>
))}
The structure mirrors how I think about my career: processes with statuses. Some RUNNING, others DONE. It's not just aesthetic—it's accurate.
The Interactive Terminal
The contact page became the most interesting piece. Instead of a form, it's an actual terminal emulator with working commands:
case "coffee":
addOutput({ type: "ascii", content: ASCII_COFFEE });
const res = await fetch("/api/content/coffee");
const data = await res.json();
addOutput([
{ type: "system", content: `Currently brewing: ${data.current?.name}` },
{ type: "response", content: ` Method: ${data.current?.method}` },
]);
break;
Try typing sudo in the terminal. Or rm -rf /. The easter eggs aren't just fun—they're signals. They tell a visitor: this person thinks about edge cases. They anticipate what curious people might try.
"A demo environment shouldn't just be stable; it should be granular."
This applies to personal sites too. The interesting details live in the margins.
The Actual Goal
This isn't about having an impressive personal site. It's about having one that's actually mine. When someone lands on a terminal-themed page with vim keybindings in the footer, they immediately know something about how I work.
The best CVs don't just list what you've done. They demonstrate how you think.
Have a great year!