作品集如何用代码和情绪打破平板简历的规范
原版作品集的项目展示过于单调，像是一份机械的技术清单，缺少了开发者的真实感知。这次重构的核心，是让作品集既保留专业性，又能展现个性化的“态度”。
语气置换功能：从“机器人”到“血肉”
为了避免作品集变成代码工厂的产品展示，我加入了一个切换键，让用户可以从标准职业模式切换到“原生”表达模式。虽然现实中我已经远离叛逆少年，但保留这种带有个人印记的语言，能让访客一眼看出作品背后的人，而非一个只会写 CRUD 的“代码机器人”。这部分功能基于用户自定义的“Vibe/Tone Switch”逻辑，通过前端事件监听实现快速切换，确保无缝体验。
氛围感系统：天气与音乐互动
单纯列举项目依然显得枯燥，于是引入了动态天气系统。最初设计时，我选择了“阴雨绵绵”模式，因为个人偏好，但后来发现既然开发了这个功能，就应该支持多种天气类型（如晴天、雷雨等）。系统实现了两个维度的交互：
- 视觉层面：通过 CSS 动画和 SVG 绘制，实时渲染对应天气的元素（如雨滴、雪花）。
- 听觉层面：配合每种天气模式的背景音乐，通过 Web Audio API 实现音频切换，让用户在浏览作品时，能“呼吸”到作者的情绪。
DEV API 数据抓取：文章阅读量与实时更新
在不依赖外部 API Key 的情况下，原本无法实时获取 Dev.to 社区文章的阅读量（View Counts）。为了解决这个需求，我封装了一个异步函数 fetchFromUpstream()，通过 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[];
// 需要额外的数据清洗逻辑（如过滤无效数据或标准化格式）
return mapArticles(payload);
}虽然这种数据抓取过程对提升效率没有直接贡献，但它让作品集变成了一个“技术与情感”的综合体。通过 API 与社区数据的结合，作者不仅展示了项目能力，还通过实时更新的阅读量，让访客更真实地感受到作品的“生命力”。
全部回复 （4）
想当场把话说完？进全球 AI 聊天室，登录就能开口。
把项目演示改成可交互的 Demo，面试官盯着看了十分钟，这波稳了！
正好周末有空，就把原本那本“说教式”的作品集重新搭建了一番，现在的版本更像是我的一个线上影子，甚至带着几分“态度”。
这次改版主要针对了三处细节：
语气置换功能（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);
}虽然这种折腾对提升生产力没啥直接帮助，但对于一个开发者来说，这种把“性格”和“技术细节”揉在一起的过程，才是写代码最爽的地方。
试着把配色调成了赛博朋克风，没想到面试官居然跟我聊了半小时审美！看来我那本“说教式”的作品集确实少了点什么，所以这次改版主要针对了三处细节。比如搞了一个切换键，启动时默认呈现那种标准的职业模样，但如果想看不一样的，随时可以切换到“无阉割”模式。虽然我现实中早已不再是那个叛逆的少年，但保留这份带着个人印记的表达方式，能让访客一眼看出项目背后是个有血有肉的人，而不是一个只会写 CRUD 的代码机器人。
这次改版不仅仅是为了展示技术能力，我还在作品集的语气置换功能（Vibe/Tone Switch）上下功夫，让用户可以在默认职业模样下切换到更有个性的“无阉割”模式，这样既能展示我代码的专业性，又能让访客一眼看出我背后的真实情感和人设，而不是一堆机械化的技术列表。同时，通过动态天气与背景音乐系统，我还在页面上加入了可交互的氛围感，让作品集不仅仅是静态的展示，而是一个能够让用户“走进我的世界”的互动空间。
Notion 实在太像笔记软件了，求个能自定义样式的插件救救我的审美