Work

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Work is a portfolio template for a designer or a small design studio, built on Bootstrap 5. A fixed sidebar on the left holds the logo, the menu, the footer credit and the social links; on phones it slides in from a menu button. The layout is responsive and mobile-ready. There are seven pages: home, work, a single project, about, services, journal and contact.

The home page opens with a full-height photo slider, then an About Me block with a photo pair and an accordion, six services with icons, a grid of recent work with captions on hover, three journal cards and a contact band. The work page shows the full project grid, the project page sets its images beside details that stay in view as you scroll, and 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 3.3.5 and jQuery), compiled from Sass together with the theme and the Bootstrap 3 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Flexslider on the hero, a small built-in module replaces Waypoints and animate.css, the sticky project details use CSS, and the accordion has its own short script. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the seven pages together went from 7.6 MB and 169 requests to 3.7 MB and 90 requests; the home page from 1.7 MB to 1.1 MB and the contact page from 0.9 MB and 29 requests to 0.2 MB and 7 requests. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the hero photos are 2560 px wide (were 1200-1280 px).
• No third-party requests: Quicksand is self-hosted, the IcoMoon icon font is replaced by Lucide SVG icons and a 1 KB social-logo subset with the X logo, 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.
• Working contact form: it sends through php/send-email.php, with visible labels, validation, a spam trap and an in-page message. Before, it had no action and no field names, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, a real menu button that closes with Esc and returns focus, names on icon and image links, visible focus rings, project captions that also show on keyboard focus, reduced-motion support and WCAG AA text contrast, with a darker coral for links and buttons and darker menu and meta greys.
• New demo content: brand-free stationery photos from Unsplash in the slider, the project grid and the journal, hero subtitles in place of the template credit, nine distinct journal titles, a named project page, fictional contact details, and links that go to real pages instead of “#”.