PersonalPortfolio

Author: Colorlib

Updated: October 2026 · v3.0.3

Credits: Images from Unsplash

PersonalPortfolio is a modern, creative and responsive portfolio website template built on Bootstrap 5. Whatever your professional field, it helps you set up your online presence without starting from square one. Use PersonalPortfolio as it comes out of the box, or personalize it to your own signature style. It comes with nine pages (home, about, services, portfolio, project details, blog, blog post, contact and elements).

The features include hover effects, a filterable portfolio, a testimonial slider, a logo slider, a working contact form with a click-to-load map and many predefined elements. You will also find a blog section, which you can use for in-depth project presentations and articles.

What’s new in 3.0

• Bootstrap 5.3.8 (the 2019 release used Bootstrap 4.1.3), compiled from Sass with only the parts the pages use and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery: jQuery, Modernizr and the jQuery plugins are gone. Swiper 14 replaces Slick on the testimonial and logo sliders, PhotoSwipe 5 replaces Magnific Popup on the elements gallery, the mobile menu is a built-in panel behind the same button, and the selects are the browser’s own. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.0 MB and 59 requests to 715 KB and 30 requests, the contact page from 1.5 MB and 68 requests to 399 KB and 12 requests, and the download from 15.1 MB to 5.7 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, with real dimensions and lazy loading below the first screen, 41 unused images are removed, and the full-screen preloader is gone.
• No third-party requests: Rubik and Rufina are self-hosted, the Flaticon, Themify and Font Awesome 5 icon fonts are replaced by Lucide SVG icons and a 1.5 KB social-logo subset, and the contact map is OpenStreetMap, loaded only when a visitor clicks “Show map”. Before, the contact page loaded a maps script with an API key, and the map showed an error.
• Working forms: the contact form and the “Let’s Work Together” forms on the home, about, services and project pages send through includes/send-email.php, with validation, a spam trap and an in-page message. Before, the contact script mailed every message to an outside address and put visitor input in the mail headers, and the “Let’s Work Together” forms sent nothing. The comment, newsletter and demo forms check their fields and say thank you.
• Accessibility: a skip link, a main landmark and one h1 per page, names and labels on every control, visible keyboard focus (the old CSS removed it), a Page submenu that also opens from the keyboard, and WCAG AA text contrast, with a deeper red for small red text and buttons, darker greys and lighter footer text (it was 1.8:1).
• Fixed: the back to top button showed at the top of the page before any scrolling, the hero buttons linked to a page that did not exist and the header and “Contact Me Now” buttons led nowhere, the elements page’s arrow buttons now show their arrows, and typos such as “Possitive” and “Late talk with me” are corrected.
• Demo content: the names, address and email addresses are fictional (a real street address and real inboxes before), five design headlines replace one news headline repeated on every blog post, three photos that showed brand logos are replaced, and the signature under “Let’s Work Together” is an invented one for the demo persona (a real historical signature before).