Me

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Photos from Unsplash, Arbutus Slab font, Lucide icons

Me is a one-page personal portfolio and resume website template for web developers, designers and other creatives. The layout is responsive and works in all modern browsers. It has one home page with a hero and portrait, four service cards, an about section, a nine-photo project gallery with a lightbox, a testimonials slider, a client logo grid and a working contact form.

The header is sticky, the menu scrolls to each section and highlights the one you are reading, and sections reveal as they come into view. Swap in your name, photos and projects and you have a personal site ready to publish.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel in the testimonials slider, PhotoSwipe replaces Fancybox in the project gallery, and small built-in modules replace AOS, jquery.sticky and the off-canvas menu script. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter page: the home page went from 2.6 MB and 37 requests to 0.7 MB and 32 requests, and the download from 3.0 MB to 0.8 MB. Every photo has an AVIF version with the JPEG as the fallback, and unused plugins such as jQuery UI, Isotope, a date picker and MediaElement are gone.
• No third-party requests: Arbutus Slab is self-hosted, the icomoon and Flaticon icon fonts are replaced by Lucide SVG icons and a small social-logo subset, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, the page loaded two web fonts from Google Fonts.
• Working contact form: it sends through php/send-email.php, with named fields (the message box had no name before), validation, a spam trap and an in-page message.
• Accessibility: a skip link and a main landmark, one h1, a mobile menu that keeps keyboard focus inside and closes with Esc, names on icon-only links and gallery links, visible focus rings, reduced-motion support, WCAG AA text contrast and touch-sized slider dots.
• Fixed: the footer link columns now go to sections of the page, and the hero portrait scales with the screen instead of being cut off.
• Demo content: portfolio copy and a fictional name in place of lorem ipsum, new Unsplash photos, and SVG wordmarks of fictional companies in the clients section.