building-my-portfolio.md (2779B)
1 --- 2 id: building-my-portfolio 3 title: building a tui-inspired portfolio 4 description: how i built this terminal-style portfolio with astro 5 date: 2026-01-31 6 tags: 7 - Astro 8 - TypeScript 9 - TUI 10 - Web Development 11 - Portfolio 12 --- 13 14 Once I got used to the terminal, **I couldn't live without it**. I love the **simplicity** of the interface and the fact that it's **keyboard native** (no need to reach for the mouse). Anything can be reached within a few key presses, which is one of the characteristics that I love. 15 16 ## the stack 17 18 I built this website using **Astro** using server-side rendering. I tried to keep it as simple as possible, no over-engineering. Don't need WASM, a full-fledged database, or a complex UI framework. Details about me are stored in json files for ease of access (no need to scour the entire project to make a change), and my blogs are stored in a directory of markdown files. 19 20 ## design decisions 21 22 Some characteristics that I've observed in terminal user interfaces I've transferred over to my website: 23 24 - **Keyboard-first navigation**: `Arrow keys` allows navigation throughout the UI. `Tab` and the number keys (`1-4`) can be used to switch between tabs instantly. `Enter` intuitively opens blog posts and `Escape` closes them. 25 - **No stale content**: One thing I don't want to worry about it updating my website every time something changes. This is a design pattern that is followed in the entire project. 26 - Project details are fetched from my [self-hosted GitLab instance](https://git.prime8.dev). 27 - Blog metadata is taken from the file stats, not a hard coded value. 28 - Coding stats are pulled from [my Wakatime account](https://wakatime.com/@moncheeta). 29 - **Personality**: One thing I want to make sure of is that this website is unique, but also derives some of its elements from existing terminal applications. 30 - Boot animation adds a feeling of life to the website, even though it's entirely static. 31 - Top tab bar is an idea taken from the countless GUI applications that have it. 32 - Bottom status bar is inspired by many terminal applications that use a similar setup. 33 34 These characteristics make this website feel like the terminal applications that I'm in love with, while differentiating it to make it mine. 35 36 ## conclusion 37 38 Building this portfolio was a chance for me to combine two things **I love**: terminal user interfaces and modern web development. The result is something that feels **personal**, a site that actually reflects how I actually work. 39 40 If you're thinking about building your own portfolio, my advice is simple: **make it yours**. Pick a style that exemplifies you and add the features you'd actually want to use. 41 42 The source code is available at [git.prime8.dev](https://git.prime8.dev/moncheeta/prime8dev)