How to Create a Portfolio Site That Will Get You Hired

By Jacco Blankenspoor
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Trending posts on SitePoint today:

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.


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.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • 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

    • 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


    • 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.

    • I had the same feeling too, which is why when I did my own portfolio site I took those annoyances into consideration.

      The example being the Mario thing was just cool, but honestly I just didn’t really read anything when I think about it, It would be good as a sample of the work but not the main one.

      I actually had “scroll down” first until I thought of what the call-to-action was for my site which is “get my resume or contact me” because in the end that’s what you want them to do rather than just admire your work.

  • 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…

    • 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.

      • Dante

        Cool. I disagree. This: doesn’t work, it’s buggy, it lags and not something I would use to promote my work but hey that’s just me.

        • laurens

          It probably depends, it works fine here, I can walk fine, cannot walk through objects, everything seem good to me, but perhaps a bit slow with walking, and low fps. But still, it’s a game made with CSS, of course it show skills. Not everyone can make something like this.

    • I think it’s more that Keith Clark’s page should be one of his “showcase” pieces and not his front door.

  • madmac10

    Robby Leonardi’s site continues to be the gold standard. This guy never needs to ask for a job again. I wish my portfolio could even begin to approach this level of cool.

  • Cool is the right word :-)

  • andreafrovin

    Hi, very good tips about the portfolio. I also believe that you need to connect your personal portfolio with social networks so potential employers and other designers will be able to find you easier. Maybe this will be of use to be able to connect to different social networks for designer to showcase their portfolio.

  • In the end if you analyse the visitors to your site and your portfolio page visits you should have a good idea whether it works for your market. I have been designing websites for nearly 10 years and we have had many versions of our website and the portfolio page. Some with detailed stories, others with sliders, some with just links, others with part image part text. We are finding the current iteration working well. Tell me what you think!

    • If you are planning to sell your services you may need to have faster delivered site. Perhaps you should consider using CloudFlare I think it has a free low usage tier.

  • sabuj

    here is my portfolio …… please suggest me the features that will make it more professional to looks

  • Create a free online portfolio website with Pixpa. Make a website that’s truly unique and showcase your design, photography and other creative work

  • Arthur Prather

    “What to include… Your name and picture?” Name Of course but Picture — I wholeheartedly disagree!

  • Shahzaib Hassan

    Thanks for such nice article

  • Priya Patel

    Any suggestions for a beginner. Before creating a portfolio I should have some work under my belt yes? Any advice would be greatly appreciated especially on acquiring projects. I have recently completed front end web developer courses with some experience in server side work as well.