Clark

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Clark is a dark one-page portfolio and resume website template for a freelance web designer, built on Bootstrap 5. It has a black layout with yellow accents, a hero slider with a cut-out portrait, Poppins type and a sticky menu that scrolls to each section. The layout is responsive and mobile-ready. There are two pages: the one-page home and a blog post page that shows three posts.

The home page opens with a two-slide hero, followed by an about section with personal details, a project counter and a “Download CV” button, a resume with three education and three work entries, six services, six skill bars, six projects that open in a lightbox, three blog teasers, a counter band, a “Hire me” band and a contact section with contact details, a contact form and a portrait. The post page has the article, an author box, comments, a comment form and a sidebar with search, categories, recent posts and tags. Use Clark for a web designer, a developer or another freelancer who wants to show their work and get hired.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1), compiled from Sass with the design’s original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, PhotoSwipe 5 opens the projects, Jarallax 3 runs the post page’s background parallax, and small built-in modules replace Waypoints, animate.css, animateNumber and Scrollax; AOS, Magnific Popup and jQuery Easing, which nothing used, are removed. Lucide SVG icons replace Open Iconic, Ionicons, icomoon and a fourth icon font, with a small Font Awesome 7 Brands subset for the social logos. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script bundle.
• Lighter pages: the home page went from 10.04 MB and 46 requests to 1.61 MB and 30 requests, and the post page from 1.91 MB and 38 requests to 0.57 MB and 18. Every photo has an AVIF version with the JPEG as the fallback, and the two hero cut-outs, PNGs of 1.32 MB and 5.50 MB, are now JPEGs of 0.11 MB and 0.45 MB (0.05 MB and 0.27 MB as AVIF) that look the same on the black page. The full-screen preloader is gone. The download is 3.51 MB (it was 10.78 MB) and includes the Sass sources, the build scripts and the sample CV.
• No third-party requests: Poppins is self-hosted in the weights the design uses, the icons are inline SVG, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, both pages loaded the font from Google Fonts.
• Working demos: six distinct projects, each opening in a lightbox, and three distinct posts, each on its own page, with a sidebar search, category and tag links that find them. “Download CV” downloads a sample one-page CV in PDF, and one fictional designer, with fictional schools, employers and contact details, appears throughout. Before, the six projects and the three posts each repeated one title, the post page could show only one post, and every resume entry named the same school with the same dates.
• Working forms: the contact form sends through includes/send-email.php and the comment form on the post page through includes/comment.php, safe mailers with validation, a spam trap and an in-page message. Before, both forms had unnamed fields and posted nowhere.
• Accessibility: a skip link and a main landmark, one h1 per page (the home page had nine), in-page links that move keyboard focus to the section they open, labelled form fields and skill bars, names on icon-only links, 44 px slider dots, visible keyboard focus on every link and button, reduced-motion support and WCAG AA text contrast: on phones and tablets the hero text sits on the lower part of the portrait over a soft gradient, the project tiles and the hire band get darker veils, and text on the yellow hover fills is black.
• Fixed: the “Hire me” button in the hire band could not be clicked because it sat under the page, the menu button was black on black on the sticky bar, button hovers never applied, and on phones the hero text covered the portrait’s face. 68 links that went nowhere, a breadcrumb to a missing blog page and a missing article image are fixed, so every link now opens a section, post, project, the CV, a phone number or an email address. Nested comments no longer scroll sideways on small phones, and typos are corrected.