这是我最酷的作品集
我只需要 Tailwind CSS + GSAP npm + Next.js
引擎盖下
现在是 2024 年，故事要从 2024 年 1 月说起，当时我决定改版我的作品集网站。
我的网站需要一些改动，在考虑如何改版网站之前，我开始学习数据结构与算法（DSA）。
DSA 提高了我在时间复杂度方面提高代码质量的能力，也让我能够更清晰地思考编程问题。
前端本身就是一门底层数学。
- 使用 map 方法渲染项目列表
- 对项目列表进行筛选和排序又是一门数学。
- 将元素按网格顺序排列又是一门数学。
- 将组件的动画从 x -100% 变为 x 0% 又是一门数学运算。
- 在我重新学习了DSA编程基础知识之后，所有这些计算都得到了改进。
其实重点不是这个。完成数据结构与算法课程后，我获得了极大的信心，能够编写更简洁、更好、更重要的是更快速的代码。
当然，不出所料，效果很好，所以我决定改版我的网站。
重新设计作品集网站
这是我目前为止最有趣、最酷的项目。
目前我的作品集尚未完成，仍处于开发阶段，只完成了 70% 到 80%。
我出于以下三个原因正在改版我的网站。
- 无需多言，只需分享链接即可进行自我介绍。
- 为了获得更多客户和工作机会
- 为了展示我的编程相关项目
- 我们的作品集很好地介绍了我们，我至今还记得，我当时只是分享了我的个人网站链接，就获得了新客户和工作机会。
PDF 文件是分享简历或作品集的旧方法，不妨尝试分享链接，看看对方的反应或意见。
作品集网站很有意义，而且能给人留下深刻印象，所以如果可能的话，尽量做一个。
作品集中的动画
最终的改造方案是提供一个拥有大量动画效果的良好用户界面。
我已经改用 three.js、HTML canvas API 以及 web GL 和 GSAP 动画库，例如 anime.js。
我曾在 Reactjs 中使用过其他动画库，例如 react-spring、anime.js 和 framer-motion。
以下是我在 React.js 前端开发中使用过的动画库。
- Anime.js
- 帧运动
- swiper.js
- GSAP
- particle.js
- three.js
- web.gl 它们各有其意义，包括优点和缺点，但它们的学习曲线都不难，所以不妨一试。
您可以订阅我的新闻简报，每周获取有关软件包、模块以及如何开发的有趣故事。
项目游乐场
项目游乐场建设继续推进。
我认为每个开发者，尤其是前端开发者，都应该有一个展示自己所有前端项目的网站。
前端项目是一门艺术，而动画则能让事物看起来更美观。
我的目标是在一个链接下展示我的所有项目，以此作为我的作品集展示平台。
在接下来的5到10年里，我将建立一个专门的展示网站，向世界各地的人们展示我的所有项目。
酷炫的动画项目
首先，我会使用上述库，从一些小型的、耗时一天或一小时的动画项目开始制作动画。
迟早有一天，我会改进和开发一些很酷的动画项目或用户界面组件。
视频中，您可以在作品集项目展示区看到我的一些示例项目。
现在，我只需要尝试测试任何类型的新项目或 UI 组件，就可以轻松地向全球用户展示。
第一印象
第一印象往往是最后的印象。
我相信这一点，所以任何访问我网站的人至少都应该有一次发出“哇”的惊叹。
为了增加效果，我想到可以放一段介绍性的动画短片。
同样，下面的示例是使用 Tailwind CSS 和 gsap 动画库开发的，我使用的框架是 Next.js。
我还没有最终完成介绍视频，但它看起来会和上面视频中展示的一样。
工作经验
这是我迄今为止开发过的最好的工作经历页面。
UI 设计灵感来源于 gsap 滚动触发动画，用户沿 y 方向滚动，但 UI 组件沿 x 方向移动。
看到这段动画我非常高兴，并决定将其融入到我的作品集的工作经验部分中。
虽然集成起来并不容易，但 GSAP 只需几行代码即可完成。即使不使用 GSAP，也能轻松实现，我强烈建议开发者们尝试从头开始自行开发。
技术栈页面
向访问我网站的人展示你的技术栈非常重要。
我不想让他问一些基本问题，比如我使用过哪些技术，我的专业领域是什么。
因此，仅仅回避这个问题就需要技术栈组件，下面是添加炫酷动画后的效果图。
同样，动画也是使用gsap动画库添加的。
结论
继续完善你的作品集网站
您可以随意添加任何您想要的动画，并进行学习。
通过增加项目或改进作品集来不断学习和进步。
作品集网站应该简洁有趣，易于阅读和理解。
添加各种工作经验、项目、联系按钮或您的成就、博客。
先从你的前端项目入手，制作你的作品集网站。
就这样，
下次见，
Shrey