办公室作品集

Source: Dev.to

概览

此提交是 Google AI 主办的“新年新你作品集挑战” 的作品。目标是创建一个交互式、办公室主题的作品集，让访客可以探索不同的“房间”，了解我的背景、项目、兴趣爱好以及联系信息。

项目链接

访问交互式办公室作品集
提示：点击左上角可提升分辨率。

完整构建过程

概念与规划

• 最初的想法是构建一个游戏风格的作品集，让用户在虚拟办公室中漫游。
• 我向 Gemini 3 Pro 征求了反馈和建议。Gemini 推荐了：
  • 为低端硬件提供低分辨率模式。
  • 为触摸设备提供移动摇杆。
  • 一套具体的技术栈（此处省略细节）。

使用 Gemini 的提示

I want to create a portfolio website for a hackathon that visualizes the best portfolio as an office‑like game environment. The visitor should be able to:
- Walk around using arrow keys or on‑screen controls.
- Interact with characters:
  * Manager in a cabin → pop‑up with project details.
  * Co‑worker near the coffee machine → pop‑up with hobbies.
  * HR in the hallway → pop‑up with personal details.
- Approach a notice board at spawn → pop‑up with resume (downloadable).
- Approach a telephone → pop‑up with contact details (clickable links for GitHub, LinkedIn, email).
Provide a feasible implementation plan and suggestions for smooth gameplay.

在 Google AI Studio 中的开发

1. 第一版 生成了一个基本的办公室布局，并放置了所有角色。
2. 手动微调了角色位置。
3. 进行迭代调整，内容包括：
   • 创建小屋（因多次出现问题最终被省略）。
   • 移动端屏幕适配。
   • 出生点位置（最初位于沙发中心；后改为公告板，坐标如 [0,2,4] → [0,2,10]）。

工具与工作流

• 截图附件 功能对视觉反馈非常有帮助（“把这个改成那样”）。
• 大多数组件只需一次或少数几次迭代。
• 总开发时间约为 2 天，实际编码约 6 小时。

面临的挑战

未来改进

• 完整工作背景：添加过去项目和角色的详细描述。
• 语音代理：实现与角色的语音交互，提升沉浸感。
• 增强移动端控制：为触摸设备实现摇杆，以实现更流畅的导航。