loading...
Cover image for How To Build A Great Technical Portfolio

How To Build A Great Technical Portfolio

emmabostian profile image Emma Bostian ✨ ・8 min read

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 imperative you build a portfolio which encompasses you, and your work, at your best.

Let's take a look at some of my tips for building a great technical portfolio.

Note: These suggestions are built off of my personal experience. There are many ways to build a great portfolio, so use these as guidelines, not hard-and-fast rules. If you have a different approach that works for you, feel free to share it down below!

Woman

What makes a good portfolio

Portfolios explain who you are as a person and what type of skills you bring to the table. They're also a great way to showcase your development skills! There are a few key things you should incorporate to ensure your portfolio is top-notch.

Your portfolio should tell people about you

portfolios are your way to shine! What do you like to do for fun? What's your life story in a nutshell? What do you want people to know about you?

By adding in some personal touches, you're giving potential employers an idea about what it's like to work with you!

Here's a little snippet from my portfolio's about page. Feel free to check out the full page here.

Portfolio

Showcase your best work

If you have any projects or work that you're proud of, and which exemplify your coding or design abilities, your portfolio is the place to showcase them.

Many companies produce proprietary (confidential) work, thus you may be wondering how you can incorporate these into a public portfolio.

Unfortunately the answer is…you can't. My suggestion is to have two to three side projects which showcase your abilities. I know this isn't feasible for everyone, but there isn't much you can do when your work is confidential.

