Initial Post

Unknown — Wed, 15 Oct 2025 00:00:00 +0000

I honestly don't know what to write here but I do need a starter blog post so here it is.

Welcome to my blog

This a blog / portfolio / general indie website based on the coolish things I do, as well as the not so cool things I do. Whatever the case, this is that site.

Some important things to know about me, I'm a trans woman so generally I'm socially inept but I do try and help people and get enjoyment from doing so. I'm a support main because I like making other peoples jobs easier, be that in games or in a workplace. I'm a pretty good Gamemaster and I'm ADHD as evidenced by this post.

Finally I have OPINIONS, So if I decide that the internet needs to know those opinions they will end up in a blog post here.

All that to say, Thanks for viewing the site and enduring my rambling blog entries!

Terminal Portfolio Site

Unknown — Sat, 15 Mar 2025 00:00:00 +0000

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.

Angular Golf Scorecard

Unknown — Mon, 27 Jan 2025 00:00:00 +0000

Angular Golf Scorecard

Repository

This project was a capstone, we were to take the basic golf project and re-create it using Angular and with all the concepts that have been learned previously.

Stack

Full production-ready Angular application for tracking golf scores with Firebase backend and external API integration.

Technology

Angular 7 with TypeScript
Angular Material for UI components
Firebase (authentication + backend)
Angular Bootstrap
RxJS for reactive programming
Karma + Jasmine for testing
Protractor for e2e tests

Key Features

Unit test suite
All functionality from js-golfProject
Reactive automatic score calculation
Database use and access
Production authentication

Learning Focus

Refactoring projects
Test Driven Development
Angular Component Lifecycle
Authentication

Ramblings

I did not enjoy this project mostly because I had to use Angular and it was going through a similar development process as react at the time I was working on it as well. A lot of the conventional patterns for working with authentication and firebase were no longer up to date and I also had to trial and error my way into getting it working. What I did enjoy was some of the conventions of angular itself in using ng-container and how you could retrieve data just by wrapping the variable in double curly braces. This helped me in my next job as they were using angularJS and .NET and the evaluations within the braces were consistent between the versions.

After doing projects with these frameworks I found that I do not like how bloated they are in bundle size and development overhead. They do make writing code in a group easier but the problem I've found is that creating these projects as a single page application slows the user's browser down even creating small apps such as these. If you aren't creating a heavy number crunching application with a massive dashboard it's pretty overkill. I make an exception for React Native as being able to hook directly into operating system functionality can be great for specific projects. On second reflection no matter what the language or framework it all depends on the project requirements.

Next project: Portfolio Terminal Site

JavaScript Fortune Teller

Unknown — Mon, 27 Jan 2025 00:00:00 +0000

JavaScript Fortune Teller

Repository

This project was a fun holiday exercise mainly to keep working with JavaScript and play with some holiday themed assets in creating a page like audio files and an animated GIF.

Stack

Christmas-themed fortune generator with sound effects, animations, and "Naughty or Nice" holiday humor using JavaScript.

Technology

Vanilla JavaScript
Bootstrap 4
FontAwesome
HTML5 Audio API

Key Features

Random fortune selection
Sound plays based on positive or negative fortune
GIF to keep users entertained

Learning Focus

Using more JavaScript built-in utilities like Math
Constructing fortune strings from templates
Managing audio playback

Ramblings

While I think this project was my first introduction to the Math built-ins and creating pseudo random number generation, I more remember this project because I got to write a few tongue in cheek christmas fortunes. For example: "Your grandmother will be ran over by a reindeer, the broken hip leads to severe medical debt" and "A loved one will take you christmas shopping for 5 hours, and will not buy anything"

All in all, this was a goofy little project that wasn't too complicated to allow us to focus on the holidays.

Next project: JavaScript Todo Application

JavaScript Todo Application

Unknown — Mon, 27 Jan 2025 00:00:00 +0000

JavaScript Todo Application

Repository

This project was my first toe dipped into web application development. It's a todo list with all features required for a minimum viable product.

Stack

Interactive todo list manager supporting multiple named lists with drag-and-drop functionality using JavaScript and JQuery for UI animation.

Technology

Vanilla JavaScript with jQuery
Bootstrap 4 for styling
FontAwesome icons
Google Fonts (Roboto)
jQuery UI for animations

Key Features

