DEV Community

Cover image for How To Build A Great Technical Portfolio

How To Build A Great Technical Portfolio

Emma Bostian ✨ on January 09, 2019

Portfolios are a representation of you, and they're often one of the first impressions a recruiter will have of you and your work. Thus, it's imper...
Collapse
 
jahirfiquitiva profile image
Jahir Fiquitiva

Hi Emma... thanks for your post

I checked your website and loved everything except this color: rgb(247, 192, 171) 😅 .. I think it is slightly too light to be in front of a white background, and some things are also hard to read. A darker shade would surely fit better 🤗🙌🏼

Btw, I would like to share my portfolio in case you have some spare time to check it and provide some feedback... Thanks in advance! 😀🙏🏼 jahir.xyz/

Collapse
 
frcharry profile image
Fabio Ricardo Charry

Hola Jahir,

Tu portafolio se vé súper, en especial el efecto del background. También soy de Bogotá, estoy ingresando al mundo de desarrollo web mediante un programa de Fullstack, tengo que trabajar mucho para llegar a ese nivel, felicitaciones!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Hombre que bueno encontrar a algunos de mis paisanos por acá jejeje

Collapse
 
jahirfiquitiva profile image
Jahir Fiquitiva

Gracias! 🙌🏼

Collapse
 
lfbantunes profile image
Luis Antunes • Edited

This is just being petty and I don't know how you generate the points in the background, but you should put a limit on the amount you can create, cause I was able to break its performance and make the site unusable (with mouse input repeater of course, but still).

Also maybe just make the lines follow the cursor when hovering something interactive and not every time.

Collapse
 
jahirfiquitiva profile image
Jahir Fiquitiva

Thanks for the feedback. Will keep it in mind

Collapse
 
michaelhonan profile image
Michael

I'll be honest. I like the aesthetic of your site. Except there's a few things that caused me some annoyance:

  • The cursor change. I don't personally like it, and I think it takes away from a site's accessibility when you change the user's cursor. Also, it's not a cursor shape either.

  • The background, and how it interacts with the cursor is actually distracting when using the site. Not a fan.

  • The navigation bar at the top is a little interesting. As you scroll, it flicks from Home, to Projects, then to Contact. However, it bothers me a little that Contact is not next to Projects. If you were to put Contact after Projects, then it'd flow nicer. And maybe add some kind of separator to About and Thanks so that it's clear they're not part of the "scrollable navigation".

Just my two cents, up to you whether you wanna change anything. It's your site, and it's pretty. :)

Collapse
 
anurella profile image
Anurella • Edited

beautiful site and well done. but a small bug with the send button

Collapse
 
jahirfiquitiva profile image
Jahir Fiquitiva

Thanks, can you please elaborate on what the issue is so I can fix it in the future? 🤔

Thread Thread
 
anurella profile image
Anurella • Edited

sorry about the delay in reply, please find attached the image. I experienced this in fire fox browser.

Collapse
 
developerkaren profile image
Karen Efereyan

I want your hardware🤣🤣. Nice portfolio

Collapse
 
joppedc profile image
JoppeDC

Sweet post! As a backend dev i've always struggled with building a portfolio. On average, the backend work is not something that people see.

There's the basic backend projects that everyone does, like a todolist app, where you add and remove items, a simple blog where you add & remove pages, but this doesnt show anything to potential clients / employers.

Any ideas on this?

Collapse
 
dfockler profile image
Dan Fockler

I feel your pain. 🙋‍♂️ I think having good personal descriptions of what you worked on is important and what you got out of it. If someone can't see the code or product, having good examples and stories around your experience working on those things can go a long way.

Collapse
 
whitefluffyc profile image
Tobias Haugen

Lovely article. Tons of great advice in here! I'm glad to see you advocate for using vanilla HTML, CSS and JavaScript. When creating my own portfolio site, tobiashaugen.se/, I really gave in to my appetite for minimalism and simplicity. Thanks for sharing!

Collapse
 
developerkaren profile image
Karen Efereyan

Looks very good. Simple too. Try implementing a dark theme though. The current theme hurts my eyes

Collapse
 
whitefluffyc profile image
Tobias Haugen

Haha thank you for the response! I haven't done any work on my portfolio in a long time, but adding a dark theme would be nice.

Collapse
 
kylerconway profile image
Kyle R. Conway

Timely post for me! Just this week I've been thinking about assembling and trying to fairly document and communicate the work I've done over the past number of years (some more exciting than others). Very much appreciate the post.

Collapse
 
stefandorresteijn profile image
Stefan Dorresteijn

Nice post! I've recently started rebuilding my portfolio from scratch. I'm switching from a template I bought a few years(!) ago, to building something in Vue to showcase not just my skills, but also my preferences.

I think if you enjoy writing, you definitely need to put it on your portfolio. Devs who can write well are simply worth more than devs who can't. I think it's more important for a recruiter to see the skills that make you special, than just seeing that you know a couple languages.

Collapse
 
rahilka profile image
Rahilka Simonova

Thanks a lot for sharing Emma, really great article! Although I'm a front end developer, I'm always struggling with design and looking for inspiration out there on the web. My portfolio is rahilkasimonova.com, and doesn't have outstanding design, but I hope I'll be able to upgrade it any time soon :)

Collapse
 
developerkaren profile image
Karen Efereyan

Cool portfolio

Collapse
 
