耶！我创建了我的第一个作品集！🎉

经过几个月的努力，我终于要推出我的作品集，向世界展示。

我一直认为社交媒体账号就足够了，大多数情况下并不需要作品集。但如果没有单独的作品集，就很难展现你的故事和个性。

我做过用户体验设计、技术写作、开源开发、社区管理，所以很难只用 GitHub、LinkedIn、X 这样的一个平台来展示我的所有能力。这就是我决定完善作品集的主要原因。

今天，我把它部署到了anmolbaranwal.com上！还有很多东西和功能我想添加（比如 PWA、UI 改进……），但我认为它已经足够好了，可以向大家展示。

请提供您的反馈意见，这对我们意义重大！🙏

大家小心点，还有浅色模式呢（是的，我知道）！！

在这篇博客中，您将看到我的构建方法、对我来说最困难的部分、我使用的技术栈以及从该项目中获得的主要经验教训。

对我来说，哪一部分最难？

编程确实很难，至少有些部分是这样，但对我来说，用户界面设计更难。

我想要营造一种令人惊艳的效果，并以易于理解的方式展示所有必要信息。我为此苦苦挣扎了几个月，直到我决定放弃使用 Adob​​e XD 进行设计，转而使用其他方式。开始建造。

最后，我不断地搭建东西（心中有一个基本结构），设计过程变得容易多了。

有些部分我从一些网站（主要是用户体验方面）汲取了灵感，但所有代码都是我自己编写的。

就性能而言，它在电脑屏幕上表现良好，但Largest Contentful Paint (LCP)在移动设备屏幕上存在一些问题。我已经尽力改进，并打算发布。几周后我会继续改进。

一切都经过优化和自动化处理。

我想要一个更新起来最省事的作品集，这就是我构建这个作品集的方法。

我们以项目部分为例。

我创建了一个系统，可以从 GitHub 获取项目，并只显示允许的项目，同时提供了一种简单的方法来排列它们的顺序。

然后，如果我想更新某个特定字段（而保留其他字段不变），我也可以这样做。

例如，如果我只想更改项目描述，而保留其他已获取的信息，我只需将该更改添加到数据中，系统就会自动应用，其他字段保持不变。

为这部分编写时间线、推荐图标以及其他许多内容的代码真的非常困难。

几乎所有其他部分也都只依赖于数据，因此更新所有内容都很容易。

技术栈

我们来简单谈谈我使用的技术栈：

• Next.js v14作为前端框架（对搜索引擎友好）
• TypeScript：作为编程语言
• Tailwind CSS用于造型
• Framer motion：用于动画
• Forem v1 APIs用于获取博客
• GitHub APIs：用于获取项目
• Cursor free version作为代码编辑器（从 VSCode 切换而来）
• GitHub用于存储源代码（它是私有的）
• Vercel：用于每次提交后的部署和实时预览

我还为不同的组件使用了不同的软件包：

• embla-carousel：用于用户评价
• lucide icons：用于图标
• react-modern-drawer：用于移动屏幕侧边栏

我创建了自己的图标组件，这使得处理 SVG 文件的工作变得容易得多。

字体

我使用了Google Fonts 中的字体Open_Sans，Manrope以及自定义字体作为链接部分的标题。

颜色

我喜欢深色模式，所以我想以一些深色调作为主色调。

我选择了紫色作为主色调。紫色代表忠诚，很符合我的性格。

我的作品集中的各个部分

我添加的所有章节：

• 首页
  • 英雄
  • 公司
  • 我的故事
  • 工作流程
  • 用户评价
  • 接触
  • 页脚
• 关于
• 工作经验
• 项目
• 博客
• 链接

项目和博客是其中最复杂的部分。

我也使用了一些开源组件，但为了达到我想要的效果，需要进行大量修改。为了保持代码库的整洁，大部分代码都是我从零开始编写的。

几个月后，我还计划添加更多类似achievements和的章节tech stack。

主要收获

与其试图设计一个完美的页面或纠结于每一个小细节，立即开始。

先专注于创建基本结构或线框图，然后逐步完善。一旦迈出第一步，整个过程就会变得容易得多。

我学到了很多东西，包括：

• 复杂层面的开放图图像和元数据
• 优化技术，特别是关于最大内容绘制（LCP）的优化技术。

在建造过程中，你还会发现更多精彩内容。你也会的！

这是我在社交媒体上使用的演示视频。

目前，我将休息一段时间，并将更多精力放在技术写作上。

我知道它并不完美，但我花了很多精力来编写代码。

我一直很喜欢建造一些项目来向世界展示，而这个项目对我来说意义非凡。谢谢！💜

您可以通过GitHub、Twitter和LinkedIn联系我。