新年，新你投资组合挑战 by Simpled1

Source: Dev.to

这是一篇提交作品，参加由 Google AI 主办的 New Year, New You Portfolio Challenge

关于我

我是一名全栈工程师，热衷于弥合复杂算法逻辑与人类直觉之间的鸿沟。参加 “New Year, New You” 挑战的目标是超越静态文字和可预测的网格，我想构建一个展示工程能力的作品集，而不仅仅是列出它们。我相信代码应该是可感知的——被听见、被看到、被交互——因此我设计了这个应用，将排序算法和 JavaScript 事件循环等抽象概念转化为具体、交互式的体验。

作品集

作品集链接

我的构建方式

该作品集是一个为性能和交互性而打造的单页应用。

技术栈

• 框架：React 19 与 TypeScript（Vite）
• 样式：Tailwind CSS，采用自定义的 “赛博极简” 美学（Zinc/Slate 调色板搭配霓虹点缀）
• 动画：Framer Motion，用于复杂布局过渡和基于物理的交互
• 音频：原生 Web Audio API，实现实时频率合成（算法声化）
• 部署：使用 Docker 容器化，借助 Nginx 在 Google Cloud Run 上提供服务

Google Gemini AI 集成

我希望 AI 成为一个具备上下文感知的导师，而非仅仅是聊天机器人。通过免费 Gemini 2.5 Flash API，我将其直接嵌入可视化引擎：

• 算法解说：在排序可视化器中，Gemini 分析数组的当前帧（比较索引、交换逻辑），并生成机智的、类似体育解说员风格的解释，说明为何进行交换。
• 运行时导师：在事件循环模拟中，AI 分析调用栈、微任务队列和宏任务队列，解释优先级规则（例如为何 Promise 在 Timeout 之前被解析）。
• 语义迷宫生成：在路径寻找模块，用户可以输入自然语言提示（如 “一个有 3 间房间的地下掩体” 或 “螺旋图案”），Gemini 将意图转换为 2D JSON 网格布局，供路径寻找算法求解。

我最自豪的部分

我最自豪的是 事件循环可视化器。对于新手开发者来说，理解 JavaScript 如何处理异步操作（微任务 vs. 宏任务）一直是个难点。我构建了一个逐步调试器，实时可视化代码执行、调用栈以及 Web API。

我同样为 音频合成引擎 感到骄傲。与其使用预录的 MP3，我使用 Web Audio API 动态生成振荡器。这让排序可视化器能够“歌唱”——你真的可以听到未排序数组的嘈杂噪声与排序后上升扫频的满足感之间的区别，使算法能够通过更多感官被感知。