Like most programmers, my work is a mix of code I've written for jobs, to practice new skills, to solve small problems in my life, and to answer pointless questions I asked myself in the dead of night.

Disclaimer: I can't show code samples from all of my jobs here. Some are either proprietary or just not easily reached by any old web browser. If you're still curious about my career work, check out my LinkedIn page.

The Searchable Museum

My first project AgileSix was helping build and refine the digital museum for the National Museum of African American History and Culture. My main contributions included an in-depth, interactive exhibit component, refactoring the main navigation, and documenting and fixing a large number of accessibility bugs.

SeeClickFix Request Portal

The Request Portal is how citizens can use SeeClickFix to send requests to their local governments, track their progress, explore others on a map, and comment or follow others. I made the style guide and design system the front-end was built on as well as building it to be compliant with the Web Content and Accessibility Guidelines (WCAG) AA standards.

Anime Quote Maker

My favorite side project is an easy way to pair inspiring quotes with stylish anime art. Each quote image can be heavily customized with different positioning, colors, shapes, font styles, and filters. It also uses a custom API endpoint I wrote in Ruby to pull images randomly or based on tags.

Coordinate-based Generative Art

Random shapes are created along an SVG grid, and I used GSAP to sprinkle random animation effects as they get drown. The end result is a small, unique piece of generated artwork.

Vigenere Encryption

This encryption tools lets you encode messages using a secret pass phrase, and it can old be decoded with the same pass phrase. Writing the coding and decoding logic was almost as difficult as understanding all the principles behind Vigenere encryption itself.

Anime Twitter Bot

This (now retired) Twitter bot created and tweeted random pieces from me Anime Quote Maker. It tweeted tens of thousands of generated art images in its lifetime.

CSS Customizer Template

A template I'm using for future pens that let me adjust different styles on the fly for future CodePen projects. It's useful to narrow down the precise styling a page needs, and fast.

Atomic Sass

I enjoy Atomic CSS as a starting point for many of my project's styles. While I enjoy Tailwind, I often find it too bulky for small projects, so I made my own Atomic stylesheet. It includes style variables, base element styles, and responsive classes.

Monty Hall Dilemma Game

The Monty Hall Dilemma is one of my favorite puzzles, and recreating it is one of my favorite ways to try a new JavaScript tool or framework. This was one of my first Vue projects.

Hypnotic Spiral

This project is a combination of CSS animation, careful timing, and making code up on the fly. Just don't stare at it for too long.

Responsive RWBY Show Poster

SVG lets coders crop and arrange images in interesting ways. I experimented with this by making a fake poster for one of my favorite animes that's also responsive, making it well-suited for online promotion materials.

Number Guessing Game

This is one of the first JavaScript games I made. You have five tries to guess a number, with the game giving you different hints throughout.

Interactive Lamp

This was how I experimented with SVG's ability to both make drawings and be interactive. I plan do more like this in the future.

Animated Pokeball

An experiment with mixing SVG images and custom CSS shading for results that look like pictures, but are actually made of pure code.

Ruby Skeleton

My focus is the front-end, but I make the ocassional Ruby project for automating tasks, building small APIs, and scraping info off the web. This is a blank Ruby template for quickly starting on all of them.

Concentration Game

A game I made to practice more with Vue.JS, one of the most popular JavaScript frameworks. It randomizes the numbers' placement and tracks the user's remaining turns.

Tic Tac Toe Game

If you haven't seen it yet, I enjoy practicing different JavaScript approaches and frameworks by making classic games with them. This was to flex my plain, functional JavaScript skills.

Synapse Grid

Synapse is a Sass grid system with the fun and simplicity of Expressive CSS without the bloat of so many HTML classes. I used it a fair amount before Flexbox and Grid became more mainstream for web layouts, so it's no longer maintained.

CSS Grid Image Opener

CSS Grid is great for page layouts, but also has many artistic uses. I played around with overlapping squares of anime art for a more dramatic effect that's also mobile responsive.

Scroll Snap Gallery

Like so many cool styling tools, I only fully understood Scroll Snapping when I made something with it and gratuitous anime artwork. In this case, it's an image gallery that uses Scroll Snap to prevent images being partly outside of the visible window.

Cicada Animation

The Cicada Principle is the design rule that using prime numbers can create the illusion of randomness in front-end designs. This loading screen looks unpredictable and spastic, but it actually uses no randomly generated numbers.

Parallax Text Effect

I planned to use this slow, gentle parallax background for some long-form writing ideas, but never had the time to finish it. But it's still a neat effect I hope to find another use for someday.