特性	描述
🌈 柔和渐变	粉蓝双色渐变背景，营造温暖氛围
🫧 毛玻璃效果	导航栏采用 backdrop-filter 模糊效果
🎯 圆润设计	大量使用圆角元素，视觉更加亲和
🌿 清新配色	低饱和度色彩，避免冷冰冰的距离感
💫 微动效	细腻的悬浮动画与过渡效果

🖼️ 视觉亮点

☀️ 明亮主题 - 以白色为基底，搭配柔和的粉蓝色渐变
🎴 卡片式布局 - 内容模块化展示，层次分明
🔤 精致字体 - 使用「筑紫A丸」等优雅中文字体
🎭 装饰元素 - 几何图形点缀，增添活力与趣味

🛠️ 技术栈

技术	用途
HTML5	页面结构
CSS3	样式与动画
JavaScript	交互逻辑
CSS Variables	主题变量管理

📁 项目结构


grdoc-html/
├── 📂 assets/              # ◀️ 静态资源文件
│   ├── shiroki.jpg         # ◀️ 项目预览图
│   ├── ZiHun232Hao.woff2   # ◀️ 字体资源
│   └── 筑紫A丸.woff2       # ◀️ 字体资源
│
├── 📂 css/                 # ◀️ 样式文件
│   ├── variables.css       # ◀️ 🌈 CSS变量定义
│   ├── common.css          # ◀️ 通用样式
│   └── sections/           # ◀️ 各模块样式
│       ├── nav.css         # ◀️ 导航栏样式
│       ├── banner.css      # ◀️ 首页横幅样式
│       ├── skills.css      # ◀️ 技能展示样式
│       ├── projects.css    # ◀️ 项目展示样式
│       ├── docs.css        # ◀️ 文档区域样式
│       └── footer.css      # ◀️ 页脚样式
│
├── 📂 js/                  # ◀️ JavaScript文件
│   └── main.js             # ◀️ 主逻辑脚本
│
├── 📂 sections/            # ◀️ HTML模块片段
│   ├── nav.html            # ◀️ 导航栏模块
│   ├── banner.html         # ◀️ 横幅模块
│   ├── skills.html         # ◀️ 技能模块
│   ├── projects.html       # ◀️ 项目模块
│   ├── docs.html           # ◀️ 文档模块
│   └── footer.html         # ◀️ 页脚模块
│
└── 📄 index.html           # ◀️ 主入口文件

🚀 快速开始

1️⃣ 克隆仓库


git clone https://cnb.cool/shiroki.live/grdoc-html

2️⃣ 本地预览

由于项目使用了模块化加载，需要通过本地服务器运行：

使用 Python 3



python -m http.server 8080

或使用 Node.js


npx serve .

3️⃣ 访问页面

打开浏览器访问 http://localhost:8080 即可预览效果 ✨

🎯 功能模块

模块	描述
🏠 首页横幅	个人介绍与社交链接入口
🧩 技能展示	技术栈与能力可视化
📂 项目作品	作品集展示卡片
📚 技术文档	学习笔记与文档整理
📧 页脚信息	联系方式与版权信息