Beckham

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Beckham is a dark personal portfolio and resume template for a designer or front-end developer, built on Bootstrap 5. It has seven pages: home, about, services, portfolio, blog, a single blog post and contact, and a full-screen overlay menu opens from the menu button on every page. The layout is responsive and mobile-ready.

The home page opens with a full-screen text slider, followed by an about section, services, selected work and animated counters. The about page is a resume with a profile, experience, education and skill bars, and the portfolio images open in a lightbox. You will also find a blog with six post cards, a blog post with an author box, comments and a comment form, and a contact page with a working contact form and a map that loads on click. Beckham gives you a ready-made dark personal site for a designer, developer or freelancer.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.0 and jQuery), 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 opens the portfolio images, and small built-in modules replace Waypoints, animate.css, the number animation and the Scrollax parallax. Stellar, AOS, Magnific Popup and the date and time pickers, which nothing used, are gone, and Lucide SVG icons and a Font Awesome 7 Brands subset replace four icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all seven pages together went from 12.94 MB and 297 requests to 3.37 MB and 95 requests. Every photo has an AVIF version with the JPEG as the fallback, and the full-page preloader is gone. The download went from 2.99 MB to 2.02 MB, and now includes the AVIF copies, the Sass sources and the build tools.
• No third-party requests: Poppins is self-hosted, the social logos are a small Font Awesome subset (the Twitter bird is now the X logo), and an analytics snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that needs no setup and loads only when a visitor clicks “Show map”. Before, every page loaded its fonts and a map script from four outside hosts, and the six pages without a map showed script errors.
• Working forms: the contact form sends through includes/send-email.php and the blog comment form through includes/comment.php, each with validation, a spam trap, a recipient you set and an in-page message. Before, both forms had no field names and posted nowhere.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, real menu buttons that work from the keyboard (Esc closes the menu and focus returns to the button), names on icon links, labelled form fields and skill bars, visible focus rings, and a hero slider that pauses on hover, on keyboard focus and when reduced motion is set. Text meets WCAG AA contrast, with lighter skill percentages and a deeper blue behind the active page number.
• Fixed: the portfolio tiles linked to a page that did not exist and now open the image in a lightbox (“View Project” opens it too); the missing image in the blog post is back; the home page no longer scrolls sideways on tablets; primary buttons keep a readable white label on hover (it turned black on the dark page); and “Checkout my resume”, post titles, tags, comment counts, Reply and pagination now lead somewhere instead of #. Every page has its own title and description.
• Demo content: the employers, schools and addresses in the resume and on the contact page are fictional, the blog post’s headings fit a design blog, the comment count matches the comments, and typos and a duplicated profile column are corrected.