This page is a work in progress.You can help improve it. →

Portfolios & Templates

As a Developer, your portfolio is more than an online resume. Your portfolio allows you to showcase your projects, your personality, and highlight other skills you have. It is a way of enhancing what your resume tells someone about you.

First Impression

As you are building your portfolio, it is essential to keep in mind the first impression someone gets from your site. Employers look through 5 to 30+ portfolios when hiring; they might only spend 5 seconds looking at each portfolio unless something grabs their attention.

So how do you make the right first impression?

  • Start with a clear hierarchy of information
  • The site needs to be simple and aesthetically pleasing
  • The typography needs to be appropriate & readable

Your Story

Your portfolio gives you a chance to display your work, but you can also tell visitors about yourself. Add an About Me or Bio section where you can tell a bit about yourself but keep it brief enough to scan. Another way to let visitors know more about you is by having a professional photo of yourself.

Contact Info

Nothing is more important than giving visitors multiple ways of contacting you. Like your resume, it's essential to list the standard contact information such as email, phone, LinkedIn, and GitHub. If you have other accounts that can share your skills, this is a chance to do that; other accounts might include:

  • Twitter
  • Blog
  • Instagram
  • Dribble

Consider having a sticky header that stays on-screen when the visitor scrolls. Using a sticky header means your contact information is always visible.

Display of your Work

You have your resume and GitHub to help support your skills, but both require someone to look for your projects, and there is a chance they may not even see your best work. Your portfolio gives you a chance to show off your favorite.

When choosing projects for your portfolio, pick at least three to five of your favorites. They should be your best work and the best parts of that work. If you are a new graduate, think of your assignments as projects when you describe them.

If a project isn't working 100% because you are still working on it, add a note that it is a work in progress. Even go as far as to add wording around what the end goal is or what features you plan to add.

After graduation or when looking for new positions, start working on freelance or real-world projects that you can add to your portfolio. Your work should be a mix of what you have done and what you want to do.

The most import things to remember about your projects are:

  • Don't present anything you aren't proud of
  • Own it or don't show it, even mistakes can bring growth

So what information should you provide when showcasing your projects: Show the details and the big picture, write a description that gives an overview of the project and add small details about code you are proud you wrote. Is it mobile-friendly? Talk about what you did to make the transitions between screen-sizes work smoothly. Show an example of it working on a mobile device. Did you build it with another developer or a team? Talk about how you worked together and the lessons you learned during the process.

Building your portfolio from scratch vs. Templates

Sometimes the hardest part about creating a portfolio is the design process. Not every developer has design experience to tell them what looks right or how a user should interact with their portfolio.

If you have a background in design, creating your customer portfolio might seem easy enough. Here are some things to keep in mind before you get started: Start with a minimum viable product. Think about the information you need vs. the extras you want to add. When styling, start with mobile-first then check how it looks on tablet and desktop

If you are not a designer, the best option is to find a template that works for you.

Here are some portfolio template resources to help you get started:

Need some inspiration - check out these portfolios

Downside of Templates

While templates are a fantastic tool, you should remember that you are not the only one using that template. Take a look at these examples that use the same template.

Example 1

Example 2

Customizing the layout, colors, and fonts can make a template feel less like a template.

How to get your portfolio live:

Note: You cannot use PDFs with Surge, so be sure to link to Drive, Dropbox, or another way of sharing a link to a file


© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.