IDE 风格的 scrapbook 预览

Source: Dev.to

新年新自我作品挑战提交

这是对 Google AI 主办的新年新自我作品挑战 的提交。

关于我

你好，我是 Vamshi Duvva，居住在印度的全栈网页开发者。
我希望我的开发者作品集能够在代码编辑器中体现我所生活的环境。我的目标是打造一个让工程师感到熟悉，同时对非技术招聘者也保持友好的“家”。

作品集

在桌面上查看可获得最佳体验。

• URL:
• 个人作品集 URL:

我的构建方式

我使用 Next.js 并借助 Antigravity 完成了此作品集的构建。

技术栈

• 框架: Next.js
• UI 系统: Material UI + 自定义 SCSS 模块
• 编辑器: Antigravity
• 部署: Google Cloud Run

设计决策

双模式界面

• IDE 模式 – 完全功能的 VS Code 克隆

  • 文件资源管理器: 导航模拟打开真实文件
  • 终端: 模拟真实终端并提供基本命令

• 代码化简历

  // package.json
  {
    "dependencies": {
      "react": "^18.0.0",
      "node": "^16.0.0",
      "typescript": "^5.0.0"
    }
  }

  // Career.tsx
  export const Career = () => (
    <>
      {/* more  components */}
    </>
  );

  # contact.py
  class Contact:
      def __init__(self, email, phone):
          self.email = email
          self.phone = phone

• 剪贴簿模式（面向所有人） – 一种视觉“预览”模式，呈现宝丽来相片、便利贴和和纸胶带美学，为非技术访客提供个人化且富有创意的体验。

• 主题 – 在两种视图及所有组件之间保持一致的主题风格。

我最自豪的地方

我最自豪的是 “代码化简历” 的概念。与其使用普通的技能列表，我把自己的职业身份嵌入到日常使用的语言语法中。

• 将我的经历写成 Career.tsx 中的 <Career /> 组件，让代码本身讲述故事。
• 在 package.json 中定义我的技能，为开发者增添了一层元幽默。

我也为 双模式切换 的技术实现感到骄傲，它确保了从原始代码视图到风格化剪贴簿视图的无缝切换。

Antigravity

Antigravity 在整个项目中充当了我的配对程序员，大幅提升了我的工作流。

• 从规划到生产 – 在创纪录的时间内从高层规划转向细致实现。
• 云架构 – 帮助配置了 Turborepo 单体仓库所需的复杂 Dockerfile，优化了在 Cloud Run 上的构建。
• 迭代设计 – 精炼了 IDE 组件的 UI 逻辑，使我能够专注于设计的创意部分。