Porto

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Porto is a portfolio template for photographers, built on Bootstrap 5. Its pages are made of full-height photo sections with a dot navigation on the side, on a dark violet theme with white text and corner-bracket buttons. The layout is responsive and mobile-ready. There are six pages: home, about the artist, portfolio, portfolio project, news and contact.

The home page opens with a full-screen photo slider and three full-height photo sections. The about page has a hero with the photographer’s introduction, a client testimonial and a biography with numbers. The portfolio page is a square photo grid with large feature tiles that you filter by category, and the project page has the project details and a photo carousel. You will also find a news page with a sidebar and a contact page with a contact form and a newsletter sign-up. Porto gives you a ready-made site for a portrait, wedding or fine-art photographer.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 runs the sliders, a CSS grid with a small built-in filter runs the portfolio, and full-height CSS sections with a dot navigation replace the old full-page scrolling plugin. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all six pages together went from 7.5 MB and 154 requests to 2.8 MB and 120 requests, and the home page from 2.0 MB to 0.7 MB. Every photo has an AVIF version with the JPEG as the fallback and real dimensions, the first hero photo is preloaded, and the full-page preloader is gone.
• No third-party requests: Montserrat and the script font of the hero tagline are self-hosted, Font Awesome 4 is replaced by Lucide SVG icons and a small social-logo subset with the X logo, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact form and the newsletter form send through php/send-email.php and php/subscribe.php, with validation, a spam trap and an in-page message, and the news search sends its query. Before, the forms had no action and no field names.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button that closes with Esc, names on logo, avatar, portfolio and icon links, a keyboard-operable filter and slider, visible focus rings, and soft dark shades behind text on photos so that text meets WCAG AA contrast.
• Fixes: “Read More” buttons and sidebar links that went nowhere now lead to real pages, an invisible white button on a light section is dark, new and retouched demo photos, fictional contact details and corrected typos.