The Evolution of ChildishhAlbino.com

Over 2 years ago, I started building a simple portfolio for myself using GatsbyJS and Github Pages. It wasn't pretty, fast, or responsive but it was a start. 2 years later I've rebuilt or changed the website 5 or so times and I wanted to recap each iteration; going over the changes I made and the reasons/motivations behind them.

Version 1:

Version 1 of my website was definitely something. I knew absolutely nothing about web development and even less about GatsbyJS. I had no idea how anything fit together and I had never worked with anything this dynamic before. For some reason, I felt the theme I named 'Bubbles and Subbles' (sub-bubble) was a good idea. A combination of not understanding UX/UI, CSS, design principals and responsive design led to this mess of colours, drop shadow, and curved edges. Despite all that, it worked and it taught me a lot.

I used GitHub Pages to host the site and wrote Markdown files locally; something that really dampened my desire to write due to the hassle of writing raw markdown.

It worked nicely enough for a beginner project but Version 2 brought a lot of changes.

Version 2:

Version 2 streamlined a lot. I actually understood what I was doing with GraphQL and the way Gatsby fetches data. I had a much better idea of how to use CSS classes and properties. Just overall a cleaner design. The site was (mostly) responsive too. It's nothing special but it solidified what I knew and how confident I was with web development.

Version 2 was still hosted on GitHub Pages and still used raw markdown files for content but lasted the longest out of any design so far; lasting from February 2019 until January 2020. This was mostly due to laziness admittedly.

Version 3:

In late January 2020, I built Version 3 of the site using the Gatsby Starter Blog template. It was the first one hosted on Netlify and leveraged their CMS to try to alleviate the pain points of writing my markdown directly (looking back this did not work at all).

This was a clean slate for me to start fresh with Gatsby. In November 2019 I'd started an internship at my now main job and I felt my website could do with a redo to reflect the changes in my life between early 2019 and 2020. It's still nothing special from a design perspective but it was a nice intermediary step for version 4 and onwards!

Version 4:

Version 4 spawned out of the oddity that was March 2020. I had been made redundant along with the rest of my co-workers. Thankfully for me, things worked out and I was brought back after a short while. Unfortunately, I cannot see the future so I didn't know that at the time, in preparation for the worst case, I spent my suddenly massive amount of free time developing my website to look the way I wanted and getting my skills across the board as refined as they could be.

My motivations behind this change were simple; I wanted a nice looking website, so the design was the main focus of Version 4. I really pushed my knowledge of CSS and responsive design. It's even the first version to have a dark mode! I'm happy to say I got to a point where I was proud to show off my website so mission accomplished, right?

Unfortunately not; while the website finally looked nice, it was still void of content. My initial blog post about GatsbyJS still sits as the only post to last all 5 iterations. Netlify's CMS just didn't help to reduce barriers to me writing like I thought it would. So after a fair bit of time, and some experiments with a website for a friend (blog post on that coming soon), I made the decision to jump to a different CMS.

Version 5:

Version 5 started as just swapping out Netlify's CMS for Contentful. I'd used Contentful to build a website for a friend and I loved using it so decided to make the switch myself. The actual swap in code didn't take long and gave me a chance to clean up some code in the process. However, my desktop-first styling made resolving a few of the esoteric issues I experienced very hard to debug and I decided I was going to scrap all my style sheets, refactor my entire project and then style mobile-first from the ground up.

So that's what I did. It surprisingly came together quickly. I made a few tweaks to the design of version 4 and improved the light mode theme while I was at it. Version 5 is really something I am happy to use and writing this article; aside from difficulties getting Netlify to build branch deploys in the way I want them to, I'm looking forward to writing more as a result of it.

Conclusion:

Those who work with me know I joke about being absolutely horrific at frontend code a lot! I definitely still feel a lot more comfortable and productive on the backend of a project than on the frontend, but after looking back over the last 2 years worth of website designs it's safe to say I've learned a lot and come a long way.

I would not be surprised if in 2 years I'm writing about version 9 or 10 because I really do enjoy iterating on this project. As I grow, so does my portfolio. Let's just hope that by then I have more than 2 (finished) posts 😂