Gridx - Personal Portfolio HTML

# 项目简介 Gridx 是一套基于 Bootstrap 栅格系统的个人作品集 HTML 模板，包含深色与浅色两套主题，适合自由职业者、设计师或开发者展示个人简历、项目作品和联系方式。 ## 技术栈 - Bootstrap 5（栅格布局与组件） - jQuery（交互逻辑） - AOS（滚动动画） - 原生 CSS（自定义样式与主题变量） ## 项目结构 ``` 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.php - `mailer.php` — PHP 邮件发送脚本，接收前端表单数据 ## 快速开始 直接用浏览器打开 `index.html` 即可预览。浅色主题入口在 `light/index.html`。表单功能需部署至支持 PHP 的服务器。 ## 使用建议 模板以单页展示为主，各页面通过卡片式布局相互链接，便于扩展；若用于生产环境，请将 demo 目录中的跳转页移除或替换。