Portfolio

Creating a unique first impression
Upon arriving at Pierre.io you're greeted with a beautiful full-page screen with particles that look like stars scrolling smoothly upwards. View the animation (.gif 2.5mb filesize). Pierre coded this wonderful effect from scratch. If you're curious to see how it's done, take a peek at pio.js.

Taking the time to create a unique first impression in your portfolio will give visitors a more exciting and memorable experience.

Creating a splash screen
Pierre has set height: 100%; on this first section of the page to take up the full browser window, creating a really nice splash screen effect. Taking over the first screen is a great way to immerse visitors in the first impression that you've created.

Delivering a concise description of what you do
Pierre lets visitors know who he is and what he offers right away, making sure to mention that he's both open to working at top agencies and also accepting freelance work. He also gives a brief description of where he works in the stack: everywhere! I like how Pierre keeps the tone of this description informal and conversational—it's very welcoming.

Including a concise, descriptive sentence or two is a great way to introduce yourself, clarifying who you are, what you're offering, and what you're looking for.

Including a picture of yourself
Employers want to get a feel for who they'd be working with. Including a pic of yourself is a great way to develop a connection, putting a face to your work.

Introducing your work
The first thing that you hit when you scroll down is Pierre's projects. He first gives a quick intoduction by describing the types of projects that he enjoys to work on, and frameworks and design methodologies that he likes to work with. Providing an introduction that gives an overview of your work helps give visitors helpful context.

Putting your best work on show
Pierre has worked on a huge array of high profile projects, so there's a lot of work to show here. Most of us don't have quite this many projects, and instead showcase 3 or 4 of your best is a great way to demonstrate your work. Finding the best way to show your work will ensure that visitors get the best view of your skills from projects that you've worked on.

Featuring top brands that you've worked with
During his time at design agencies and freelancing Pierre has worked with a lot of big brands that would be likely to attract other freelance clients and agencies. Given that Pierre is looking for freelance work, featuring all of these brands is a great way to show social proof to prospective clients. Note that this is much more important when it's a non-technical client looking at your portfolio, rather than a technical hiring manager assessing your work.

Featuring brands that you've worked with is a great way to attract clients, and is much more important for landing freelance work than for landing full-time positions (although it doesn't do any harm there).

Showing screenshots of your work
Clicking on or hovering over a project shows us some infomation about that project, including a screenshot. Here's a quick look at the hover state for Barbour. Although they're pretty small, these screenshots let us see the website that Pierre was working on, giving us a feel for the complexity of it. Including screenshots in your projects section is cruical for visitors to get a feel for the type and scale of projects that you've worked on, to see if you have relevant experience.

Listing back-end technologies that you used
When hoving over projects you can see that Pierre has listed out some of the back-end technologies that he's used within those projects: Drupal 7, Varnish, Solr, Django, CodeIgniter. Listing these out technologies you used when building sites is a great way to show that you have experience using these technologies on real, live projects.

Detailing back-end and devops skills
It can be tricky to demonstrate your knowledge of back-end and devops in a portfolio. In the Skills section Pierre gives a fantastic overview of technologies that he has experience with. Including a paragraph that concisely walks through all of the technolgoies that you're familiar with works really well! An employer can get in contact with you to learn more.

Tip: Blogging to demonstrate back-end knowledge
Pierre has a number of great posts on his blog, like Drupal and Dynamic Content and Selling Your Framework. Selecting a few of your best blog posts and featuring links to them right there on your portfolio page is an especially great way to demonstrate your back-end prowess.