太棒了！我创建了我的第一个作品集！📂🎉

过去几个月，我一直在制作个人作品集。我一直认为，独立的作品集对任何开发者来说都很重要，因为它能帮助你联系未来的机会，并帮助你拓展人脉。

今天我把它部署到了madza.dev上。还有一些地方需要改进，比如测试浏览器兼容性、调整一些用户体验等等，所以它肯定还在开发中。不过，毕竟谁都得从某个地方开始，不是吗？

我尝试记录过程中的所有内容，并认为分享规划阶段、技术执行和项目的主要收获会很有用。

规划

我一直喜欢在业余时间写作、编程和做一些音乐制作，所以我希望我的作品集能体现这些爱好。于是我想到了一个主意，为每一项都开辟一个单独的空间。

在UI/UX方面，我希望我的作品集简洁、干净，并且易于在移动设备和桌面设备上浏览。此外，内容也应该易于筛选和搜索。

线框图

一旦我确定了主要目的、内容块和功能，我便开始将我的想法写在纸上，以提出布局的蓝图。

降落

我相信登陆区会给访问者留下第一印象，这进一步决定了他们是否想要进一步探索网站并了解更多有关开发人员的信息。

我决定展示简短的自我介绍、联系信息和一些与开发相关的视觉效果，以吸引访问者的注意力。

博客

然后我开始着手内容板块。我首先为我的博客画了一个简化的线框图。我的目标是列出我所有的文章，通过标签进行排序，并能够使用搜索组件进行浏览。

因为我知道我的作品集将完全自托管（包括所有内容），所以我计划将文章的每个标题都设计成一个可点击的链接，然后打开特定的文章以供进一步阅读。

项目

对于我的项目，我希望展示我所有的网站、应用和游戏。我还希望确保用户能够打开项目的外部链接，查看源代码，以及了解更多关于项目的信息。

访问者还应该能够使用类别标签过滤项目以及使用搜索组件搜索特定项目。

音乐

为了展示我的音乐，我想设计一个带有基本播放控制的音乐播放器。所以我设计了一个播放器组件，它包含播放、暂停、下一首、上一首、循环播放、随机播放、音量、时间、进度条和播放列表等功能。

和前两个页面一样，曲目应该按标签排序。不过我删除了搜索功能，因为我不打算包含那么多曲目，因为按标题查找会比较困难。

配色方案

接下来，我必须决定用什么颜色来为我的线框着色。我很喜欢暗色模式，所以我知道我会选择一些暗色调作为主色调。

为了突出重点，我不得不选择另一种颜色，既能形成对比，又能看起来美观。我决定用紫色，因为对我来说，它一直很适合搭配很暗的色调。

所以我最终选择了以下配色方案：

对于任何好奇的人来说 - 灯光模式开关是我已经考虑过并且可能在将来实现的东西。

字体

我认为字体排版是任何网站中非常重要的一部分。而且，正如我所见，它常常被开发者低估。找到一些协调一致的漂亮字体，无论在外观还是易用性上，都能带来巨大的提升。

我一直很喜欢圆润字体，所以我知道我的主要排版设计会以它们为基础。不过，为了形成一种不错的混合，我还加入了几个不同的字体系列。

Varela Round - 我最喜欢的字体之一。它看起来很舒服，而且看起来很漂亮，所以我用它作为标题和博客正文。

Quicksand - 简洁且相对较细的字体。非常适合用作副标题、卡片文本和组件级文本。

Poppins - 高质量且专业的字体（在众多免费字体中）。我决定用它来做英雄区域、logo 和导航文本。

Inter - 简洁美观的字体。我以前用它来与圆形字体形成对比，用于描述文字和副标题。

设计

在我完成所有蓝图并知道我将要使用的所有色调和字体之后，终于到了把所有东西放在一起的时候了。

降落

对于着陆区，我突出显示了关键词，这样用户就能一眼看出我的重点。紫色的联系按钮看起来很棒，非常醒目，这样访客就不用花时间寻找联系方式了。

