项目简介
Gridx 是一套基于 Bootstrap 栅格系统的个人作品集 HTML 模板，包含深色与浅色两套主题，适合自由职业者、设计师或开发者展示个人简历、项目作品和联系方式。
技术栈
- Bootstrap 5（栅格布局与组件）
- jQuery（交互逻辑）
- AOS（滚动动画）
- 原生 CSS（自定义样式与主题变量）
项目结构
text
gridx-html/
├── index.html # 首页（深色主题）
├── about.html # 关于我
├── works.html # 作品列表
├── work-details.html # 作品详情
├── blog.html # 博客列表
├── blog-details.html # 博客详情
├── contact.html # 联系页（含表单）
├── service.html # 服务介绍
├── credentials.html # 资质/履历
├── mailer.php # 邮件发送后端
├── light/ # 浅色主题版本（结构相同）
└── assets/
├── css/
│ ├── style.css # 深色主题样式
│ ├── style-light.css # 浅色主题样式
│ ├── bootstrap.min.css
│ └── aos.css
└── js/
├── main.js # 导航与预加载逻辑
├── aos.js
└── ajax-form.js # 表单 AJAX 提交
核心文件说明
index.html— 首页，含个人介绍区块、资质卡片与项目预览入口light/index.html— 浅色主题首页，与主版本结构一致assets/css/style.css— 主样式文件，定义深色背景、圆角卡片（shadow-box）与主题色变量assets/js/main.js— 顶部导航切换与预加载动画（preloader）逻辑contact.html— 联系页面，内置表单区块，提交至 mailer.phpmailer.php— PHP 邮件发送脚本，接收前端表单数据
快速开始
直接用浏览器打开 index.html 即可预览。浅色主题入口在 light/index.html。表单功能需部署至支持 PHP 的服务器。
使用建议
模板以单页展示为主，各页面通过卡片式布局相互链接，便于扩展；若用于生产环境，请将 demo 目录中的跳转页移除或替换。
