项目简介link

Heiko 是一个基于 Bootstrap 5 的静态单页个人作品集 HTML 模板，适合设计师、开发者或创意从业者快速搭建个人展示网站。项目自带完整文档站点，包含深色模式切换、Swiper 轮播、移动端侧边菜单等交互功能，代码结构清晰，便于二次开发。

技术栈link

• HTML5 + CSS3（静态页面）
• Bootstrap 5（布局与基础组件）
• jQuery（DOM 操作与交互）
• Swiper（轮播组件）
• Font Awesome 6 Pro（图标）
• Google Fonts（Poppins 字体）

项目结构link

├── documentation/          # 模板使用文档站点
│   ├── index.html
│   └── assets/
│       ├── css/
│       └── js/
└── heiko/                 # 主体模板文件
    ├── index.html         # 首页
    ├── about.html
    ├── blog.html
    ├── contact.html
    ├── portfolio-details.html
    ├── service.html
    └── assets/
        ├── css/           # main.css, bootstrap.css, swiper-bundle.css 等
        ├── js/            # main.js（含 Swiper 初始化与交互逻辑）
        ├── img/           # 模板演示图片资源
        └── mail.php       # 联系表单后端

核心文件说明link

• heiko/index.html — 作品集首页入口，整合所有区块与交互
• heiko/assets/css/main.css — 主样式文件，定义暗色主题变量与全站排版
• heiko/assets/js/main.js — 交互脚本，含 Swiper 轮播、移动菜单、深色模式等九大模块
• heiko/assets/css/bootstrap.css — Bootstrap 5 基础样式
• heiko/contact.html — 联系页面，含邮件发送表单与 mail.php 后端支持
• documentation/index.html — 官方文档入口，含模板结构说明与修改指南

快速开始link

由于是纯静态模板，可直接通过本地服务器访问：

# 使用任意静态服务器
npx serve heiko/

# 或直接在浏览器打开
heiko/index.html

如需启用联系表单发送功能，需在支持 PHP 的环境中运行 heiko/assets/mail.php。

使用建议link

模板默认使用深色主题（--tp-theme-primary: #0f0f0f），可修改 CSS 变量切换配色。移动端侧边菜单与深色模式切换功能均在 main.js 中实现，初次定制建议先阅读 documentation/index.html 中的"Change Contents"章节，了解图片、Logo 与配色的替换方法。