Mystory - Personal Portfolio and Resume HTML Template

# 项目简介 MyStory 是一套现代个人作品集 HTML5 模板，基于 Bootstrap 5 构建，提供深色与浅色多版本首页、作品集展示、博客、服务详情及联系表单等功能，适合个人博主、自由职业者或创意从业者快速搭建作品展示网站。 ## 技术栈 - Bootstrap 5.1.3 - jQuery（部分交互依赖） - Lenis（平滑滚动） - Font Awesome 6、Flaticon、IcoMoon 图标库 - Owl Carousel、Swiper 轮播组件 - AOS、Animate.css、Wow.js 动画效果 - Jarallax 视差背景 - Magnific Popup 图片灯箱 - Nice Select 下拉选择 - Google Fonts（Lato + Oswald） ## 项目结构 ``` mystoryhtml-10/ ├── 01-html-file/ # 模板主体 │ ├── index.html # 首页 │ ├── index-light.html # 浅色首页 │ ├── index-one-page.html # 单页版首页 │ ├── blog.html # 博客列表 │ ├── contact.html # 联系页 │ ├── projects.html # 作品集 │ ├── services.html # 服务页 │ └── assets/ │ ├── css/ │ │ ├── style.css # 主样式 │ │ ├── responsive.css │ │ └── *.min.css # 各功能库样式 │ ├── js/ │ │ ├── script.js # 主脚本 │ │ └── *.min.js # 各功能库脚本 │ └── inc/ │ └── sendemail.php # 邮件发送 └── 02-doc-file/ # 官方文档 ``` ## 核心文件说明 - `01-html-file/index.html` — 主首页模板，包含完整页面结构与功能组件 - `assets/css/style.css` — 全局样式与自定义变量，定义暗色主基调及红色强调色 - `assets/js/script.js` — 核心交互逻辑，含侧边栏、聊天弹窗、表单验证等 - `assets/inc/sendemail.php` — 联系表单邮件发送后端脚本 - `assets/css/light.css` — 浅色主题切换样式 - `assets/css/color-2.css` — 备用配色方案定义 ## 快速开始 1. 直接在浏览器中打开 `01-html-file/index.html` 即可预览完整效果 2. 若需邮件发送功能，将项目部署至 PHP 环境（需支持 `mail()` 或配置 SMTP） 3. 联系表单提交路径指向 `assets/inc/sendemail.php`，部署前请根据服务器环境调整 ## 使用建议 模板提供多个首页变体（深色/浅色、单页/多页），可根据实际需求选择或合并；自定义主题色只需修改 `style.css` 中的 CSS 变量（`--mystory-base` 等）即可全局换色，无需逐个修改样式文件。