Building a developer portfolio is one of the most daunting tasks. Where do you start? What do you need in your portfolio?

A portfolio just like one for designers is a website that showcases all the work you have done.

Why do you need a portfolio?

Well, you already have a resume, and a LinkedIn profile, isn't that enough? While both of them are important, a portfolio has much more to it.

If your projects are a monument, A resume and a LinkedIn profile are like the broachers you get at the gates of the monument when you visit them, a bunch of screenshots, external links, and that's it. A portfolio, on the other hand, is more like a guided tour of your projects. Where you show (rather than just state) your skills. A portfolio lets you highlight the most impressive and important parts of your projects, stuff that isn't visible at the first glance, or things that you are really proud of.

So how do you build a decent portfolio?

Curating the projects.

Go deep not wide.

A portfolio is meant to be a showcase, a showcase of your best work and not an exhaustive list of all your work. Nobody will spend time looking at more than 3-4 projects. If you make it an exhaustive list, chances are a potential employer would end up looking at one of the least impressive ones.

Pick 4 projects that best represent your skills, and if you really want to include more than that consider putting up an archive link to all the other projects.

Make it Personal

The portfolio should reflect your personality. Avoid generic terms and language, you are making your personal portfolio, not a template for mass use. So make sure it reflects you!

Tell your story, include information that shows the human whose work they are looking at.

Be a tour guide

When it comes to the project description pages, guide the reader through the most important aspects of your projects, show them the challenges you went through, how the project came into being, highlight the sections that you are really proud of. Tell the story of your journey while working on the projects, the difficulties, the way you resolved them, what new things you came across, everything. Your project description pages should convey to employers that you're competent and enthusiastic.

Good UX/UI

Obviously, every website needs a decent UX/UI. Even if you are not a designer, it still matters that your portfolio site has a good design and aesthetic.

Domain and Hosting.

A portfolio site should probably be a static site and if possible prefer buying a domain for your portfolio site, eg yourname.com.

Make sure your portfolio follows accessibility standards.

General Layout

Obviously, the layout of your portfolio depends on your own designs and templates that you use, but let's talk basics, what are the most basic elements that every portfolio has.

• An About me section
  • A small about me section that highlights your personality and your background.
• A list of projects
  • a curated list of the projects you have worked on, with each project having a link to a project page that talks more about the project.
• Contact Information.

About the Project description pages, while it is a tricky and time-consuming thing to build decent project description pages. Nevertheless, these pages are important.

Here's a template drawn by Josh Comeau in his book "Building an effective dev portfolio" for the project description pages to give you a better idea.

Introduction

• High-level summary of what the project is
• List of core functionalities / interesting features
• Your role in the project.
• Technologies used
• Links to live demo + source code (if applicable)

Purpose and Goal

• Why did you build this project? Why is it important to you?
• What was the expected outcome of the project?
• What were the initial designs?
• Any other preliminary planning that you did which helps build a narrative

Spotlight

• What is the “killer feature” of your project?
• What were the technical hurdles that got in your way? Any major problems you hit during development?
• How did you solve those problems? What was the solution? Go deep here, and write with a developer in mind.

Current status

• This section is optional. If the project is actively being used by real people, talk a little bit about the current status, who uses it, why they use it, what they say to you about it, stuff like that.
• If the project was contrived specifically for the portfolio, omit this section.

Lessons Learned

• What did you learn doing this project? Feel free to list multiple things. Also, feel free to cover non-technical lessons. It’s great to talk about how you learned to use an advanced feature of a framework or library, but it’s just as valuable to talk about the project-management experience or things you learned about shipping projects.
• If you used a framework or other libraries/tools, was it a good choice? How did it help? In which ways was it insufficient?
• Is your project accessible? What did you learn about accessibility, while building this project? Describing how you tested your project using keyboard navigation or a screen reader can make for a really compelling story!
• How has this affected the work you’ve done since then? Real examples of how this project built your knowledge for future projects are fantastic.

In summary,

• Your Portfolio site should have a decent enough UI/UX
• Make sure it reflects your personality and the content isn't generic.
• It should have a minimum general layout with an About me section and a Project details list.
• Make sure your portfolio follows accessibility standards.
• Use a domain custom domain.
• Connect your social media profiles and blogs.

Are you looking to create a portfolio but don't know where to start? Hyperlog was made with just that use-case in mind. It allows you to build a portfolio according to your style while giving you the ability to add cool pluggable and themes to your project. Connect your repositories and get your code analyzed. The best part, you can get your portfolio on the WWW in under 5 minutes. Get custom domains, website analytics, and much more.

You focus on the code, we do the rest.