Jayden - Personal Portfolio HTML Template

# 项目简介 JAYDEN 是一款创意个人作品集 HTML 模板，包含 12 种首页变体，支持视频背景、侧边栏导航、滚动动画等交互效果，适合自由职业者、设计师或创意工作者搭建个人网站。 ## 技术栈 - HTML5 / CSS3 - Bootstrap 5 - SASS（需编译为 CSS） - Swiper（轮播）、Lightbox（图片预览）、Odometer（数字动画） ## 项目结构 ``` 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/`，可替换为本地素材以加快加载速度。