feat: 优化简历技能栏技术栈呈现

feat: 增加 DevOps 平台简历亮点
- src/resume-data.js: 新增 DevOps 运维平台项目、能力标签和技能树内容 - public/logos/devops-platform.svg: 增加 DevOps 平台项目图标
2026-06-12 17:05:22 +08:00 · 2026-06-12 16:38:03 +08:00 · 2026-06-11 10:05:17 +00:00 · 2026-06-11 17:48:09 +08:00
9 changed files with 302 additions and 26 deletions
@@ -0,0 +1,21 @@
+# my-resume Agent Skills
+
+本目录存放 `my-resume` 的项目级 Agent skill。规则参考 SeaCloud 项目的 agent skill 组织方式，并按当前 Vite、Three.js 和作品集页面场景保留最小必要规范。
+
+## 使用入口
+
+1. 进入仓库后先读 `AGENTS.md`。
+2. 创建或修改代码文件时，使用 `header-comment-sync` 保持中文文件头、导出声明和复杂逻辑注释同步。
+3. 提交或推送代码时，使用 `chinese-commit-message` 生成英文 type 前缀加中文摘要的 commit message。
+4. 所有 skill 的触达文件补齐规则只处理本次任务相关文件，不要求为了单次任务全仓扫描。
+
+## 当前项目事实
+
+- 应用类型：独立 Vite + Three.js 作品集站点。
+- 技术栈：Vite、Three.js、GSAP、Lenis、原生 JavaScript。
+- 关键边界：交互与动效逻辑需要关注移动端性能、 reduced-motion 降级和首屏可读性。
+
+## Skill 索引
+
+- `header-comment-sync`：中文文件头、导出声明、复杂逻辑和风险边界注释。
+- `chinese-commit-message`：中文提交信息格式。
@@ -0,0 +1,54 @@
+---
+name: chinese-commit-message
+description: 在本仓库执行 git commit、整理提交说明或准备推送时使用，保持提交信息使用英文类型前缀加中文描述。
+---
+
+# 中文提交信息
+
+## 何时使用
+
+- 用户要求提交、推送或整理 commit message。
+- 你准备执行 `git commit`。
+- 需要总结当前 diff 的提交说明。
+
+## 核心要求
+
+1. 提交信息必须使用英文 type 加中文摘要，例如 `feat: 补齐作品集 agent skill 规范`。
+2. 常用 type 优先使用 `feat`、`fix`、`refactor`、`docs`、`chore`。
+3. 不强制 scope；只有模块边界非常清楚时才使用 `feat(scene): ...`。
+4. 标题部分使用简洁中文，直接说明改动，不写“修改一下”“更新代码”这类空泛描述。
+5. 非 trivial 改动建议补中文正文，用扁平 bullet 按文件或内容块说明关键动作。
+6. 正文与标题之间空一行；正文每条 bullet 对应一个独立文件或明确内容块。
+7. 如果用户指定提交信息，优先尊重用户原意，只做必要格式整理。
+
+## 触达文件补齐
+
+- 不要求为了提交信息单独全仓扫描。
+- 提交前如果 diff 中的触达文件明显违反对应 skill 的触达补齐要求，应先修正当前相关链路，再整理 commit message。
+- commit 正文应概括本次触达补齐，例如“补齐触达文件注释”“同步 README 目录说明”。
+
+## 推荐结构
+
+```text
+feat: 补齐作品集 agent skill 规范
+
+- .agents/README.md: 新增项目级 skill 索引和使用入口
+- .agents/skills: 补充中文提交与注释同步规则
+- AGENTS.md: 增加本地 skill 入口
+```
+
+## 不推荐写法
+
+- `新增规则`
+- `feat: add skills`
+- `fix bug`
+- `update`
+- 复杂改动只有标题没有正文。
+- 正文写成长段流水账或嵌套列表。
+
+## 落地检查
+
+- type 是否合理。
+- 中文摘要是否覆盖主改动。
+- 是否需要正文。
+- 正文是否按文件或内容块归纳。
@@ -0,0 +1,66 @@
+---
+name: header-comment-sync
+description: 在本仓库创建或修改 ts、tsx、js、jsx、mjs、cjs、vue、astro 文件时使用，保持中文文件头、导出声明、复杂逻辑和风险边界注释准确。
+---
+
+# 注释规范与同步
+
+## 目标
+
+让下一次进入文件的维护者能快速理解当前职责、关键约束和风险边界。注释解释“为什么”和“边界”，不复述代码表面行为。
+
+## 适用场景
+
+- 新增或修改页面入口、Three.js 场景、动效编排、渲染、数据、工具或脚本文件。
+- 修改滚动时间线、WebGL shader、响应式布局、性能降级、 reduced-motion 或首屏渲染逻辑。
+- 发现旧注释与当前代码行为不一致。
+
+## 核心原则
+
+- 注释使用中文，描述当前事实。
+- 简单局部变量不强行注释。
+- 文件头说明文件当前职责，1 到 2 行即可。
+- 导出的函数、类、类型、常量、配置对象和复杂模块方法应有用途说明。
+- 复杂动画相位、shader uniform、滚动联动、性能降级和浏览器兼容边界需要短注释。
+- TODO/FIXME 必须说明触发条件、剩余动作和可删除条件。
+
+## 文件头规则
+
+- 每个适用文件都要有准确文件头。
+- 如果文件必须以 `"use client"` 或 `"use server"` 开头，文件头注释放在指令之后、导入之前。
+- Vue 文件不为了补头注释重排模板结构；在 `<script>` 或 `<script setup>` 顶部补当前职责说明。
+- 文件头不要写“本文件用于...”这类空话，直接说明业务角色。
+
+```js
+/**
+ * 装配作品集滚动叙事、WebGL 背景和移动端性能降级策略。
+ */
+```
+
+## JSDoc 与局部注释
+
+- 导出的函数、类、类型、常量和配置对象优先使用 JSDoc。
+- 非导出但复杂的解析、格式化、请求构造、动画相位派生、回调工厂也要补。
+- 只在局部逻辑确实有约束时使用行内注释，例如性能降级、兼容字段、shader 参数和临时迁移。
+- 不要在每一行、简单 DOM 拼装、短生命周期变量上堆注释。
+
+## 触达文件补齐
+
+- 不要求为了注释规范单独全仓扫描。
+- 只要本次任务修改了适用文件，就顺手补齐明显缺失或过时的文件头、导出声明、共享类型、复杂回调和协议注释。
+- 大文件可按触达区域优先，但同文件内裸露的顶层导出和共享类型应一起补。
+- 如果一次补齐整个大文件会明显超出需求范围，至少补齐当前需求链路和顶层声明，并在交付说明里说明剩余范围。
+
+## 不推荐的写法
+
+- 注释只写“处理数据”“点击事件”这种无信息内容。
+- 注释描述旧方案，和当前代码矛盾。
+- 为简单 DOM 拼装、简单赋值、短生命周期变量写注释。
+- 用英文口号、emoji 或情绪化标记替代项目内中文说明。
+
+## 落地检查
+
+- 修改后的文件头是否准确。
+- 新增/修改的导出声明是否有必要说明。
+- 复杂逻辑是否解释了约束而不是复述代码。
+- 旧注释是否仍然可信。
@@ -0,0 +1,17 @@
+# my-resume Agent 入口
+
+## 项目规则
+
+- 使用当前 Vite + Three.js + 原生 JavaScript 结构，不引入无关框架。
+- 页面内容、计划文档和交付说明优先使用中文。
+- 改动可运行入口、目录或重要文件时，同步更新 `README.md`。
+
+## 必用 Skill
+
+- 创建或修改 `ts`、`tsx`、`js`、`jsx`、`mjs`、`cjs`、`vue`、`astro` 文件时，使用 `./.agents/skills/header-comment-sync/SKILL.md`。
+- 执行 `git commit`、整理提交说明或准备推送时，使用 `./.agents/skills/chinese-commit-message/SKILL.md`。
+
+## 本地规则
+
+- 先读 `.agents/README.md`，再按任务读取匹配的 skill。
+- skill 的触达文件补齐只处理本次修改相关文件，不为单次任务全仓扫描。
@@ -11,3 +11,10 @@ npm run build
 ```

 The page uses a restrained scroll-aware WebGL backdrop, critical first-paint styling, grounded resume summaries, responsive layout, subtle scroll reveals, project cards, skills, experience, and contact sections.
+
+## Agent Notes
+
+- `AGENTS.md`: Codex/Agent 入口规则。
+- `.agents/README.md`: 本项目 Agent skill 索引和使用入口。
+- `.agents/skills/chinese-commit-message/SKILL.md`: 中文提交信息规范。
+- `.agents/skills/header-comment-sync/SKILL.md`: 中文文件头和注释同步规范。
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-labelledby="title">
+  <title id="title">DevOps 运维平台</title>
+  <defs>
+    <linearGradient id="panel" x1="18" x2="78" y1="14" y2="82" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#22d3ee" />
+      <stop offset="1" stop-color="#8b5cf6" />
+    </linearGradient>
+  </defs>
+  <rect width="96" height="96" rx="22" fill="#08111f" />
+  <rect x="16" y="20" width="64" height="48" rx="10" fill="url(#panel)" opacity="0.18" />
+  <rect x="20" y="24" width="56" height="40" rx="7" fill="#0f172a" stroke="#38bdf8" stroke-opacity="0.65" />
+  <path d="M29 37h19M29 48h11M53 48h14" stroke="#e0f2fe" stroke-width="4" stroke-linecap="round" />
+  <circle cx="62" cy="37" r="5" fill="#34d399" />
+  <path d="M31 74h34M39 64v10M57 64v10" stroke="#a5b4fc" stroke-width="4" stroke-linecap="round" />
+</svg>
@@ -1,3 +1,6 @@
+/**
+ * 将简历数据渲染为对话式作品集页面，负责不同回合的 DOM 结构装配。
+ */
 import {
  experiences,
  focusAreas,
@@ -119,15 +122,28 @@ function skillsContent(answer) {
  answer.append(el("div", "a-title gen", "Token Stream / Skills"));
  const HOT = new Set([
    "SSE 流式通信",
-    "Next.js",
-    "React",
+    "Next.js 16",
+    "React 19",
    "React Native",
    "TypeScript",
+    "NestJS",
+    "MySQL",
+    "Redis",
+    "Jenkins",
+    "Gitea",
+    "BPMN",
    "Qiankun",
  ]);
+  const grid = el("div", "skills-grid");
  skills.forEach((group) => {
-    const wrap = el("div", "skill-group");
-    wrap.append(el("div", "g-name", group.group));
+    const wrap = el("div", "skill-group gen");
+    const head = el("div", "g-head");
+    head.append(
+      el("div", "g-name", group.group),
+      el("span", "g-count", `${group.items.length} 项`),
+    );
+    wrap.append(head);
+    if (group.summary) wrap.append(el("p", "g-summary", group.summary));
    const row = el("div", "tag-row");
    group.items.forEach((item) => {
      row.append(
@@ -135,8 +151,9 @@ function skillsContent(answer) {
      );
    });
    wrap.append(row);
-    answer.append(wrap);
+    grid.append(wrap);
  });
+  answer.append(grid);
 }

 function experienceContent(answer) {
@@ -200,6 +217,9 @@ const CONTENT = {

 /* ---------- 装配 ---------- */

+/**
+ * 根据对话回合配置生成主内容区，保留滚动叙事所需的 section 结构。
+ */
 export function renderDialogue(mount) {
  rounds.forEach((round) => {
    const section = el("section", "round");
@@ -228,6 +248,9 @@ export function renderDialogue(mount) {
  });
 }

+/**
+ * 生成右侧回合导航节点，并把点击行为交给滚动编排模块处理。
+ */
 export function renderRail(mount, onJump) {
  rounds.forEach((round) => {
    const node = el("button", "rail-node");
@@ -1,6 +1,10 @@
+/**
+ * 维护作品集页面的简历指标、能力标签、项目经历和职业路径文案。
+ */
 export const metrics = [
  { value: "7 年", label: "Web 与跨端前端经验" },
  { value: "2 条", label: "近一年参与的产品线" },
+  { value: "6 个", label: "纳管项目发布闭环" },
  { value: "SSE", label: "对话流、思考态、消息重试" },
  { value: "12 个", label: "微前端拆分基础项目" },
  { value: "30%", label: "消息渲染链路优化结果" },
@@ -25,50 +29,80 @@ export const focusAreas = [
  },
  {
    title: "工程习惯",
-    summary: "经历过微前端拆分、跨项目公共包、i18n 协作、监控接入和代码审查，能把模块交付和团队维护放在一起考虑。",
-    points: ["Qiankun", "Monorepo", "i18n", "Code Review"],
+    summary: "经历过微前端拆分、跨项目公共包、i18n 协作、监控接入、发布平台和代码审查，能把模块交付和团队维护放在一起考虑。",
+    points: ["Qiankun", "Monorepo", "DevOps", "Code Review"],
  },
 ];

+/**
+ * 首页自我介绍回合的关键叙事点，突出近一年方向与个人项目信号。
+ */
 export const resumeSignals = [
  "前端经验覆盖 PC 管理后台、小程序、H5、React Native 和微前端，最近一年主要在 AI 产品团队做业务前端。",
  "SeaBuzz 侧更偏用户体验：对话、内容流、新闻详情、游客数据、分享和反馈链路。",
  "SeaCloud / Vtrix 侧更偏控制台：Pricing、Billing、API Keys、组织权限、交易筛选和分销配置。",
-  "技术栈以 React / Next.js / React Native / TypeScript 为主，也有 Vue、UniApp 和 Qiankun 项目经验。",
+  "个人工程实践里搭建了 DevOps 运维平台，把 Gitea、Jenkins、BPMN、通知、审计、Agent 诊断和 Jenkins 直构导入串成发布闭环。",
+  "技术栈以 React / Next.js / React Native / TypeScript 为主，能覆盖 Vue、UniApp、Qiankun、NestJS、MySQL、Redis 和 Jenkins/Gitea 发布链路。",
 ];

+/**
+ * 技能栏按招聘方扫读路径分组，避免基础设施与数据层能力被埋在项目详情里。
+ */
 export const skills = [
  {
-    group: "对话与内容",
-    items: ["SSE 流式通信", "打字机响应", "Markdown/LaTeX", "来源引用", "对话历史", "新闻详情"],
+    group: "前端主栈",
+    summary: "主力交付栈，覆盖 AI 产品、控制台、移动端和多端内容流。",
+    items: ["React 19", "Next.js 16", "React Native", "TypeScript", "Vue 3", "Element Plus", "Tailwind CSS", "Zustand", "Alova"],
  },
  {
-    group: "控制台",
-    items: ["Pricing", "Billing", "API Keys", "组织权限", "额度限制", "交易筛选", "Excel 导出"],
+    group: "数据与后端协作",
+    summary: "能理解接口、数据模型和状态一致性，不只停留在页面拼装。",
+    items: ["NestJS", "OpenAPI", "DTO 校验", "Prisma", "MySQL", "Redis", "BullMQ", "幂等键", "乐观锁"],
  },
  {
-    group: "跨端体验",
-    items: ["React Native", "Expo Router", "NativeWind", "游客转登录", "只读分享", "Smart Image"],
+    group: "DevOps 与发布",
+    summary: "从个人项目实践中补齐发布闭环、可观测性和运维诊断意识。",
+    items: ["DevOps 平台", "Jenkins", "Jenkins 直构导入", "Gitea", "BPMN", "Outbox", "审计日志", "构建日志脱敏", "Runbook"],
  },
  {
-    group: "Web 主栈",
-    items: ["Next.js", "React", "Vue 3", "TypeScript", "Tailwind CSS", "Zustand", "Alova"],
+    group: "AI 对话与内容",
+    summary: "最近一年重点投入的方向，关注流式体验、上下文恢复和内容可读性。",
+    items: ["SSE 流式通信", "打字机响应", "Markdown/LaTeX", "来源引用", "思考态", "对话历史", "新闻详情"],
  },
  {
-    group: "小程序与 H5",
-    items: ["UniApp", "微信小程序", "飞书小程序", "H5", "摄像头扫码", "低功耗蓝牙"],
+    group: "控制台业务",
+    summary: "长期处理权限、账务、额度、筛选导出等后台业务边界。",
+    items: ["Pricing", "Billing", "API Keys", "组织权限", "额度限制", "交易筛选", "Excel 导出", "成员权限"],
  },
  {
-    group: "工程协作",
-    items: ["pnpm Monorepo", "Git Submodules", "Qiankun", "Lerna", "i18n 同步", "Code Review"],
+    group: "跨端与小程序",
+    summary: "覆盖 App、H5、小程序和门店设备链路，能处理端侧能力差异。",
+    items: ["Expo Router", "NativeWind", "UniApp", "微信小程序", "飞书小程序", "游客转登录", "Smart Image", "摄像头扫码", "低功耗蓝牙"],
  },
  {
-    group: "工程化与质量",
-    items: ["ARMS 监控", "CDN 优化", "Playwright", "Git Flow", "分支规范", "新人培训"],
+    group: "工程协作与质量",
+    summary: "偏团队长期维护视角，关注复用、规范、监控和评审质量。",
+    items: ["pnpm Monorepo", "Git Submodules", "Qiankun", "Lerna", "i18n 同步", "ARMS 监控", "Playwright", "Git Flow", "Code Review"],
  },
 ];

 export const projects = [
+  {
+    id: "devops-platform",
+    name: "DevOps 运维平台",
+    logo: "/logos/devops-platform.svg",
+    period: "2026.06 - 至今",
+    subtitle: "个人项目发布与可观测控制台",
+    summary:
+      "从零搭建一套自用 DevOps 运维平台，把本地与线上项目的发布、Jenkins 构建与直构导入、Gitea refs、BPMN 流程、通知 outbox、审计日志和 Agent 诊断收敛到一个控制台。",
+    modules: [
+      "前端采用 Vue 3、Vite、TypeScript、Element Plus 和 Pinia，提供登录、成员权限、项目诊断、发布中心、运行记录、系统配置和全局 Agent 抽屉。",
+      "后端采用 NestJS、Prisma、MySQL、Redis/BullMQ，接入统一 envelope、DTO 校验、结构化日志、审计记录、幂等键和发布单乐观锁。",
+      "打通 Gitea 分支/tag/commit/PR 摘要、平台触发 Jenkins queue/build 同步、Jenkins 直接构建反向导入、构建日志脱敏读取、取消/重试发布和 BPMN 节点高亮。",
+      "将通知投递改为 outbox 持久化与可重试模型，并把 LLM Agent 限定在发布风险、失败诊断、Runbook、发布说明和事故复盘场景。",
+    ],
+    tech: ["Vue 3", "NestJS", "TypeScript", "Prisma", "MySQL", "Redis", "BullMQ", "Jenkins", "Gitea", "BPMN"],
+  },
  {
    id: "vtrix",
    name: "SeaCloud / Vtrix",
@@ -581,19 +581,53 @@ main {
 }

 /* ============ Round 4: 技能 ============ */
+.skills-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
 .skill-group {
-  margin-bottom: 20px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid rgba(139, 151, 173, 0.18);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
+    rgba(11, 17, 32, 0.54);
+}
+
+.g-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
 }

 .skill-group .g-name {
  font-family: var(--mono);
  font-size: 11px;
-  letter-spacing: 0.2em;
-  color: var(--ink-faint);
-  margin-bottom: 8px;
+  letter-spacing: 0;
+  color: var(--ink);
  text-transform: uppercase;
 }

+.g-count {
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--ink-faint);
+}
+
+.g-summary {
+  min-height: 42px;
+  margin-bottom: 12px;
+  font-size: 12px;
+  line-height: 1.65;
+  color: var(--ink-dim);
+}
+
 .skill-token {
  font-family: var(--mono);
  font-size: 12px;
@@ -607,6 +641,7 @@ main {

 .skill-token.hot {
  border-color: rgba(34, 211, 238, 0.5);
+  background: rgba(34, 211, 238, 0.08);
  color: var(--cyan);
 }

@@ -768,6 +803,10 @@ main {
    grid-template-columns: 1fr;
  }

+  .skills-grid {
+    grid-template-columns: 1fr;
+  }
+
  #session-rail {
    right: auto;
    top: 54px;
Author	SHA1	Message	Date
湛兮	327828ea56	feat: 优化简历技能栏技术栈呈现	2026-06-12 17:05:22 +08:00
湛兮	ffe6dc7c86	feat: 增加 DevOps 平台简历亮点 - src/resume-data.js: 新增 DevOps 运维平台项目、能力标签和技能树内容 - public/logos/devops-platform.svg: 增加 DevOps 平台项目图标	2026-06-12 16:38:03 +08:00
zhanxi	ab39fdead3	feat: 补齐作品集 agent skill 规范按开发到生产流程合并，tag 在生产分支合并后重新创建。	2026-06-11 10:05:17 +00:00
湛兮	06185b67b4	feat: 补齐作品集 agent skill 规范 - .agents: 新增中文提交与注释同步 skill 及项目索引 - AGENTS.md: 增加本地协作规则和 skill 入口 - README.md: 同步 Agent 文档入口	2026-06-11 17:48:09 +08:00