回顾 40 多个开发者作品集后我学到了什么——打造更佳作品集的 9 个技巧

大约十年前，当我开始开发网站时，最困难的事情之一就是获取别人对我的网页的意见。

这就是为什么我决定回馈社区，认真审查他们的投资组合。我研究了以下方面

• 设计，用户体验
• 内容
• 表现。

在观看了 40 多个视频后，我总结出了 9 个构建更好投资组合的主要技巧！

在我的 YT 频道 DeveloperHabits 中的以下视频中可以看到所有技巧和一些示例。

1. 明确你的投资组合的目的

你的投资组合必须有一个目标。这个目标定义了你的目标受众。想想看——它是为招聘人员、其他开发者，还是为自己打造的？

如果是针对其他开发人员，那么拥有酷炫的动画可能听起来很合理，而如果主要目标受众是招聘人员，那么用户体验和内容结构方式就非常重要。

//Tam Sylte 评论了一个非常好的建议：

我还有一个小建议：培养你的“声音”。有时我看到一些作品集使用第三人称——例如“约翰是一名 JavaScript 开发者……”。最好说“我从 2010 年起就是 JavaScript 爱好者……”或类似的表达方式。想象一下你的受众（正如本文所述），然后像面对面交流一样与这个人——招聘人员或同行开发者——交谈。

2. 尽快展示你的技能和项目

通常，当人们访问您的作品集时，是因为他们想了解您的技能和项目。

我见过许多出色的单页作品集，其中“关于我”比“项目”更受关注。

robbie.antenesse.net - 在他的作品集中，Robbie Antenesse 将“项目”作为其作品集的第二部分

我的建议是在“关于我”部分突出显示您的特定技能，或者更好的是 - 让“项目”内容块出现在“关于您”之前。

3. 简约、原创，还是两者兼而有之？

关于设计和用户体验，做出一个有意识的决定很重要——你希望你的作品集是什么样子的？

如果您在网页设计方面经验不足，我建议您选择简洁实用的设计。主色调不要超过三种，字体最多不超过两种，并且内容要直截了当。

codewithghazi.com - Code With Ghazi 是一个很好的例子，设计简单但又略有不同

一旦你积累了更多的网页设计经验，你就会开始注意到哪些是好的用户体验和设计模式。这时，原创性和创造力就可以被引入。

4. 少即是多

与编码一样，有时最简单的设计/UX 解决方案也是最好的。

添加动画时尤其需要注意这一点。页面上有大量的交互和闪烁元素可能看起来很酷，但从用户体验的角度来看，通常并不好。

我的建议是保持简单并认真思考页面上的元素和动画是否确实增加了任何价值。

5. 想想人们首先应该注意到什么？

您只需不到一秒钟的时间就能对页面形成第一印象。

这就是为什么分析你希望人们在你的页面上首先注意到什么至关重要。是你的名字？是你的技能？还是一些动画？

abdessalam-benharira.me - Abdessalam 的页面凸显了作者对 Web 和 UI/UX 设计的热情

至于开发人员作品集，我的建议是重点关注您的姓名 + 技能组合或一些能表明您是开发人员的漂亮口号。

6. 百分比和技能栏什么都说不出来

这是我刚开始进行 Web 开发时喜欢做的事情——使用百分比来展示我在各种技术方面的技能。

事实上，用百分比或进度条来描述你的技能并没有任何价值。没人知道这到底意味着什么。说你“100%精通JavaScript”会给人留下你是世界上最好的JS开发人员的印象。但事实可能并非如此。

如果你确实想为你的技能增加一些数值，可以使用年限或项目数量。这些指标是普遍易懂的。

7. 不要让我点击

要记住的一个简单但有效的 UX 规则是减少点击次数。

每次点击你的网站都应该有意义。
例如，当你在主导航栏中设置“关于我”链接时，它应该引导我进入一个可以阅读你相关信息的版块。

有几次我点击了一个链接，结果却被导航到了一个需要再次点击才能看到实际内容的部分。这很令人沮丧，也增加了用户流失率。

添加导航/链接时请记住考虑这一点。

8.方便我们联系您！

您的作品集旨在展示您的技能和项目。但别忘了方便他人联系您。

我的建议是在页眉和页脚中显示您的电子邮件或社交媒体链接。

jamesjacobthomas.com - 作者已将社交图标固定在页面上

我还喜欢一些作品集，它们在浏览页面时固定了社交媒体图标——这样联系页面的作者就非常方便了。

9. 运行 Google Lighthouse 查找最简单的错误！

我看过的大多数作品集都非常好。怎么知道的？通过运行 Google Lighthouse。

Google Lighthouse 是 Chrome 浏览器中的一款工具，可为您提供有关网站性能、最佳实践使用情况、可访问性和 SEO 的可操作信息。

该页面的性能还有待提高

在一些情况下，Lighthouse 在反馈方面确实很有帮助：

• 你需要改进 SEO
• 通过优化图像可以提高页面性能
• 可达性不太好

因此，下次在点击“部署”按钮之前，请运行 Google Lighthouse 报告。

这些是我为开发人员提供的关于构建更好的投资组合的主要建议！

我真诚地感谢所有提交作品集以及提供反馈的人。

您认为我遗漏了什么要点吗？

评论可见于此 Youtube 播放列表中：
https://www.youtube.com/watch?v =mX_LrXEUecc&list=PL4gMAGIXQXfvRWZt2n1u_jLwSGd-Ogvi4

哦，还有……！如果你对编程、成长型思维感兴趣，并且愿意分享你的经验和想法，请在 Twitter 上私信我 :)！

DeveloperHabits
📷 Youtube：developerHabits
👉 Twitter： https: //twitter.com/developerHabits
👉 IG： https: //www.instagram.com/developerhabits