How To Build An Effective Developer Portfolio

Hello Fellow Codenewbies 👋,

What is a portfolio?
Do we need to have a portfolio as a developer?

We don't have to have a portfolio. But having a portfolio can make us stand out from those who don't have one.

What is a portfolio?

One definition of portfolio:

: a selection of a student's work (such as papers and tests) compiled over a period of time and used for assessing performance or progress
Merriam-Webster

A developer portfolio is a place to show projects, and to introduce ourselves.

Why do developers want to have a portfolio?

• Get a job
  We need to understand that portfolios are not resumes. They are a supplement to resumes. We use portfolios for recruiters to take a look at our projects.

• Build personal branding/online presence
  A portfolio can show who we really are and what we care about. And by doing that, we are building our own personal brand.

• Fun!
  We use our creativity and try out things to build a portfolio. What would be more fun than building something that lets us be who we are and in the end, we can present it to the world and say, "I built this, and this is me!"

What to include in the developer portfolio?

We need to bear in mind that non-technical people such as recruiters and hiring managers will also see our portfolio. Thus, first impressions count.

1. About

It is the most important section, but sometimes we don't take it seriously. About section is not the same as our bio.
The things to include here:

• WHO are we? WHAT matters to us? WHAT do we do? HOW do we do it?
• Our picture (or avatar) for people to recognize us.

I haven't done my portfolio. So this would be my homework 😅
But let me share here the rough draft of what I would do in this section.

2. Projects/Work

Be selective of which project(s) that we want to include here and think about quality over quantity. Don't forget to revisit and clean up our old projects to achieve good quality.
We'll want to show a range of skills, technologies, and variety. For example a CRUD app, or a Javascript game. Then link the live preview and the codebase.

Another homework for me to revisit my old projects and clean the code! 😆
Two projects that I've built with vanilla Javascript that I am proud of are:

• Guess The Number
  
  It is a game where users should guess a mystery number between 1 - 30 with some hints. This project is heavy with DOM manipulation.
  Click here for the live preview and here for the code.

• Form With Animated SVG
  
  When users click on an input field, it would trigger and animate the SVG. In this project, I played around with DOM Manipulation and animated CSS.
  Click here for the live preview and here for the code.

3. Contact

The contact section could make it easier for people to contact us. We can add our social media links here as well.

4. Additional

We can include our skills and tools that we use, also if we have any:

• Blog and technical writing
• Talks and/or awards
• Clients testimonials

We would also want to showcase our other projects by linking our GitHub and/or Codepen.

So now we know what we need to create an effective portfolio, we can start to build one.

How to start building the portfolio?

• Build it with whatever tech works for us.
  We can use WordPress, or static sites such as Gatsby, Jekyll, or Eleventy. Or we can even build it with only HTML and CSS because, why not? 😄

• Don't be afraid to use templates.
  Backend developers usually don't work with UI. Or, as a frontend developer, maybe designing is not our strength. In that case, don't spend so much time thinking about how to design the portfolio. Use a template and tweak it to make it our own.

Final Words

After knowing what it takes to create an efficient portfolio for developers, let's build it!

Thank you for reading!
Last but not least, you can find me on Twitter. Let's connect! 😊

Note:
This post is written based on Annie 🦄⚡'s talk, Building an effective developer portfolio.