HTMLPortfolio

portfolio-muse — HTML Portfolio Template

By fhShawon

Muse is a Bootstrap 5-based one-page responsive HTML portfolio template for graphic designers and illustrators to showcase work, featuring project modals, an animated slide-out menu, client testimonials, skills, and experience components.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-09-30View source

What stands out

A quick read of the recorded project description.

01

Built with Bootstrap 5, single-page responsive layout

02

Portfolio component with custom modal to display corresponding images and project descriptions

03

Animated slide-out menu, client testimonials, skills, and experience components

04

Uses Handlebars.js templating engine and partials to reduce code duplication

05

Template content data managed via JSON files in src/data

06

Provides a generated dist version that can be edited directly without compilation

Template Details

Muse is a one-page responsive HTML portfolio template built with Bootstrap 5, primarily aimed at graphic designers and illustrators showcasing their work. The template consists of a single home page and includes a portfolio component (which opens a custom modal displaying the corresponding image and project description), an animated slide-out menu, a client testimonials component, a skills component, and an experience component.

The template source uses Handlebars.js as the templating engine and passes JSON files under src/data as template data via Webpack's Handlebars plugin, enabling loops to output HTML and reduce repetitive code. Style source files are located in src/assets/scss, with theme.scss as the entry point.

It is important to note that this is a pure HTML template; it does not connect to a database and does not automatically run within content management systems such as WordPress. The code must be integrated into your own application. If you only modify the generated files in the dist directory, subsequent recompilation may overwrite your changes; to modify the source, you should work in the src directory.

HTMLPortfolio

Is it right for your project?

Use Cases

  • Graphic designers or illustrators building a personal portfolio single page
  • Developers who need to quickly integrate a portfolio page into an existing website or application
  • Front-end projects customizing a single-page portfolio template based on Bootstrap 5
  • Static sites that want to drive page content with JSON data and reduce repetitive HTML

Suitable For

  • Creative professionals such as graphic designers and illustrators
  • Front-end developers familiar with HTML, Bootstrap, and basic build processes
  • Teams needing a single-page portfolio template and integrating it into their own applications
  • Users who can accept manually editing source code or JSON data to update content

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    If you do not plan to compile the source, you can directly edit files in the dist folder without installing any dependencies

  2. 2

    To compile the source, install Node.js and then run npm install in the project root

  3. 3

    Run npm start to launch the Webpack development server, and npm run build to recompile output to dist

  4. 4

    If you directly modify files in dist and then recompile, changes may be overwritten; it is recommended to modify the src source

  5. 5

    The template is pure HTML, does not connect to a database, and does not automatically run in content management systems such as WordPress; you must integrate it yourself

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • You are allowed to use, modify, commercially use, and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • This template is purely an HTML template; it does not connect to a database and does not automatically run in content management systems such as WordPress. Users must integrate the code into their own applications; it cannot be used out of the box as a CMS theme.
  • If you directly modify the generated files in the dist directory, changes will be overwritten when recompiling with Webpack. Unless you move dist out of the template directory, you need to modify the src source to retain custom content.
  • To compile the source or run the Webpack development server, Node.js must be installed on your system; editing only dist files requires no dependencies.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely based on the code's MIT license.
  • External services such as domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

Please note that this is an HTML template only. It does not connect to a database, and will not automatically work in a content management system (Wordpress etc). You will need to incorporate our code into your application.

Original README

if you customise anything in this folder directly, and then later recompile the template using webpack, unless you move the dist folder out of the template, your changes will be overridden.

Original README

Install Node.js if you don't already have it on your system.

Original README
https://github.com/fhShawon/portfolio-muse/blob/main/LICENSE.mdhttps://github.com/fhShawon/portfolio-muse/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-09-30. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 65 / 100
Technologies
HTML
Website type
Portfolio
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2022-09-06
Screenshot last checked
2026-09-30

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 60c35c857f26c62b192dfa1f266868dd56e663db036b430aff56263f568bbc2e

2026-09-30T11:07:09.743Z

Source file / repository
# Muse - Bootstrap 5 HTML Responsive One-Page Creative Portfolio Template

## Overview
Muse is a one-page responsive HTML Bootstrap 5 template for graphic designers and illustrators to showcase their work.
The template comes with a custom modal that pulls in the correct image and project description, a custom animated slide-out menu, client testimonials widget, skills widget and experience widget.

<strong><a href="https://muse-html-bootstrap.vercel.app/">View Demo</a> | <a href="https://github.com/PixelRocket-Shop/muse-html-bootstrap/archive/main.zip">Download ZIP</a></strong>

