commit 131427ce95519b455024b778885668c609924bd1
parent a083517591f826f9b15afc435e84236bf3949a71
Author: Damian Myrda <damian@prime8.dev>
Date: Sat, 31 Jan 2026 18:35:25 -0600
docs(blog): rewrite portfolio building post with clearer focus
Diffstat:
1 file changed, 16 insertions(+), 21 deletions(-)
diff --git a/website/src/blogs/building-my-portfolio.md b/website/src/blogs/building-my-portfolio.md
@@ -2,7 +2,6 @@
id: building-my-portfolio
title: Building a TUI-Inspired Portfolio
description: How I built this terminal-style portfolio with Astro
-date: 2026-01-16
tags:
- Astro
- TypeScript
@@ -11,36 +10,32 @@ tags:
- Portfolio
---
-I've always been drawn to terminal interfaces. There's something satisfying about the simplicity and efficiency of a well-designed TUI. So when it came time to build my portfolio, I knew I wanted to capture that aesthetic. Keyboard navigation and dark color scheme that feels like home.
+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.
## The Stack
-This site is built with **Astro** for server-side rendering. At build/request time, READMEs are fetched directly from my GitLab and GitHub repositories: no stale content. **Wakatime integration** pulls my coding stats in real-time, showing weekly activity breakdowns and total hours coded. It's a nice way to show I'm actually writing code, not just talking about it.
+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.
## Design Decisions
-A few key choices drove the design:
+Some characteristics that I've observed in terminal user interfaces I've transferred over to my website:
-- **Keyboard-first navigation** – Number keys (`1-4`) switch tabs instantly. Arrow keys navigate lists and timelines. `Tab` cycles through sections. `Enter` opens blog posts, `Escape` closes them. It feels like using a real terminal application.
-- **List-detail pattern** – Projects and experience use a sidebar list with detail views, similar to email clients or file managers. The experience page features a timeline visualization that's navigable with arrow keys.
-- **Live data everywhere** – WakaTime stats update on every page load. Project READMEs are fetched fresh from git repositories. No static snapshots that go stale.
+- **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.
+- **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.
+ - Project details are fetched from my [self-hosted GitLab instance](https://git.prime8.dev).
+ - Blog metadata is taken from the file stats, not a hard coded value.
+ - Coding stats are pulled from [my Wakatime account](https://wakatime.com/@moncheeta).
+- **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.
+ - Boot animation adds a feeling of life to the website, even though it's entirely static.
+ - Top tab bar is an idea taken from the countless GUI applications that have it.
+ - Bottom status bar is inspired by many terminal applications that use a similar setup.
-## The Color Palette
-
-The palette is inspired by classic terminal emulators:
-
-- Background: `#0d0d0d` (near-black)
-- Foreground: `#c0c0c0` (soft gray)
-- Accent: `#d7af5f` (warm gold)
-- Links: `#5fafff` (light blue)
-- Cyan, magenta, red for semantic colors
-
-JetBrains Mono is the font throughout. It's readable and has great character distinction.
+These characteristics make this website feel like the terminal applications that I'm in love with, while differentiating it to make it mine.
## Conclusion
-Building this portfolio was a chance to combine two things I love: terminal aesthetics and modern web development. The result is something that feels personal: a site that reflects how I actually work, not just what I've worked on.
+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.
-If you're thinking about building your own portfolio, my advice is simple: make it yours. Pick a style that resonates with you, add the features you'd actually want to use, and don't be afraid to over-engineer the parts you find interesting. That's where the best learning happens.
+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.
-The source code is available at [git.prime8.dev](https://git.prime8.dev/moncheeta/prime8dev).
+The source code is available at [git.prime8.dev](https://git.prime8.dev/moncheeta/prime8dev)