kustomdesigner profile image
Michael Hicks

Your website is great and skills are top knotch however you are lacking basic marketing skills. Every book you have on your site should have a link to your Amazon affiliate account. You are missing out on free money. Great read and thanks for your contribution to this amazing community.

Collapse
 
ronancodes profile image
Ronan Connolly 🛠

What are you using to host?
I usually use Heroku.
However, I hear contentful and Netlify are great.

Collapse
 
emmabostian profile image
Emma Bostian ✨

I use Netlify :)

Collapse
 
ronancodes profile image
Ronan Connolly 🛠

And for your actual media content do you use Netlify CMS or something else?

Collapse
 
bowlendev profile image
Ryan Bowlen

Your site looks awesome! Thanks for the tips. I sometimes fall into the trap of thinking that I should pull any personality out of my projects and just let the work speak for itself. I will definitely consider how to include a bit more personality in the future.

Collapse
 
fabiorosado profile image
Fabio Rosado

Great tips Emma and I had a look at your portfolio and it looks pretty awesome, love how minimalist it looks.

When I started I created my first layout straight out of my head, some things worked well others didn't, last year I decided to update the design of my site and I am mostly happy with it, the reason for that was because I used adobe xd to design it before implementing the code.

So I agree with your suggestion to design the layout first before jumping into code, it sure helps when you are trying to structure your things 😀

Collapse
 
davidszabo97 profile image
Dávid Szabó

Emma, this is an epic post! Thank you for putting this together! I love it! I'll definitely come back a few times to read through again and again!

I am workin on my new website related to my freelancing career so this post is really handy!

Collapse
 
emmabostian profile image
Emma Bostian ✨

Aw thank you!

Collapse
 
rafaelbadan profile image
Rafael

Thanks a lot Emma, that's a very inspiring post :)
I'm just starting as a developer and was looking for some advice for creating my portfolio (the sooner the better I think).

I tested Jekyll for the nice integration with Github and GitLab, but considering I'll probably stick to the NodeJS and React learning path, I'm more inclined to pick Gatsby, and use this as a project in my showcase ;)

PS.: I also love cats and have three of them at home :)

Collapse
 
anahit33 profile image
Anahit Ghazaryan

Are you interested in How Much Does It Cost An App ? We should first get through fundamental aspects that may give you a rough idea of app design costs .

Collapse
 
skaytech profile image
skaytech

Hi Emma.. Great Post!!

I loved your website. I'm going to start looking to build a portfolio site of my own.
Is there any article that describes how to plugin your blog into a custom website?
E.g. Wordpress naturally has a way to do this, since it's a CMS. But with a custom website built using Gatsby, Reactjs, how will I create new posts?

Collapse
 
khalilsaboor profile image
Khalil Saboor

I really appreciate you for writing this as a Back-end Dev who didn't know where to start. I was going to use a web Framework but just stuck to the fundamentals of HTML, CSS and JS to write my site.

Collapse
 
victorinspace profile image
Victor Velasquez

This is awesome, thank you for this!! :D

Collapse
 
tshimsthedoor profile image
Tresor Tshimanga

Thank for this article I will be my portfolio soon as I become comfortable with front end development.

Collapse
 
codemouse92 profile image
Jason C. McDonald

Hate to break your perfect 70/20/100 split, but I really had to give you a heart and unicorn, plus bookmark this for later reference. Very helpful guide!

Collapse
 
emmabostian profile image
Emma Bostian ✨

HAHA thanks!

Collapse
 
anurella profile image
Anurella

thank you

Collapse
 
majidzeno profile image
Majid Eltayeb

Great Article!
Thanks, Emma for sharing this, you really inspired me to update my portfolio, my issue is most of the best-looking websites that I've delivered already have been changed because big companies don't use the same design for more than a year - I think- so what do you suggest in this case? do I put the old design and doesn't provide a link or try to find any side project?

Collapse
 
donnacamos profile image
Donna Amos

This is the most comprehensive article on a portfolio page I've ever read. You've inspired me to update mine. Keep up the good work! I love your posts and look forward to the next one.❤

Collapse
 
emmabostian profile image
Emma Bostian ✨

Aw, thank you!!

Collapse
 
imvinaypatil profile image
Vinay Patil

Nice, and thanks for the tips. But you should consider rechecking this statement "It was during my time at IBM that I met my current husband".

Collapse
 
emmabostian profile image
Emma Bostian ✨

Hahah I got a laugh out of that

Collapse
 
dannydore profile image
Danny Dore

Thanks Emma for your post! You’ve encouraged me to rebuild my portfolio site with some Front End frameworks/tools/libraries. React and Gatsby sound interesting!

Collapse
 
emmabostian profile image
Emma Bostian ✨

Woohoo! I hope you love it!

Collapse
 
gregoryandersen profile image
gregoryandersen

For detailed article I recommend to read this one - cleveroad.com/blog/app-development.... There's a very comprehensive approach to this

Collapse
 
kleguizamon profile image
Kevin Leguizamon

Hi man, thank! greats post🙌🏼

Collapse
 
valeriopisapia profile image
Valerio

Thanks Emma :)
Your website is cool. Congrats.
I'd like to build my personal portfolio using Gatsby as well in order to try it.
It looks like really promising.

Collapse
 
gabrielfellone profile image
Gabriel Fellone

Great post!
this tips will help me a lot with my portifolio! :)