May 8, 2020

It Is Time for a Refresh

We're entering May, and this could not be a better time to present the 2020 version of my personal website to you.

Believe it or not, every year I am inspired to redesign, improve, and enhance my personal website. It's one of many ways for me to continue exploring and trying out new web technologies, frameworks and tools that make browsing websites an enjoyable experience.

Sticking with Gatsby.js

There are a ton of quality web frameworks out there that does the job probably as well as Gatsby.js. But I am sticking with it.

Gatsby.js is blazing fast and its superb performance when it comes to search engine optimizations, image processing, and GraphQL integration means there isn't much of a need for me to switch to something else.

Hugo was a really interesting option that I looked at. I even thought about switching over to Next.js (a powerful framework that many projects at my workplace are using), but Next.js would truly be too powerful for a personal website like mine. Server-side rendering would have been a keen thing to have by my side, but Gatsby does the work just fine 💌 with the functionalities and plugins Gatsby.js are offering.

Integration with Contentful (Headless CMS)

Contentful Model for My Website

One of the best decisions I have made this year was to integrate Contentful into my website. It makes managing my site's content such as blog posts and projects such an easy process.

The integration between Contentful and Gatsby.js was definitely easy thanks to Gatsby.js's plugin called gatsby-source-contentful.

Now that I can manage all my content through Contentful's Dashboard and have GraphQL query the necessary fields, I can keep my code base super clean and easy to follow through without much clutter.

TypeScript Enabled

I don't know where I was before this, but sadly, the previous version of my personal website didn't have TypeScript enabled. Hate it or like it but TypeScript forces you to write cleaner, more structured, and safer JavaScript code.

It keeps your props in check through your created interfaces and ensures you don't attempt something that probably can happen without TypeScript enabled (like trying to map an object that obviously isn't an array 😱).

More Time to Write Projects' Details

The goal for the 2020 redesign was not just focus on the UI or the technologies being used. I was also determined to make sure I have found the time to write detail explainations about the projects I am working on or have been in the past.

Thankfully, I have been able to achieve this goal in time for the 2020 redesign.

Netlify

According to its official documentation, Netlify is the fastest way to build the fastest sites. And surprisingly, it is quite true!

I am sticking with Netlify for another year as my trusted hosting service. With Netlify's Built Hooks feature, I can automatically have Netlify trigger new build versions for my website based on a new commit I made on GitHub or when there is an updated content from Contentful.

Reflection

Going Forward

An annual redesign of my personal website is a fun way to keep me up-to-date with new web technologies and present an opportunity for me to test them.

Web technologies are constantly changing and we must keep up with them!

2020 Homepage Design UI


I hope you enjoy reading this post. While you're here, feel free to visit other areas of my website. Enjoy your stay!

Reflection Design Approach Updates

Last updated: May 15, 2020