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
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
Some characteristics that I’ve observed in terminal user interfaces I’ve transferred over to my website:
- Keyboard-first navigation:
Arrow keysallows navigation throughout the UI.Taband the number keys (1-4) can be used to switch between tabs instantly.Enterintuitively opens blog posts andEscapecloses 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.
- Blog metadata is taken from the file stats, not a hard coded value.
- Coding stats are pulled from my Wakatime account.
- 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.
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 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 exemplifies you and add the features you’d actually want to use.
The source code is available at git.prime8.dev