为什么要使用平淡的简历，而可以拥有一个 OS？🚀 深入 BDK-OS

Source: Dev.to

请提供您希望翻译的正文内容，我将为您翻译成简体中文。

新年，新你 作品集挑战提交

这是对Google AI 主办的新年，新你作品集挑战的提交。

关于我

我是一名充满热情的全栈开发者，拥有 2 + 年 的工业经验，并对构建高性能、富有创意的网页应用有着深厚的热爱。我的技术之旅源于将复杂问题转化为优雅、交互式数字体验的挑战。

我的作品集表达

通过这个作品集 BDK‑OS，我想展示的不仅仅是一份技能清单。将我的职业档案重新构想为一个完整的、基于浏览器的操作系统，我展示了：

• 技术多样性 – 管理复杂的全局状态、终端逻辑和游戏引擎。
• 设计感知 – 对玻璃拟态（glassmorphism）和霓虹复古 UI 等高端美学的执着。
• 以用户为中心的创新 – 将“只读”简历转变为“交互式”体验，访客可以浏览我的简介、运行我的代码，甚至玩游戏。

我始终在寻找新的挑战和机会，愿意为前沿项目贡献力量。让我们一起打造惊艳的作品吧！

投资组合

(作品集本身是 BDK‑OS 交互式网站。)

我是如何构建它的

构建 BDK‑OS 是一次将复古计算美学与超现代网页性能融合的练习。我的目标是创建一个看起来像“活的”工作空间的作品集，而不是一个静态页面。

技术栈

• 框架 – Next.js 16.1（App Router），用于高性能的服务器端渲染和静态生成。
• UI/样式 – Tailwind CSS，提供实用优先、可高度定制的设计系统。
• 动画 – Framer Motion，为流畅的窗口切换、拖拽机制以及 “Progressbar95” 游戏引擎提供动力。
• 图标 – Lucide React，保持一致的极简图标语言。
• 部署 – 使用多阶段构建的 Docker，利用 Next.js 的 standalone 输出进行生产优化。

设计决策

• “操作系统”概念 – 窗口化的桌面界面（BDK‑OS）让访客能够像探索我的数字大脑一样与项目、个人简介和终端交互。
• 玻璃拟态 & 霓虹 – 大量的背景模糊（backdrop-blur-md）、半透明黑色（bg-black/80）以及霓虹蓝色点缀，营造出高端、精品的感觉。
• 交互式终端 – 包含模拟文件系统（bio.txt、projects.md）、命令历史导航（方向键）以及与窗口管理器的集成，可启动如游戏等应用。

开发过程

我采用了组件优先的架构，构建了自定义的 WindowManagerContext 来全局管理所有打开、最小化和最大化窗口的状态。这使得以下功能得以实现：焦点跟踪（将最近点击的窗口置于最前）和单击最大化。

使用的 Google AI 工具

该项目在 Google Antigravity（由 Gemini 模型驱动）的帮助下完成。AI 在以下方面提供了帮助：

• 架构设计 – 窗口系统和终端逻辑的全局状态管理。
• 复杂逻辑 – “Progressbar95” 终端游戏的碰撞检测和生成算法。
• 创意资产 – 使用 Gemini 的图像生成生成自定义的 BDK‑OS favicon。
• DevOps 优化 – 编写生产就绪的 Dockerfile 并配置 Next.js 的 standalone 输出，实现无缝部署。
• SEO 与元数据 – 自动化 OpenGraph 标签和专业描述，以提升可发现性。

我最自豪的

为经典注入新生命

Progressbar95 游戏集成是我最兴奋的功能。

• 技术成就 – 在 React 组件中构建了实时游戏引擎，使用 Framer Motion 实现高性能动画、下落段落以及“捕手”和掉落条之间的碰撞检测。
• 彩蛋感受 – 作为对经典操作系统设计的致敬，同时展示了我创造有趣、引人入胜的用户体验的能力。

定制窗口管理系统

我没有使用标准布局库，而是从头构建了自定义窗口管理器。

• 深度与焦点 – 动态 Z‑index 系统跟踪活动窗口并自动将其置于前端，模拟真实操作系统。
• 桌面工作流 – 拖拽机制、窗口最小化到任务栏以及全屏最大化切换，全部由 WindowManagerContext 提供支持。

命令行灵魂

终端不仅是静态文本框，它与我的数据集成。

• 模拟文件系统读取实际项目数据（projects.ts）和个人简介。
• 命令历史（上下箭头）和独特命令（例如 game 用于启动其他 UI 部分）为面向开发者的访客创造了统一的体验。