Version 6

So, I changed my website again....

It's been a few years since I was last writing about the evolution of my website and how I was looking forward to writing more because of the changes I'd made. Since then I've had post; an early review of the Samsung S21 Ultra I'd purchased at the time, sitting in preview pretty close to finished and ready for posting, but I never did.

In this post, I am going to talk about the technical and personal reasons behind the why and how I ended up here almost 3 years later with an entirely different stack driving my website.

Let's get some context first

Version 5 used GatsbyJS as the meta-framework, Netlify was the deployment host, and all the content was stored in Contentful. Any time a post was published; a production build of my site would start, and any time basically anything else changed, a preview build would start. I was using Rich Text for my blog post and I later added MDX pages for additional customization and flexibility.

I was genuinely chuffed at the time by how clean the site looked. However, I started having issues when I noticed my build minutes on Netlify reaching 70% of the limit for the month only a few days in and I realised that while Contentful's webhook settings displayed separate Save and Autosave events, I could not find a way to bespokely trigger a Save event. This meant that the only way to get changes to trigger builds was to let it fire every time I unfocused the editor for more than a few seconds. My Gatsby builds at the time 2 to 3 minutes if I had made content changes, so it was feasible that a even writing one post in the CMS editor would result in hitting that limit before I was done.

I tried making workarounds to these problems; like a small Contentful app called Pushook who's sole-purpose was to display a button on the editor that let me trigger a configured webhook. After I was finished and had it working I came to the realization that I started with wanting to paint my fence and by the end of it, I was shearing a Yak. I lost motivation for writing after all the hassle I'd experienced and longed for a simpler approach.

Why didn't you try NextJS?

Over the years of developing my portfolio, I'd seen NextJS talked about a lot, even while I was developing v4 I had toyed with the idea of moving to NextJS but decided to hold off on that because I was comfortable with Gatsby and didn't want to hop the fence just because the grass looked greener. With work getting busier around this time as we ramped up for our first client go-live and me being a rather key individual at the time, I didn't have much motivation to work on my portfolio.

Fast-forward to July last year and my work-life balance had suddenly gotten better due to both an organisational shift where I work and an intentional mental shift to spend more energy on maintaining it personally. I started seeing dev youtube get bigger and I binged a load of Theo's videos pop up. I really loved the way he explained React development concepts and I began to feel the itch to develop again. I bit the bullet finally after reading about tRPC and create-t3-app, it just seemed too cool to not try out.

Desired Outcomes:

As I went into the development of v6 I wanted a few key things:

Incremental builds - my content should be able to change without rebuilding the entire app.
Movement - animations and transitions. I don't want my page to look 'flat'
No local markdown files - I really don't like local markdown and it breaks the first rule.
Colourful - I'm sick and tired of bland light-mode and dark-mode designs.
It must be free - outside of the domain name I don't want to paying for this with anything but my time.

Starting development

Version 6 started out; like all things, as an idea in my head and I decided to be a little smarter than younger versions of myself and actually draw a design plan, rather than just winging it. I popped onto Excalidraw; another Theo-ism I'd really gotten behind, and drew this up.

It's not going to win design awards but it felt like a step-up from v5 and that's all I'm looking for. So I spent a few days porting the app over using the at-the-time beta version of create-t3-app and I was really surprised how seamless it felt. Tailwind is officially my favourite CSS utility and I will endeavour to write as little regular CSS as possible from now on.

A few days into August and I had built the following.

As you can see there's a reason I'm not a designer but I was focusing mostly on getting my head around tRPC and NextJS' data fetching patterns. I was experimenting with colours too as I really had grown tired of the mostly light-and-dark grey used on previous versions of my website. I started running into IDE problems as well as performance issues with t3-stack so I shelved the project when my personal and work life had gotten busier again. I'd scratched the itch for "new code" enough to wait for the beta release to finalise and come back to it.

In late January of 2023; I had suddenly seen a lot of videos about Svelte and SvelteKit which really intrigued me and I was tempted to port to something different again, but after a short experiment with Svelte I decided it didn't fit what I wanted and I counter-pivoted back to t3-app. I upgraded to the latest version which fixed a lot of the issues I'd had. I changed the colour scheme and used React Portals for the first time (they're rad).

I still had a lot of functionality left to code but this is what Version 6 was going to look like.

What I'm sure you've noticed by now is that the website you're reading this on is very different from the images above.

"Technically... It's Version 6.1"

I was proud of it in the moments following the changes but over the next few days I felt underwhelmed - I really struggled to like it. Adding colour to the design felt forced no matter how I tried, the wave at the top was a starting point but beyond that it felt bland - or worse, empty.

With February, being a very busy month for me I decided to shelve it and give myself time to think of a simpler design that was colourful from the start.

A few weeks ago I started seeing videos from a YouTube Channel called Hyperplexed where he takes popular websites and redesigns them to make them better. I found some inspiration from these videos and then found my way to this video:

I felt an immediate sense of direction about what I wanted my website to do now so I pushed forward with finding a colour scheme I liked. I really like purple as a colour so I decided to find shades of purple that formed a nice gradient.

I settled on the above and made a design in Figma and went ahead with translating the old design to the new one. I found a few other bits of inspiration from other videos Hyperplexed had done.

The nav evolved from a simple footer bar into this 'orbital nav' and I tinkered with the animation for way longer than was probably necessary but I learnt a lot from it and thoroughly enjoyed the process.

Implementing the 'hacker' text in React was a bit more work than I'd thought but I got my head around the useEffect hook in the process so I'm not complaining.

Conclusion:

I've said this every time I get close to finishing a website re-design but I'm really happy with the product. I think it's a big step up from where I was at 3 years ago when I wrote Version 5. Moving from pure static-site-generation to ISG and SSR has been a learning curve to my mostly-backend brain but I really tried to push myself to make a more polished and fluid site and I think I succeeded in doing that.

I managed to achieve my five desired outcomes for v6 and I'm not even finished! I wrote this entire post using my preview site as a guide and I picked up a handful of weird layout issues I couldn't have without it.

I've got a few things remaining like generic MDX components I can use to format my posts in a consistent and responsive way, adding searchable tags so content can be grouped together, etc. but I'm really chuffed with how this came together.

Thanks for reading,
Connor