苗鑫的个人作品集 | AI Product Manager Portfolio

这是一个基于 React + Vite 构建的赛博朋克风格个人作品集网站。

🎨 设计特色

• 赛博朋克美学：深色科技感、霓虹绿强调色、终端命令行风格
• 切角设计：使用 CSS clip-path 实现独特的切角效果（chamfer）
• 发光效果：多层 box-shadow 创造真实的霓虹发光效果
• 扫描线动画：模拟 CRT 显示器的扫描线效果
• 故障艺术：RGB 色差分离（chromatic aberration）和 glitch 动画
• 网格背景：电路板风格的背景图案
• 玻璃态卡片：半透明背景 + backdrop-filter 模糊效果

📂 项目结构

personal_web/
├── public/              # 静态资源文件夹
├── src/
│   ├── assets/         # 图片、字体等资源
│   ├── components/     # React 组件
│   │   ├── Header.jsx      # 导航栏（固定顶部）
│   │   ├── Hero.jsx        # 首页横幅 + HUD 面板
│   │   ├── About.jsx       # 关于我（简介 + 工作经历）
│   │   ├── Projects.jsx    # 作品展示（3个项目卡片）
│   │   ├── Contact.jsx     # 联系方式（联系信息 + 二维码）
│   │   └── Footer.jsx      # 页脚
│   ├── styles/         # 样式文件
│   │   ├── index.css       # 全局样式 + 赛博朋克效果
│   │   └── App.css         # 工具类样式
│   ├── App.jsx         # 主应用组件（包含滚动动画逻辑）
│   └── main.jsx        # 应用入口
├── index.html          # HTML 模板（引入 Google Fonts）
├── package.json        # 项目依赖配置
├── vite.config.js      # Vite 构建配置
└── Stitch_prompt.md    # 设计系统提示词文档

🚀 开始使用

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

访问 http://localhost:5173 查看网站

3. 构建生产版本

npm run build

构建产物将生成在 dist 目录

4. 预览生产版本

npm run preview

🛠️ 技术栈

• 框架: React 18.2.0
• 构建工具: Vite 5.1.0
• 路由: React Router DOM 6.22.0
• 字体: Google Fonts（Space Mono + JetBrains Mono）
• 图标: Material Symbols Outlined
• 样式: 原生 CSS（赛博朋克定制样式系统）

🎯 核心功能

1. 全局效果

• CRT 显示器扫描线叠加
• 动态扫描线滚动动画
• 网格电路板背景
• 自定义选择高亮（荧光绿）

2. 组件特性

Header 导航栏

• 固定顶部，半透明玻璃态
• 荧光绿 Logo 带发光效果
• 终端命令行风格导航项（> 前缀）
• 平滑滚动锚点跳转

Hero 首页

• 大标题 Glitch 故障效果
• RGB 色差分离动画
• 闪烁光标效果（terminal cursor）
• HUD 智能面板：
  • 系统状态指示器
  • 进度条动画（RAG 处理 88%、Agent 认知 94%）
  • 终端日志模拟
  • 切角边框 + 角标装饰

About 关于我

• 双卡片布局（个人简介 + 工作经历）
• 终端窗口装饰（红黄绿三色指示灯）
• 能力标签（切角徽章）
• 时间线可视化

Projects 作品

• 三列网格布局（响应式）
• 渐进式加载动画（stagger delay）
• 项目卡片 hover 效果：
  • 抬升动画（translateY）
  • 发光阴影增强
  • 边框颜色变化
• 不同项目使用不同强调色：
  • AiPPT Agent: 荧光绿 (#00ff88)
  • 企业智能助手: 品红色 (#fe00fe)
  • HTML PPT Generator: 青色 (#3cd7ff)

Contact 联系我

• 居中卡片布局
• 渐变头像占位符
• 联系信息 hover 高亮
• 微信二维码占位符
• 可用状态指示器

Footer 页脚

• 系统信息展示
• 版本号标识
• 悬停颜色切换

3. 交互动画

• Intersection Observer: 元素进入视口时触发淡入 + 上滑动画
• Smooth Scroll: 锚点导航平滑滚动
• Hover Effects:
  • 卡片抬升 + 发光
  • 按钮亮度提升
  • 颜色渐变过渡
• Glitch Animation: 主标题随机抖动效果（clip + skew）

🎨 颜色系统

--color-background: #0a0a0f           /* 深邃黑 */
--color-surface: #131318              /* 表面灰 */
--color-primary-container: #00ff88    /* 荧光绿（主强调色）*/
--color-secondary-container: #fe00fe  /* 品红色（次强调色）*/
--color-tertiary-fixed-dim: #3cd7ff   /* 青色（第三强调色）*/
--color-on-surface: #e4e1e9           /* 主文字色 */
--color-on-surface-variant: #b9cbb9   /* 次文字色 */
--color-outline-variant: #3b4b3d      /* 边框色 */

📦 自定义样式类

切角效果

.chamfer-top-right  /* 右上角切角 */
.chamfer-both       /* 双切角 */
.chamfer-btn        /* 按钮切角 */

特效类

.glitch-text        /* 故障艺术文字 */
.terminal-cursor    /* 闪烁光标 */
.circuit-bg         /* 电路背景 */
.glass-panel        /* 玻璃态面板 */
.holo-card          /* 全息卡片（hover 效果）*/
.reveal             /* 滚动显示动画 */

🔧 自定义配置

修改个人信息

编辑各组件文件中的文本内容：

• 姓名/Logo: Header.jsx 和 Hero.jsx
• 个人简介: About.jsx
• 项目列表: Projects.jsx 的 projects 数组
• 联系方式: Contact.jsx

修改配色

在 src/styles/index.css 的 :root 中修改 CSS 变量。

添加新项目

在 Projects.jsx 的 projects 数组中添加新对象：

{
  id: '0x0D4',
  title: '项目名称',
  description: '项目描述',
  tags: ['标签1', '标签2', '标签3'],
  accentColor: '#00ff88' // 强调色
}

📱 响应式设计

• 移动端: 单列布局，汉堡菜单（待实现）
• 平板: 双列网格
• 桌面: 三列网格，完整 HUD 面板

断点：

• 移动: < 768px
• 平板: 768px - 1023px
• 桌面: ≥ 1024px

🌐 浏览器兼容性

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

注意：部分 CSS 效果（clip-path, backdrop-filter）需现代浏览器支持。

📝 许可证

本项目为个人作品集，代码可自由使用和修改。

👤 作者

苗鑫 (Miao Xin)
AI Product Manager | Agent Product Practitioner

• 📱 17851750651
• 📧 8866mx@gmail.com
• 💼 专注 Agent、RAG、ChatBI 与 AI 产品落地

---

Built with ⚡ Vite + ⚛️ React | Designed with 🎨 Cyberpunk Aesthetics