Senior UI/UX
and front-end
developer

case study

Personal portfolio V3

#front-end #Headless CMS integration #UI design #UI development

Why new portfolio website?

After working for Connells Group for nearly 3 years, I could finally feel there was nothing else I could do for the company and myself while in the current role. It was time to move on.

The older version of my portfolio was slow and clunky, and although I still loved some aspects of it, I felt that website did not represent the set of skills I had at that time and the type of work I wanted to do. I decided to create a new website with a new purpose and new fancy tools.

My job at Connells allowed me to improve my designs skills, so, obviously, the new website had to be created by me from start to finish. I did not want my new website to look like anything else, so I decided not to look for inspiration online. This site had to be me – funky, creative and slightly minimalistic.

Jamstack all the way

All my personal projects started as experiments, so the new portfolio would not be any different.

While at Connells, I started using Figma as my primary design tool (I still do!), so I quickly designed the outline of my new website. When working on personal projects, I never stay in the design phase too long – I’m just too impatient to start coding! However, that outline provided me with a clearer idea of how I would want my website to look.

I was just starting to get into Vue.js, so, obviously, the new site had to be built with it. Also, I recently started using Netlify for my other projects, so it made sense to stick with their superb continuous deployment capabilities. Last but not least – I really wanted to try how headless cms would work with my static website, so I chose to store my content in WordPress and fetch it via its API.

Result

This very website you are visiting right now!

Designed in Figma, built with Vue.js & Nuxt, using modern CSS features like CSS grid (for purple dots in the background) and flexbox, content stored in headless WordPress CMS, and deployed via Netlify. Also, this website is installable as it is a Progressive Web App!

Next case study

Sequence homes

How do you convert 70 designs to a fully functioning responsive website?

  • cms integration
  • front-end
  • UI development