![Bootstrap 5 Responsive HTML One-Page Portfolio Template](https://pixelrocket-public-assets.s3.eu-west-2.amazonaws.com/github-assets/muse-html/home.jpg "Muse | Responsive Bootstrap 5 One-Page Portfolio Template")

## Table of contents

- [Requirements](#requirements)
- [Quick Start](#quick-start)
- [Template Pages](#template-pages)
- [Demo Link](#demo-link)
- [Template Key Features](#template-key-features)
- [Template File Structure](#template-file-structure)
- [Handlebars](#handlebars)
- [Template JSON Data](#template-json-data)
- [Customise Template Styles](#customise-template-styles)
- [Create New Pages](#create-new-pages)
- [Bootstrap Documentation](#bootstrap-documentation)
- [Credits](#credits)
- [Contact Us](#contact-us)


## Requirements
If you do not intend to work with the template source code (and that means you will not be compiling it or running the Webpack dev server), you do not need to install anything. You can simply navigate to the dist folder and start editing the files.

Most developers will be editing the source code and will also be running Webpack to recompile the template files. If that's the case, then ensure that you have Node.js installed. [You can download it from here](https://nodejs.org/en/download/)


## Quick Start
- [Download the latest release](https://github.com/PixelRocket-Shop/muse-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/muse-html-bootstrap.git`
- Install Node.js if you don't already have it on your system.
- Open the project root in your command line.
- run `npm install` in your command line.
- run `npm start` to start Webpack devserver.
- if you want to recompile the template files (which output to the dist folder), run `npm run build`


## Template Pages
The template consists of a single page:

* Homepage

To keep code repetition to a minimum, we've used Handlebars.js as the templating engine and partials to quickly add the same code to different pages. We also use a Handlebars plugin for JSON data - this allows us to use loops and output a single HTML code block instead of repeating the same HTML.


## Demo Link
[Demo URL](https://muse-html-bootstrap.vercel.app/)

**Please note that this is an HTML template only. It does not connect to a database, and will not automatically work in a content management system (Wordpress etc). You will need to incorporate our code into your application.**


## Template Key Features

* Built with Bootstrap 5
* Fully responsive
* My Portfolio component with custom modal display
* Animated Slideout menu component
* My experience component
* My skills component
* Client testmonials component


## Template File structure
📁 dist - Generated version of the template. Go here if you do not want to work with the template source code. But be warned: if you customise anything in this folder directly, and then later recompile the template using webpack, unless you move the dist folder out of the template, your changes will be overridden.

📁 node_modules - Directory where NPM installs dependancies. You will not see this folder until you complete the template installation. You do not need to create this folder.

📁 src - Template source code. Go here to customise your template.

📁 src/assets - Template assets such as CSS, JS, Images etc.

📁 src/data - Template JSON Data files. We use these JSON files to make your job easier to insert content into the template. 

📁 src/html - Template pages. Go here to edit existing pages or add new pages.

📁 src/partials - Handlebars partial templates. 


## Handlebars
Handlebars is a template engine that allows us to keep our template source code as organised and as clean as possible. It cuts down on code duplication and through the use of helper functions, allows template developers to very quickly output large amounts of data with minimal code. [You can read more about it here](https://handlebarsjs.com).


## Template JSON Data
The Webpack Handlebars plugin that we use comes with a very handy utility that allows us to pass in JSON files as template data.

Please navigate to: src/data. Here is where our template data JSON files reside. You can edit, remove or add your own to this folder.


## Customise Template Styles
All of the template's source CSS/SASS files are kept inside the template's assets folder. Navigate to src/assets/scss. Open up theme.scss with your editor.

This is the main entry point for all other SASS/CSS files.


## Create New Pages
To create a new page, navigate in your code editor to: src/html. To make it easier to get the correct HTML in place, clone an existing page. Rename the newly-created file to whatever URL you require. And that's it. You are now free to open the new page with your code editor, make your changes, and then save the file. Quit Webpack devserver and restart it for the page to show up.


## Bootstrap Documentation
Bootstrap already has a comprehensive documentation site that will guide you in setting up and using all default Bootstrap features. Bootstrap 5 is fully integrated to our template's source code. Please refer to Bootstrap's doc site first for any default Bootstrap features: [Visit Bootstrap's Doc Site](https://getbootstrap.com/docs/5.0/getting-started/introduction/)


## Credits
[Bootstrap](https://getbootstrap.com/)

[AOS.js](https://michalsnik.github.io/aos/)

[Unsplash](https://unsplash.com/)

[Freepik](https://www.freepik.com/)

[Swiper.js](https://swiperjs.com/)

## Contact Us
You can find our website [here](https://www.pixelrocket.store) or you can email us at [email protected]
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

simplefolio

simplefolio

Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.

HTML · Portfolio

Freelancer

Freelancer

A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.

HTML · Portfolio

Resume

Resume

A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.

HTML · Portfolio

Creative

Creative

A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.

HTML · Corporate Website

Grayscale

Grayscale

A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.

HTML · Corporate Website

startbootstrap-stylish-portfolio

startbootstrap-stylish-portfolio

A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.

HTML · Portfolio