Blog archive

1. Wildcard - PHP based image placeholder service.

Having spent the majority of my work hours coding in PHP, via the context of Wordpress, I really wanted to get outside of that realm and build some stuff from scratch. check it out:...

2. Mortgage Calculator in Vue - SVG animation

This mortgage calculator shows an approximate monthly mortgage cost along with sliders to adjust the cost of home, APR rate, and term length of the mortgage. As you adjust the cost of the house the...

3. Text selection word search and statistics - Vue

This CodeSandbox example was a quick proof of concept on how vue could be used to analyze text to provide some basic search and statical data about a section of text. I did try this on some pretty...

4. Ipsum Fun - Lorem Ipsum Generator

Another fun little project to experiment with Express on the backend combined with TailwindCss and Vue on the frontend. This app is hosted on Heroku, so just be aware it usually takes a little extra...

5. Glitch image effect - CSS blend modes

If you combine some blend modes and css :before/:after elements you can create some pretty interesting color effects. I used a picture of my daughter's eye and used various background-blend-modes,...

6. CSS hover effect - CTA with filter and text reveal

This animated cta has a custom color filter made with an svg ColorMatrix element. Using this type of filter you can get a 'color graded' or 'color mapped' look to a photo where it is essentially...

7. Milligram Bold - CSS Framework Customization

Milligram is a great little CSS framework, and I have used it with a few personal projects. I wanted to create a different version of it with some different typography and styling for the form...

8. Conway's Game of Life - P5.js

Using P5.js I made this simple example of Conway's Game of Life. Everything about it is pretty simple, and it uses the canvas element to draw out the game over time. P5.js is a pretty interesting...

9. Logo Animation - Site Preloader

I needed a quick animation for a site to preload assets and then hide the logo to reveal the site. This logo was a simple svg that is faded out after a certain amount of time. Super simple, but a...