Ronin

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Ronin is a portfolio website template for architects, interior designers and other creative freelancers, built on Bootstrap 5. The layout is responsive and mobile-ready. It has nine pages: home, about, services, portfolio, portfolio details, blog, blog details, contact and an elements page.

The home page has a portrait and introduction, an about block with animated skill bars, six services, a filterable project grid, a testimonials slider and the latest posts. The portfolio page repeats the filterable grid, the details page shows one project with its facts, and the blog has a post list, a post with comments and a comment form, and a sidebar with search, author, popular posts, categories, newsletter and tags. The contact page has a working contact form and a map that loads on click.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass, and plain JavaScript with no jQuery. Swiper 14 runs the testimonials slider, and small built-in modules handle the project filter, skill bars and counters. npm run build (Dart Sass and esbuild) compiles the stylesheets and one script.
• Lighter pages: the nine pages together went from 15.2 MB and 391 requests to 5.9 MB and 238 requests, and the blog page from 4.4 MB to 0.8 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen.
• No third-party requests: Heebo and Roboto are self-hosted, the Linearicons, Flaticon and Font Awesome 4 icon fonts are replaced by Lucide SVG icons and a small social-logo subset, the map is an OpenStreetMap map (no API key) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact, comment and newsletter forms send through PHP handlers with validation, a spam trap and an in-page message; set your address in php/send-email.php and php/subscribe.php.
• Accessibility: a skip link, one h1 per page, visible form labels, named icon links and skill bars, AA text contrast (a deeper brand blue behind white labels), visible keyboard focus and submenus that open from the keyboard.
• Architect and interior designer demo content with documented Unsplash photos, fictional names and contact details, page titles and descriptions, Open Graph tags and Person structured data.
• A README with build, colour, font, icon, form and map instructions, and a documentation page generated from it.