Java 后端开发者个人作品集网站 — 深色工程展示风格，离线可用，零依赖。

Darren Dev Portfolio 是一个单文件静态个人作品集网站，用于展示 Java 后端研发经验、技术栈、已确认的项目成果及联系方式。页面设计采用暗色工程风格，绿色强调色搭配代码感排版，无需任何构建工具或运行时依赖，双击 index.html 即可在浏览器中离线打开。

面向面试官、HR 及技术同行，清晰传达开发者在复杂业务系统研发、存量系统重构、服务拆分、数据迁移及稳定性保障等领域的专业能力。

• 纯静态单文件架构 — 页面结构、样式和脚本全部内联于 index.html，无需构建、打包或 Web 服务器
• 离线可用 — 所有资源本地化存储，不依赖外部 CDN 或网络请求
• 深色工程风格 — 暗色网格背景、绿色强调色（#00e5a0）、代码字体排版，突出工程研发氛围
• 完整作品集模块 — 包含首页 Hero、关于我、技术栈、项目展示、联系方式五大核心区域
• 响应式布局 — 适配桌面端与移动端，移动端导航自动切换为汉堡菜单，项目卡片改为单列
• 技术关键词跑马灯 — 循环滚动展示 Java、Spring Boot、MySQL、Redis、RocketMQ 等核心技术栈
• 项目卡片网格 — 展示近期项目，标注项目状态、技术栈和已确认的功能模块
• 微信二维码悬浮展示 — hover 触发，使用 fixed 定位智能适配视口空间
• 页面平滑导航 — 锚点滚动、移动端菜单折叠/展开，交互轻量无框架依赖
• 内容克制真实 — 只展示已实现、可面试解释的内容，不包含夸张指标或规划中功能

.
├── index.html                  # 单文件页面入口（HTML + CSS + JS）
├── assets/
│   └── images/
│       ├── wx.png              # 微信二维码
│       ├── 个人作品集.png       # 个人作品集预览截图
│       └── ctrip/              # 携程酒店数据采集平台项目截图
├── templates/
│   └── portfolio_offline.html  # 离线作品集页面模板
├── README.md                   # 项目说明文档
├── PRD.md                      # 产品需求文档
├── TECH_DESIGN.md              # 技术设计文档
├── AGENTS.md                   # Agent / 维护者开发规范
└── LICENSE                     # MIT 开源协议

本项目无依赖、无构建步骤。只需在文件管理器中双击 index.html，或在终端中使用浏览器打开：

macOS

open index.html

Windows

start index.html

Linux

xdg-open index.html

也可以使用任意 HTTP 服务器预览（可选）：

# Python 3
python3 -m http.server 8080

# Node.js (npx)
npx serve .

然后在浏览器中访问 http://localhost:8080。

编辑 index.html，找到对应 section 中的文案内容直接修改，所有内容以中文纯文本为主。

将新的二维码图片保存为 assets/images/wx.png，覆盖原文件即可，无需修改代码。

在 index.html 的 #projects section 中，参照现有 .project-card 结构新增卡片：

<article class="project-card">
  <div class="project-icon"><svg>...</svg></div>
  <div class="project-status">状态</div>
  <h3>项目名称</h3>
  <p>简短描述</p>
  <div class="project-stack">
    <span>技术标签</span>
  </div>
  <div class="project-links">
    <button data-open="https://example.com">访问入口</button>
  </div>
</article>

在 #stack section 中增减 <span class="badge"> 标签即可。

更多维护规范和设计约束请参阅 AGENTS.md 和 TECH_DESIGN.md。

欢迎通过 Issue 和 Pull Request 参与贡献。

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/your-feature-name
3. 提交更改：git commit -m 'Add some feature'
4. 推送到分支：git push origin feature/your-feature-name
5. 发起 Pull Request

• 遵循 Conventional Commits 规范
• 修改页面内容后，验证页面可离线打开、导航滚动正常、移动端布局无溢出
• 内容描述保持真实、平实，不添加未验证或规划中的功能模块
• 涉及样式修改时，确保 CSS 变量使用一致，移动端布局同步适配
• PR 标题简洁明了，描述中附带截图或修改说明

遇到 Bug 或有改进建议时，请发起 Issue 并包含以下信息：

• 浏览器及版本
• 操作系统
• 问题描述与复现步骤
• 预期表现与实际表现
• 相关截图（如有）

本项目基于 MIT License 开源。

© 2026 Darren. All rights reserved.