Building a Terminal-Themed Portfolio

Ever since I started coding, I’ve been fascinated by the terminal. There’s something beautiful about its simplicity — monospaced fonts, minimal colors, and pure text. So when it came time to build my portfolio, I knew exactly what I wanted.

The Concept

The idea was simple: make a website that feels like a terminal, but doesn’t sacrifice usability. Every section is styled as a terminal command — cat about.txt, ls -la ~/blog/, ps aux | grep active.

Tech Stack

Astro — Static-first, component islands, perfect for a portfolio
TypeScript — Because I like my code typed
Canvas API — For the ASCII particle hero and interactive portrait
Vercel — Deploy on push, zero config

The ASCII Portrait

One of the coolest parts is the interactive ASCII portrait in the About section. It loads my actual photo, converts it to ASCII characters based on pixel brightness, and uses spring physics to scatter and reassemble when you hover.

// Brightness to ASCII density ramp
const ramp = ' .:-=+*#%@';
const char = ramp[Math.floor(brightness / 255 * (ramp.length - 1))];

Near your cursor, the characters reveal the original photo colors — a neat effect that bridges the gap between ASCII art and photography.

The Hidden Dashboard

The site also has a secret admin dashboard at /admin that lets me manage all content without touching code. It commits directly to GitHub via API, which triggers Vercel rebuilds. WordPress vibes, terminal aesthetics.

What I Learned

Canvas is powerful — The ASCII effects run at 60fps with proper optimization
Astro is amazing — Zero JS by default, islands architecture is chef’s kiss
Ship fast, iterate — V1 doesn’t need to be perfect