Building a Terminal-Themed Portfolio

When I set out to build this site, I wanted something that felt like firing up an old Unix terminal — green phosphor glow, blinking cursor, ASCII art banners, and that satisfying typewriter feel.

The Stack

• Vite for fast bundling and HMR
• Vanilla JS for routing and DOM manipulation
• Supabase for blog post storage
• CSS for the terminal aesthetic

ASCII Art

The header banner uses figlet-style ASCII art rendered in a <pre> block:

  ____  _               _
 |  _ \(_)___  ___  __ _| |
 | | | | / __|/ _ \/ _` | |
 | |_| | \__ \  __/ (_| | |
 |____/|_|___/\___|\__,_|_|

Custom Cursor

The cursor is a blinking block element that follows the mouse. On hover over links it expands and changes color.

Why Vanilla JS?

No framework overhead. The site is small enough that a hash-based router and a few render functions do the job perfectly. Less code, faster load, easier to maintain.

Conclusion

The terminal aesthetic is a love letter to computing history. It is minimalist, fast, and unmistakably personal.