Tulen

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Tulen is a photography portfolio template, built on Bootstrap 5. A slim bar on the left holds the menu button and social links, and the menu panel slides in over the page. The layout is responsive and mobile-ready. There are six pages: home, about, gallery, blog, a single blog post and contact.

The home page is a full-height accordion of five featured photos: the open photo shows its title, category and photographer, and the others sit beside it as narrow strips that open on hover or tap; on phones the same photos play in a fading slider. The gallery has category filters, a masonry grid and a lightbox, the blog a masonry grid of post cards, and the blog post a photo gallery, share links, recommended posts, comments and a comment form. You will also find an about page with a portrait and skill rings, and a contact page with the studio details and a map that loads on click.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4.1 and jQuery), compiled from Sass with the original proportions, and plain JavaScript with no jQuery. Swiper 14 runs the phone slider, PhotoSwipe 5 the gallery lightbox, and small built-in modules replace the accordion, masonry, filter, scrollbar and progress-ring plugins. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all seven pages went from 6.8 MB and 233 requests to 5.2 MB and 120 requests, and the contact page from 1.7 MB and 76 requests to 0.2 MB and 10 requests, while the home photos are now sharp on 4K screens. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the full-page preloader is gone.
• No third-party requests: Montserrat is self-hosted, the Themify and Font Awesome 4 icon fonts are replaced by Lucide SVG icons and a 1 KB social-logo subset, and the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”. A Google Analytics 4 snippet stays commented out until you add your own ID.
• A working comment form: it sends through php/send-email.php with validation, a spam trap, visible labels and a message in the page.
• Accessibility: a skip link, one main heading per page, a keyboard-friendly menu panel (Esc closes it), labelled social links, visible focus rings, darker grey text and scrims behind titles on photos, and reduced-motion support.
• Fixes and content: the home accordion follows window resizes instead of reloading the page, short blog photos are no longer stretched on phones, and new demo photos, fictional names and contact details, and blog titles written for a photographer.