A portfolio website’s primary function is to showcase a designer’s capabilities and previous experience. I believe a portfolio website should be as simple as possible, while still allowing the designer to express their own personal style. I’ve been a huge fan of Webflow and wanted to write a post to outline how I’ve planned and executed my own website on this platform.

Getting Started with Webflow

I taught myself Webflow in 2020–2021 in order to upskill and learn more marketable skills. I primarily used Webflow University via YouTube. Webflow seems to put a lot of production effort into their video tutorials, and they are as helpful as they are entertaining. For more advanced functionality, I really liked content published by Timothy Ricks, as well as Finsweet. These are great starting points for designers looking to dive into

My CMS Setup

Pretty much my whole website runs on CMS. Here are the collections I’ve created for my site:

Case Studies: These are individual pieces of work and make up the bulk of my work shown on this site.
Tags: These are things like, UI/UX design, Illustration, Branding, etc. and are used to categorize my Case Studies, allowing users to browse by type of work.
Years: This was the year that each project was completed, allowing both chronological sorting, as well as browsing by time period.
Work History: These are previous and current jobs that I’ve held. When I get a new job, I can easily add in the new one and it will update on my About page without much effort.
Blog Posts: This is what you’re reading right now.
Blog Tags: Categories of my blog posts, allowing for categorization and also for generating the Related posts at the bottom of each blog post
Now Page: I designed a template based on the content I wanted to include and the page itself is generated via conditional visbility.

Components Everywhere, When Possible

Components are a huge timesaver and I use them when it makes sense.

Site navigation
Site footer
Page title
Button lockups

Keep Professional Work Separate from Personal

A portfolio website is a utilitarian and functional piece of design. It is primarily meant for potential employers to see if you’re a good fit for a specific role. A secondary use of the website is for other viewers to get a sense of your interests and taste in design. For this reason, I’m a firm believer in keeping your (professional) “Work” and your (personal) “Side Projects” separate.

Conditional Visibility for Case Studies

For each project, I create a new collection item called Case Studies. Within the Collection for my Projects, I create 6 rich text fields for each section of my project, along with 6 multi-image fields that accompany each right text field, so the fields look something like this:

TXT 01
IMG 01
TXT 02
IMG 02
TXT 03
IMG 03
And so on…

On the CMS Template page for my Case Studies, I set the Conditional Visibility so that each section only shows up if it’s set. So if I haven’t written content for TXT 04, 05, and 06, these sections won’t show up on the project page. This allows some Case Studies to be more detailed than others, when applicable.

A few small design touches

While my portfolio website is mainly meant to be a functional piece of design, I’ve added a few small touches

Highlight text color is set intentionally to yellow to contrast everything else on the site.
A colophon page. It’s not a high traffic page on my site, and although the term itself comes from adding publisher information in a printed book, I added this page as a callback to the days of bookbinding and traditional graphic design.

Closing thoughts on a portfolio websites

Keep it simple

Remember that not everyone who looks at your site is a designer. They could be a hiring manager, a founder of a company, or a recruiter. They need to be able to quickly discern whether or not you’re a right fit for a role, or if they want to work with you.

Add a bit of personality, but don’t go overboard

As you can see from this very website, I tend to lean on the more simplistic side. This is my personal design philosophy and fits my own personal aesthetic. After you’ve solved the initial problem of communicating your value as a designer, feel free to add a bit of bells and whistles in order to tell the world what kind of designer you are.

While I understand today is a very competitive job market, I say “don’t go overboard” particularly to younger designers who appear to be trying too hard to differentiate themselves. Let your work first speak for itself, give it room to breathe on your website, and then go back and add in all the special design elements that make your website truly unique.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

How I built my portfolio site with Webflow