我最终还添加了一个来自Undraw.co的 SVG 动画。我进一步定制了颜色色调，并使用 CSS 添加了一些动画。

博客

对于博客部分，我使用了比背景颜色浅一些的面板。它们看起来很漂亮，而且确保更容易区分不同的文章。

我还添加了发布日期和大致阅读时间，并编写了一个自定义函数来从正文生成文章预览。

项目

我在项目中也使用了面板系统，以保持一致性，并在整个作品集中保持主题的统一。我还添加了指向外部链接的图标。

与博客部分相同，项目标题在白色背景上看起来很棒，而描述在深色上看起来很好，以形成一些对比。

音乐

音乐组件更注重功能性，文字较少。因此，我在Icons8上找到了一些漂亮的图标，并将它们与背景进行了很好的对比。

对于播放列表项，我使用与博客和项目部分中的标题和描述相同的主题，并突出显示活动曲目。

内容

此时，我已经设计好了作品集的所有主要模块。不过，在开发者的世界里，有一种信念：内容为王。这意味着我必须对各个部分进行设计，才能让内容被打开。

我想出了显示博客和项目部分文章的标题、详细信息、英雄形象、正文和共享选项的线框。

然后我必须选择要使用的颜色。我没有继续使用我的主要黑紫色调色板，而是决定使用一些能够突出显示主要 HTML 元素的颜色。

以下是我的一个项目使用上述颜色主题显示的示例。请注意，在这个相当简短的示例中，只使用了h3、ol和元素。a

技术栈

该作品集使用 NextJS 框架创建，并基于 Contentful 辅助内容管理。除了一些用于用户体验的 Node 实用程序包外，网站的其余部分均从头开始编写。

NextJS

NextJS 是一个可用于生产的框架，允许开发人员快速创建静态和动态 JAMstack 网站，并提供一个抽象层来帮助完成传统 React 应用程序中的常见任务。

我最喜欢的一些功能包括静态与服务器端渲染、动态路由、静态文件服务、图像优化、CSS 模块等等。

内容丰富

Contentful 已经存在很长时间了，并且已经证明了自己是一个坚如磐石的 CMS 解决方案。设计内容模型和管理内容非常简单。

有了它，我们可以使用我们需要的所有内容类型——从简单的布尔值到富文本和 Markdown 字段。

额外模块

Framer Motion是一个 React 动画库。它为用户提供可用于生产环境的动画，以及一个可供交互的底层 API，以便将这些动画集成到您的应用程序中。

Nprogress用于显示网站的加载进度。它与 Next-Router 配合良好，我认为它大大提升了网站的整体用户体验。

Remark-highlight.js用于博客文章和项目页面上的代码块突出显示。

React-share是一个小型软件包，正如其名称所示，用于在社交媒体平台上分享内容。我在博客文章和项目页面上都用到了它。

部署

源代码存储在GitHub上。通常，这是我首选的工作流程，因为我的代码会得到备份，并且我可以获得版本历史记录，以备日后需要时使用。

从 GitHub 仓库开始，它被进一步部署到Vercel（以前称为 Zeit）。这样，每次 GitHub 上有新功能或修复推送时，实时网站都会实时更新。

这两种服务都处于领先地位，我选择后者进行托管，因为 NextJS 是他们自己的产品，而且他们的平台是专门为支持它而设计的。

最后说明

这个项目确实让我学到了很多东西。它不仅提升了我的整体开发技能，还帮助我了解了自己更关心的领域以及我想在开发领域达到什么水平。

从现在开始，我期待着接手新的项目，并在我的作品集中增添更多内容。我相信质量重于数量才是正确的做法，所以我不断提醒自己要有耐心。

希望你学到了一些知识，并获得了一些想法或灵感来构建或重新设计你自己的作品集。坚持下去，记住最好的还在后头！😉

写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和GitHub上关注我！
访问我的博客，查看更多类似文章。