Stylish Portfolio is a free, one-page Bootstrap 5 portfolio theme from Start Bootstrap that presents your work through multiple content sections and an off-canvas navigation menu. This responsive template is built on the Bootstrap front-end framework and is distributed as an open-source project under the MIT license.
What is Stylish Portfolio?
Stylish Portfolio is a responsive, single-page portfolio template that takes source files written in HTML, Pug, SCSS, and JavaScript and compiles them into a static website in a dist directory, which you can open directly in a web browser. The theme was created by Start Bootstrap, an open-source library of free Bootstrap themes maintained by David Miller, and is available through npm, GitHub, and the Start Bootstrap website.
Key Features
- Off-canvas navigation — A hidden slide-out menu toggles from the edge of the screen, keeping the one-page layout uncluttered.
- One-page layout — All portfolio information is organized on a single scrollable page with multiple content sections.
- Responsive design — The layout adapts to mobile, tablet, and desktop screens using the Bootstrap 5 grid system.
- SCSS source files — Customize the theme's colors, spacing, and typography by editing the SCSS files in the
src/scss/directory. - Pug templating — HTML pages are generated from Pug files in
src/pug/, which helps reuse navigation and section markup. - npm build system — Use
npm startto launch a local development server with live reload, or runnpm run buildto compile production assets intodist. - Multiple distribution methods — Download the latest release from Start Bootstrap, install it with
npm i startbootstrap-stylish-portfolio, or clone the GitHub repository. - Free for commercial use — The MIT license allows the template to be used in personal and commercial projects without restrictions.
Who should use Stylish Portfolio?
- Freelance designers and artists who need a clean one-page site to display a portfolio of their work.
- Web developers and agencies that want a Bootstrap 5 starting point with SCSS and Pug build tooling for custom client projects.
- Students and learners who want to study how Pug, SCSS, and JavaScript compile into a static Bootstrap website.
What can you do with Stylish Portfolio?
- Showcase creative projects: Replace the placeholder content with your own images, descriptions, and links to create a professional portfolio page.
- Build a personal brand site: Use the off-canvas navigation and one-page sections to present your bio, services, and contact information in a single URL.
- Rapid prototype a landing page: The template's structure and Bootstrap 5 components make it easy to spin up a minimal, responsive landing page for a product or event.
How does Stylish Portfolio work?
For basic use, edit the compiled HTML and CSS files in the dist folder and open index.html in a browser. For advanced use, clone the source repository, run npm install, and then npm start to launch a live preview that watches for changes and reloads automatically. The npm run build command compiles everything into the dist directory for production.
Pricing
Stylish Portfolio is free to download and use. It is released under the MIT license, and Start Bootstrap states that all free templates can be used for any purpose, including commercial projects.
FAQ
Is Stylish Portfolio free?
Yes, Stylish Portfolio is completely free. It is released under the MIT license, so there are no licensing fees or hidden costs.
Can I use Stylish Portfolio for commercial projects?
Yes, the MIT license permits commercial use. You can use the theme to build websites for clients or for your own business without paying royalties.
How do I install Stylish Portfolio?
You have three options: download the latest release from the Start Bootstrap website, install it via npm with npm i startbootstrap-stylish-portfolio, or clone the GitHub repository and run npm install to set up the build environment.
What technologies does Stylish Portfolio use?
The template uses Bootstrap 5 for the responsive layout, CSS and SCSS for styling, Pug for HTML generation, and vanilla JavaScript in src/js/scripts.js. The build process is powered by npm scripts.