Create, Update, Read, and Delete functionality
FontAwesome Icons for intuitive usage
Funky colors for fun
Drag and Drop powered by JQuery

Learning Focus

CRUD operations
Product requirements
Wireframing
Waterfall development

Ramblings

This project was focused on taking a set of product requirements all the way through the development cycle. I was given the task of creating a todo application where I could create, check off and delete items. I was asked to wireframe the application before writing it so I knew how it should look. Currently nothing is saved anywhere and all the data remains in the DOM where it will be lost on refresh. I learned about using local storage later so I didn't add it at the time although if I were to rewrite the project I would consider it an necessity.

Next project: React E-Commerce Site

HTML5 Web Workers Demo

Unknown — Mon, 27 Jan 2025 00:00:00 +0000

HTML5 Web Workers Demo

Repository

This project is a simple lab about learning to create and interact with Web Workers

Stack

Educational demonstration of HTML5 Web Workers API showing multi-threading capabilities in JavaScript with browser fallback handling.

Technology

Vanilla JavaScript
HTML5 Web Workers API
Bootstrap 4

Key Features

Timer using a simple dedicated worker thread
Button that starts and stops worker thread

Learning Focus

What a Web Worker is
Moving synchronous operations to background thrads
Communicating with workers from main script

Ramblings

This project is deceptively simple. On the surface and in actuality it is a timer, but the important thing is that I learned about creating background processes and services for web applications. Web workers are good for heavy number crunching if you can spin up a few to do chunks of the calculation. They're good for allowing apps to function without network access if you setup a service worker, and they're good for code reuse as multiple scripts can use a shared worker.

Next project: JavaScript Fortune Teller

React E-Commerce Site

Unknown — Mon, 27 Jan 2025 00:00:00 +0000

React E-Commerce Site

Repository

This project was a complete e-commerse site for selling comic books using a full JavaScript framework

Stack

Full-featured e-commerce site with shopping cart, product catalog, and checkout flow built with React and styled components.

Technology

React 16.8.6 (Hooks era but uses class components)
React Router for navigation
Bootstrap-styled components
Styled Components
FontAwesome icons

Key Features

Shopping cart using state management
Product catalog with lazy loading of products
Automatic cart totals
Details pages for each product

Learning Focus

State management with react redux
React framework
TypeScript interfaces for data
SPA routing techniques

Ramblings

When I was working on this project it was a bag of mixed feelings. On one hand there were a lot of harnesses and patterns to follow to help write good functional code in a single page application. On the other it was a lot to take in at once and working with something so heavy meant I was trying to connect the dots as to how each piece fit together. It was valuable to learn how a router worked and how Typescript could help organize JavaScript in a way that warned you against mixing types, but I was fighting the fact that the framework was changing as I was working with it. A lot of the tutorials were not for the version of react I was using as I was on the bleeding edge.

Despite fighting with the framework itself, A good thing I learned while working on this project was that I learned how to dive into errors with greater fervor as that was the only way I managed to get this functional at the time.

Next project: Angular Golf Scorecard

Old TechPaws Blog Site

Unknown — Sun, 26 Jan 2025 00:00:00 +0000

Old TechPaws Blog Site

Repository

This project was a landing page and blog page for a generic tech company. I ended up using photos of a hardware monitor gauge built with the same technology as a car odometer. I'm not cool enough to have built that but I did take the picture.

Stack

Landing and blog page using static HTML. SCSS is used for styling and external CDN requests are used for fonts and FontAwesome icons. Each page is separated out into its own SCSS and HTML files and I used a funny little ispum generator set to Microsoft purist mode for the text.

Technology

Static HTML site
SCSS for styling (compiled to CSS)
FontAwesome icons
Google Fonts (Roboto)
Simple file structure

Key Features

Non semantic HTML structure using divs and classes
More advanced usage of styling such as the slanted sidebar
CDN usage
Images
Links between pages

Learning Focus

Learning about CDNs
Using a compiler for the first time
Practicing the habit of separating files
Working with a partner

Ramblings

This project was a few different things. first it was a bit more complex due to having to compile SCSS in exchange for nicer variables, more importantly though it was a team project. We were using a shared repository and we had to work with each other and learn git operations. We also went over how to get fonts and icons from external sources and making sites look a bit nicer. It also gave me permission to look for cool internet resources that can help me create a site. I spent project time on this site finding a lorem ipsum generator, it allowed me to make some funny ipsum text that feels like you're almost reading something coherent until you realize it's not. It's important to sometimes explore the web and find facinating resources to keep yourself interested and maybe learn to explore a new technology or just explore something another person made.

