Heiko - Personal Portfolio HTML Template

# 项目简介 Heiko 是一个基于 Bootstrap 5 的静态单页个人作品集 HTML 模板，适合设计师、开发者或创意从业者快速搭建个人展示网站。项目自带完整文档站点，包含深色模式切换、Swiper 轮播、移动端侧边菜单等交互功能，代码结构清晰，便于二次开发。 ## 技术栈 - HTML5 + CSS3（静态页面） - Bootstrap 5（布局与基础组件） - jQuery（DOM 操作与交互） - Swiper（轮播组件） - Font Awesome 6 Pro（图标） - Google Fonts（Poppins 字体） ## 项目结构 ``` ├── 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 # 联系表单后端 ``` ## 核心文件说明 - `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` — 官方文档入口，含模板结构说明与修改指南 ## 快速开始 由于是纯静态模板，可直接通过本地服务器访问： ```bash # 使用任意静态服务器 npx serve heiko/ # 或直接在浏览器打开 heiko/index.html ``` 如需启用联系表单发送功能，需在支持 PHP 的环境中运行 `heiko/assets/mail.php`。 ## 使用建议 模板默认使用深色主题（`--tp-theme-primary: #0f0f0f`），可修改 CSS 变量切换配色。移动端侧边菜单与深色模式切换功能均在 `main.js` 中实现，初次定制建议先阅读 `documentation/index.html` 中的"Change Contents"章节，了解图片、Logo 与配色的替换方法。