如何建立一个好的投资组合网站 - 我的方法。

当你尝试创建自己的作品集时，首先想到的是你的作品集应该采用什么样的设计，以及如何让它与众不同。我在创建自己的作品集之前也遇到过同样的问题，所以你并不孤单。

在本文中，我将分享我如何从零开始，在毫无头绪的情况下，创建自己的作品集，其中包含一些精彩的项目。让我们开始吧😉。

这是我的投资组合的链接

我写这篇文章的原因很简单，因为人们通过各种社交媒体平台联系我，告诉我这个投资组合真的很棒，尤其是投资组合中的项目。

在开始构建我的投资组合网站之前，我必须问自己以​​下两个问题，并在谷歌上寻找答案。

1. 什么是作品集网站？

把作品集网站视为你的个人数字商店，展示你独特的技能、项目以及你作为开发者的身份。它简洁地展现了你的成就，也是建立你在线身份的宝贵工具，不仅能帮助你找到理想的工作，还能帮助你在科技圈中树立自己的地位。

2. 为什么你应该拥有一个作品集网站？

• 展示您作品的专业方式

打造一个关于你的品牌和经验的在线作品集，是与他人分享专业知识的绝佳方式。网站比传统的作品集更具创意和创新性，而且你可以与世界上任何人分享。

• 它增加了你的在线存在

作为开发者，你需要拥有良好的线上形象。你可以在 Twitter、LinkedIn、Instagram 等社交媒体平台上建立你的线上形象。但这些平台并非完全属于你自己，因为这些平台的管理员几乎完全控制着你的账户。

拥有自己的作品集网站，它就在你的专属域名上线了（这可是来自一个还没注册域名的人😅）。只要你在搜索引擎优化方面做得正确，人们在谷歌等搜索引擎上搜索你的名字就能轻松找到你。

• 给雇主留下良好的第一印象

如果雇主在你的签名或简历中看到你的网站链接，他们很可能会点击查看你的成果。看到你花时间搭建了一个包含工作样本、推荐信、过往演示文稿等内容的网站，会给人留下深刻的第一印象。

工作流程

有了这些问题的答案后，我继续进行分为六个部分的工作流程👇🏾

📒 规划

我构建作品集的最初考虑是确定要包含的内容。由于我设想将其设计为一个单页网站，因此导航相对简单。

我花了几天的时间来收集灵感和资源，但在某种程度上，这导致我在这个过程中有点倦怠。

💡 说到搭建作品集网站，很多人总是想着要做得最好，于是花了很多时间从一个作品集到另一个作品集，结果却不知所措，最终毫无头绪。关键在于不要想太多。选择至少五个能引起你共鸣的设计，作为你创作的灵感来源。

经过几天寻找灵感，我最终将选择范围缩小到四个网站，这些网站成为我在设计自己的网站时参考的参考。

🎨 设计

设计作品集其实并不难，因为我已经有了一些基本的设计概念。以下是我关注的一些关键方面，或许对你有帮助👇🏽

• 排版- 排版在设计中起着至关重要的作用，选择合适的字体会显著影响作品集的整体外观。我个人比较喜欢 Poppins 字体，最终也选择了它。

• 颜色 -对于大多数 Web 开发者和设计师来说，为任何项目选择颜色都是一个持续不断的难题，我真的不想让这个问题困扰我。那么，我该怎么做呢？

  我最初想的是两种颜色：绿色和紫色，基本上整个设计都是用这两种颜色完成的。之后我把设计稿发给了一些设计师朋友，征求他们的反馈意见（我们稍后会谈到），大多数人都选了紫色，我一直用这个颜色，直到我完成了第一个项目，准备把它放在作品集中。我随机为这个项目选了一种蓝色，觉得可以把它用在作品集中，结果效果很好，所以我一直用这个蓝色。

  💡 凭借我现在掌握的知识，我建议您在设计网站时使用深色和白色，完成后，您可以访问 Coolors、ColorHunt 等网站以获取更多颜色选项，以简化决策过程。

• 用户界面设计 -确定颜色和字体后，我开始勾勒网站的各个部分，包括主页面、关于页面、博客页面、工作页面等等* 。 *有些部分很简单，因为我已经有了一些网站可以借鉴。唯一对我来说有点难的是工作页面，因为我真的希望它独特又美观，最终我花了大约两天时间来设计它，虽然最终效果不如我预期，但这仍然是一个学习的过程。

  💡 设计作品集时，尽量时不时地回顾你收藏的网站，获取灵感。同时，也要确保用户体验流畅。尽量在合适的位置添加行动号召 (CTA)，以便客户轻松联系到你。

