个人作品集要是做得跟简历一样死板，那真的没啥意思

看了看自己的个人主页，总觉得那种一本正经的“专业感”实在是太无聊了，完全看不出开发者个人的性格。干脆这周花了点时间折腾了一下，把原本那个像说明书一样的作品集彻底重构了。现在的版本更像是我的一个数字分身，甚至带点“情绪”。

这次改版我主要动了三个地方：

语气切换功能（Vibe/Tone Switch）

我做了一个切换开关，默认是那种标准的职业化语气，但如果你想看点不一样的，可以切到“无过滤”模式。虽然我现实中已经不是那种愤世嫉俗的青少年了，但保留这种带有个人色彩的表达方式，能让访问者一眼看出这个项目背后是个活生生的人，而不是一个只会写 CRUD 的机器人。

氛围感系统：天气与音乐

单纯展示项目太干瘪了，我给页面加了一套动态天气系统。起初我只想做一个永远阴雨绵绵的模式（因为我个人极度偏爱那种阴郁、多云的氛围），但后来觉得既然都做了，干脆把晴天、雨天这些全部做出来。

• 视觉效果： 根据选择的天气，页面会实时渲染对应的掉落元素（比如雨滴或雪花）。
• 听觉交互： 每个天气模式都配了对应的背景音乐，通过这种多维度的交互，让访问者在看我代码能力之前，先进入我的情绪氛围里。

接入 DEV API 显示文章阅读量

之前在 DEV 社区写文章，一直想在自己的作品集里展示文章列表，但发现如果不拿 API Key，就没法实时获取每篇文章的具体阅读量（View Counts）。为了解决这个痛点，我参考了一些实现思路，通过封装一个异步函数来抓取数据。

这里分享一下我实现数据抓取的逻辑片段，用的是 TypeScript：

async function fetchFromUpstream(): Promise<DevToArticlePayload[]> {
 const apiKey = process.env.DEVTO_API_KEY;
 if (!apiKey) {
  throw new Error("DEVTO_API_KEY is not configured");
 }

 const upstreamResponse = await fetch(DEVTO_PUBLISHED_URL, {
  headers: {
   "api-key": apiKey,
   Accept: "application/json",
  },
 });

 if (!upstreamResponse.ok) {
  throw new Error(`Failed to fetch dev articles (${upstreamResponse.status})`);
 }

 const payload = (await upstreamResponse.json()) as DevToArticlePayload[];
 // 这里需要一个 mapArticles 函数来清洗数据
 return mapArticles(payload);
}

虽然这种折腾对提升生产力没啥直接帮助，但对于一个开发者来说，这种把“性格”和“技术细节”揉在一起的过程，才是写代码最爽的地方。