Civic

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Civic is a one-page CV and resume template for designers, freelancers and job seekers, built on Bootstrap 5. It gives you six home page layouts to choose from: a light layout, a blue one, two with a profile sidebar next to the timeline, a centred single column and one with a four-photo portfolio strip. The layouts are responsive and mobile-ready.

Each one has the parts of a convincing online resume: a portrait with general info and social links, a work experience and education timeline, a references slider, a portfolio grid with a lightbox, skill bars, progress rings, languages and hobbies, and a contact form that sends email. Swap in your own name, dates and photos and you have a personal web page ready to publish.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.0.0 and jQuery 2.1.4), compiled from Sass, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the references slider, PhotoSwipe replaces Magnific Popup on the portfolio, and the skill bars, language dots and progress rings are drawn by a small script. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: across the six pages the download went from 5.1 MB to 3.6 MB (139 requests to 138). The blue home page alone fell from 1.5 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, and the full-page preloader is gone.
• No third-party requests: Josefin Sans is self-hosted, the icon fonts are replaced by Lucide SVG icons and a 1 KB social-logo subset, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its font from Google Fonts.
• A 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, one h1 per page, labelled form fields, names on the social links and photos, visible focus rings, reduced-motion support and WCAG AA text contrast, with a darker blue and red and darker greys than the original.
• Demo content: a complete fictional CV replaces the placeholder Latin, with new portraits and portfolio photos, working header buttons and social links, a fictional address and email, and redrawn SVG page backgrounds.