5 Steps To Creating A Winning Portfolio Website

Building an effective portfolio website is one of the best ways of setting yourself apart from other freelancers. Your site not only helps you demonstrate your skill, but it also allows you to grab your client’s attention.

In this post, I’ll share 5 steps you can take to create a winning portfolio website.

Why a resume isn’t enough

Having a polished resume with great experience can definitely help you get a leg up against other freelancers competing for the same client. But a resume alone isn’t enough in most cases.

Clients don’t want to read pages of internships and fancy startup names.

Clients want to see real, proven results. 

Freelance clients only care about one thing: your ability to generate real results. Click To Tweet

Imagine you were a freelance web developer for example. What do you think would be more convincing? Showing a potential client your resume or showing your resume and examples of real, finished websites you’ve built? In most cases, the latter would put you ahead of the competition.

By creating a portfolio website, you’ll be able to show clients that you have the skills required for the job, and the ability to complete a project successfully.

How to create a portfolio website

While there are a few websites that simplify portfolio design (such as PixpaPortfoliobox, Adobe Portfolio, Carbonmade), it’s generally a better idea to develop one yourself.


For one, it’s good practice to start your own website! You’ll learn some basic web development skills that could come in handy throughout your freelance career.

Second, it’s a lot cheaper. In most cases, you won’t have to pay more than ten bucks a month to keep your site running.

Step one: Secure a web host and domain name.

The first thing you’ll need to do to create your portfolio site is sign up for a hosting service and get a domain name so people can find you easily.

Web hosts ensure that your website has a server that stores all the important files and media, like web pages and images, and makes them public on the world wide web.

A domain name is the address where Internet users can access your website. It usually starts with “www.” and ends with “.com” or “.ca”. It’s best to find a domain name that’s easy to remember, like your name and last initials.

Bluehost is a popular option for many developers and businesses because it’s cheap, easy to use, and highly reliable. Start with the cheapest Shared plan. You can always upgrade later if you need more power.

Step two: Set up your CMS (Content Management System)

A CMS is the platform that helps you build your website. Some popular examples include:

WordPress – one of the most popular platforms due to its design and flexibility. Over a third of the Internet runs on WordPress (Note, I’m talking about WordPress.org. WordPress.com is completely different and is more simplified).

Squarespace – a popular alternative to WordPress that includes a suite of analytics, hosting, and design tools.

Wix – a drag-and-drop system favored by individuals with little experience of coding, and who just want to get started.

Each one depends on your own needs, and you may even have one in mind. I use and recommend WordPress because of its deep customization options and strong community. They also have a ton of themes.

Step three: Choose a portfolio theme for your website

A default theme can be a huge turn off to clients, so be sure to pick a theme that resonates with your personal brand and highlights your work.

The theme you choose will vary depending on the type of work you do. If you do a lot of graphic design, you’ll want a layout that brings out those visual elements.

Shapeley is a great free and minimalist theme. Proton will run you up $49, but it has a professional looking design for many freelance businesses.

Some things to look for in a theme:

  • Customizability – The ability to make changes to your liking.
  • Support – You’re bound to experience some bug or glitch with your website, so be sure there’s a community or developer to help you in case you get stuck.
  • Clean look – Avoid flashy, overly colorful websites. Clients want to see examples quickly.

Check out Colorlib’s list of 50+ best WordPress themes, as well as Atheme’s list of 35+ best themes.

Step four: Organize your homepage

While you can have several different pages on your website, your homepage is what will pop up first and be seen most widely. Make sure it’s structured so it grabs attention immediately and compels the user to learn more.

I recommend adding the following sections to your homepage:

  • Above-of-the-fold – This is the part immediately seen at the top of your page. Typically this will have a photo of you, some words to engage the reader, and a navigation bar.
  • Projects/ Past Work – As soon as the user scrolls down, you have to grip them with your work. Showcase your best writing, imagery, or videos here. You can even use some testimonials or “you may have seen me here” as I did for my website.
  • Services – What do you offer through your services? What special plans or bundles do you have? You may also want to have a blog or a similar section to show off ongoing work.
  • Contact details – Finally, you’ll want a way for the user to be able to get in touch with you. Usually, a contact form that sends an email is the best way.

Make sure you put your most important page content and text above-the-fold, because that’s where 80% of site visitors spend most of their time.

Source: Third Degree Advertising
Your site visitors spend 80% of their time reading content located above the fold. Put all your important info there. Click To Tweet

Step five: Arrange your portfolio

Finally, pick out your best work, the projects you’re proud to show.

For freelancers starting out, this may be catch-22: how can I find more clients if I need previous work to attract them?

My simple answer- just start. Start taking on gigs for your family, friends, colleagues, at reduced rates or even for free. Even if your website only starts with three examples, it’s better than nothing! Build out your portfolio over time.

Depending on your theme, you can have separate pages, or a popup whenever a user clicks on a project image. Either way, you’ll want to provide a few details.

  • Client Brand Name
  • Date
  • Purpose of assignment/project
  • Approach to assignment
  • Challenges and solutions
  • End results

You may not want to include all that information, but the more context you can provide the better. Most importantly, you want to show how the client used your work in a real setting.

Don’t just show what you made, get a screenshot of the layout you built for their website or the copy used on a brochure.

And that, in a nutshell, is what it takes to build a portfolio website! Not so bad is it?

Now let’s cover the elements of a great portfolio website.

Portfolio Website Best Practices

Craft your introduction

You only have a few minutes to introduce yourself, so make use of that time wisely.

Get down all the basics within the first few sentences of your page: your name, what you do, and what makes you stand out. Here’s an example from my homepage:

“Hi, I’m Jerome Okutho! I’m here to show you how you can create a successful freelance business starting today.”

Name: check. What I do: check. Key differentiator (speed): check. Nothing too fancy or over the top.

Streamline the experience

Anyone can access your website at any time. Make sure the experience is a positive one.

For example, users may decide to pull up your website on their phone. Optimizing your website for mobile not only helps with your user experience but with SEO as well.

Avoid long load times for your web pages by reducing the number of images and scripts in your page.

Always keep your user’s experience in mind. You never want a bad website to get in the way of showing off great work.

Use your best work

When it comes to portfolios, it’s quality over quantity.

Five great photos can tell a more compelling story than 20 mediocre images. A few sentences of convincing copy can overpower a paragraph of fluff.

Take the time to find out which of your work generated the best results or got the most positive feedback.

Highlight your other skills and achievements

Past work isn’t the only thing your clients will be interested in! A website is the perfect opportunity to highlight any other qualification. Here are a few examples:

  • Awards for work
  • Certifications
  • Experience with special software (like Photoshop or Final Cut Pro)
  • Reviews and testimonials
  • Education (if you’re from a prestigious school)

Think of your portfolio as evidence for why a client should hire you. Highlighting your other abilities can help support your case.

Ready to engage your next client?

A portfolio is where it all begins. It’s the first thing your client sees when deciding whether to hire you. In many respects, it’s like a storefront for customers. You have to put on your best work and do a little selling.

Looking for some inspiration? Check out these awesome portfolio website examples from Awwwards’s collection.

Still need help setting up a portfolio website? Send me a quick message and I’ll point you in the right direction.

Related Posts


Pin It on Pinterest

Share This

Share This

Copy Link to Clipboard