DEV Community

Cover image for Do's and Don'ts of Creating Your Portfolio Website

Do's and Don'ts of Creating Your Portfolio Website

Ioana Tiplea on August 21, 2022

A portfolio website is something most developers will attempt to build at some point in their careers. It can be a great tool for finding customers...
Collapse
 
danwalsh profile image
Dan Walsh

Really great article and solid advice. πŸ‘Œ

From my own experience a DON’T that I always recommend is β€œdon’t use progress bars nor percentages against your list of skills.” For example:

  • JavaScript - 95%
  • HTML - 99%
  • CSS - 99%
  • TypeScript - 90%
  • Figma - 80%

This is problematic because the values are too subjective. Does the above mean you know 99% of the CSS spec (even the draft spec) by rote? How do you measure that 5% difference between JS and TS? And how do you compare 80% β€œskill” in a design tool (Figma) against β€œskill” in a scripting language (JS)?

In my experience, it’s better to just list the skills and then show (rather than tell) your skill through your well developed and designed portfolio site and accompanying body of work.

Collapse
 
joeattardi profile image
Joe Attardi

Came to say this!

Also please no more typewriter animation

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Hey!

It was trendy a couple of years ago, I know I need to redo my portfolio but this isn't gonna happen anytime soon, stop reminding me about it πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
 
horosin profile image
Karol Horosin

Yes. And why would you downplay yourself?

Collapse
 
ioanat94 profile image
Ioana Tiplea

Well said, I totally agree!

Collapse
 
unknowngry profile image
Ryan Medina

What about rating skills out of 5?
For example Javascript 3/5

Collapse
 
danwalsh profile image
Dan Walsh • Edited

A fraction is just another way of writing a percentage (or a progress bar):

3/5 = 60% = β–“β–“β–“β–“β–“β–“β–‘β–‘β–‘β–‘

In my experience, you are better off listing JavaScript skills you are proficient in, and then providing examples of work that reflect those skills.

For example, you might highlight your skills with async/await and interacting with REST APIs. You could show this by including a project that demonstrates your understanding, such as a static blog that generates its pages from the dev.to API.

Collapse
 
shammisharma profile image
shammisharma • Edited

Neat Article Ioana. I created my portfolio site 3-4 months back. I think it follows most of the "Do's" that you have mentioned. Can I have some feedback on it please !
shammisharma.netlify.app

Thanks.

Collapse
 
ioanat94 profile image
Ioana Tiplea

Looks nice and clean! I wouldn't change anything, I think it does the job really well. I like the scrolling preview in your websites section. 😊

Collapse
 
shammisharma profile image
shammisharma

Thank you for your feedback Ioana. I'm glad you liked it.

Collapse
 
drfcozapata profile image
Francisco Zapata

It looks great.
Congratulations!

Collapse
 
dastasoft profile image
dastasoft

Good advice, totally agree!

I will add that redoing from scratch your portfolio is an option and in my case most of the time it's an "easy" project that shows me how I've improved since the last time I tried.

So if someone detects some red flags in their portfolio after reading this article, they can adjust it but if they did it a long time ago, it's totally fine to think about a new version.

One small nuance, don't use this as an excuse to build an unmaintainable portfolio :D

Collapse
 
darlio profile image
Darlio88

Great content

Collapse
 
creative_fuel22 profile image
Pauline Al

Thank you! I love reading various Do's and Don'ts, they're usually very informative :)

Collapse
 
r124ltech profile image
Rizal Iswandy

Witch one do you prefer to use for blog. Dark or light mode?

Collapse
 
ioanat94 profile image
Ioana Tiplea

I personally prefer using dark mode anywhere I can. πŸ‘

Collapse
 
ruthmoog profile image
ruthmoog

Best usability is giving the reader a choice! I am going to rework my (light mode) site so that users can choose dark/light/low-contrast modes, and, automatically read what the user's preference is via the browser so the site defaults to the mode they want without them needing to select it on the screen

Collapse
 
pengeszikra profile image
Peter Vivo • Edited

Thanks, for advices. I have 30+ years working experience (tons of different places, designer -> developer). So I simplify to whole portfolio to a single page CV ... really minimalist design. Plus link to one of my npm modules: react-troll with this sentence:

My favourite framework is react, with redux-saga, but without redux.

This will lead the interview to my well known area.

Collapse
 
baenencalin profile image
Calin Baenen

Good advise.

One of the few DEV articles I've seen have actual care and effort put into it.
Nice job authoring this!

Collapse
 
ioanat94 profile image
Ioana Tiplea

Thank you, it was lots of fun to write. 😊

Collapse
 
baenencalin profile image
Calin Baenen

Well I look forward to seeing future if you have plans to post more.

(Also I know this isn't the place, but welcome to DEV.)

Thread Thread
 
ioanat94 profile image
Ioana Tiplea

Thank you, I definitely plan on posting more in the future! 😊

Collapse
 
incrementis profile image
Akin C.

Hello Ioana Tiplea,

thank you for your article.
It was an easy read for me and I like how you show an example of things you recommend.

I also like the link which shows that mobile accounts for almost 60% of web traffic. This makes it not just a simple claim.

I also like that some terms link to websites that explain them (e.g. "call to action").

Collapse
 
ioanat94 profile image
Ioana Tiplea

Hey Akin, thank you for the feedback, I really appreciate it! 😊

Collapse
 
emerie55 profile image
Innocent Chiemerie Feargod

Wow nice one, I love this

Collapse
 
theharshsingh profile image
Harsh Singh

Thanks a lot. Here's my portfolio - harsh-singh.in. please do give your feedback on it. I have gone for an unconventional design, but something that is not very cluttered.

Collapse
 
ioanat94 profile image
Ioana Tiplea

Very cool! All the required info to contact you is immediately visible, and your projects are only one click away. It all works really well with the style you've chosen. An example of an unconventional design that works!

Your ASCII art is only half visible on mobile (you have to scroll sideways to see the rest), but I have no idea if it's even possible to change that. πŸ€”

Collapse
 
theharshsingh profile image
Harsh Singh

Thank you for the feedback πŸ˜„. I will try to improve the Ascii art so that it is also visible on mobile devices. I can reduce the font size or break the two words and display them on two different lines.

Collapse
 
baenencalin profile image
Calin Baenen • Edited

or that a single green leaf stands for MongoDB.

Aahhh, no Mx employer person, I have ten years of experience in Animal Crossing, not MongoDB.
I see the confusion.
Β Β Β Β /j

Collapse
 
ioanat94 profile image
Ioana Tiplea

Lol, final interview round: recruiter visits your town.

Collapse
 
baenencalin profile image
Calin Baenen

This is literally the interview process for being a full-time gamer. :ΓΎ

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

That last one... hurts πŸ˜‚πŸ˜‚πŸ˜‚

I did this in may 2020

And didn't edited it again 😳

Collapse
 
ioanat94 profile image
Ioana Tiplea

Maybe you should πŸ‘€

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Nevermind I'll re-do the entire thingy at any point πŸ˜…

Collapse
 
mandy32 profile image
Andrew mandela

Incredible adviceπŸ‘ŠπŸ»

Collapse
 
imayushseth profile image
Ayush Seth

Feedback required on my portfolio website dev nation,
ayushseth.netlify.app/
Appreciated!