Biox - 个人作品集 HTML Tailwind CSS 模板 preview 1

Biox - 个人作品集 HTML Tailwind CSS 模板

bookmark

Biox 是一款现代化的个人作品集 HTML 模板，适用于设计师、开发者、自由职业者展示简历、项目案例和服务。该模板提供单页版和多页版两种布局，内置多个预建页面（关于、作品集、服务、简历、博客等），可直接替换内容快速上线。

HTMLagencyartistbusiness cardcorporatecreativedeveloperfreelancer

项目简介

Biox 是一款现代化的个人作品集 HTML 模板，适用于设计师、开发者、自由职业者展示简历、项目案例和服务。该模板提供单页版和多页版两种布局，内置多个预建页面（关于、作品集、服务、简历、博客等），可直接替换内容快速上线。

技术栈

  • HTML5 + CSS3
  • Tailwind CSS（通过本地编译文件引入，非 CDN）
  • jQuery（滚动导航锚点、Sticky Sidebar 交互）
  • Owl Carousel（轮播组件）
  • AOS（滚动动画）
  • Remix Icon + Font Awesome

项目结构

text
biox-tailwind/
├── index.html              # 模板展示/导航页面
├── onepage/
│   └── index.html          # 单页版入口
├── multipage/
│   ├── index.html          # 多页版首页
│   ├── about.html
│   ├── projects.html
│   ├── resume.html
│   ├── services.html
│   ├── blog.html
│   ├── blog-detail.html
│   └── single-project.html
└── landing-assets/         # 展示页静态资源

核心文件说明

  • biox-tailwind/index.html — 模板演示导航页，展示所有可用版块入口
  • biox-tailwind/onepage/index.html — 单页版，锚点导航滚动至各区块
  • biox-tailwind/multipage/index.html — 多页版首页入口
  • assets/css/style.css — 模板主样式文件（Tailwind 编译产物）
  • assets/js/vendor/ — jQuery 插件、Owl Carousel、AOS 等依赖脚本
  • documentation/ — 官方文档，含本地/线上服务器部署说明

快速开始

  1. 直接用浏览器打开 biox-tailwind/onepage/index.html 预览单页版
  2. 或打开 biox-tailwind/multipage/index.html 预览多页版
  3. 修改页面内的姓名、介绍、图片等占位内容即可投入使用

使用建议

模板默认使用本地编译的 Tailwind CSS，若需自定义样式可修改对应的 SCSS 源文件再重新编译。图片素材仅为演示用，请替换为真实项目截图。

help_outline

常见问题