访客提供的 6 条实用建议，助您提升投资组合

几个月前，我发表了一篇关于如何建立我的第一个个人投资组合的文章。反馈非常好，我也从中得到了一些关于如何改进它的好主意。

感谢用户@dyllandry、@cdthomp1、@sufyaan323和@zzoukk 留下反馈并推荐大部分更改。

最近，我决定在 Git 上创建一个新的分支并开始处理它们。由于初始版本仍在部署中，这给了我一个比较两个版本的机会。

希望这些带有前后图片的修改能够激发您关于如何改进作品集的一些想法。

1. 可滚动的主页面

❌之前

首先，我最初的投资组合有一个完全静态的登陆页面。

用户访问内容的唯一方式是点击右上角的导航项，否则，他们会觉得网站是空的，因为没有滚动。

💡 反馈

迪伦·兰德里 • 21年4月7日

看起来很简洁。我最大的批评是，我认为你应该让你的项目更容易被看到。进入你的主页，尝试滚动查看更多内容，却无法滚动，然后不得不在用户界面中搜索才能看到你的作品，这很不方便。或许可以把项目页面放在主页底部。另外，我建议在你的项目之间增加一些视觉上的区分。唯一的区别在于它们的文字，这需要逐一阅读才能区分它们。或许可以给每个项目添加一些图片，可以是项目的图片，也可以是从unsplash上​​获取的相关图片。

看起来不错！

✅ 之后

在修改过程中，我把登陆区域做成了可滚动的，现在它可以让我突出显示我最想展示的作品。

这个作品集的主要目的是展示我做过的项目，因此我决定展示3个项目的图片和功能。此外，还有6篇精选文章。

🔗现场示例

另外，我还配置了我的 CMS（Contentful），只需勾选一个框即可启用或禁用任何项目或文章作为亮点。

2. 视觉博客卡片

❌之前

第一个版本的博客卡片仅包含标题和描述，没有文章的视觉表现。

显然，这无助于娱乐读者，也无助于留住访客的注意力。请参见下面的初始版本：

💡 反馈

卡梅伦·汤普森 • 21年4月8日

您的网站看起来棒极了！我喜欢简洁的外观和易用的界面。如果能在项目/文章卡片上添加缩略图，有助于直观地了解项目/文章的主题，那就更好了。

干得好！

✅ 之后

在修改过程中，我专注于图片封面，使其不破坏现有的卡片布局，在深色背景下看起来不错，并且对移动设备有响应。

🔗现场示例

3. 动画项目卡

❌之前

同样，与博客卡一样，项目卡也不包含任何视觉效果。

这对于项目来说尤其糟糕，因为没有人真正愿意点击每个项目只是为了看看它是什么样子。

💡 反馈

卡梅伦·汤普森 • 21年4月8日

您的网站看起来棒极了！我喜欢简洁的外观和易用的界面。如果能在项目/文章卡片上添加缩略图，有助于直观地了解项目/文章的主题，那就更好了。

干得好！

✅ 之后

因此，我决定为每个项目添加一张图片。

我通过创建 GIF 图像对其进行了进一步扩展，这些图像不仅可以规定设计，还可以规定主要功能。

🔗现场示例

4. 单独的联系表格

❌之前

初始版本中的联系人功能取决于用户系统设置是否完善。我使用了mailtohref 属性，这经常会弹出类似这样的弹窗，要求用户配置邮件客户端。

✅ 之后

在修订过程中，我为联系功能创建了一条独立的路由。我使用react-hook-form来处理表单，并使用Sendgrid来提供实际的电子邮件服务。

🔗现场示例

5.自定义404页面

❌之前

我最初的博客使用了原装的 NextJS 404 页面。

从技术上讲，用户被告知不存在的路线，但它们看起来太基础并且与投资组合的主题不符。

✅ 之后

我从Undraw.co获取了一些漂亮的 SVG ，为页面创建了自定义样式，创建了自定义警告信息，并添加了主页按钮，以便用户可以重定向到主页。

🔗现场示例

6. 其他细微变化

💡 反馈

暗影忍者 • 21年4月6日

@madza作为一项家庭作业，我认为您应该尝试将博客页面中的 y 轴滚动条颜色更改为符合您网站主题的颜色。

露天市场 • 21年4月7日

这太酷了！

嘘...项目页面上缺少实时演示链接。

✅ 之后

在修改过程中，我还修复了滚动条样式，调整了代码高亮，在项目中增加了对源码和 GitHub 的访问按钮，调整了对移动设备的响应能力等等。

我已将修订分支合并到主分支并部署完毕，您可以在madza.dev上实时查看整个作品集。如果您有任何意见或进一步的反馈，我将不胜感激。

我从这篇文章中得到的主要建议是，建议你充分利用收到的所有反馈。我们携手打造更好的产品。我相信，我们都能通过分享知识来学习。

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

在Twitter、LinkedIn和GitHub上联系我！