zhshaop的个人空间

一个现代化、响应式的个人网站，专为化学领域AI研发人员设计。网站采用单页滚动布局，包含轮播图、个人简介、微信公众号推广等功能。

功能特性

🎨 设计特点

• 现代简约风格：以柔和灰白为基底，搭配雾霾蓝主色
• 响应式设计：完美适配桌面端、平板和移动设备
• 无衬线字体：使用Inter字体，保证阅读舒适性
• 圆角设计：按钮、卡片、图片采用统一圆角规范
• 阴影层次：使用轻微阴影提升视觉层次感
• 优化布局：个人简介区与微信公众号区高度比例为3:1

🚀 核心功能

1. 固定导航栏：滚动时背景变化，移动端汉堡菜单，字体优化
2. 自动轮播图：3张实际图片轮播，支持自动播放、手动切换、触摸滑动
3. 个人简介区：两栏布局(1.2:0.8)，包含化学领域AI研发介绍
4. 社交图标：小红书、微博、GitHub，使用平台常见颜色
5. 微信公众号区：紧凑卡片式设计，二维码占位，交互反馈
6. 平滑滚动：页面内导航平滑滚动效果
7. 回到顶部：滚动显示/隐藏的回到顶部按钮

📱 响应式支持

• 桌面端：完整布局，显示所有功能
• 平板端：优化布局，调整间距
• 移动端：汉堡菜单，隐藏轮播箭头，垂直布局

文件结构

web_autodesign/
├── index.html          # 主页面
├── style.css           # 样式文件
├── script.js           # JavaScript交互
├── README.md           # 项目说明
└── images/             # 图片资源目录
    ├── avatar.jpg      # 个人头像
    └── carousel/       # 轮播图片
        ├── carousel1.jpeg
        ├── carousel2.jpeg
        └── carousel3.jpg

技术栈

• HTML5：语义化标签，良好结构
• CSS3：Flexbox/Grid布局，CSS变量，媒体查询
• JavaScript：原生JS，Intersection Observer API
• 字体：Google Fonts - Inter字体
• 图标：Font Awesome 6.4.0

设计规范

色彩方案

• 主色：#2C3E4E（深灰蓝）
• 辅助色：#3498db（蓝色）
• 背景色：#E9ECEF（浅灰）
• 文字色：#333333（深灰）
• 社交图标色：小红书红#ff2442、微博红#e6162d、GitHub黑#333333

高度比例

• 轮播区：60vh
• 个人简介区：75vh (3)
• 微信公众号区：25vh (1)
• 比例：个人简介区:微信公众号区 = 3:1

圆角规范

• 按钮：30px
• 图片：20px
• 卡片：16px
• 小元素：8px

间距系统

使用CSS变量定义统一的间距系统：

• --space-xs: 0.5rem
• --space-sm: 1rem
• --space-md: 2rem
• --space-lg: 3rem
• --space-xl: 4rem

使用说明

本地运行

1. 确保所有文件在同一个目录下
2. 使用浏览器打开 index.html
3. 或使用本地服务器运行（推荐：python3 -m http.server 8080）

自定义内容

1. 网站标题：修改 index.html 中的 <title> 标签
2. 个人简介：修改 index.html 中的 .about-desc 和 .about-motto
3. 微信公众号：修改 index.html 中的 .wechat-title 和 .wechat-desc
4. 导航菜单：修改 index.html 中的 .nav-menu 部分
5. 社交链接：修改 index.html 中的 .social-links 部分

添加图片

1. 替换 images/avatar.jpg 为个人头像
2. 替换 images/carousel/ 目录中的轮播图片
3. 在HTML中更新图片路径（如需）

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• iOS Safari 12+
• Android Chrome 60+

性能优化

• 图片优化：使用实际图片，适当压缩
• CSS变量：减少重复代码
• JavaScript：按需加载，事件委托
• 响应式图片：根据设备加载合适尺寸
• 字体预加载：Google Fonts预连接

开发说明

CSS架构

• 使用CSS变量统一设计系统
• 模块化CSS结构，易于维护
• 移动优先的响应式设计
• BEM命名规范（Block__Element--Modifier）

JavaScript架构

• 模块化函数设计，职责分离
• 事件委托优化性能
• 触摸和鼠标事件兼容
• 自动轮播与手动控制结合

许可证

本项目仅供学习和参考使用，可根据需要自由修改和使用。

更新日志

v1.1.0 (2026-03-21)

• 更新个人简介内容为化学领域AI研发
• 调整社交图标：缩小外框，使用平台常见颜色
• 优化高度比例：个人简介区:微信公众号区 = 3:1
• 修改个人logo为"zhshaop的个人空间"
• 更新版权信息
• 优化导航栏字体和视觉效果

v1.0.0 (2026-03-20)

• 初始版本发布
• 完成基本页面结构和样式
• 实现核心交互功能
• 添加响应式支持
• 完善文档说明