[TN]
[>_]in~/projects$cat /projects/vespaiach.com.md
~/projects/vespaiach.com.md

vespaiach.com

212 words · 1 min read

vespaiach.com · Role: Built + maintain · Platform: Vite, TypeScript

My personal blog and portfolio site.

What I did

I wanted a personal site that didn't look like a template, and one I fully owned, so I built it as a terminal. Posts, topics, and about pages read like a file explorer, complete with a keyboard command palette for navigation.

Under the hood: Vite and TypeScript for the shell, Alpine.js for the small interactive bits, and plain CSS for styling. Content is Markdown, compiled at build time into static HTML with marked and Shiki, so nothing runs server side. Biome and Vitest keep it clean and tested, and GitHub Actions builds and deploys every push to Cloudflare Workers. The result is a fast, fully static site with no server and no database. Publishing is just a Markdown file and a push.

The problem I solved

A terminal UI that renders views with JavaScript is hard for search engines to crawl. So the build also pre-renders a static page for every view, each with its own title, description, canonical URL, Open Graph tags, and structured data, plus a sitemap. Crawlers get real HTML, and visitors still get the terminal.

Stack: TypeScript, Vite, Alpine.js, Markdown, Shiki, Biome, Vitest, GitHub Actions, Cloudflare Workers

[>_] in $

type a command and press enter, or press ⌘K for suggestions

Run a command

enter run ↑↓ select tab complete esc close

Help

how this site works · esc to close

About this site

This is Trinh Nguyen's dev blog, dressed up as a terminal. Instead of clicking through pages, you run commands against a small virtual file system with three directories:

~/posts~/topics~/projects~/about

How to use it

  • Type a command at the prompt and press enter. Output is added below, like a shell session.
  • Press ⌘K (Ctrl+K on Windows/Linux) to open the command palette with suggestions and your recent commands.
  • The /posts, /topics, /projects and /about links in the header are shortcuts for cd ~/posts && ls and friends.
  • Chain commands with &&, e.g. cd ~/about && cat me.md.
  • To read an article, ls a directory, then cat the file you want.

Commands