Mystory - 个人作品集和简历 HTML 模板 preview 1

Mystory - 个人作品集和简历 HTML 模板

bookmark

MyStory 是一套现代个人作品集 HTML5 模板，基于 Bootstrap 5 构建，提供深色与浅色多版本首页、作品集展示、博客、服务详情及联系表单等功能，适合个人博主、自由职业者或创意从业者快速搭建作品展示网站。

HTML

项目简介

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）

项目结构

text
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 等）即可全局换色，无需逐个修改样式文件。

help_outline

常见问题