打造出色的投资组合

根据 GitHub 的记录，我自 2016 年 9 月 1 日起就拥有一个作品集网站。而根据 Google Analytics 的记录，从 2016 年 9 月到 2017 年 10 月，我的作品集两次改版后的浏览量都不足 300 次。2017 年 10 月，我对我的网站进行了彻底的重写，结果非常显著。第一个月的浏览量为 1,861 次，从那以后，平均每月的点击量约为一千次。当然，相关性不等于因果关系，但我确实认为重新设计确实产生了积极的影响。它不完全是 Facebook，但对于一个除了我的信息之外不向浏览者提供任何其他内容的作品集网站来说，我认为这些数字已经相当不错了！

在这篇文章中，我将深入探讨哪些方法对我有用，哪些方法无效，我建立出色投资组合的秘诀，以及我喜欢的其他人的投资组合。

哪些方法无效

在介绍我目前真正喜欢的作品集之前，我想先谈谈我的前两个网站。

我的第一个投资组合

第一个是一个使用 SASS 和 Pug 的 Jekyll 网站。我把它部署到这里，纯粹是为了怀旧——看看这些项目吧——它们都是大学时候做的，而且大部分都是用 C++ 写的！

对于网站的实际内容来说，这种设置过于复杂，没有必要。我为这么一个简单的页面使用了 Jekyll、MaterializeCSS、SASS 和 Pug——我觉得 Gulp 的设置比实际需要的 CSS 还要长！我当时正准备转行写前端代码，所以这对我来说真的是一个学习使用 SASS 和 Gulp 的机会。我也不需要 Jekyll——我只列出了几个项目，只有一个页面。

此外，控制台中还会出现一堆 404 错误，表示资源未找到。如果我是一名开发人员，看到这个网站，我肯定会对此提出批评。

我的项目截图不太好。要么全是代码，要么就是裁剪得不太好。

字体也太小了，很难看清文字。我的社交图标不太显眼，这意味着它们的参与度可能不太高。

不过，有些地方我做得很好。我非常喜欢个人简介中突出显示的单词——即使用户没有阅读完整个个人简介，它也能吸引他们查看这些关键词。我也很欣赏网站的响应式设计，这样用户可以在不同尺寸的屏幕上浏览网站。目前，我大约三分之一的流量来自移动端，所以记住这些用户非常重要！

我的第二个投资组合

第二次迭代是一个HTML和CSS网站，背景是动态的圆点。你可以在这里查看。我承认，我仍然对这个作品集情有独钟。

我非常喜欢动态气泡，以及它们随着用户互动而变化的方式。我也喜欢这个网站的简约风格。我觉得主页上的个人简介很实用，很好地表达了我的兴趣。

再次强调，字体有点小，而且必须转到一个新的HTML页面才能查看我的信息，这可能不太方便。此外，我的演讲和代码项目放在同一个页面上也会导致不平衡。

总体而言，您可以在我当前的投资组合中看到很多这个投资组合的主题。

有效的方法

去年十月，我从零开始，创建了一个有点另辟蹊径的作品集。你的作品集是你能搭建的、能够完全自由地表达自我创意的网站之一。所以我全力投入，互动性、动画，你能想到的，它都有。

点击主页任意位置，就会出现一个随机形状。鼠标悬停在字母上，字母就会动起来。鼠标悬停在个人简介页面我的头像上，头像就会旋转。

我使用 Vue 制作了这个作品集，因此页面之间可以无缝过渡。我还增加了字体大小，以便读者能够更快速、更轻松地获取信息。我的联系页面提供了大尺寸按钮，方便用户在网络上关注我。

这个设计的原始版本是用 HTML、CSS 和几行 JavaScript 构建的。就我的技术需求而言，这完全没问题。出于维护方面的考虑，我想迁移到 Vue——​​重新配置的设置让添加新项目变得容易得多。我也喜欢 Vue Router 提供的流畅路由，而不是导航到实际的新页面。

这种设计吸引了人们的注意力，他们会停留在网站上进行互动。此外，很多人会联系我咨询我的网站，如果我正在找工作，这真是太棒了！

我还可以做得更好

就如何有效地将用户引导到我的其他社交媒体平台而言，我可以在每一个页面上都放上我网站的链接，而不仅仅是在联系页面上。我可能还需要仔细筛选我的项目，挑选几个来展示，而不是列出26个个人项目！我也没有项目的截图——这是故意的，但如果我把图片放在上面，可能会带来更多流量。我不喜欢添加程序截图带来的各种配色方案。而且，我的项目本身并没有太多令人印象深刻的地方。大多数项目都很小，我创建它们是为了学习一些东西。我可以进一步优化我的网站，但就目前而言，我非常喜欢它现在的样子。

打造出色投资组合的秘诀

• 制作一份能真实展现你的作品集。编程在很多方面都是一个创造性的领域，所以要发挥你的创造力！
• 使网站具有交互性，这样人们就会愿意留在您的网站并记住它。
• 购买域名——我从 aspittel.github.io 搬到了 alispit.tel。我很喜欢自己名字的玩法，而且有很多域名可以很便宜地买到。我用的是 NameCheap，每年 8 美元的域名费绝对物超所值。
• 确保您没有控制台错误——许多技术雇主都会寻找这个，所以请确保您的网站没有错误！
• 不要为了使用而使用技术。如果你有一个极简主义的个人网站，就不要为了使用而使用繁重的框架或库。
• 确保您的网站可以在手机上运行，​​我鼓励让它适合使用分屏设置的用户。
• 我会避免使用网上的模板——对我来说，用这些模板的时候，效果一目了然。我理解非 Web 开发人员使用它们，但如果你是 Web 开发人员，那就展现你的技能吧！
• 用它来推销自己——如果你想向雇主展示特定的技能，确保这些技能在你的网站上有展示。我希望人们访问我的博客，所以我把它放在了我的主页上。我还想做更多的演讲，所以我专门用了一个页面来展示我的演讲。我不想再专业地编写 C++ 代码了，所以我把那些项目从我的网站上删掉了。
• 确保你的链接没有损坏。我在某些时候确实犯过这种错误，但这样看起来不太好，而且你的观众也看不到那个目标页面！
• 更新您的作品集——我也没有经常这样做，但我会尝试至少每隔几个月在我的网站上添加新的项目和演讲。
• 用批判的眼光，用心设计。在开始写代码之前，我会用 Sketch 来打草稿。
• 考虑页面速度——我对所有网站都运行灯塔测试，以确保它们的性能。

我最喜欢的几个投资组合

• Timo Becker - 您将各个点连接起来并创建不同的插图 - 只需玩一玩，就很棒。
• Ben Halpern——这个网站令人难忘且有趣。
  

  本·哈尔彭跟随

  一位认为自己很有趣的加拿大软件开发人员。
• Julia Khusainova - 这个网站真的很简约，但却表达出了要点。
• Nik Papic——另一个简单但漂亮的。
• 罗比·莱昂纳迪- 比赛恢复！
• Dinesh Pandiyan - 颜色变化是一个非常酷的功能，我喜欢简约的设计。
  

  迪内什·潘迪扬跟随