This year I decided it was time to create a new personal website.
My personal website hadn't been updated for 3 years, just after I quit my job and started my own company.
A lot has changed since, my skills and work I could put in my portfolio but the design was looking outdated as well.
At the end of 2017 I also decided to launch a blog, to save time I spun up a new VPS, installed Ghost CMS, picked a theme and linked it to a new .blog domain I bought.
There was no link between my portfolio and my blog and the design was completely different.
The goals of the new personal website were to create a consistent personal brand, have both my work projects and blog posts in the same place and simplify the tech stack.
One of my goals was to create a consistent personal brand across my portfolio and blog and thus a redesign was needed.
Something I highly value in my projects, as you can see in projects like Screely, is simplicity. I wanted the design to be minimalistic, with a strong visual hierarchy created by visual spacing and typography without relying on a big color palette.
The sidebar navigation has been making a comeback on the web recently and is seen on big redesigns like Twitter. As I feel this is easier to navigate and (at least right now) more original I created some wireframes with it and decided to use it in the final design as well.
As simplicity was important for me, the sidebar is not used on the blog as I wanted the full focus of the user on the content.
Instead, I opted for two related items at the bottom of a blog post, after a user is done reading the article so there are no visual distractions while reading.
The last goal was to simplify the tech stack.
The Ghost CMS powered blog was self-hosted on a VPS which requires work to keep secure and updated. Luckily Ghost has since introduced the ability to run it as a headless CMS so I could build a JAMstack website using one of my current favorites: Gatsby.js.
Since this would turn the entire website static HTML files I could easily host it for free on Netlify, increase website performance and make it more secure.
Whenever I publish or edit a blog post in Ghost CMS it sends a webhook to trigger a rebuild of the website on Netlify.
To keep all the content in one place I decided to add my portfolio items to Ghost CMS as well. Since that is built for blogging I needed to be creative with how I could tag each work item.
I decided to (ab)use the internal tags of Ghost to tag each work item.
I then filter these out, prepare them by stripping the # and adding commas and load them dynamically in the component.
Loading the correct items (Work or Blog) on the right page could simply be done with a filter on the GraphQL query.
Having not only the blog articles but also the portfolio items in a CMS will make it easier to keep it up-to-date on the website.
My personal website is now completely up-to-date, both the content and the tech stack, and has a consistent design across the entire website.
It's also faster, more secure, and less complex without a back-end. The JAMstack is really a joy to work with.
Want to update the design of your website or need help with front-end development? I'm available for hire!