DEV Community

Cover image for How To Build An Effective Developer Portfolio
Ayu Adiati
Ayu Adiati

Posted on • Originally published at adiati.com

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.
About Ayu Adiati.png

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
    guess-hint.jpg
    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
    form with animated svg.jpg
    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.

Top comments (8)

Collapse
 
harshrathod50 profile image
Harsh Rathod

I'm a back-end developer and trying my best to become a full-stack one. Currently learning CSS animation to improve my site: harshrathod.dev. I also have a blog: blog.harshrathod.dev. Please consider signing up for my newsletter if you liked my posts. The first ReactJS project I made while learning ReactJS: sortify.harshrathod.dev.

Collapse
 
adiatiayu profile image
Ayu Adiati

I wish you a nice journey towards full-stack developer, Harsh! πŸ˜ƒ

Collapse
 
king11 profile image
Lakshya Singh

I recently started working on mine :)

Collapse
 
adiatiayu profile image
Ayu Adiati

Nice! :)
Which tech do you use?

Collapse
 
king11 profile image
Lakshya Singh • Edited

I am using ViteJS with VueJS for CSS it's TailwindCSS and GSAP for Animations.

Thread Thread
 
adiatiayu profile image
Ayu Adiati

Nice! I recently tried out ViteJS with React template and I love it! I'm still learning React, so I don't really need the complex bundles that come with CRA. The time difference between Vite & CRA for installation is very huge!
Would love to see your portfolio πŸ˜„

Collapse
 
souksyp profile image
Souk Syp.

... Let’s build it and share it on Dev.to

Collapse
 
adiatiayu profile image
Ayu Adiati

That's a spirit! πŸ˜ƒ