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!
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.
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.
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.
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!
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.
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.
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!
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.
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.
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!
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.
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.
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!
Latest comments (48)
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 .
Hi man, thank! greats post🙌🏼
For detailed article I recommend to read this one - cleveroad.com/blog/app-development.... There's a very comprehensive approach to this
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?
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?
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 :)
Cool portfolio
Great post!
this tips will help me a lot with my portifolio! :)
Thank for this article I will be my portfolio soon as I become comfortable with front end development.
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 :)
What are you using to host?
I usually use Heroku.
However, I hear contentful and Netlify are great.
I use Netlify :)
And for your actual media content do you use Netlify CMS or something else?
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.
This is awesome, thank you for this!! :D
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.
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 😀
thank you