🗣️ 反馈

设计完网站后，我决定将其分享给我的一些 Twitter 设计师朋友，他们给了我非常好的反馈，我根据这些反馈改进了作品集的整体外观，并开始编写代码。

💡 如果您不想这样做，这实际上并不是必须的，但了解其他人的观点总是好的，因为到最后，一旦网站上线，您将不是唯一一个查看您的网站的人。

👨🏽‍💻开发

使用代码使网站上线并不困难，因为我已经根据自己之前的设计对网站有了清晰的了解。

💡 在实际构建作品集或网站之前，务必先设计好。这种方法不仅能节省大量时间，还能提高整体效率。

技术和工具——选择构建作品集的技术栈是一个直截了当的决定。我选择了简洁明了的HTML、SCSS和Vanilla JavaScript 的经典组合。考虑到这是一个动画和 CTA 极少的落地页，我觉得没有必要使用 React、NextJs、Vue 或其他框架/库。

💡 理想情况下，我建议你根据自己的设计审美、所需功能和个人习惯来选择技术栈，而不是仅仅追随当前的趋势。最终用户关心的是产品组合的速度和功能。此外，如果你不想写大量的代码，甚至可能不需要（尽管我们鼓励你这样做🙂），因为现在有一些无代码/低代码工具可以加快开发过程。

网站开发完成后，我花了一些时间进行关键调整。这包括优化图片（转换为 webp 格式）、添加网站图标（网站名称旁边的小图标）以便于视觉识别、增强 SEO，以及对按钮、链接和表单等各种元素进行全面测试，以确保其功能正常。

💡 在构建你的作品集项目时，请考虑提供演示登录信息（如适用），以方便那些可能不愿在陌生网站上分享信息的用户。此外，请为你的项目添加 GitHub 代码库链接，确保代码库和实时链接都在新页面打开，而不是直接在你的作品集网站上打开。最后，如果你曾在dev.to或hashnode.com等平台上撰写过博客文章，请考虑直接从他们的 API 中提取文章，以便在你的网站上展示，而不仅仅是提供链接。

🌐 部署

在彻底测试并解决问题后，我着手将网站部署到 Netlify 上，这是一个非常适合托管静态网站的平台。任何有网站部署经验的人都知道，网站上线后经常会有一些 bug 需要解决。就我而言，我遇到了一个 bug，导致一些图片无法显示，而且我实现的 Netlify 表单也无法正常运行。解决这些问题后，我确保一切正常。

💡 在部署您的网站之前，请确保它没有错误，并在网站上线后再次进行全面测试，以发现任何潜在问题。准备好修复部署过程中或部署后可能出现的任何错误。

⏳ 时间线

说实话，我无法准确描述完成所有工作的具体时间，但我可以肯定它花了将近两个月的时间。我并非每天都投入工作，而且令人惊讶的是，设计阶段所花费的时间比网站实际编码的时间还要多。不​​过，我确实花了一周时间来编写和部署网站。不过我并不着急，对自己还是比较有耐心的。

💡 建议为作品集的制作设定一个具体的截止日期并不容易，因为我自己并没有设定过。虽然设定截止日期可能有益，但重要的是不要仓促完成整个过程。此外，作品集要优先考虑高质量的项目，而不是仅仅关注其美观度。

在创建投资组合之前，您是否应该优先考虑构建项目？

是的，在着手创建作品集之前，完成一些项目至关重要。我坚信，作品集的构建应该遵循实际项目的执行。但是，我的建议是避免在作品集中包含诸如待办事项应用或天气应用之类的通用项目。虽然这些项目有助于学习，但请尽量展示那些能够解决实际问题或符合你个人兴趣的项目。

我的经验之谈源于我最初在我的作品集中添加了前端导师项目来展示我的技能。随着技能的提升，我最终删除了这些项目，并专注于创建更具创新性和更酷炫的项目。

🧰 资源

以下是我用来构建投资组合的一些工具。

规划和设计：Adobe Xd（但你也可以尝试Figma）

• 颜色：冷色
• 图片：开发图标
• 插图：UnDraw
• 字体：Poppins
• 图标：Fontawesome开发：HTML、SCSS、JavaScript 部署：Github + Netlify

结论

好了，感谢大家抽出时间阅读这篇文章🎉🎉。我给出的建议大多比较主观，所以请谨慎对待。你可以在评论区留言提问。如果你已经有作品集，我很乐意看看；如果你正在构建，我很乐意分享我的见解。下周见，祝你周末愉快😃