Sonar

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Sonar is a portfolio website template for landscape, travel and portrait photographers, built on Bootstrap 5 with a dark, minimal design. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with seven pages: home, about me, services, portfolio, blog, contact and elements.

The home page opens with a slider of tall photo panels and a staggered photo story set against large backdrop words. The inner pages add an about page with skill bars and round progress loaders, services with icon boxes, a testimonial slider and milestone counters, a filterable portfolio with a full-screen lightbox, a blog with a sidebar, and a contact page with a working contact form and a map. Sonar gives you a ready-made site to show your work and win new shoots.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.0 and jQuery), compiled from Sass with the original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero and testimonial sliders, PhotoSwipe replaces Magnific Popup in the portfolio, and small built-in modules replace the filter, counter, scroll-animation and progress-bar plugins. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all seven pages together went from 16.4 MB and 194 requests to 8.1 MB and 125 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading, and the photos are re-cut from their originals at up to 2560 px, so they stay sharp on phones and large screens.
• No third-party requests: Roboto is self-hosted, Lucide SVG icons and a small social-logo subset replace the icon fonts (the Twitter bird is now the X logo), the contact map loads only when a visitor asks for it and needs no API key, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• A working contact form with labels, validation, sending/error/success messages and a spam trap (PHP handler included), and a blog search that works as a plain GET form.
• Accessibility: a skip link, landmarks, one heading 1 per page, a keyboard-operable menu panel that closes with Esc, alt text on every photo, 44 px slider dots and AA text contrast.
• Fixes: the menu now marks the current page, every placeholder link goes somewhere, portfolio captions and filters match the photos, and spelling mistakes are corrected.