Terminal Portfolio Site

2025-03-15

Terminal Portfolio Site

Repository

This is the site you are likely reading this off now. What do you thonk?

Stack

Portfolio and blog built with jQuery Terminal and Zola for displaying blog contents using an interactive terminal interface

Technology

  • Zola (Static Site Generator)
  • Tera (Template Engine)
  • Vite (Asset Bundler)
  • Bun (Package Manager & Runtime)
  • jQuery Terminal (Terminal emulator interface)
  • WebTUI CSS (TUI-styled component library)
  • Sass/SCSS (Stylesheet preprocessing)
  • Peggy (Markdown parsing grammar)

Key Features

  • Interactive terminal shell with ls, cd, cat, pwd, help, clear, tree, find commands
  • Tab completion and command history
  • Dual navigation system (tree sidebar + terminal interface)
  • Virtual filesystem synchronized with browser history
  • Responsive mobile navigation with collapsible drawer
  • Progressive enhancement (content works without JavaScript)
  • Custom Markdown processing with Peggy grammar
  • Syntax highlighting for code blocks
  • Content organized by month for blog posts

Learning Focus

  • Piecing together differing technologies
  • Learning WCAG 2.2 accessibility guidelines
  • Working with AI coding tools
  • Using conventional commits
  • ADHD Management
  • Making deliberate technology choices

Ramblings

This was an interesting project. I hadn't worked on code stuff for a while after leaving my tech job and this project was just going to be a simple portfolio. What ended up pushing me to make something more complex was the idea of the indie web. I wanted a site that shouted me and I wanted it to be interactive and cool. I decided that a terminal in the site would be a pretty cool portfolio and reading experience.

One of the challenges I faced while making the site was my own ADHD. I don't have a lot of free time and I find myself struggling to do anything productive after I get home from work. So, I ended up utilizing my mornings and breaks to work on this site. An interesting side effect of having so little time to work on the site was that I gave in and started using AI coding agents to accelerate my development. As someone with ADHD and also despises AI slop it's mixed feelings when it comes to using them for development. On one hand I know I'm not building each function or section of code and thinking about how it specifically gets implemented at the beginning. On the other hand the AI often does the thing that is hard for me to do with ADHD, breaking down tasks.

In the past I've had problems with context switching and going from development to debugging when whatever I wrote broke down. Now, I'm usually in debugging and review mode and it's easier to stay in that headspace. Having the AI grease the wheels when I start working makes it easier for me to stay working for much longer without losing focus. The last thing I'll say on this is that while I despise AI for most of the uses that corporations want to stuff down our throats, Coding is one of the few areas I think these models are truly useful.

guest@b1rdh0use