All projects
Side Project · 2026

Claude Code Personal Website

An interactive terminal personal website powered by Claude.

tl;dr: In 2013, my first website was a terminal portfolio that hit #2 on Hacker News. 13 years later, I rebuilt it as a love letter to Claude Code, the tool that brought back that same joy of building.

Origin

Full circle

In 2013, I built my first website: a terminal based portfolio. 24 hours from idea to launch. It hit #2 on Hacker News and got 12k+ views from 100+ countries.

Building with Claude Code over the past few months brought back that same feeling. The speed and joy of building with it reminds me of when I first learned to code.

So I rebuilt the terminal concept as a homage to both my original website and my new favorite tool.

My first terminal based personal website from 2013
My first terminal based portfolio from 2013 - the inspiration for this project
Overview

A web based terminal that feels real

The terminal in action. Bash commands, Claude mode, and AI powered responses

This site lives inside a terminal emulator powered by xterm.js. You start in bash mode with a virtual filesystem. You can cd into directories, ls files, cat content.

Type claude and everything shifts. You can now ask anything about my background. The responses come from Claude Haiku 4.5 with a system prompt that includes my full career history, projects, and interests.

Type out your questions or use pre-defined slash commands. You can also tab your way through suggested prompts.

Details

Pixel-perfect ASCII art

Font comparison showing Claude logo rendered in 20+ monospaced fonts, each with slightly different character alignment
Testing 20+ monospaced fonts - none worked perfectly until I patched one myself

The welcome screen uses Unicode box-drawing characters to match Claude Code's startup interface.

I tested 20+ monospaced fonts trying to find one that would render these characters without gaps. None worked perfectly. Box-drawing characters were 2-3 pixels too wide, narrow, or short, creating tiny gaps in what should be continuous lines.

So I downloaded Glyphs for the first time and patched FiraCode. Modified the glyph widths to match xterm.js's expectations, exported a new .otf file, and served it with the site.

With the modified font, you get clean borders, perfect corners, and a very handsome Clawd.

Claude Code welcome screen showing pixel-perfect ASCII box-drawing characters with Clawd mascot
Pixel-perfect box-drawing characters with a custom-patched FiraCode font
The Why

Making people smile

Slide showing ways good work is made: Starting from solution first, Caring ruthlessly about the details, Operating on intuition, Skipping steps and making them up, Doing something just for the sake of making people smile
From Jenny Wen's talk on design at Anthropic - the philosophy that guided this project

In Jenny Wen's fantastic recent talk "Why Designers Can No Longer Trust the Design Process," she shared a handful of "ways good work is made." This project embraced them all, but especially "Doing something just for the sake of making people smile."

I spent way too long on details most people won't notice. I custom-patched a monospaced font so the ASCII art would render without gaps. I built a lip-sync system so the Claude Code mascot moves in time with robot voice sounds.

There are a lot of other fun details. Curious how many you'll notice.

The Real Win

The feeling returns

Building this brought back the same feeling from 2013. The speed. The joy. The freedom to obsess over small details. Claude Code made it possible to build at that pace again.