我是如何用最酷的技术构建我的全栈投资组合网站的

如今，无论你想要的是……还是你的Saas产品，一个作品集或个人网站都变得必不可少。如果你是一名Web开发者，你肯定需要在某个时候构建它。说到作品集，每个开发者都有自己独特的方式，使用自己喜欢的工具或优秀的框架来创建它。然而，说到作品集网站，大多数都只注重前端，很少或根本没有后端，但我的情况并非如此。freelancefind a jobmarket

Next.js一直是我构建 Web 应用程序的首选，因为它支持SSG和SSR。然而，我也希望为我的网站提供一个类型安全的解决方案，所以我决定使用TypeScript ！我非常喜欢 TypeScript，因为它有助于更​​高效、更高效地编写代码。因此，本文并非教程，而是对我网站的演练和突破。

💡注意：如果您不想读到最后，可以访问此处的网站并在此处查看源代码 。如果您喜欢，请不要忘记给项目点个星！

堆栈

我在我的投资组合中使用的技术有：

• Nextjs（框架）
• Tailwind CSS（样式）
• Typescript（不需要任何解释🤣）
• Hygraph（GraphQL 无头 CMS）
• Apollo-client（缓存和状态管理）

我毫无例外地在我的投资组合中使用了所有这些优秀的技术！！！

💡我的作品集内容还在创作中。不过，我正在努力。

关于页面

“关于”页面是用户进入我的投资组合后首先看到的页面。您也可以将其标记为“我的投资组合主页”或“索引”页面。

在这里，人们可以找到一些关于我的信息，包括我提供的服务、价格、合作过的客户、客户评价以及一些关于我的趣事。当然，很多部分我可以分成多个页面。但是，我喜欢这种极简主义的设计，一个页面包含大量信息，这样我的客户就不必每次都一页一页地切换，这也很麻烦。而且，您在页面中看到的所有数据都是动态的，来自我上面提到的无头CMS。

简历页面

在简历页面上，人们可以看到我的经验、教育背景、技能、掌握的语言以及我作为一名 Web 开发者最喜欢的名言。同样，这些数据大部分都是从我的 CMS 动态获取的。

作品页面

作品页面是我作品集的重要组成部分。在这里，人们可以找到我参与过的所有项目。点击任何一个项目，都会打开一个灯箱，人们可以在其中查看关于该项目的所有其他必要信息。人们甚至可以在这里找到项目链接和GitHub 链接，这将增加我的项目获得流量和在我的 GitHub 代码库中获得星标的机会。

灯箱内容非常丰富，所以我使用了 Markdown 和 Tailwind 的排版插件
来设计样式。我不需要将 Markdown 解析为 HTML，因为我的CMS会自动帮我完成。如果你想知道我是如何做到的，可以访问我上面提到的GitHub 仓库。

工作页面甚至使用了cursor based pagination。你甚至可以称之为无限滚动。我已经借助我的CMS和apollo-client实现了它。基于游标的分页使用cursor和来返回特定游标之前或之后的take有限结果集。游标标记您在结果集中的位置，并且必须具有唯一值，例如或。要了解有关基于游标的分页的更多信息，请访问此链接。IDtimestamp

博客页面

在这里，您可以找到我迄今为止在dev.to上撰写的所有博客。此处的数据来自dev.to API，而非我的 CMS。如果您想了解dev.to API 的功能，例如pagination、limit、posts per page等，您可以访问GitHub 仓库或他们自己的文档。

与工作页面一样，博客页面也使用分页。不过，这次的offset-based分页是基于每页项目总数来计算总页数的。想要了解更多关于基于偏移量的分页，可以前往此页面。

统计页面

统计页面是我的投资组合的一个简单仪表板，人们可以在其中看到我的投资组合的流量、我做过的项目数量、与谁一起工作过等等。此外，我还添加了我所有的社交媒体链接，人们可以通过这些链接与我联系。

这里我使用了Google Analytics API来获取流量信息。想了解我是如何实现这个 API 的，请访问这个GitHub 页面，或者阅读Jatin Sharma在dev.to 上发表的这篇文章。他的文章对我帮助很大，真心推荐👌。

宾客留言簿

留言簿页面是我作品集中我最喜欢的一个。它的核心概念是，人们可以在网站上给我和其他人留言。所有消息都存储在 CMS 中，无论人们在哪里访问该页面，所有先前的消息都会在 apollo-client 的帮助下获取。在这里，我也使用了基于游标的分页（无限滚动），以避免一次性获取所有消息。

该页面如下所示 -

联系页面

听起来，大家可以在这里找到所有关于如何联系我的相关信息。它有谷歌地图和一个可以直接给我发消息的表单。

结论

总的来说，我喜欢这个投资组合的外观。但是，如果投资组合中存在任何缺陷或我可以改进的地方，请在评论区告诉我。如果您正在寻找该网站，它是使用 Vercel  https://portfolio-khaki-iota-89.vercel.app/部署的，源代码可以在 GitHub Repo上找到。

感谢阅读。下篇博文再见！😊🙌

访问：
👨‍💻我的投资组合
🏞️我的 Fiverr🌉
我的 Github