后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何打造优秀的技术作品集
后端开发人员
前端开发人员
作品集是你的代表，通常是招聘人员对你和你的工作的第一印象之一。
因此，你必须打造一个涵盖你和你工作的最佳状态的作品集。
让我们来看看我关于建立优秀技术组合的一些建议。
注意：这些建议均基于我的个人经验。打造优秀作品集的方法有很多，因此请将其作为指导原则，而非硬性规定。如果您有其他适合自己的方法，欢迎在下方分享！
作品集能够展现您的个人特质以及您拥有的技能。它也是展示您开发技能的绝佳途径！为了确保您的作品集达到顶级水准，您需要注意以下几点。
作品集是你闪耀光芒的途径！你喜欢做什么休闲活动？简而言之，你的人生故事是什么？你想让人们了解你什么？
通过添加一些个人风格，您可以让潜在雇主了解与您一起工作是什么感觉！
以下是我作品集“关于”页面的一小部分内容。欢迎点击此处查看完整页面。
如果您有任何引以为豪的项目或工作，并且能够体现您的编码或设计能力，那么您的作品集就是展示它们的地方。
许多公司制作专有（机密）作品，因此您可能想知道如何将其纳入公共投资组合。
很遗憾，答案是……你做不到。我的建议是做两到三个能展示你能力的副业项目。我知道这并非每个人都能做到，但当你的工作是保密的时候，你能做的事情确实不多。
要展示您的工作，请描述您使用的技术、您在项目中的角色（如果适用）、附上一两张屏幕截图，并发布代码链接（如果可以的话）。
以下是我作品集作品部分的布局。您可以点击此处查看完整页面。
吸引雇主眼球的一个好方法是将你的作品集作为副项目。我使用 Gatsby 和 React.js 来构建我的作品集，仅仅是因为我想尝试一下网站生成器，并展示我的 React 技能。
在创建作品集之前，我还用 Sketch 设计了整个作品集。我建议你先画出一个层次结构，来展示你想要的信息。
请参阅下面的“我应该使用什么技术来构建我的投资组合？”部分，了解有关构建投资组合的不同方式的更多详细信息！
即使你多年未更新，招聘人员和潜在雇主也可能会浏览你的作品集。因此，尽可能保持信息更新至关重要。
如果你接手一个新职位，一定要更新你的作品集。如果你开发了一个很酷的新应用，也一定要更新你的作品集！
您希望它能够展现您和您当前的技能。因此，构建一个易于维护且经得起时间考验的东西至关重要。
你应该在你的作品集中提供联系方式。说实话，目前我的资料里还没有联系方式（真丢脸！）。
如果您不提供联系方式，招聘人员就无法就潜在职位与您联系。
因此，请包含您的社交媒体链接（如果您将其用作主要沟通方式）、您的电子邮件或您的电话号码（如果您不介意接听大量电话）。
给他们一些与你联系的方式。
设计作品集可能是最困难的任务，特别是如果您是后端开发人员或几乎没有设计经验。
当我构建网站或应用程序时，我会使用Dribbble来寻找灵感和调色板。此外，你也可以看看 Wix 和 Squarespace 的一些模板。我不是建议你抄袭别人的设计，但这确实是一个获取灵感的好起点。
我建议设计保持简洁。你想要的东西五年甚至十年后看起来仍然美观。选择简单易懂的颜色。使用大小合适的易读字体。
写出信息架构也很有帮助。你想在你的作品集里放哪些信息？你想如何布局？单页布局？多路径布局？在写代码之前做好这些决定，可以节省大量时间。
如果你需要图形工具，我推荐unDraw。它们免费使用，而且易于定制！
您可以选择多种不同的技术来构建您的投资组合。让我们来看看后端和前端开发人员的一些选择。
后端开发人员
如果您是后端开发人员，或者不习惯构建 UI，您可以采取多种途径。
1. 利用 CMS
内容管理系统 (CMS) 管理数字内容的创建和维护。
WordPress 是最流行的内容管理系统之一，对于不太习惯构建自己的 UI 的开发人员来说是一个很好的选择。
2. 使用原始 HTML 和 CSS
如果你了解一些基本的 Web 开发知识，那么扩展业务的一个好方法是使用原生 HTML 和 CSS 构建你的网站。如果你的技能并非 UI 设计/样式的强项，就不必在 UI 设计/样式方面投入过多。但使用 HTML 和 CSS 构建网站能够展现你学习舒适区之外技能的能力。
您不需要 JavaScript 就可以创建出色的作品集！
3. 使用 CSS 框架
如果您对基本的 HTML 和 CSS 相当熟悉，但想要更一致的 UI，您可能需要查看 CSS 框架。
CSS 框架使元素样式的设置更加轻松快捷。需要注意的是，如果您申请的是前端开发人员职位，使用 CSS 框架可能并非最佳选择，因为雇主会寻找精通 CSS 开发的开发人员。但对于后端开发人员来说，这些框架可能是一个不错的选择。
我建议查看Foundation、Bulma、SemanticUI或Bootstrap。
4. 使用网站构建器
如果您只是想尽快发布您的内容，您也可以使用 Wix 或 Squarespace 等网站构建器。
这些功能使网站部署变得极其快速便捷。您甚至可以集成自定义域名。
但是，如果你申请的是前端开发人员职位，我建议你不要使用网站创建平台。这是一个展示你开发技能的机会！要么全力以赴，要么回家！
前端开发人员
如果您是前端开发人员，则有更多选项可用于构建您的网站。
1. 使用原生 HTML、CSS 和 JavaScript
一个简单的网站永远不会出错。如果你不想或不需要，就没必要把你的作品集架构弄得太复杂。仅仅是从零开始搭建网站这一简单的事实，就能向潜在雇主表明，你愿意花额外的时间来展示你的技能。
2. 使用 JavaScript 框架
你可以利用你的作品集来练习（并展示）你的 JavaScript 能力，比如利用某个框架或库。我建议你选择一个你熟悉的（或者干脆选择一个你一直想学的！），或者选择与你未来职位相关的。
这些框架或库通常都带有命令行界面 (CLI)，你可以使用它来创建启动项目。这可以节省你大量的环境搭建时间，并且免去了你自行编译、最小化和 lint 代码的麻烦。
3. 使用静态站点生成器
随着流行库和框架（React、Vue、Angular 等）的采用，静态网站生成器在科技行业中声名鹊起。我使用 Gatsby（一个 React 网站生成器）创建了我的作品集。
有许多不同的站点生成器可供选择，例如用于 React 应用程序的 Next.js 和用于 Vue.js 的 VuePress。
这些提供了许多好处，例如用于图像优化、移动友好响应和可访问性的插件。
编写自己的投资组合的技巧
- 确保你的代码以周到高效的方式组织。将所有内容放在一个页面中非常容易（而且你可以这样做），但将不同的部分/内容拆分成原生 Web 组件或 HTML 页面可能会带来很大的不同。
- 确保你的 CSS 简洁有序。尽量使用更现代的 CSS 来定位元素（例如 Flexbox 或 CSS-Grid 布局）。这表明你始终遵循最新的规范。
- 使用语义化的 HTML。将代码构建成层次结构，并定义主要区域。使用这些地标区域（
<section>、<nav>、<header>、<aside>、<body>等）来标记投资组合中的重要地标。尽量少用<div>和<span>。
我始终建议在你的作品集中包含以下部分：
- 关于：你是谁？你闲暇时喜欢做什么？有什么有趣的事吗？
- 工作/项目/技能：你使用过哪些技术？你做过哪些项目？
- 博客（可选）：如果您有博客，请在这里展示。
- 联系方式：招聘人员如何联系？
再次强调，这只是我的个人偏好。你可能只想创建一个落地页，引导用户访问不同的平台（社交媒体、GitHub 等）。
您的作品集应该代表您的个人风格。没有放之四海而皆准的作品集。打造属于您的作品集！
希望这篇博客对您有所帮助，并能鼓励您创建一个精彩的作品集来展示您的作品。如有任何疑问，请随时在 Twitter 上联系我们！祝您编程愉快！
文章来源：https://dev.to/emmabostian/how-to-build-a-great-technical-portfolio-53bb