Noah

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Noah is a portfolio website template for a designer, art director or other creative freelancer, built on Bootstrap 5. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with eight pages: home, about, services, work, a project page, blog, a blog post and contact.

The home page opens with a portrait and name that fade between two photos, followed by a services list, large project cards, a blog carousel and testimonials. A full-height menu panel holds the navigation, a blog search and work thumbnails that open in a lightbox. The inner pages add skill rings, a project write-up, a blog grid, a post with comments and a comment form, and a contact page with a working contact form.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 3.3.5 and jQuery), compiled from Sass with the original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel, PhotoSwipe replaces Magnific Popup and a small built-in module replaces Waypoints and animate.css. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 2.2 MB and 32 requests to 0.98 MB and 24 requests, the work page from 2.0 MB to 0.69 MB and the contact page from 1.8 MB to 0.63 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: Karla and Playfair Display are self-hosted, the icon font is replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact form, the newsletter signup on every page and the comment form send through PHP handlers with validation, a spam trap and an in-page message, and the menu search shows matching blog posts. Before, none of them could send anything.
• Accessibility: a skip link, a main landmark and one h1 per page, a menu panel that keeps keyboard focus inside and closes with Esc, labelled fields, named icon links, visible focus rings and text colours that meet WCAG AA contrast.
• Fixes: the blog post page now uses Noah’s own design (it showed unstyled content with missing images), the nine blog teasers have their own titles and lead to the post, project and footer links lead to real pages, and each page has its own title, description, social sharing tags and structured data.