后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何打造优秀的开发者作品集（+示例和工具）
*标题图片由Shen Comix提供
与其他专业人士一样，开发人员需要推销自己才能获得理想的工作和项目，吸引更多客户，并达到理想的收入水平。必备的技能和一个出色的作品集网站是您需要的两样东西。许多开发人员认为作品集只是一个可有可无的目标，而竞争优势则被那些不这么认为的人所取代，原因如下。
开发者作品集是一个展示你最佳作品、个性和才华的网站。它是你证明技能、分享对职业的热情，并让潜在雇主和客户了解与你共事是多么美好的机会。领英页面和简历也很重要，但它们侧重于工作经验，而无法展现你的真正价值。简历是用来炫耀的，而作品集才是用来实践的。
本文将深入探讨开发者作品集最重要的组成部分，并通过实际案例进行阐释。您也可以将本文作为核对清单保存，以便随时查阅。
目录
建立投资组合之前
在创建作品集时，开发人员常常会忘记其目的，创建的网站往往达不到预期，也很难吸引到任何客户或工作机会。让我们从营销的角度来审视一下开发人员的作品集。
在建立投资组合之前要问自己的基本问题：
-
你的目标受众是谁？你是想把作品集作为简历的延伸，还是想把它做成一个独立的网站，用来推销你的技能、服务并吸引客户？这是两种完全不同的使用场景，也意味着构建作品集的方法也不同。
-
他们在寻找什么？例如，雇主很可能会想看看你的代码，而你的客户却不会在意——现在你可以更轻松地推断出网站的结构和内容。
-
他们将如何使用你的作品集网站？雇主很可能对你的项目和代码感兴趣，而客户可能对你的专业服务、案例研究和个人魅力更感兴趣。
-
他们的痛点是什么？例如，雇主需要确保你是一位能够按时完成任务并交付高质量成果的团队合作者——你可以引用你的推荐信来解答这些疑问。或者，你可以使用客户标识和案例研究来向你的潜在客户证明你值得信赖。
-
为什么选择你？为什么他们应该选择你，而不是其他开发商或整个代理机构？你和其他人有什么不同？和你合作有什么好处？
回答完这些问题后，你将更好地理解对你的期望，以及如何构建能够达到预期效果的作品集。此外，你还能了解如何展现你的个性以及应该突出哪些软技能。因此，在构建你的开发者作品集时，请牢记你的理想客户或雇主。
1. 牢记目标受众
作品集网站看似是展示你技能的绝佳机会，但你最好保持简洁。试想一下：你的潜在雇主或客户打开你的作品集，却没有仔细查看所有花哨的细节——你肯定不希望发生这种情况。所以我们的第一个建议是，保持你的作品集网站简洁明了。
开发者作品集的主要目标是用你的项目、代码、个人风格、用户体验和用户界面（UX/UI）的敏锐度来打动访问者。因此，初级开发者的作品集应该包含流畅直观的用户界面和简洁的导航。如果这是你的第一个作品集，我们建议使用 HTML、CSS 和原生 JavaScript。
有用的工具： Behance、Dribble、Figma、Adobe XD、GitHub Pages
充分利用您的主页
您的作品集主页是给人留下良好第一印象的唯一机会。它需要清晰地展现您的身份和工作内容，包含您的照片或图片，并在简介文字中展现您的个性。
让你的投资组合可扫描
互联网的普及改变了我们与网页交互的方式：我们不再从上到下浏览，而是快速浏览。因此，请确保您的网页布局完美，文本语言通俗易懂且经过校对，所有链接和可交互对象均已正确打开。
减少点击次数
作品集不必复杂——它们应该包含对访客来说最重要的信息。只需点击几下，即可访问您的项目、代码示例、社交媒体和联系表单。
2. 记住用户体验 (UX) 和用户界面 (UI)
作为开发者，你应该了解用户体验 (UX) 和用户界面 (UI) 的基础知识。你的作品集网站应该拥有简洁美观的用户界面 (UI)，并提供良好的用户体验。
如果您不擅长设计，不妨从Behance和Dribble等设计平台汲取灵感。之后，您可以使用Figma或Adobe XD设计网站、导航和结构，然后编写代码。
不要忘记开发 UI 组件的设计和定位，包括图标、表单元素、复选框、文本和搜索字段、工具提示和菜单。在完成原型并开始编码之前，学习一些最佳的排版技巧：字体决定了设计的基调，如果使用不当，可能会毁掉你的移动版网站。
要么移动，要么回家
说到移动设备，现在是移动时代，开发一个移动响应式网站是你的首要任务。响应式设计旨在避免不必要的调整大小、滚动和缩放操作，并提供愉悦的体验。如果你的作品集网站不适合移动设备，这将是一个巨大的缺陷，很可能会令你的潜在雇主和客户望而却步。
优化网站性能
网站性能是成功的开发者作品集的另一个关键要素。用户不太可能等待超过 3 秒的网站加载时间。因此，请优化图片大小、设置延迟加载、尽量减少 JavaScript 和 CSS 文件数量，并使用网站缓存。
要了解您的网站在性能、可访问性、SEO 和其他参数方面的表现，请尝试Lighthouse——一款可为您提供完整网站审核的 Google Chrome 扩展程序。
记住可访问性
可访问性是任何网站的另一个关键质量标准。它包括针对有特殊需求、残障和障碍的人士进行的网站调整，这些调整可能会使他们难以浏览您的网站。
以下是关于如何提高网站可访问性的一些想法：
- 为所有图片添加替代文本
- 选择可访问的颜色选择
- 启用可调整大小的文本
- 创建可访问的表单
- 关闭广告和视频等闪烁元素的自动播放
- 提供音频和视频元素的文字记录
实用工具： 对比度检查器、可访问性开发工具、Web 可访问性评估工具
3. 展示你最好的作品和技能
分享您的代码和实时产品
现在，这是简历和作品集之间的主要区别：简历列出了您的教育和工作经历，而作品集则是展示您的工作和成就、传达您的技能和个性的地方。
在展示作品时，您可以展示最终产品、提供代码链接，或者两者兼而有之——哪种方式最好取决于您的作品集的用途。如果您的作品集旨在作为简历的延伸，您可能需要同时包含代码和最终产品链接；而如果是客户作品集，则只需展示您的作品即可。
只要项目库是你作品集的核心部分，最好把它放在主页部分之后。选择你自己构建的项目，或者，对于初级开发人员来说，不要包含教程中的项目，除非你对其进行了定制并使其独一无二。另一个好的做法是提供项目描述和所使用的技术栈。
如果您有很多项目和技术，请考虑为它们构建导航。如果您拥有各种各样的项目，请定义这些项目的开发背景。例如，“为营销机构开发的商业网站”或“最多可容纳 10 万用户的语言交流平台”。
或提供代码示例和 GIF
如果您一直在从事私人项目或开发项目的特定部分，请在相关客户或员工允许的情况下，添加代码示例。以下是一些操作方法：
- 嵌入或添加带有实时预览的代码编辑器链接
- 添加GitHub 存储库链接并为其提供动画 GIF
- 上传截屏视频来解释您的流程和工作方式
检查你的源代码，确保其组织有序：遵循文件夹结构和命名约定。这将证明你的思维是结构化且有条理的，并使雇主和客户更容易理解你的项目。
拥有自由职业和个人项目
自由职业项目也能为您的作品集锦上添花，因为它们展现了您的信誉、沟通能力和时间管理能力，这些能力构成了您成为一名优秀自由职业者和全职员工的必备素质。自由职业也提供了尝试新技术的机会，因此您可以展示这些项目来凸显您的技能。
有时，你可能想列出一些缺乏实践经验的技能。如果你很难找到相关的自由职业项目，你可以自己创建一个项目，并在作品集中展示。例如，你可以为想要打动你的公司创建一个专属的落地页。这也能展现你的积极性、主动性以及对职业的热情。
但要有选择性
你必须为自己的工作感到自豪，并尽可能多地展示你的项目。但请记住，你的潜在雇主和客户不会深入研究你每个项目的细节。他们很可能只会花一两分钟浏览你的网站，并仔细看看你的一些项目。
要了解哪些项目应纳入投资组合，请问自己以下问题：
- 什么让您对这个项目感到无比自豪？
- 这是否证明了你在其他项目中所缺乏的技能、知识和才能？
- 你的投资组合里有类似的项目吗？如果有，你愿意用这个项目来替代它们吗？
如果您认识某个可靠、值得信赖且比您更有经验的人，请征求他们的反馈意见，并利用这些反馈将最好的作品纳入您的作品集。
证明你们的想法一致
如果你为了吸引客户而建立作品集，那么展现出你与客户沟通的能力至关重要。你的客户不太可能使用开发者语言，因此，能够用通俗易懂的语言清晰地表达你的代码是一项非常重要的软技能。全职工作也是如此：你需要与非程序员（包括设计师和其他团队成员）清晰地沟通。
4.展现你的个性
作品集不仅能为你提供展示作品和成就的绝佳机会，也是展现自我的绝佳途径。你的潜在雇主和客户希望更好地了解你，了解你是否能被录用。
别犹豫，使用“关于我”部分，分享你对电子游戏、像素艺术或其他任何你感兴趣的事物的热情。如果你认为你的背景和教育背景能够传达你的重要信息，不妨提及。在你的网站正文、设计和导航中添加一些你的个性元素——毕竟，这是你的作品集。当然，别忘了上传一张头像或你的个人照片。
使用自定义域
您的开发者作品集和网站地址一样，都是您品牌的一部分。为了看起来更专业，您需要一个合适的 URL。作品集地址通常会包含其所有者的姓名或他们从事的工作。与其将您的网站托管在长尾子域名上，不如考虑购买自己的域名。
许多开发者忘记为其网站购买 SSL 证书，以便将其从 HTTP 迁移到 HTTPS，从而提高浏览器和搜索引擎的安全性和可信度。想象一下，你向客户发送了一个作品集链接，但他们的浏览器却因为你的网站不安全（例如，谷歌 Chrome 就是个问题）而屏蔽了该页面——你肯定不希望发生这种情况。
利用引言
另一个展现你个性的地方是主页的简介部分，你可以在这里介绍自己。一些开发者会用它来列出他们的技术栈，而另一些开发者则会介绍其他相关经验和职业。
使用你的语气
书面交流中的语调指的是你对词语的选择、词语的顺序和节奏，这使得它成为表达你个性的绝佳方式。一堆事实和陈述对读者的影响和一本冰箱说明书一样——毫无影响力。但如果你使用一些富有表现力或口语化的词语、一些极客式的表达或双关语，你的语气会更加人性化，也更有可能与雇主和客户建立联系。
分享你的动机（可选）
这条建议将为训练营毕业生和初级开发者带来最大的益处。为了增加获得工作的机会，你可以在作品集中展现你对这个职业的动力和热情。展示个人项目是证明自己可靠且积极主动的最可靠方法之一。用几句话描述你的内在动力，也是展现你随时准备努力工作心态的绝佳方式。
以下是关于投资组合中应包含哪些内容的一些想法：
- 提及你的成就和未来几年的职业规划
- 分享您的职业目标（要学习的技术、要构建的项目）并强调您对学习的热情（参加行业活动和会议）
- 为了实现你的职业目标，你过去、现在和将来都做了什么
这些信息最好写在简历里，但如果你还没有一份令人印象深刻的作品集，这些信息也能帮你找到工作。最好在项目介绍之后立即添加这些信息——这样，你就能应对可能对你的工作经历提出的异议。
5.维护个人品牌
个人品牌或个人营销就是建立你的在线声誉，让你在市场上获得认可。你的作品集与你的社交媒体账户、博客和社群一样，能够概括你的工作经验、技能、才华和个性，让你的在线形象清晰易懂，令人难忘，展现你作为一名专业人士的形象。
你的品牌就是当你不在场时人们对你的评价——亚马逊首席执行官杰夫·贝佐斯
保持投资组合最新
如果你浏览一些热门的开发者作品集，就会发现它们大多多年未更新：大部分链接已失效，社交媒体账户处于非活跃状态，甚至没有提及近期的项目或工作经历。想想这些作品集能带来多少新客户：虽然博客和网络媒体将它们作为优秀作品集的典范进行分享，但这些开发者却错失了数十个获得明星客户和千载难逢机会的机会。
因此，我们的建议是，即使你工作量很大，而且不想找工作或自由职业，也要尽可能保持你的作品集更新。每当你完成另一个项目、进行一次技术讲座、开始一个技术播客时，都要更新它——只要它能带给你动力，并且与你的作品集相关。
包括推荐
让我们回顾一下：作品集是您技能和成就的证明，是您个人品牌的重要组成部分，也是吸引雇主和客户的营销工具。为了使您的作品集更具说服力，您需要添加推荐信。
这里有一些想法：
- 包括推荐信中的引言
- 询问并添加当前工作地点的反馈
- 显示过去客户的反馈
- 如果你是自由职业者，可以发布一些案例研究
案例研究是将客户评价添加到您的开发者作品集的一种方式。案例研究讲述的是您的客户如何利用您的专业知识克服困难的故事。对于您包含的每个项目，请考虑解释以下内容：
- 客户：他们是谁以及他们在寻找什么
- 问题：他们帮你解决了什么问题
- 项目详情：时间表、使用的技术堆栈等。
- 您的工作：您实施了什么以及为什么实施
- 结果：你的工作如何影响客户
案例研究的内容取决于你的作品集的目的。如果你想找工作，你可能需要包含更多技术细节。或者，如果你想吸引更多客户，请尽量减少这些细节，并专注于商业效益。
推荐信是任何开发者作品集的绝佳补充。鼓励你的雇主和客户撰写几段文字，介绍你的工作如何对他们的业务产生积极影响。如果可能，获取他们的联系信息，并将其添加到你的简历和作品集中，以增强他们的诉求价值，并方便你的作品集访客联系他们进行后续提问。
6.鼓励沟通
在你展示了你的经验、个性和项目之后，是时候让你的作品集访客联系你，看看他们是否有兴趣与你合作。“联系方式”部分应该是你的开发者作品集的最后一个要点。
关于“联系”页面的一些想法：
- 联系表格。请注意，招聘人员希望立即联系您，而不是填写表格并等待回电。
- 电子邮件地址。基本上，它与联系表单相同，只是需要更多操作才能打开电子邮件标签。
- 电话号码。这可能是招聘人员最好的联系方式，但与客户沟通却最糟糕。
- 可联系时间。如果您要求投资组合访客通过您的电话号码与您联系，这一点尤其有用。
- 社交媒体链接。仅包含 LinkedIn、GitHub 和 StackOverflow 等活跃账户，以增强您的信誉。
如何打造优秀的开发者组合
一份全面的开发者作品集能助您快速晋升，打造个人品牌。如果您正在争取初级职位，那么在与其他候选人竞争梦寐以求的职位时，作品集至关重要。但不要混淆简历和作品集：简历是用来炫耀的，而作品集才是用来实践的。
