项目简介link

Obry 是一款现代风格个人作品集 HTML 模板，采用 Bootstrap 框架构建，适用于展示个人简历、作品集和创意项目。模板内置三种首页样式、多个内页模板，支持平滑滚动、数字滚动动画、Swiper 轮播等交互效果，适配响应式布局。

技术栈link

• HTML5 / CSS3（SCSS 源文件）
• Bootstrap 5.x（网格系统 + 基础组件）
• jQuery（DOM 操作与交互逻辑）
• Swiper.js（轮播组件）
• Font Awesome 6（图标库）
• Google Fonts（Poppins / Bricolage Grotesque / Rubik）

项目结构link

obryhtml-10/
├── documentation/          # 在线文档站点
│   ├── index.html
│   └── assets/
│       ├── css/style.css
│       └── js/main.js
└── download version/       # 实际使用模板
    ├── index.html          # 首页（第1套）
    ├── index-2.html        # 首页（第2套）
    ├── index-3.html        # 首页（第3套）
    ├── about.html
    ├── service.html
    ├── blog.html
    ├── contact.html
    └── assets/
        ├── css/style.css
        ├── sass/style.scss  # SCSS 源文件
        └── js/main.js

核心文件说明link

• download version/index.html — 主首页模板，包含导航与首屏 Hero 区块
• download version/assets/css/style.css — 编译后的完整样式表
• download version/assets/sass/style.scss — SCSS 源码，支持自定义主题变量
• download version/assets/js/main.js — 全局交互逻辑（预加载、Swiper 初始化、计数器动画等）
• download version/assets/css/plugins.css — 第三方插件样式集合（Swiper、Odometer 等）
• documentation/index.html — 模板官方文档页面

快速开始link

1. 将 download version 文件夹内容部署到 Web 服务器或本地开发环境
2. 直接在浏览器中打开 index.html 即可预览
3. 如需修改样式，编辑 assets/sass/style.scss 后使用 Sass 编译器重新编译

使用建议link

• 模板内置 3 种首页变体，建议根据个人品牌风格选择合适版本，再进行内容替换
• 页面大量使用 CSS 变量定义颜色与字体，如需整体换肤可优先修改 :root 区块