Responsive HTML portfolio template built on Bootstrap 5
HTMLPortfolio
folio-html-bootstrap — HTML Portfolio Template
By ShadyBot97
Folio is a responsive HTML portfolio template built on Bootstrap 5 for web developers and designers, using Locomotive Scroll for scroll animations and supporting light and dark modes.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-09-30View source
What stands out
A quick read of the recorded project description.
Integrates Locomotive Scroll to trigger section animations on scroll
Supports light and dark modes
Includes five pages: Home, About Me, My Work list and single, Contact Me
Uses Handlebars.js and partials for code reuse, with content driven by JSON files under src/data
Provides My experience, My skills, and Client testimonials components
Template Details
Folio is a pure HTML portfolio template whose source is built on Bootstrap 5 and integrates Locomotive Scroll for section animations during scrolling, while offering light and dark mode toggling. The template targets web developers and designers for showcasing personal work and experience.
The template includes five pages: Home, About Me, My Work list page, My Work single page, and Contact Me. The source uses Handlebars.js as the template engine, reusing common code via partials, and relies on the Webpack Handlebars plugin to read JSON data files under src/data, outputting repeated HTML blocks with loops. Style source files are located in src/assets/scss, with theme.scss as the entry file.
The template provides components such as My experience, My skills, and Client testimonials. The repository notes explicitly state: this is a pure HTML template, does not connect to a database, and will not automatically run in content management systems like WordPress; you need to integrate the code into your target application yourself. If you only modify files in the dist directory, recompiling with Webpack later will overwrite those changes; to customize the source, install Node.js, run npm install in the project root, use npm start to launch the Webpack devserver, and npm run build to recompile output to dist.
The code is MIT licensed, free to use, modify, commercialize, and distribute, provided the copyright notice and license notice are retained when distributing. Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses.
HTMLPortfolio
Is it right for your project?
Use Cases
- Web developers or designers building a personal portfolio website
- Portfolio pages requiring scroll animations and light/dark modes
- Static HTML projects starting quickly on a Bootstrap 5 foundation
- Integrating the template code into an existing website or application
Suitable For
- Front-end developers familiar with HTML, CSS, and Bootstrap
- Users who prefer to edit files directly in the dist directory
- Developers willing to install Node.js and compile the source with Webpack
- Individuals or teams needing a modifiable, commercially usable template under the MIT license
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Editing only the dist directory allows direct file changes without installing any dependencies
- 2
Modifying the source requires installing Node.js first, then running npm install in the project root
- 3
Run npm start to launch the Webpack devserver, and npm run build to recompile to dist
- 4
Direct changes to dist will be overwritten after recompiling; customizations should go in the src directory
- 5
To add a page, clone an existing page in src/html and rename it; restart the devserver for it to take effect
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license from 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
- Free use, modification, commercialization, and distribution of this version's code are permitted.
- 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 a pure HTML template, does not connect to a database, and will not automatically run in content management systems like WordPress; users must integrate the code into their target application themselves.
- If you directly modify files in the dist directory, those changes will be overwritten when recompiling with Webpack later, unless dist is moved outside the template directory; customizations should go in the src directory.
- Modifying the source and recompiling requires installing Node.js first and running commands such as npm install, npm start, and npm run build in the project root.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate 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
https://github.com/ShadyBot97/folio-html-bootstrap/blob/main/LICENSE.mdhttps://github.com/ShadyBot97/folio-html-bootstrap/blob/main/README.mdensure that you have Node.js installed
Original README
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
- 2021-10-30
- 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: b1b2b62e4d523bb349f65b00046ad25c1861bb2e8a20237649d27261f616f035
2026-09-30T11:05:19.853Z
Source file / repository# Folio - Bootstrap 5 HTML Responsive Portfolio Template ## Overview Folio is a responsive HTML Bootstrap 5 template for web developers and designers to showcase their work. The template uses Locomotive Scroll to animate in sections on scroll, and also comes with light mode/dark mode support. <strong><a href="https://folio-html-bootstrap.vercel.app/">View Demo</a> | <a href="https://github.com/PixelRocket-Shop/folio-html-bootstrap/archive/main.zip">Download ZIP</a></strong>  ## 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/folio-html-bootstrap/archive/main.zip) OR clone the repo: `git clone https://github.com/PixelRocket-Shop/folio-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 * About Me * My Work (Listing Page) * My Work (Single Page) * Contact Me 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://folio-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 * Locomotive Scroll Integration * Light/Dark Mode support * 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/) [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) [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]
Explore similar templates
Compare previews and descriptions within the same stack and category.
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
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
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
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
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
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