Build a Great Portfolio Website

June 10, 2019

Portfolio website 101

Someone I know has plans to build a portfolio site and I wanted to write a little something to help them get started! This piece focuses on pointing out certain ideas to explore/keep in mind rather than expounding on technical nitty-gritties. While I wrote everything with a specific individual in mind (you know who you are), I hope anyone in a similar situation will find it useful!

Content

You’ve probably heard the phrase “Content is king” before, but I’m going to hit you on the head with it (again). It’s really that important.

Selectivity

Especially as your collection grows, it’s important to showcase (or at least emphasize) only your best, most relevant work. Unfortunately, most people won’t take the time to analyze all the neat things you’ve done, so make sure the things they do see leave a great lasting impression. In other words, it’s better to have a few stunning works website visitors can focus on than a large sample of everything.

Prioritization

Make your most important content prominent and easy to find. You can employ:

Intuitive navigation to said content
More visible location on the site/a page
Visual emphasis (think larger size, bolding, contrasting color)

Search Engine Optimization (SEO)

SEO refers to the process of raising a website’s search engine ranking to gain more visitors. While there are plenty of complexities regarding SEO, much of it boils down to simply publishing good, relevant content.

Use (but don’t overuse) keywords
Utilize HTML best practices for SEO
Link to your content

Design

Color and Contrast

Color carries plenty of emotional significance and can play a major role in distinguishing your site and reflecting your personal brand. When I was struggling with color for my own portfolio, someone with more experience advised me to choose colors that inspired the feelings I wanted visitors to feel.

Typography

Good typography can do wonders for a design. Choose something readable, but don’t forget to take note of the smaller details. For example, serif fonts may convey different ideas than sans-serif fonts - a traditional feel versus a more modern one.

Spacing

Don’t forget to give content and design components ample breathing room! Not only can this improve a design’s visual appeal, but it may also increase readability and draw attention to content.

Scalability

It’s important to design with your site’s growth in mind! What works now may not work as well later.

Take for instance a single-page scroll site. If the website features a short about section, three projects, and contact information (first-to-last down the page), a visitor may easily be able to scroll from one section to the next. However, if fifty projects are featured instead of the original three, the site needs to be designed so vistors can still access the about section and contact information easily.

Code/Construction

Required Functionality

I can’t emphasize this enough. Choose a technology/website platform that supports all the features you want without feeling excessively complex. Don’t forget that you may want to update your portfolio fairly frequently. You may want to consider making the process as intuitive and convenient as possible.

My own portfolio site uses Github Pages. I’ve found Github Pages a convenient solution for hosting static sites like my portfolio - and it has a neat blog feature that had just what I need.

HTML and CSS

If you plan to build you site from scratch or just want to play around with customization, here are a few basic concepts to explore:

Types of elements (display): inline, inline-block, and block
Layouts: flex and CSS grid
Positioning: absolute, fixed, static, relative
Element sizing and units: px, rem, em, vw, vh, etc,
Text alignment: left, center, right
Media queries and responsive styling
Embellishments: background color, text color, borders, shadows

Good luck!