项目简介
JAYDEN 是一款创意个人作品集 HTML 模板，包含 12 种首页变体，支持视频背景、侧边栏导航、滚动动画等交互效果，适合自由职业者、设计师或创意工作者搭建个人网站。
技术栈
- HTML5 / CSS3
- Bootstrap 5
- SASS（需编译为 CSS）
- Swiper（轮播）、Lightbox（图片预览）、Odometer（数字动画）
项目结构
text
jayden-mainfiles/
├── documentation/ # 官方文档（HTML 格式）
└── jayden/
├── index.html # 首页（默认）
├── home1-v2.html ~ home1-v6.html
├── home2.html ~ home2-v6.html
├── landing.html # 着陆页
├── blog-single.html
├── blog-standard.html
├── blog-two-columns.html
├── blog-three-columns.html
└── asset/
├── css/ # 编译后的样式
├── scss/ # 源码（需编译）
├── font/ # 字体文件
├── icons/ # 图标
└── images/ # 图片（含视频背景）
核心文件说明
index.html— 首页入口，包含视频背景与侧边栏菜单landing.html— 简洁着陆页模板asset/scss/app.scss— SASS 源码入口，需编译为 CSS 使用asset/css/styles.css— 编译后的主样式文件blog-*.html— 4 种博客列表/详情页面模板
快速开始
bash
# 1. 进入模板目录
cd jayden-mainfiles/jayden
# 2. 安装 Sass（如未安装）
npm install -g sass
# 3. 监听 SASS 变化自动编译
sass asset/scss/app.scss asset/css/styles.css --watch
# 4. 用浏览器直接打开 index.html 预览
使用建议
- 修改
asset/scss/中的变量文件可快速调整主题色和字体；若不使用 SASS，直接编辑asset/css/styles.css也能达到效果，但后续维护成本较高。 - 首页视频文件位于
asset/images/bg-3d/，可替换为本地素材以加快加载速度。
