I created this changelog website to serve as a central place for all of my creative work online.

The idea for this project was sparked when I read an article called Make a personal changelog by Brian Lovin.

I already have a lot of different content scattered across my personal website, Twitter, Gumroad, and the list is only growing.

In addition to having a central location for my creative work, I also wanted a way to “gamify” the creation process. I’m an avid gamer so the idea of incentivizing my work sounded like fun.

The Build Process

After some rough sketches on graph paper, followed by higher quality mockups in Figma, I eventually built what was in my head (more or less).

The “stack” for this project is Jekyll which I’m pretty competent at by this point. My personal website is built in Jekyll and it was a really great experience to learn how to use. Tailwind CSS powers the styling which is something I’d never used before.

How It Works

On the homepage, the top section features information about me including who I am and some of my links.

There’s also a level indicator which displays the current level I’m at.

The level is determined in the following way:

The changelog itself is a timeline-styled section which contains all of the articles, newsletter editions, websites, projects, and digital products I’ve created.

You can view the original content by clicking the button.

On the Stats page you’ll find various statistics.

The Category Stats section shows the things I’ve created that fit into the following topics:

These are subject to change but right now these categories fit almost all of the things I create.

Each topic has a counter which counts the pieces of content under that topic.

The Creation Stats section breaks things down based on the type of thing I’ve created: Articles, Newsletter Editions, Digital Products.

The Audience Stats section shows my newsletter subscribers + Twitter followers.

And that’s basically it for now. This was an extremely fun project to work on; once I got Jekyll and Tailwind to play nice together that is…

I look forward to using this stack again for my next project whatever that might be.

If you think this is a cool idea, please be sure to let me know over on Twitter.