Make a Programming Portfolio Website

Two people at a desk with laptops writing on sheet of paper

A Portfolio Website is an essential tool for any programmer looking for work or to showcase their brand. A portfolio is a fair bit different than a CV/Resume. A CV has a multitude of information, your work history, education, skills, etc. But really, at the end of the day, it’s all just words. A personal portfolio is the proof, it is a distillation of your worth as a coder, a trophy display of your projects and, since it’s a website, a project in and of itself.

So what goes into making a decent Portfolio? It’s easier than you might think.

Five paintbrushes side by side
Five paintbrushes side by side

The design of your portfolio page is quite important. The design is the first thing that people take notice of and it should be eye catching, but not too complex.

Personally, I didn’t go too ham on mine. I opted for a simple one-page portfolio when I started making my portfolio. Simple and elegant was my thought. I’ve been using a simple mix of HTML, CSS, and vanilla Javascript.

You’re not the only person that a potential employer will be looking at, so don’t make it too cluttered and difficult to navigate. It shouldn’t be a pain. If a they’re checking out your page, you want their experience to be quick, but also nice. You’re not the only person they’re looking at, so don’t make it too cluttered and difficult to navigate. It shouldn’t be a pain.

And make sure you’re paying attention to accessibility standards when making your portfolio as well.

In the essence of brevity and elegance, your portfolio should really just have three main sections, which should be easy to navigate to.

These are:

Person in a forest with their back to the camera
Person in a forest with their back to the camera

A description of who you are so that the people browing your page know a bit more about you as a person.

Don’t make it your whole life story, obviously, and there’s no need for all your work history and education, that’s what the CV/Resume is for. Just like our design, keep it succinct and memorable.

Explain a bit about yourself, where you’re from, how you came into programming, why you enjoy it, some of your other hobbies (so as not to seem like coding is your whole life). That should be more than enough to give a someone some perspective on you as a person.

You can also include a link to your blog (you should have a blog) here or you can add it to the Contact section, your choice.

A person dialing on a rotary phone
A person dialing on a rotary phone

This one is simple, but absolutely essential. If a potential employer is looking at your portfolio page, and is impressed, you better have a way for them to reach you.

In this section, you want to list your email address and phone number.

Other things that would be important to have in the contact section are links to your GitHub and LinkedIn profiles, so that if they want, they can further delve into who you are/what you do.

And even though you’ve likely already given it to them, it would be nice to include a link to download your CV/Resume

A stack of multiple binders
A stack of multiple binders

And finally a section for the whole reason you’re doing this in the first place.

Your projects.

Save this space for your best projects, not just every single little thing you’ve done (but hey, if you have loads of great projects, go wild).

Take care with each project listing. Give a good, but fairly brief explanation of what it does and why you made it. Have a list of all the technologies used in its creation, link to its repository on github (or repositories if you have both a front and back end), link to demos, and an image of the project to go alongside the description and links.

And that’s that. Hopefully this gives you an idea of why you should make yourself a portfolio page and how it really isn’t that daunting of a task.

Now, if you don’t mind, I’m gonna get back to making mine!