This popular article was lightly sanded and given a fresh coat of paint in 2017.

这篇颇受欢迎的文章在​​2017年被轻轻打磨并涂上了一层新鲜的油漆。

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.

拥有专业的LinkedIn个人资料无疑是一个不错的开始，但是，如果您确实希望引起人们的关注，则需要使用投资组合网站进行营销。 这基本上是您的个人LinkedIn页面，只有更多空间来显示您的技能。

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’ll 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 awards with it.

拥有专业的LinkedIn个人资料是一回事，但是您可以使用自己的投资组合网站真正展示自己的技能。 为什么？ 自由！ 您可以用它做任何您想做的事情，并给您留下深刻的印象。 您甚至可以用它赢得 奖项 。

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

即使是最专业的LinkedIn个人资料，看起来也像服务上的其他个人资料一样，但是您的网站是您这样说：“这就是我，这就是我能为您服务的。”

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

需要更多说服力？ 好吧，这是我见过的拥有最出色投资组合网站的家伙的LinkedIn个人资料 。

一切都是关于推销自己 (It’s All About Selling Yourself)

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

听起来有些陈词滥调，但您是自己最好的推销员。 这意味着您必须在不失去自己身份的情况下出售自己。

As you’ll see in the examples below, there are many ways to display yourself. You can choose to become a cartoon, use tons of photographs, display your technical prowess, 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 that 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’d rather avoid to earn a few bucks. Use your portfolio to target the type of work you do prefer to do.

如果只显示自己喜欢的作品，可以稍微雕刻一下作品集就可以了。 我们每个人都必须谋生，有时还要上班，我们宁愿避免赚几美元。 使用你的投资组合的目标你喜欢做的工作类型。

添加上下文 (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, and 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)

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

这是某种CSS大师Keith Clark的网站。 这是他使用HTML和CSS3进行工作的一个示例 。 现在，这可用于“最近的工作”。

让·海尔芬斯坦 (Jean Helfenstein)

Meet Jean Helfenstein, a highly creative and expert front-end developer, as this portfolio site demonstrates.

在这个投资组合网站上展示，与富有创造力和专业的前端开发人员Jean Helfenstein会面。

蒂莫西·鲁西莱 (Timothée Roussilhe)

This award-winning portfolio shows off Tim’s development skills while also presenting a fun interface with lots of personality and humor. (There’s a Do not press this! link on the home page, and see what happens when you try to highlight Tim’s name with your cursor!)

这个屡获殊荣的作品集展示了Tim的开发技能，同时还提供了具有许多个性和幽默感的有趣界面。 (在主页上有一个“ 请勿按此！！”链接，看看当您尝试用光标突出显示蒂姆的名字时会发生什么！)

斋藤贤治 (Kenji Saito)

This creative portfolio site by Tokyo-based Kenji Saito creatively displays examples of his amazing work on CodePen.

这个位于东京的创意组合网站，由Kenito Saito创造性地展示了他在CodePen上出色工作的实例。

设计师作品集示例 (Designer Portfolio Examples)

罗比·伦纳迪(Robby Leonardi) (Robby Leonardi)

I already mentioned Robby’s site above, because this is truly the greatest portfolio site I’ve ever 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.

我已经在上面提到了Robby的网站，因为这确实是我见过的最大的投资组合网站。 设计部分是一位美女，但他的互动简历只是一件艺术品。 Robby是设计和编码方面的专家，没有人质疑他的网站技能。

Heraldur Thorliefsson (Heraldur Thorliefsson)

Haraldur works for a design agency working closely with Google. While his home page 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.

Haraldur在与Google紧密合作的设计机构工作。 尽管他的主页似乎没有那么令人印象深刻，但他的项目描述肯定是如此。 他在这里显示项目详细信息，更重要的是，他在项目中的角色。

阿达姆·丹纳威(Adham Dannaway) (Adham Dannaway)

Adham is both a designer and coder, and found a perfect way of showcasing his work right on the home page. 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.

Adham既是设计师又是编码人员，并找到了一种完美的方式在首页上展示他的作品。 他还找到了一种利用自己的兴趣爱好(吉迪斯)来提高技能的好方法 。 他也对最近的工作做了很好的概述。

