Redesigning jurn.io

Redesigning jurn.io

In the two years since I last redesigned my personal website, there have been a lot of changes; I have worked with more clients, launched new projects, and wrote many new articles for my own blog and other publications.

The old design wasn't accommodating all of this very well so I decided it was time for an update. After more than two years I was also growing bored of the previous minimal design and wanted to add a little more visual flair to my personal website.

Design

Work in Progress

In this redesign, I wanted to better highlight my work and make the site more visual and personal.

I took a content-first approach to the redesign as I feel like the content is the most important on a personal website. It exists to convey information and the design is only there to support the content.

Once I had written most of the content I started creating the design. The goal was to create a clean design with good typography but also have engaging visual elements to support the content and make it more visually appealing.

Development

The tech stack has also changed quite a bit. Gatsby.js was replaced by Next.js, the site is now hosted by Vercel instead of Netlify and I'm using TailwindCSS instead of custom CSS.

I've switched from Gatsby to Next.js for a couple of reasons. Next.js has made a lot of progress in the last few years and is now also great for static websites which wasn't the case during the last redesign two years ago. As most of my own projects and many client's projects are also built on Next.js, it's something I know very well and can comfortably work in.

To make hosting easier I decided to deploy it to Vercel this time instead of Netlify. Netlify is a great product but as Vercel is built specifically to deploy Next.js it was the easiest option to host the website now it's on Next.js.

During my previous redesign, I wrote all CSS from scratch, this time I decided to use TailwindCSS instead to save some time. TailwindCSS and its ecosystem make it a lot faster to design and build a new website from scratch. There are design systems for Figma, plenty of ready-made components, and extensive documentation.

I did not make any changes to the blog, it's still running on Ghost CMS which I'm self-hosting on a VPS.

I'm displaying a list of the most recent articles on the writing page which is simply fetched with the Ghost API and loaded in as static props in Next.js. When a new article is published, it will hit a webhook that triggers a new build on Vercel, and the site is then redeployed with the most recent articles.

Final Words

My personal website is quite important to me, it's the first thing people will see if they search for my name and want to learn more about me and what I do. It's a place where I can show my skills, qualifications, and previous work in any format I like.

First impressions matter and with the design and updated content, I'm hoping I can make a good one.


Want to update the design of your website or need help with front-end development? I'm available for hire!