Project Overviewlink

Nabhan is a complete personal portfolio HTML5 website template, including pages for Home, About, Case Studies, Services, Blog, Pricing, Contact, along with a standalone online documentation site template. Suitable for freelancers, designers, and developers to build personal showcase websites.

Tech Stacklink

• HTML5 + CSS3 + Vanilla JavaScript
• Bootstrap 5
• Google Fonts (Manrope, Playfair Display)
• Font Awesome 6
• Swiper, Owl Carousel, Magnific Popup
• WOW.js (animation effects)
• Prism.js (code highlighting, used only in the documentation site)

Project Structurelink

nabhanhtml-10/template-package/
├── nabhan/                          # Main site template
│   ├── index.html                   # Home page
│   ├── home-2.html                  # Home page variant
│   ├── about.html                   # About page
│   ├── contact.html                 # Contact page
│   ├── pricing.html                 # Pricing page
│   ├── blog.html                    # Blog list
│   ├── blog-details.html            # Blog detail
│   ├── project.html                 # Project list
│   ├── project-details.html         # Project detail
│   ├── service.html                 # Service list
│   ├── service-details.html         # Service detail
│   └── assets/                      # CSS/JS/images and other static resources
└── documentation/                    # Standalone documentation site template
    ├── index.html                   # Documentation home
    ├── content.html                 # Content explanation
    ├── source.html                  # Source code explanation
    ├── installation.html            # Installation guide
    ├── log.html                     # Changelog
    ├── thanks.html                  # Credits page
    └── assets/                      # Documentation site resources

Core File Descriptionlink

• nabhan/index.html — Main portfolio homepage, includes top navigation, project showcase, service introduction sections
• nabhan/home-2.html — Second layout variant of the homepage, offering a different visual style
• nabhan/about.html — Personal introduction page, showcasing background, skills, and experience
• nabhan/project.html — Project/case study showcase list page, supports image and text layout
• nabhan/contact.html — Contact page, includes contact form and basic information
• documentation/index.html — Built-in documentation site entry point, can reference its structure to build your own product documentation

Quick Startlink

This project is a pure static template, no dependencies required. Open directly in a browser or use any local server:

# Method 1: Open directly
open nabhanhtml-10/template-package/nabhan/index.html

# Method 2: Use Python local server
cd nabhanhtml-10/template-package/nabhan
python -m http.server 8080
# Visit http://localhost:8080

Usage Suggestionslink

All page templates can be used independently. Copy the HTML files from the nabhan/ directory into your project as needed, along with the corresponding assets resources. The icon libraries used in the template are Remix Icons and Font Awesome, which can be replaced with your own icon solution. The documentation site template (documentation/) can serve as a reference for product documentation or a knowledge base.