作家作品集示例 (Writer Portfolio Examples)

克里斯蒂·海因斯 (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 her site gives you the feeling she is a trustworthy writer who knows how to deliver quality work.

尽管克里斯蒂(Kristi)的网站可能不如上面的家伙那么华丽，但对于她自己来说，这是一个完美的网站。 她向您展示了您可以雇用她的确切职位，她的网站使您觉得她是一位值得信赖的作家，知道如何交付优质的作品。

莎莉·巴切塔(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.

很高兴看到作家怎么说话，因为这正是您雇用他们的目的。 Sally不会乱扔图片，而是确保正确描述了她所做的一切。 她使用了两个神奇的小词，使您立即感觉到品质：屡获殊荣。

奥布雷·安德鲁斯 (Aubre Andrus)

Aubre is a versatile writer whose site has plenty of character. She makes it clear what she likes to write about, with active social media accounts to support her statements.

Aubre是一位多才多艺的作家，他的网站富有特色。 她通过活跃的社交媒体帐户来支持自己的陈述，从而明确表达了自己的爱好。

卡罗琳·伍德 (Carolyn Wood)

Carolyn Wood’s Pixelingo writing and editing portfolio is mostly text-based, which makes sense if you’re trying to sell writing and editing skills. Her site provides a clear, concise and direct explanation of what she offers and why propsective clients might want to work with her. The site also conveys a strong sense of personality and individuality.

卡罗琳·伍德(Carolyn Wood)的Pixelingo写作和编辑业务主要是基于文本的，如果您想出售写作和编辑技能，这很有意义。 她的网站清楚，简洁，直接地说明了她所提供的服务以及专业客户为何希望与她合作。 该网站还传达出强烈的个性和个性感。

乔·卡斯蒂格里昂 (Joy Castiglione)

Sometimes, especially if you have a strong portfolio, you have to let the work speak for itself. Which is what Joy Castiglione does as she shows off her careful artistry in the forms of illustration, 3D and photography. Joy uses large thumbnails in a grid that spans the entire screen to maximize her work’s visibility, leaving little to the imagination. As for the UI, Joy offers a simple navigation on a simple black background, although, I did notice that she’s using a trendy .design domain, which is really cool!

有时，尤其是如果您拥有强大的投资组合时，您必须让工作说明一切。 这就是Joy Castiglione所做的，因为她以插画，3D和摄影的形式展示了她精心的艺术创作。 乔伊(Joy)在跨整个屏幕的网格中使用大缩略图，以最大化其作品的可见度，而几乎没有想像力。 至于用户界面，Joy在简单的黑色背景上提供了一个简单的导航，但是，我确实注意到她正在使用一个时髦的.design域，这真的很酷！

结论 (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 throw in another cliché). 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 cliché, I promise) and you’re golden.

当然，不同类型的技能可以采用不同的方式展示您的作品。 我希望我已通过这些示例启发您，以充分利用您自己的投资组合网站。 天空真的是极限(是的，让我们扔另一个陈词滥调)。 竞争很激烈，但是投资组合网站是一个很棒的项目，可以在业余时间进行。 只要确保创建一个哇！ 因素(最后的陈词滥调，我保证)，你就是黄金。

Looking for more on working online and freelancing? Check out these great links:

是否需要更多有关在线工作和自由职业的信息？ 查看以下重要链接：

• Book: Online Marketing Inside Out

  图书： 网络营销由内而外

• Book: The Principles of Successful Freelancing

  图书： 成功的自由职业原则

• Book: The Web Design Business Kit

  图书： Web设计业务工具包

• Course: Build a Successful Web Design Business

  课程： 建立成功的网页设计业务

• Book: The Web Designer’s Roadmap

  书籍： 网页设计师的路线图

• Course: Project Management for Freelance Developers

  课程： 针对自由开发人员的项目管理

Check out SitePoint Premium for more books, courses and free screencasts.

查阅SitePoint Premium ，了解更多书籍，课程和免费截屏视频。

翻译自: https://www.sitepoint.com/how-to-create-a-portfolio-site-that-will-get-you-hired/