loading...

What I learned after reviewing over 40 developer portfolios - 9 tips for a better portfolio

kethmars profile image kethmars Updated on ・5 min read

When I started developing websites about ten years ago, one of the hardest things was to get someone else's opinion for my pages.

That's why decided to give back to the community by critically reviewing their portfolios. I took a look at things like

  • design, UX
  • content
  • performance.

After having watched over 40 of them, I have come up with 9 main tips I have for building a better portfolio!

All the tips can be seen with some examples in the following video in my YT channel called DeveloperHabits.

1. Define the purpose of your portfolio

Your portfolio must have a purpose. And that purpose defines your target audience. Think about it - is it built for recruiters, other developers, or for yourself?

If it's for other developers, having cool animations may sound reasonable, whereas if the main target audience are recruiters, UX, and the way you structure the content has great importance.

//Tam Sylte commented a really nice tip:

I'd add a small but simple suggestion: develop your 'voice'. Sometimes I see portfolios that use third person - 'John is a Javascript developer ...' for example. Better to say 'I've been a Javascript enthusiast since 2010 ...' or something along those lines. Imagine your audience (as mentioned in this article) and talk to that person - recruiter or fellow developer - as you might do face-to-face.

2. Bring out your skills and projects ASAP

Usually, when people visit your portfolio, it's because they want to know about your skills and projects.

I've seen many great one-pager portfolios where the "about me" gets more attention than the "projects".

In his portfolio, Robbie Antenesse has made projects as the second section of his portfolio
robbie.antenesse.net - In his portfolio, Robbie Antenesse has made "projects" as the second section of his portfolio

My recommendation is to either highlight your specific skills in the "about me" section or even better - make "projects" content block appear before the "about you" one.

3. Minimal, original, or both?

Regarding design and UX, it's important to make a conscious decision - how do you want your portfolio to look like?

If you're less experienced in web design, my recommendation is to go with something simple and functional. Do not use more than 3 main colors, have maximum of 2 different fonts, and keep the content straight-to-the-point.

Code With Ghazi is a good example of simple, yet original design
codewithghazi.com - Code With Ghazi is a good example of a simple, yet a bit different design

Once you've got more experienced with web design, you start to notice what are the good UX and design patterns. That is when originality and creativity can be brought in.

4. Less is more

As with coding, sometimes the simplest design/UX solutions are also the best.

It's especially important to keep in mind when adding animations. Having lots of interactivity and flashing elements on a page can seem cool, but from the UX perspective, it's usually not that good.

My recommendation is to keep things simple and really think if the elements and animations on your page do add any value.

5. Think about what is the first thing people should notice?

It takes less than one second to make up your first impression on the page.

That's why it is super vital to analyze what you want people to notice the first on your page. Is it your name? Is it your skills? Or some animation?

Abdessalam's page highlights the author's passion for web and UI/UX design
abdessalam-benharira.me - Abdessalam's page highlights the author's passion for web and UI/UX design

As for developer portfolios, my recommendation is to focus on your name + skillset or some nice slogan that gives away you're a developer.

6. Percentages and skill-bars tell me nothing

This is something I loved to do when I started web development - use percentages to display my skills in various technologies.

In reality, having your skills described using percentages or progress bars does not add any value. No one knows what does it actually means. By saying you have "100% skills in Javascript" it would leave the impression that you're the best JS developer in the world. Probably that's not the case.

If you do want to add some numerical value to your skills, use the number of years or projects. These metrics are universally understandable.

7. Do not make me click

A simple yet effective UX rule to keep in mind - reduce the number of clicks.

Each click on your website should have a meaning.
Eg when you have an "about me" link in the main navigation, it should direct me to a section where I can read about you.

There were a couple of cases where I clicked on a link only to be navigated to a section where another click was needed to see the actual content. It frustrating and increases the rate of churn.

Remember to think about it when adding navigations/links.

8. Make it easy to contact you!

Your portfolio is about showing your skills and projects. But do not forget to make it EASY to contact you.

My recommendation is to bring out your email or social media links in both the header and footer.

James Thomas has made the social media icons fixed on the page
jamesjacobthomas.com - The author has made social icons fixed on the page

I also liked some of the portfolios that had made their social media icons fixed when navigating the page - that way it was super convenient to contact the authors of the page.

9. Run Google Lighthouse to find the simplest mistakes!

Most of the portfolios I reviewed were in really good shape. How do I know? By running Google Lighthouse.

Google Lighthouse is a tool in Chrome browsers that gives you ACTIONABLE info about your site's performance, usage of best practices, accessibility, and SEO.

Google Lighthouse
The performance of that page could be improved a bit

