How to Create a Portfolio Site That Will Get You Hired

Jacco Blankenspoor

Being a developer, designer or writer is a great way of making a living. But what if you need to attract a new job or clients? In today’s market competition is fierce, which means you need to stand out.

Having a professional LinkedIn profile is surely a good start, but if you really want people’s attention you need to market yourself with a portfolio site. This is basically your personal LinkedIn page, only with much more room to display your skills.

Developers, designers and writers each have different skills and work to display, but they all have one thing in common: they need to sell themselves to potential clients.

In this article I will show you some useful tips for making a portfolio site, along with some great live examples.

Why a portfolio site?

Having a professional LinkedIn profile is one thing, but you can really show your skills using your own portfolio site. Why? Freedom! You can do anything you want with it, and really make a lasting impression. You can even win prizes with it.

What you want is potential clients visiting your site and instantly thinking, “I want that too!” It’s your virtual showroom, which prospective clients can even show others when they need to convince someone else.

Even the most professional LinkedIn profile looks like every other profile on the service, but your site is your way of saying, “This is me, and this is what I can do for you.”

Need more convincing? Well, this is the LinkedIn profile of the guy with the most awesome portfolio site I’ve even seen.

It’s all about selling yourself

It’s sounds cliche, but you are your own best salesman. This means you have to sell yourself without losing your own identity.

As you will see in the below examples, there are many ways to display yourself. You can choose to become a cartoon, use tons of photographs, or impress with your writing.

Tailor your site to your personality

What’s important is that you feel comfortable on your own site. If you’re a bit shy, make a cartoon of yourself so you don’t have to use your picture online. Make your site wild and extravagant if that’s what describes you best. Make your site your online equivalent, give it character while still keeping a professional touch when it comes to wording.

Keep it relevant

Make sure your portfolio includes relevant work. Only list team efforts if you made a significant contribution which can be identified as your work. Never take credit for other people’s work. Specify what you did, and how it benefited the whole process. If possible, make a screenshot to show your part.

Trim the fat

It’s okay if you sculpt your portfolio a bit by showing only the work you like. We all need to make a living, sometimes taking on work we don’t really prefer to earn a few bucks. Use your portfolio to target the type of work you do prefer.

Add context

Give prospective clients an idea how it is to work with you. When working on-site, include testimonials from previous customers or co-workers. When doing off-site only, let people know what they can expect when it comes to communication, managing deadlines or your work hours.

Make a good impression

See your portfolio site as the equivalent of sending in a job application, convincing prospects why they should hire you. Try to make the best first impression you can, with the added benefit of prospects coming back to your site for fun when it’s really slick.

Oh, don’t use the word ‘we’ when you’re just on your own…

What to include?

There are a few basic things every portfolio site must have:

  • Your name and picture
  • A little bit about who you are
  • Your contact details
  • Recent work
  • Your skills

Sounds easy, right? Let’s have a look at some examples and see how a little (or in some cases a very large) bit of creativity can make this list come alive.

Developer portfolio examples

Keith Clark

Keith Clark

You might wonder what a video game has to do with an online portfolio. Well this is the website of Keith Clark who is some kind of CSS master. This is is an example of his work using HTML and CSS3. Now that’s something to use for “Recent Work”.

Jean Helfenstein

Jean Helfenstein

Meet Jean Helfenstein, creative developer and a real expert on front-end developing. His homepage is a showcase in itself, but also take a look on his projects and playground pages.

Tamerlan Soziev

Tamerlan Soziev

Not as fancy as the other two, but still a great portfolio site. Tamerlan is more proficient in back-end coding, and makes excellent use of his portfolio by showing his position for each project. He has a clean list of his skills and services, and flashing the Time Magazine badge can only help.

Designer portfolio examples

Robby Leonardi

Robby Leonardi

I already mentioned Robby’s site above, because this is truly the greatest portfolio site I’ve even seen. The Design section is a beauty, but his interactive resume is simply a work of art. Robby is an expert in both design and coding, leaving no one questioning his skills with his site.

Heraldur Thorliefsson

Haraldur Thorleifsson

Haraldur works for a design agency working closely with Google. While his homepage might seem not that impressive, his project descriptions certainly are. This is where he displays the project details, and more importantly his role in the project.

Adham Dannaway

Adham Dannaway

Adham is both a designer and coder, and found a perfect way of showcasing his work right on the homepage. He also found a great way of using one of his interests (Jedis) for grading his skills. He made a very nice recent work overview as well.

Writer portfolio examples

Kristi Hines

Kristi Hines

While Kristi may not have as flashy a site as the guys above, it’s a perfect site for the writer she is. She shows exactly what you can hire her for and has some impressive testimonials. Her site gives you the feeling she is a trustworthy writer who knows how to deliver quality work.

Sally Bacchetta

Sally Bacchetta

It’s great to see how writers say it with words, because that’s exactly what you hire them for. Instead of throwing around pictures, Sally makes sure everything she does is properly described. And she uses two little magic words which gives you an instant sense of quality: Award-winning.

Aubre Andrus

Aubre Andrus

Let’s conclude this list with a writer who apparently is into superheroes (remember the point about giving it character?). Aubre is a versatile writer who therefore has a few different portfolio pages. She even has her own trailer. She makes it clear what she likes to write about, with active social media accounts to support her statement.

Conclusion

Different types of skills allow for different ways of showcasing your work, that’s for sure. I hope I’ve inspired you with these examples to make the most out of your own portfolio site. The sky really is the limit (yes, let’s thrown in another cliche). The competition is fierce, but a portfolio site is a great project to work on in your spare time. Just make sure to create a Wow!-factor (last cliche, I promise) and you’re golden.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dojoVader

    Am curious what of a Developer’s website, i have changed my website too many times, Am not really a Web designer more of the coding type, i don’t want to be perceived as a designer. any pointers on the type of portfolio

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi, if you’re not a designer yourself you can always use a template. I do believe in presentation, so even when you don’t want to be perceived as a designer it wouldn’t hurt to have a great looking website. If you don’t have working examples to show you can always make a detailed description of some of your work, including your input, problems you were solving and languages you used.

  • M S

    Sorry to be a buzz-kill, but…

    Most of those portfolios are like example collections of old and new way to fill sites with pointless bling that kills usability.

    Mystery-meat navigation seems to be very popular, for example.

    Unreadable text on frilly backgrounds, choppy intro-animations, landing-page (that you have to click past), blocking popups, etc.

    Does stuff like that REALLY get you hired, and in what kind of positions?
    As Dilberts boss?

    • Dante

      +1

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi, not sure I agree with you on this. I believe these examples are perfectly suited for their intended purpose, basically to show-off your skills. I agree usability is important, and using a Mario style layout is far but usable, but it really shows what this guy can do. Usability is a skill on its own, so you can always use an UX-expert to guide creativity.

  • KathrynDBradsher

    Start working at home>>CLICK NEXT TAB FOR MORE INFO AND HELP

  • Dante

    first site i visited was so user unfriendly (Keith Clark) I closed it after 10 sec…now imagine I was his future employer…Less is more and it will always be…

    • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

      Hi! I think Keith did an excellent job with showing his skills, but the example I used can be a bit user unfriendly indeed. But being able to create something like this would definetely convince me if I were to hire him (but that’s me, I am sucker for these things :-). What Keith shows is that there’s a huge difference in being able to make something look nice, and making it useful. Would be a perfect fit in a team though.

  • http://www.buildyourownwebstore.com/ Jacco Blankenspoor

    Cool is the right word :-)