为域名my.icedog.top生成极简编辑风格的求职简历/CV个人主页

<网页模板提示词>

## 【内容模块】

### 模块一：左侧固定导航栏
- 头像缩略图：圆角3px，单色或低饱和度照片风格
- 姓名：黄云山，使用衬线字体Blanco，字号28px
- 职业/职位：前端工程师，使用无衬线字体Degular，字号16px
- 导航链接：关于、经历、技能、教育、联系（锚点跳转）
- 底部社交图标：极简线性图标，单色

### 模块二：首屏Hero区域
- 左侧展示核心信息：
  - 姓名：黄云山，Degular字体，字号40px，行高1.25
  - 职业：前端工程师，字号18px
  - 个人简介：5年全栈开发经验，专注于用户体验与性能优化，曾主导多个千万级用户产品的前端架构设计。，Blanco衬线字体，字号20px，行高1.5
- 右侧展示头像/个人照片：圆角3px图片容器，无边框，低饱和度处理

### 模块三：工作经历
- 标题"工作经历"，Slate Text色，Degular字体，字号22px
- 条目式列表布局，逐条展示字节跳动 - 高级前端工程师 - 2022-至今 - 负责商业化平台前端架构设计与核心模块开发
阿里巴巴 - 前端开发工程师 - 2020-2022 - 参与电商平台商家端产品开发与性能优化中的每段经历：
  - 公司名+职位：Ebony Text色，Degular字体，字号18px
  - 时间段：Graphite Text色，字号14px
  - 描述：Graphite Text色，Blanco字体，字号16px，行高1.5
- 条目之间以40px间距分隔

### 模块四：技能标签
- 标题"技能"，样式同模块三标题
- 将React, TypeScript, Node.js, Python, Docker, AWS中的每个标签渲染为灰底标签胶囊：
  - 背景Canvas Porcelain，文字Ebony Text，字号14px
  - 内边距6px 12px，圆角3px
  - 横向排列，8px间距

### 模块五：教育背景
- 标题"教育背景"，样式同模块三标题
- 条目式布局，展示北京大学 - 硕士 - 计算机科学与技术 - 2018-2020
浙江大学 - 学士 - 软件工程 - 2014-2018中的每段教育经历：
  - 学校名：Ebony Text色，Degular字体，字号18px
  - 学位+专业：Graphite Text色，字号16px
  - 时间段：Graphite Text色，字号14px

### 模块六：联系区域
- 标题"联系"，样式同模块三标题
- 邮箱链接：yunshan.huang@example.com，Midnight Ink色按钮样式
- 所在地：重庆，Graphite Text色，字号16px

---

## 【排版逻辑】

