Project Introductionlink

Heiko is a static single-page personal portfolio HTML template based on Bootstrap 5, suitable for designers, developers, or creative professionals to quickly build a personal showcase website. The project comes with a complete documentation site, including dark mode toggle, Swiper carousel, mobile sidebar menu, and other interactive features. The code structure is clean and easy for secondary development.

Tech Stacklink

• HTML5 + CSS3 (static pages)
• Bootstrap 5 (layout and basic components)
• jQuery (DOM manipulation and interactions)
• Swiper (carousel component)
• Font Awesome 6 Pro (icons)
• Google Fonts (Poppins font)

Project Structurelink

├── documentation/          # Template usage documentation site
│   ├── index.html
│   └── assets/
│       ├── css/
│       └── js/
└── heiko/                 # Main template files
    ├── index.html         # Homepage
    ├── about.html
    ├── blog.html
    ├── contact.html
    ├── portfolio-details.html
    ├── service.html
    └── assets/
        ├── css/           # main.css, bootstrap.css, swiper-bundle.css, etc.
        ├── js/            # main.js (includes Swiper initialization and interaction logic)
        ├── img/           # Template demo image assets
        └── mail.php       # Contact form backend

Core File Descriptionslink

• heiko/index.html — Portfolio homepage entry, integrating all sections and interactions
• heiko/assets/css/main.css — Main stylesheet, defining dark theme variables and global typography
• heiko/assets/js/main.js — Interaction script, including nine modules such as Swiper carousel, mobile menu, dark mode, etc.
• heiko/assets/css/bootstrap.css — Bootstrap 5 base styles
• heiko/contact.html — Contact page, with email form and mail.php backend support
• documentation/index.html — Official documentation entry, including template structure instructions and modification guide

Quick Startlink

Since it's a pure static template, you can access it directly via a local server:

# Use any static server
npx serve heiko/

# Or open directly in the browser
heiko/index.html

To enable the contact form sending functionality, you need to run heiko/assets/mail.php in a PHP-supported environment.

Usage Suggestionslink

The template uses a dark theme by default (--tp-theme-primary: #0f0f0f). You can modify CSS variables to switch color schemes. The mobile sidebar menu and dark mode toggle are implemented in main.js. For initial customization, it's recommended to first read the "Change Contents" section in documentation/index.html to understand how to replace images, logos, and color schemes.