前言

Hi，大家好，我是白雾茫茫丶！

很久没和大家见面了，说来惭愧，自从AI成了“全能助手”，我这个“码字工”的笔就有点锈了——感觉很多技术问题，还没等我写完文章，AI三言两语就解释清楚了。少了点输出深度内容的动力，手也就慢慢懒了。

不过最近，我又找到了一点不一样的感觉。工作上接触不到，我就自己动手——这段时间一直在折腾 Next.js + Shadcn UI 这套组合。不得不说，确实很火，用起来也很顺手，从头搭一个项目的过程，反而让我找回了那种边踩坑边学习的踏实感。

今天想和大家分享的，是我在这个过程中做出来的一个小成果：一个个人作品信息展示的模板。我觉得它设计得挺干净，结构也清晰，不管是拿来即用，还是当作学习参考，应该都还不错。如果你也在找类似的灵感或模版，不妨看看，希望能帮到你。

灵感来源

在我探索 Shadcn UI 的过程中，偶然发现了一个设计非常出色的模板：

https://magicui.design/docs/templates/portfolio

最初我只是把它集成在自己正在捣鼓的项目里试试水，但很快发现，这个页面本身就足够完整和优雅——即使独立出来，也完全能作为一个专业的作品展示站点。

于是，我决定把它单独抽离出来，搭建成了一个专注的作品展示项目。在保留其原设计精髓的基础上，我根据自己的偏好做了一些调整，加入了一些个性化的交互细节和动画效果，让整个界面在简洁之中多了一点灵动的气息。

最终呈现出来的，就是现在这个版本——整体保持干净利落，又不失细节处的巧思。如果你也在寻找一个轻量、现代且易于定制的作品集模板，或许这个实现能给你带来一些灵感。

为什么每个开发者都需要一个作品站点？

作为开作为开发者，我们每天都在创造价值：在 GitHub 提交代码、在掘金写技术文章、在开源社区贡献方案……

但这些成果往往散落在不同的平台，像一座座信息孤岛。面试时，我们需要反复解释这些分散的内容；求职时，简历上的短短几行描述，难以承载我们真实的技术思考与项目深度。

构建一个统一的技术身份，将分散的项目、文章、数据可视化整合在一个专业、可访问的空间。它不仅仅是一个作品集，更是：

• 面试的隐形加分项——当面试官通过一个精心设计的站点看到你的完整技术路径、真实的项目思考过程，这种体验远胜过千篇一律的简历

• 技术能力的系统证明——可视化你的 GitHub 贡献、技能雷达图、项目迭代历史，让抽象的能力变得具体可见

技术栈

- 框架：Next.js 16、React 19、TypeScript 5
- 样式：Tailwind CSS v4、tw-animate-css
- 可视化：Recharts
- 其他：ahooks、enum-plus、lucide-react

特性

- 基于 `Next.js App Router` 的现代架构
- 使用 `Tailwind CSS v4` 与自定义主题变量，支持暗色模式
- GitHub 仓库与贡献统计 API
- Halo 文章列表聚合 API
- Recharts 数据图表可视化
- 完整 SEO 文件：`robots`、`sitemap`、`manifest`
- 集成 Umami、Microsoft Clarity、Google Analytics（生产环境自动启用）

环境变量

在项目根目录创建 .env，示例：

# 站点信息
NEXT_PUBLIC_NAME="你的名字"
NEXT_PUBLIC_APP_NAME="Portfolio"
NEXT_PUBLIC_DESC="一句话简介/站点描述"
NEXT_PUBLIC_APP_DOMAIN="https://your-domain.com"
NEXT_PUBLIC_THEME="light" # 可选：light | dark | system

# 分析统计（生产环境生效）
NEXT_PUBLIC_UMAMI_ID=""
NEXT_PUBLIC_CLARITY_ID=""
NEXT_PUBLIC_GA_ID=""

# GitHub API
GITHUB_TOKEN="" # 只读 Token
NEXT_PUBLIC_GITHUB_USERNAME="your-github-username"

# Halo API
HALO_TOKEN="" # 只读 Token

效果预览

数据仅供参考

总结

这个基于 Next.js + Shadcn UI 构建的个人作品展示模板，是我在探索现代前端技术栈过程中的一次实践与沉淀。

技术本身是工具，但如何用它更好地表达自己、呈现价值，才是更有意义的探索。

如果你也在构建个人项目、整理作品集，或单纯想学习 Next.js 全栈实践，这个项目或许能给你一些参考。

在线预览：

https://portfolio.baiwumm.com

Github：

https://github.com/baiwumm/portfolio

调研