Some of the cases where Lighthouse can be really helpful in terms of feedback:

  • you need to improve the SEO
  • your page performance can be improved by optimizing the images
  • the accessibility is not great

So next time before hitting the "deploy" button, do run the Google Lighthouse report.


And these are my main tips for developers regarding building a better portfolio!

I'm genuinely thankful for all the people who submitted their portfolios and also the feedback you provided.

Do you have any points you think I missed?


The reviews are visible in this Youtube playlist:
https://www.youtube.com/watch?v=mX_LrXEUecc&list=PL4gMAGIXQXfvRWZt2n1u_jLwSGd-Ogvi4


Oh and...! If you are interested in coding, growth mindset and are willing to share your experiences, ideas, then please do PM me on Twitter :)!

DeveloperHabits
📷 Youtube: developerHabits
👉 Twitter: https://twitter.com/developerHabits
👉 IG: https://www.instagram.com/developerhabits

Discussion

pic
Editor guide
Collapse
akdeberg profile image
Anik Khan

Cool stuff! 😀 Reviewing that many portfolios were a chore but you did with a great patient without sacrificing the details. Liked it. Thanks for the final insights👍🏼

Collapse
kethmars profile image
kethmars Author

Thank you Anik for the kind words and the support along the way :)! I

Collapse
akdeberg profile image
Anik Khan

My pleasure 😊 I admire people who works hard and help others.. Credit is yours 🙂

Collapse
tobto profile image
Yuri Polchenko

The keeping of nice working portfolio is the eternal headache. Especially for a guys as me, who are a painter, designer, coder, musician, and timeless freelancer. When I start to think of the concept I immediately blocking by jungle rain of ideas.

What I like to suggest - think of you and your portfolio as of the methaphor, maybe that help.

Thanks for useful article!

Collapse
kethmars profile image
kethmars Author

That's a really nice way of putting it - putting your personality into the portfolio :) !

Collapse
ehorodyski profile image
Eric Horodyski

I'm curious about where you rank a resume. I struggle there when I start a new job, I never keep up to date. Maybe it's a personal problem.

Collapse
kethmars profile image
kethmars Author

Hey Eric!

Sorry, I don't fully understand what you mean by "rank".

Collapse
ehorodyski profile image
Eric Horodyski

Sorry, late night post! Do you find a dev's resume relevant, and at what level of importance, in their portfolio site?

Collapse
maureento8888 profile image
Maureen To

This is actually important stuff! As a UI/UX designer practicing front-end development, I’ve seen too many portfolios that don’t meet accessibility and UI design fundamentals, especially when beginners start out in web design! ☝🏼But at the end of the day, it’s more room for improvement!

Collapse
kethmars profile image
kethmars Author

Yes yes yes!
As a developer, we sometimes tend to focus too much on the technical side, forgetting the goal of our projects. That's one of the main reasons why I created this video.

Good luck on your journey of front end ;)!

Collapse
maureento8888 profile image
Maureen To

Thank you so much! Good luck with your journey too ;)

Collapse
tambyrd profile image
Tam Sylte

I'd add a small but simple suggestion: develop your 'voice'. Sometimes I see portfolios that use third person - 'John is a Javascript developer ...' for example. Better to say 'I've been a Javascript enthusiast since 2010 ...' or something along those lines. Imagine your audience (as mentioned in this article) and talk to that person - recruiter or fellow developer - as you might do face-to-face.

Collapse
kethmars profile image
kethmars Author

Tam, that's a really nice tip! I'll include it in the article! Thank you!

Collapse
ekaranja profile image
Emmanuel

Great article 👍
I might have missed the submission period but I'd appreciate a review/critic on mine :)
ekaranja.netlify.app

Collapse
kethmars profile image
kethmars Author

Awesome use of colors - I like the use of gray and blue.
Also, the circles around the image.

Regarding content - the landing area is nice - you bring out who you are right away, so I don't have to spend time looking for info.
I'd change the order of "About me" and "What i do".

And woow - the dark mode is bold and cool!

Collapse
ekaranja profile image
Emmanuel

Thank you kethmars. I'll consider interchanging the two. I really appreciate your feedback :D

Collapse
kethmars profile image
kethmars Author

I will take a look at it during the weekend ;) ! Ty!

Collapse
akshayknz profile image
akshayknz

Yeh. That's just dumb. And that includes me

Collapse
anahitghazaryan profile image
Anahit Ghazaryan

Develop Voice over IP phone systems with the Addevice team.
Our strong focus on VoIP, knowledge, skills, and experience makes our team the obvious choice to partner with and deliver your next project.

Learn more about product we’ve built and solutions we offer for enterprises

Collapse
rebaiahmed profile image
Ahmed Rebai

