DEV Community

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

kethmars on July 19, 2020

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 decid...
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

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
 
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

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
 
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

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

Collapse
 
tambyrd profile image
Tam Sylte • Edited

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

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

Collapse
 
maureento8888 profile image
Maureen T'O

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

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 T'O

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

Collapse
 
meme profile image
Maximiliano Cabrera

Gracias por el aporte! Muy simple y claro. Me encantΓ³ lo de Google Lighthouse!

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

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
 
ingosteinke profile image
Ingo Steinke, web developer

Hi Kethmar, thanks a lot for writing this article! When I started to relaunch my own portfolio website, I did a lot of research about other people's work, UX best practices etc. and found some doubtful advice that you manage to dispel here.

Especially telling developers to keep their sites simple and usable, not to overdo animation and to refrain from useless percentage bars (which still seem to be popular among a certain kind of recruiters). Also people should use Lighthouse (and axe for accessibility, and maybe check security headers and carbon footprint, if they care).

Here is my developer portfolio: ingo-steinke.com/

I shared more details and things I learned during my relaunch in my dev.to article here: dev.to/ingosteinke/creating-a-fast...

Collapse
 
kethmars profile image
kethmars

Thank you Ingo for your feedback!
And great job on the portfolio - it looks simple, well structured and informative!

Collapse
 
akshayknz profile image
akshayknz • Edited

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

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

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
 
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

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

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

Collapse
 
mfislam007 profile image
Md Farukul Islam

Thanks for these valuable information

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

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
 
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

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

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
 
spiritupbro profile image
spiritupbro

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

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

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

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

Thank you, Victor :) !

Collapse
 
sunmik profile image
Sunmi

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

Collapse
 
thatafro profile image
MΓ©hluli 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
 
umutyesildal profile image
umutyesildal

yesildal.me is a open source developer portfolio website made with Reactjs and Nextjs. Suitable for all kinds of developers!

Collapse
 
julimuz profile image
Julian MuΓ±oz

Nice recomendations, I'll use to create my portfolio. thanks!

Collapse
 
ulisesprog profile image
Barrionuevo Ulises • Edited

Super Like, thanks so much for the tips ! Good bless you

Collapse
 
the_previ profile image
Luca

Cool. Good advices! I preferred to keep it minimal, here is mine lucaprevitali.dev/

Collapse
 
sidcraftscode profile image
sid • Edited

About lighthouse....

Collapse
 
dailydevtips1 profile image
Chris Bongers

Awesome write-up!

Collapse
 
kethmars profile image
kethmars

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.

Collapse
 
kiraaziz profile image
kiraaziz

can u please check my portfolio 😁
kiraaziz.vercel.app