### 页面整体结构
- 页面最大宽度：1600px，内容居中
- 左侧固定导航栏：宽度约200px，始终可见
- 右侧主内容区：垂直滚动，段落之间间距24px
- 页面背景色：Canvas Porcelain (#e5e7eb)

### 网格与间距
- 基础间距单位：8px
- 段落间距：24px
- 卡片内边距：12px
- 元素间距：8px
- 工作经历条目间距：40px

### 字体层级（Degular为主字体，Blanco为衬线辅字体）
| 用途 | 字号 | 行高 | 字间距 | 字体 |
|------|------|------|--------|------|
| 正文小字 | 14px | 1.5 | 正常 | Degular/Blanco |
| 正文 | 16px | 1.5 | 正常 | Degular/Blanco |
| 副标题 | 18px | 1.5 | 正常 | Degular |
| 章节标题 | 22px | 1.25 | 正常 | Degular |
| 大标题 | 24px | 1.25 | 正常 | Degular |
| 展示小号 | 28px | 1.25 | 0.025em | Degular/Blanco |
| 展示字号 | 32px | 1.25 | 0.025em | Degular |
| Hero姓名 | 40px | 1.25 | 0.025em | Degular |

### 圆角规范
- 卡片/图片容器：3px
- 按钮/其他：8px
- 导航项：3px
- 主按钮：0px（锐利直角）

---

## 【UI风格定义】

### 整体风格定位：有序编辑风格 · 墨韵笔触
**主题：浅色**

本模板呈现聚焦化的编辑美学，犹如一本精心编排的期刊或学术出版物。通过大面积单色调色板、功能性字体层级与结构化内容呈现，优先保证清晰度与直接性。视觉元素极少，文本为绝对核心，营造安静的知识权威氛围。设计系统由微妙灰度、利落线条与刻意避免高饱和色彩构成，让内容本身成为视觉焦点。

### 色彩体系

| 色名 | 色值 | 用途 |
|------|------|------|
| 瓷白底色(Canvas Porcelain) | `#e5e7eb` | 页面背景、表面基底、定义结构的微妙边框与分割线 |
| 乌木正文(Ebony Text) | `#111827` | 次要正文、导航标签、柔和标题。不可提升为主CTA色 |
| 石墨描述(Graphite Text) | `#374151` | 次要文本、描述段落、列表项、柔和的主视觉文字，比主文本更柔和的阅读体验 |
| 午夜墨色(Midnight Ink) | `#1a202c` | 主要行动号召按钮背景，为关键交互提供深沉扎实的存在感 |
| 墨黑次按钮(Jet Button) | `#222222` | 次要操作按钮背景，相比主按钮提供稍浅的替代方案 |
| 暗影图标(Shadow Icon) | `#000000` | 装饰图标与填充，纯黑色用于制造锐利的小面积点缀 |
| 石板标题(Slate Text) | `#2a2a28` | 特定显著标题与链接，增添微妙的色调差异以区分特定文本元素 |
| 灰烬文字(Ash Text) | `#676867` | 链接与标题中的弱化文本，为次要信息提供较低对比度视觉效果 |
| 雾色边框(Fog Border) | `#c4c6c8` | 微妙边框与分割线，比瓷白底色稍深以提供结构定义 |
| 石色文字(Stone Text) | `#7b7c7c` | 特定标题元素，带微弱低调的色调 |

### 字体体系

**Degular（主要无衬线字体）**——用于标题、正文和交互元素。中性而自信的存在感构成内容的主要声音，较大字号时使用适中字间距以保持清晰。
- 替代字体：Inter
- 字重：400、500、600、700
- 字号：14px、16px、18px、22px、24px、28px、32px、40px
- 行高：1.25、1.50
- 字间距：0.025em、0.100em

**Blanco（衬线字体）**——用于特定标题、链接和长文内容。经典比例提供与无衬线字体的知性对位，传递深度与传统编辑品质。
- 替代字体：Lora
- 字重：400
- 字号：14px、20px、22px、28px
- 行高：1.40、1.50
- 字间距：正常

### 组件规范

**主填充按钮**
角色：主要行动号召按钮，传达突出性。
背景：Midnight Ink (#1a202c)，文字：Canvas Porcelain (#e5e7eb)，内边距：垂直8px 水平12px。圆角：0px。字体：Degular。

**邮箱联系按钮**
角色：个人联系方式的次要操作按钮，比主按钮稍柔和。
背景：Jet Button (#222222)，文字：Canvas Porcelain (#e5e7eb)，内边距：垂直8px 水平12px。圆角：4px。字体：Degular。

**幽灵图标按钮**
角色：微妙交互按钮，用于图标或次要操作，保持最小视觉足迹。
背景：透明，文字：Ebony Text (#111827)，内边距：8px正方形。圆角：6px。字体：Degular。

**导航链接**
角色：左侧导航中的交互元素，标识可选项目。
文字：激活态Ebony Text (#111827)，非激活态Graphite Text (#374151)。悬停时下划线。聚焦/激活态圆角：3px。

**文本输入框**
角色：用户数据录入的标准输入字段。
背景：Canvas Porcelain (#e5e7eb)，边框：1px solid Canvas Porcelain (#e5e7eb)。文字：Ebony Text (#111827)。内边距：8-12px。

**简历条目卡片**
角色：在结构化列表中呈现每段工作或项目经历。
无显式卡片背景，以Canvas Porcelain (#e5e7eb)为底色。职位文字：Ebony Text (#111827)，描述文字：Graphite Text (#374151)。由垂直间距定义。

**图片容器**
角色：承载图片，提供微妙的塑形。
圆角：3px。无显式边框，图片直接内嵌。

### 设计原则（Do's）
- 以文本内容为优先：所有主要及次要文本使用Ebony Text (#111827)和Graphite Text (#374151)，确保在Canvas Porcelain (#e5e7eb)底色上达到AAA对比度。
- 以Degular处理标题和交互元素，Blanco处理特定编辑内容与长文，维持清晰层级。
- 以Canvas Porcelain (#e5e7eb)作为主导背景与所有表面基底，并用于微妙定义结构边框。
- 保持内容区域一致的垂直节奏，正文段落默认间距27px，列表项分隔40px。
- 导航项、链接与内嵌图片应用3px圆角以微妙柔化边缘，与主按钮的锐利0px直角形成对比。
- 仅将Midnight Ink (#1a202c)用于主填充按钮背景，以标识关键操作。
- 元素以8px为基础间距分布，较大段落间距按需扩展。

### 设计禁忌（Don'ts）
- 避免引入鲜艳或高饱和色彩；保持在以微妙灰度变化为主的单色调色板中。
- 不使用厚重阴影或过度层级；依靠微妙边框与间距实现视觉分隔。
- 不随意更改Degular和Blanco定义之外的字重或字间距，尤其避免在正文上使用紧缩间距。
- 不偏离主填充按钮的严格0px圆角；这是标志性的利落细节。
- 避免大面积、华丽或繁杂的图形元素；视觉传达应保持直接、以内容为核心。
- 连续区域不使用多种背景色；保持无缝流动，或使用Canvas Porcelain搭配微妙内部分割线。
- 不使用通用系统字体；坚持使用Degular和Blanco以保持独特品牌声音。

### 图片规范
图片使用极为克制，主要为自然抓拍、略微降低饱和度或单色的人物照和作品照，通常置于3px圆角边框内。图片用于提供语境或个人触感，而非装饰。无插画或繁复图形；视觉语言直接而不喧宾夺主。图标为简洁线性单色（Shadow Icon或Ebony Text），用作功能性提示（如外部链接标识）。

### 布局规范
页面主要采用限定宽度布局，最大宽度1600px，内容居中于Canvas Porcelain底色内。Hero区域呈现文字与图片的组合，采用左右分屏布局，图片为文字提供语境补充。内容区域以文字为主，清晰垂直流动与一致间距，避免拥挤或重叠元素。左侧固定导航栏如案头日志般始终可见。工作经历与教育条目以简洁堆叠列表方式呈现，由强烈的字体层级与宽松行距定义，而非依赖视觉容器。整体密度舒适，文本块与段落之间留有充足呼吸空间。

---

## 【配色方案】

### 方案一：古典墨韵（推荐首选）
- 底色：Canvas Porcelain (#e5e7eb)
- 主文字：Ebony Text (#111827)
- 辅文字：Graphite Text (#374151)
- 主按钮：Midnight Ink (#1a202c)
- 次按钮：Jet Button (#222222)
- 强调色：Slate Text (#2a2a28)

### 方案二：暖调纸张
- 底色：Canvas Porcelain (#e5e7eb) 偏暖1-2度
- 主文字：Ebony Text (#111827)
- 辅文字：Stone Text (#7b7c7c)
- 主按钮：Midnight Ink (#1a202c)
- 分割线：Fog Border (#c4c6c8)

### 方案三：冷调学术
- 底色：Canvas Porcelain (#e5e7eb) 偏冷1-2度
- 主文字：Ebony Text (#111827)
- 辅文字：Graphite Text (#374151)
- 主按钮：Slate Text (#2a2a28)
- 强调元素：Ash Text (#676867)

### 方案四：高对比资讯
- 底色：Canvas Porcelain (#e5e7eb)
- 主文字：Ebony Text (#111827)
- 辅文字：Graphite Text (#374151)
- 主按钮：Midnight Ink (#1a202c)
- 图标点缀：Shadow Icon (#000000)

---

## 【交互提示】

1. **导航锚点平滑滚动**：点击左侧导航链接时，页面平滑滚动至对应内容区块，滚动行为使用ease-out缓动，持续时间约400ms，无弹跳效果。

2. **导航链接悬停下划线动画**：鼠标悬停导航项时，文字颜色从Graphite Text过渡至Ebony Text，同时底部出现一条从左侧延伸的下划线（1px实线），过渡时长200ms。

3. **联系邮箱复制提示**：点击邮箱按钮后，在按钮上方弹出"邮箱地址已复制"的微小提示气泡，2秒后自动消失，气泡背景Midnight Ink (#1a202c)，文字Canvas Porcelain (#e5e7eb)，字号12px，圆角3px。

</网页模板提示词>