Creating a portfolio website with webflow
Web Design
Full Stack Designer

Creating a portfolio website with webflow

When I was informed that I needed to produce a portfolio within the next 7 days, my brain went into overdrive. Sometimes a good deadline makes for a good motivation. This portfolio website is a good example of it!

Design process

Given the vast amount of work required to complete this assignment in time, moving. I broke it down in phases.

Come up with a concept

First, I needed to quickly come up with a concept for the website. I pulled inspiration from fellow designers but decided against turning it into an art gallery—and opted to keep the design simple yet functional.

Cherry pick relevant projects

I jogged my memory for the best projects to showcase and began writing the case studies—most of which had to be written from scratch (including hunting for relevant artworks that would serve as basis for the visual asset creation).

Some of it was found by accident (like the Sailing navigation app prototype) while other required some sherlock holmes-ing around old drives to find the original work...and hawk for the relevant fonts to render them in Affinity Designer.

Develop the portfolio website

Before embarking on a new project, I always conduct a bit of a retrospective on previous projects of similar nature—focusing on what went wrong with them and how I could avoid the same pitfalls. Sometimes, with a bit of luck there are new tools/plugins that help mitigate these issues.

My main concern coming into this project was with Webflow.

After years of developing, maintaining and helping out other people’s Webflow project, I have come to the conclusion that it is near impossible task to keep a project clean, maintainable, and easily editable by someone who hasn’t written the code.

Fortunately, this time around, I had the silver bullet: the client-first styling system, developed by Finsweet.

I first encountered client-first when I hired a Webflow contractor who suggested using it for Grain’s new marketing website.

I decided to give it a shot and proceed to invest some time reading the documentation which in the end proved to be a huge time saver—as the website structure is sound, stable, and even sexy!

Take a peek under the hood! Here's the webflow project.

Bring it home with the portfolio PDF

With the website designed as a portfolio, I opted to develop the portfolio to act as a "landing page" for the portfolio website.

Make it pretty ✨

As you are reading these lines, I am probably still tweaking the CSS here and there, while working on animations (which I always keep last on Webflow projects as they can turn into huge time suck)


You tell me! 🙃

For a better experience, give it a shot in full screen!
For a better experience, give it a shot in full screen!