Calvin

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Calvin is a personal portfolio template for digital product designers and freelancers, built on Bootstrap 5. It pairs a warm orange header and hero with clean white sections, Roboto Condensed headings and DM Sans text. The layout is responsive and mobile-ready. There are eight pages: home, about, work, services, blog, blog post, contact and an elements page.

The home page opens with a portrait, your headline, phone and email, followed by four services, selected work with a lightbox, an about section with skill bars and skill tiles, client testimonials and the latest news. You will also find an about page with key figures and a contact form, a blog with a sidebar, search, tags and a newsletter form, a blog post with comments and a comment form, and a contact page with a working form and a map that loads on click. Calvin gives you a ready-made site to present your design work and win new clients.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Slick on the three home-page sliders, PhotoSwipe replaces Magnific Popup on the work and elements galleries, and a small built-in phone menu replaces SlickNav. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the nine pages together went from 15.9 MB and 500 requests to 5.3 MB and 178 requests; the home page from 3.0 MB and 68 requests to 0.7 MB and 30 requests. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading below the first screen, the orange hero backgrounds are sharp SVG files, and the full-page preloader is gone.
• No third-party requests: DM Sans and Roboto Condensed are self-hosted, the icon fonts are replaced by Lucide SVG icons and a small social-logo subset, and the contact page map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks it. A Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact forms, blog comments and newsletter post to included PHP handlers with visible labels, validation, sending, error and success messages and a spam trap; the blog search lists matching posts.
• Accessibility: a skip link, one heading per page, visible keyboard focus, labelled controls, 44 px slider arrows and WCAG AA colour contrast, with dark text on the orange header and a deeper orange for text and buttons on white.
• Fixes and new content: a finished about page linked from the menu, portfolio copy instead of placeholder text, skill tiles drawn as icons, higher-resolution blog photos, page titles and descriptions, Open Graph tags and structured data on every page.