构建以 UI/UX 为中心的作品集

我建造的

我创建了一个个人作品集网站，用来展示我的一些精选作品和成就。整个网站是静态的，使用了 HTML、Javascript 和 CSS。动画效果则使用了 Barba 和 Locomotive Scroll 插件。

类别提交：个人网站/作品集

应用链接：https://personal-portfolio-fkqsn.ondigitalocean.app/

屏幕截图

该网站采用流畅的动画和自由流动的文本，营造出类似视差滚动的效果。

白色背景和黑色文字，再加上高缩放比例的图像，完美地融合了美感和真实感。

GIF图确实为网站增添了一种新的氛围，你不觉得吗？

需要强调的文本采用了不同的淡入效果，这有助于用户更加关注这些文本。

三分法构图法在设计中被广泛应用。

使用图片确实让网站看起来更好看，不是吗？ :D

源代码链接

查看GitHub：https://github.com/abishekvashok/personal-portfolio

请访问以下链接查看应用实况：https://personal-portfolio-fkqsn.ondigitalocean.app/

许可

MIT许可证

背景

很多人都让我把自己做过的事情整理到个人网站上展示出来。我一直想这么做，但始终抽不出足够的时间来打造一个出色的网站。所以，我做了这个：一个非常棒的静态网站，用来展示我这些年来的作品。

我一直希望它以优秀的设计为核心，为此我使用了 Barba 和 Locomotive-Scroll 这两个广泛使用的 JavaScript 库。大量的高清图片，加上流畅的动画和特效，让每一位访客都能感受到我作品的独特魅力！这正是我想要的效果！

我更相信设计应该能够启发灵感，点燃观者的热情。我已经尽了全力，希望大家都会喜欢！

我是如何搭建它的

我一开始考虑过使用NodeJS，但后来觉得Node对于这样一个简单的项目来说有点过于复杂，所以最终选择了HTML、CSS和JavaScript。是的，这个项目只用到了HTML5、CSS3、JavaScript和jQuery。我希望它是一个静态网站，而且速度很快。此外，它还必须兼容移动设备。移动兼容性和速度对我来说至关重要，因为我之前在自己创建的很多博客网站上都投入了大量精力进行SEO优化。我希望能够运用这些经验来做好这个项目。

但我很后悔要完全按照主题来设计样式，虽然从一些 WordPress 主题中汲取了灵感，但最终还是把它们混在一起，而不是使用它们的样式/主题。

制作完工作版本后，我使用 Digital Ocean 应用平台托管网站，并在此基础上进行进一步调整。我尽量减少了脚本和样式表，希望页面加载速度能更快。结果真的有效！Digital Ocean 的可靠性和稳定性，以及它提供的指标，真的帮了我大忙！

使用 barba 和 locomotive-scroll 的静态版本有点挑战性，在此过程中我不得不对脚本进行一些调整（最终使用了两个最小化的脚本，一个在页面内容之前加载，另一个在之后加载）。

使用 Polyfill 库是为了向后兼容旧版浏览器，以便每个用户，无论来自移动设备/桌面设备，还是来自旧版/新版浏览器，都能获得相同的体验。

所有这些主题的灵感都源于我最近对设计的痴迷，这要归功于我正在学习的Adobe Illustrator课程。我学习了Illustrator课程，并结合了我从绘画课上学到的一些基本原则，为我的作品集注入了新的活力。

我还没有完全掌握色彩运用，所以目前只使用了基本色——黑色（#000000）和白色（#FFFFFF）。

寻找合适的字体颇具挑战性，但经过一番研究后，我最终选择了 Unica 字体，效果非常漂亮：

我相信，通过制作一个更侧重于 UI/UX 设计而非开发者设计的作品集，我为世界做出了贡献，并且能够激励更多的人效仿。

还在等什么？快来看看我做了什么：https://personal-portfolio-fkqsn.ondigitalocean.app/