To display your work, describe the technologies you used, what your role was within the project (if applicable), include a screenshot or two, and post a link to the code (if you're able to).

Here's how I laid out the work section of my portfolio. You can check out the full page here.

Portfolio
Portfolio

Exemplify your skills

One great way to catch an employer's eye is to use your portfolio as a side project. I used Gatsby with React.js in order to build my portfolio simply because I wanted to experiment with a site generator and showcase my React skills.

I also designed my entire portfolio in Sketch prior to building it. I recommend drawing out a hierarchy of how you want to display your information.

Check out the "What Technology Should I Use To Build My Portfolio?" section below for more details on the different ways in which you can build your portfolio!

Sketch

Up-to-date

Recruiters and potential employers may be searching through your portfolio, even if you haven't updated it in years. Thus, it's important to keep your information as up-to-date as possible.

If you take on a new role, update your portfolio. If you build a cool new app, update your portfolio!

You want this to be a representation of you and your current skill-set. Thus, it's important you build something easily maintainable and which will stand the test of time.

Portfolio

Contact

You should always provide a method of contact in your portfolio. Truthfully, at this moment in time, I don't have a method of contact listed within mine (shame on me!).

If you don't provide a method of contact, recruiters can't contact you about potential roles.

So include a link to your social media (if you use that as a primary means of communication), your email, or your phone number (if you don't mind receiving a multitude of calls).

Give them some way to get in touch with you.

Design

Designing a portfolio can be the most difficult task, especially if you are a back-end developer or have little to no design experience.

When I'm building a site or application, I use dribbble for inspiration and color palettes. Additionally, you can check out Wix and Squarespace to see some of their templates. I'm not advising you rip off someone else's designs, but it's a good starting point for getting inspiration.

I recommend keeping the design fairly simple. You want something that will look good five or even ten years from now. Choose simple, but accessible colors. Use readable fonts at an appropriate size.

It also helps to write out an information architecture. What information do you want on your portfolio? How do you want it laid out? Single-page? Multiple routes? Make these decisions prior to coding and you'll save a ton of time.

If you need graphics, I recommend unDraw. They're free to use and easy to customize!

Dribbble

Tech

There are many different technologies with which you can choose to build your portfolio. Let's take a look at some of the choices for both back-end and front-end developers.

Back-end Developers

If you're a back-end developer, or aren't comfortable building a UI, you have several routes you can take.

1. Leverage a CMS

Content Management Systems (CMS) manage the creation and maintenance of digital content.

WordPress is one of the most popular content management systems out there, and is a great choice for developers who aren't super comfortable building their own UI.

Wordpress

2. Use vanilla HTML & CSS

A great way to branch out if you know a bit of basic web development is to build your site using vanilla HTML and CSS. Don't feel like you need to go overboard in the design/styling of the UI if that's not where your skills shine. But building your site in HTML and CSS show your ability to learn skills outside of your comfort zone.

You don't need to have JavaScript in order to create an awesome portfolio!

3. Use a CSS framework

If you're decently comfortable with basic HTML and CSS, but want a more consistent UI, you may want to check out a CSS framework.

CSS frameworks make it easier, and quicker, to style elements. It's important to note that if you're applying for a front-end developer role, using a CSS framework may not be the best option as employers will be looking for a developer who is comfortable developing CSS. But for a back-end developer, these can be a great option.

I recommend checking out Foundation, Bulma, SemanticUI, or Bootstrap.

Foundation

4. Use a website builder

If you just want to get your content up as quickly as possible, you can also go the route of using a website builder such as Wix or Squarespace.

These make it extremely quick and easy to deploy a website. You can even integrate a custom domain.

If, however, you are applying for a front-end developer role, I caution against using a website creation platform. This is a chance to showcase your development skills! Go big or go home!

Wix

Front-end Developers

If you're a front-end developer, there are many more options available for building your website.

1. Use vanilla HTML, CSS, & JavaScript

You can never go wrong with a simple vanilla website. There's no need to over-complicate the architecture of your portfolio if you don't want or need to. Just the simple fact that you built your website from scratch shows potential employers that you're willing to take some extra time to showcase your skills.

2. Use a JavaScript framework

You may want to use your portfolio as a way to practice (and showcase) your JavaScript abilities by leveraging a framework or library. I suggest choosing one you're comfortable with (or to heck with it, choose one you've been wanting to learn!) or which is pertinent to the types of roles you'll be looking for.

Often, these frameworks or libraries have a CLI that you can use to create a starter project. These can save you a ton of time with setting up an environment, and will keep you from having to compile, minimize, and lint your code on your own.

3. Use a static site generator

Static site generators are gaining notoriety in the tech industry with the adoption of popular libraries and frameworks (React, Vue, Angular, etc.). I built my portfolio using Gatsby: a site generator for React.

Gatsby

There are many different site generators to choose from such as Next.js for React applications and VuePress for Vue.js.

These offer many benefits such as plug-ins for image optimization, mobile-friendly responsiveness, and accessibility.

Tips For Coding Your Own Portfolio

  • Ensure your code is organized in a thoughtful and efficient way. It's extremely easy to throw all of your content into one page (and you can do that) but breaking different sections/content out into native web components or HTML pages can make a big difference.
  • Ensure your CSS is clean and organized. Try to stick to more modern CSS for positioning elements (such as Flexbox or CSS-Grid over floats). This shows you stay up-to-date with the specs.
  • Make use of semantic HTML. Structure your code into a hierarchy with the major regions defined. Use these landmark regions (<section>, <nav>, <header>, <aside>, <body>, etc.) to denote important landmarks of your portfolio. Try to use <div> and <span> sparingly.

Content

I always recommend including the following sections in your portfolio:

  • About: Who are you? What do you like to do in your spare time? Any fun facts?
  • Work/Projects/Skills: What technologies have you worked with? What projects have you built?
  • Blog (optional): If you have a blog, showcase it here.
  • Contact: How can recruiters get in touch?

Again, this is my personal preference. You may want to just create a landing page which routes to different platforms (social media, GitHub, etc.)


Your portfolio should be a representation of you. There is no one-size-fits-all for portfolios. Make it yours!

I hope this blog was useful and will encourage you to build an awesome portfolio to showcase your work. If you have any questions, don't hesitate to reach out on Twitter! Happy coding!

Discussion

pic
Editor guide
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
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
lfbantunes profile image
Luis Antunes

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
anurella profile image
Anurella

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

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
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
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
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
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
Collapse
ronancodes profile image
Ronan Connolly 🛠

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

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
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
anahitghazaryan profile image
Anahit Ghazaryan

How much does it cost to build an application?
The cost of this stage may vary from $5,000 to $25,000 and even go beyond. For the vast majority of projects, planning and analysis take 2-5 weeks.

App development cost calculation here.

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
Collapse
victorinspace profile image
Victor Velasquez

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

Collapse
anahitghazaryan profile image
Anahit Ghazaryan

How should be a great mobile application?

CHARACTERISTICS OF A GREAT MOBILE APPLICATION

Develop a Mobile App that Solves a Problem:

  1. Market Research for a Mobile App Development
  2. How to Develop the Mobile App that Adds Value
  3. Plan your Strategy for Mobile Application Development
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
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
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
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
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 ✨ Author

Hahah I got a laugh out of that

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

Woohoo! I hope you love it!

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! :)

Collapse
war4scode profile image
War4sCode

thank you so much, i hope this will be usefull