Hi @kethmars , if you can give ma feedback about my portfolio rebaiahmed.github.io/
I just tried to put everything I have made during my studies and my professional experience
give it a look :D

Collapse
guzzur profile image
Felix Razykov

Amazing post. Makes me rethink my personal website's design...
If you got a minute to take a look at razzy.dev, I would appreciate it!

Collapse
kethmars profile image
kethmars Author

Hey Felix!
Thank you for the kind words.

Regarding your portfolio - atm when I landed on it, I didn't get much information about what it is. Just blog posts.

I recommend at least adding some kind of slogan on top of the container - who you are / what the page is about.

Good luck on building your new design and if you need any inspiration, I recommend checking the comment section in this post:
dev.to/kethmars/share-your-portfol...

Collapse
ajsevillano profile image
Antonio Sevillano

This post is a great help now that I'm trying to build a new portfolio, thanks! . I'm trying to build something that help me to find a job for a company but also I'd like to get some freelance jobs. What it would be a good approach for that?
Cheers!

Collapse
kethmars profile image
kethmars Author

Hey Sir!

Thank you for kind words.

I believe a traditional portfolio with list of your best projects would work well. And somewhere in the header for example mention that you're available for freelancing.

Collapse
spiritbro1 profile image
spiritbro1

so cool i definitely had though on making my project porto at the top but i thought it is bending the norm so thats why i put it in the bottom i will change the pattern now

Collapse
kethmars profile image
kethmars Author

Hey!

I'd say it is bending the norm BUT it's definitely doable. Check the example of robbie.antenesse.net/. He has a really short "about" in the landing area and then goes to projects straight away.

Collapse
cwraytech profile image
Christopher Wray

Thanks for sharing! Working on my personal portfolio and will definitely use this advice.

Collapse
jordanholtdev profile image
Jordan Holt

This is great! Thanks for taking the time to put this together. I'm redesigning my portfolio now and this was super helpful 😁. Well done on the video reviews, that must have been a lot of work.

Collapse
kethmars profile image
kethmars Author

Thank you sir for these kind words!!

Collapse
jpmti2016 profile image
Yampier Medina

Great ideas !!! Here is mine jpmti2016.github.io/

Collapse
katieadamsdev profile image
Katie Adams

Really like this article. Clear direction and easily actionable points of improvement! Great read. 😊

Collapse
kethmars profile image
kethmars Author

Thank you a lot, Katie :) !

Collapse
g33knoob profile image
G33kNoob

Nice. I think i will make my own cv

Collapse
ajax27 profile image
Shaun Collins

Great advice, often wondered about those progress bars. Thanks for the post!

Collapse
__victorchan profile image
Victor Chan

Thanks, that first tip really helped me 👍🏻

Collapse
kethmars profile image
kethmars Author

Thank you, Victor :) !

Collapse
daronge profile image
Sunmi

good posting! I will apply this guideline for portfolio website.

Collapse
thatafro profile image
Mehluli Hikwa

Currently working on re-branding self so this is helpful. I like tip number 8 - Quick and accessible contacts. Good read. Thank you

Collapse
hussamkhatib profile image
mohammed hussam

I don't understand why it's better to put projects first before your introduction .I think a dp and small about me section in the beginning is better. can you explain?

Collapse
kethmars profile image
kethmars Author

Hey! Good question!

The main reason for this is to get important information as soon as possible.

It's important to display valuable information asap - meaning skills and projects.

Having a short about section is ok, but at least on the landing page, it should be straight to the point and also highlight your skills. A longer about me can be down or on a separate page.

robbie.antenesse.net has done it really well imo.

Collapse
mfislam007 profile image
Md Farukul Islam

Thanks for these valuable information

Collapse
gab profile image
Gabriel Magalhães dos Santos

Thanks for the 6 tip, everytime I've seen this bars or percentages i've asked myself if that person learned ALL contente of somenthing

Collapse
kethmars profile image
kethmars Author

Haha, yeah. I've done it myself in the past and one of my interviewers asked "Sooooo...an expert in Javascript, eh? Let's test you".

Collapse
tacrew profile image
Tacrew

Nice! It's very helpful for me because I'm now finding a job. If you don't mind, may I translate this post in Japanese to help other Japanese beginner? I'll give you the back link, of course.

Collapse
kethmars profile image
kethmars Author

Hey Tacrew!

I'm happy you found the content useful! Yes, you can translate it. Please also send me the link so I can reference to it in this article :) !

Collapse
dailydevtips1 profile image
Chris Bongers

Awesome write-up!

Collapse
kethmars profile image
kethmars Author

Yeah...i Mean, if it serves some kind of purpose, it's completely ok. But if it's just a simple website, I guess there's no need for that.