DEV Community

Cover image for Making An Awesome Developer Portfolio
Garv Nanwani for

Posted on • Originally published at

Making An Awesome Developer Portfolio

Recently, I posted about my portfolio on twitter and got a fantastic response to that.

Just completed my portfolio website, made it just with Html and CSS. Give it a look.
Any suggestions are welcome πŸ€—πŸ€­ #DEVCommunity #CodeNewbie #programming #javascript

β€” Garv Nanwani (@thisisgarv) September 17, 2020

I received many messages from you guys asking how to build a portfolio and what things to focus on.

So I decided to write an article giving some of my best tips on building a developer portfolio for yourself.

First of all, why you should have a developer portfolio?

The two main things that can help you get that job are the necessary skills, projects, and a place to showcase them.
That's where you need a killer portfolio.

A portfolio not only shows your works or what you know, but it represents your journey. You can have a great twitter profile or a good number of GitHub repositories. Still, when an employer needs to see your work collected in a single place, he won't go through your entire profile, spending hours studying you and finding your best repositories to get to know you. Having a developer portfolio gives him an excellent little summary of your journey, and he can judge that.

Enough talk, now lets jump straight to the things you should and should not do to make your portfolio stand out:

1) Have a primary focus

First, Clear why you want to make a developer portfolio.
It can be to get a job or to show off your skills.
Depending on your focus, try to write the things that are relevant to the job needs or the things you want people to know about you.

Don't add everything you have tried in your life; for example, just add MERN stack to get a MERN job. Don't be like I have done some angular, some Vue, and all that. Be specific and confident in the things you mention.

2) A Clean UI

The design and overall look of your site are the first things that anyone sees in your portfolio. It may seem obvious at first, but most people don't take their portfolio seriously. They think a portfolio is just a place to show your skills, but no, your portfolio itself is your biggest work.

So, do spend some time planning out what to include in your portfolio and what to not; the color scheme, layout, responsiveness, everything combined lead to an outstanding developer portfolio.

3) Put a smiling photo of yours in the portfolio

Your portfolio should have a photo of yours, no matter what. It's one of the essential tips and has a massive impact on the person seeing your portfolio. It should be a smiling photo of you, no matter how you look.

Don't try to put a smiling photo working on a laptop or something like your side profile. Try to be real. A genuine smile makes a difference, be proud of you and your smile. It will help you build trust, and people will feel comfortable connecting with you.

4) Your portfolio should tell a story

What every human being understands are emotions and stories. When your portfolio conveys your story, people will be able to see your struggle and will appreciate your work. It can be a timeline or the journey behind the projects you made, the problems you faced, what you learned, etc.

Now, Don't write long essays that people find hard to read. Mention everything in points, and bring attention to the crucial parts.

5) Put high-quality projects on your portfolio

Let them be two or three only, but they should represent your experience. Three high-quality projects are enough to get you that edge from others, don't just put a picture and link. Add a story to that like tell:

  • how you felt before going to that project
  • what you learned out of it
  • what was its benefit, your skill level before and after
  • what problems you faced
  • What steps did you take to get to that point
  • screenshot of some code sample in that project that you liked
  • how that part of code made you learn something new
  • how you made that better Again, be real and tell your journey through it.

6) Creativity shines through boundaries

Do not be creative, and by that, I mean to have something different, but don't overdo things or try to act cool.
Research portfolios of top developers and learn from them. Learn how they mention so many things in such a lovely little short format and get impressed by their simplicity.
Don't get too many animations or other hi-fi stuff on the site. Not only will they decrease the website's performance, but most people find these too fancy, and it gets irritating sometimes.

7) Lastly, be yourself

By that, I mean, don't try to act smart or put some cheesing lines. Just use your own words. Your language will help you connect better. Don't use cursing or BS words ;). Please keep it clean, keep it relevant, and there you go. Remember, nobody can write your story better than you.

Some extra tips

  • Don't put a form on your website. Nobody fills it. Just place an email icon and make it big enough for people to see and reach you.
  • Avoid using percentage bars in your skills section. Just write proficient in and comfortable with, and that's it. Percentages can be relative, and you really can't judge how good you are unless you have real-world experience.
  • Have a well-maintained Linkedin and twitter profile and keep all the social links updated on the website so that people find it easy to reach out to you.

If you want to check out my portfolio, here's a link to that-
My Portfolio Garv Nanwani

It's still a work in progress, but I will be happy to know your thoughts and suggestions. delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Daily Poster

Top comments (4)

amiamigo profile image
Ami Amigo

Very nice! So which tech stack did you use? Any JS Frameworks or CSS libraries? I also interested in your did you achieve that?

garvnanwani profile image
Garv Nanwani

No I didn't use any framework for this one, it's pure html and css.
The timeline can be achieved by seperating each component into a div and then giving it a dashed border and a rounded corner

shaijut profile image
Shaiju T • Edited

Nice πŸ˜„, simple and clear.

garvnanwani profile image
Garv Nanwani

Glad you liked it πŸ˜„