Next project: HTML "Burgers" Restaurant Site

JavaScript Golf Project

Unknown — Thu, 23 Jan 2025 00:00:00 +0000

JavaScript Golf Project

Repository

This project was a golf scorecard using an external api to get information about a specific course and calculate the score based on par, yardage, and handicap.

Stack

Golf scoring implementation using vanilla JavaScript and XMLHttpRequest, tracking multiple players and course data.

Technology

Vanilla JavaScript (ES5/ES6)
XMLHttpRequest (pre-fetch era)
Custom CSS (SCSS sources included)
jQuery for DOM manipulation

Key Features

Switch statement
Self Invoked functions
Multi player tracking
Score calculation

Learning Focus

Using an external api
Manipulating data with JavaScript
Manually creating HTTP requests without a library
Modifying the DOM from JavaScript

Ramblings

Looking back at this particular project I am honestly horrified at the JavaScript patterns and structure past me wrote. I can already think of ways to make the JavaScript smaller and more efficient. For an example I've got like eight hardcoded arrays filled with zeros up at the top to control the data for each player. Arrays can be two dimensional past me! I also didn't really understand the concept of a map yet. Eight hardcoded arrays can become a single line with both of these concepts.

let players = Array(8).fill().map(() => Array(18 /* or num holes */).fill(0));

Once that is done the switch statement is no longer really needed and can instead be represented as such

players[player-1][hole-1] = scoreNumber

There's also some other iteration and potential helper functions that can be written but I'm not about to entirely refactor a project that no longer even has an api to connect to.

Next project: HTML5 Web Workers Demo

HTML Burgers Restaurant Site

Unknown — Tue, 21 Jan 2025 00:00:00 +0000

HTML "Burgers" Restaurant Site

Repository

This project was an assignment to create a basic website for a restaurant. The content of the site was provided such as the menu and all the marketing blurbs. All the design was my job. I decided that it would be cool to color the elements to be a burger in and of itself.

Stack

Static multi-page restaurant website demonstrating HTML structure, CSS styling, and basic JavaScript interactivity.

Technology

Pure HTML5/JavaScript
Bootstrap for page layout and buttons
Custom images included
Google maps API

Key Features

Iframe usage for vibdeo player
Google maps API for displaying locations
Site photos taken personally by myself
Interactive HTML form

Learning Focus

Creating sites for clients using their materials
Learning about HTML5 Features such as Iframes and vibdeo players
Exploring CSS frameworks
Dipping a toe in JavaScript by implementing a form

Ramblings

This project ended up being pretty fun, The assignment was to create a website for this fake Rockey burgers company. It needed a Menu and locations which let me play with the google maps Iframe. I took the hero picture myself of the burgers that the cafeteria of the college made. They were culinary students so the burger looked absolutely delicious. I did get B-roll of the chef cooking the burger for the video portion but I didn't have the time to edit it before the project was due.

Next project: JavaScript Golf Project

HTML Lab

Unknown — Mon, 20 Jan 2025 00:00:00 +0000

HTML Lab

Repository

This was a project very simple in scope but it's the start of my professional journey, and it's the start of this retrospective walk I'm taking through my old code.

Stack

Didn't even separate the css into it's own file. This is a raw single page of HTML.

Technology

HTML4 and inline CSS

Key Features

Semantic HTML structure using container elements
Inline CSS styling
Lorem ipsum content to demonstrate hierarchy
Clean document structure without many nested div elements

Learning Focus

Understand HTML elements vs. generic containers
Learning document structure
Practicing separation of concerns
Establishing habits around readable and maintainable HTML markup

Ramblings

Because there's not a whole lot to talk about with the code itself I'll take this opportunity to talk about the emotional wall needed to hurdle for me to even dein to look at these old projects. As a chronic perfectionist it's pretty hard to go back to the things i'm not entirely proud of by myself. Ironically that's exactly how to fight off impostor syndrome. As I look through my old sus code it helps me understand how far i've come. This page is literally a bunch of lorem ipsum text and HTML tags. I could write this in a moment now but it was important in my learning process as this project is what I go back to mentally when I think about how base HTML should look. Not a div soup, but using semantic tags as well as proper hierarchy.

Next project: Old TechPaws Blog Site