MatthewABuckley.com
A hand-coded, magazine-style website for a transformation coach, published author, keynote speaker, and ghostwriter — built from scratch with zero framework overhead and full WCAG 2.1 AA accessibility compliance.
The Story
Like the old Hair Club for Men commercials said — "I'm not only the president, I'm also a client." This project is my own website. MatthewABuckley.com is the professional hub for my work as a transformation coach, published author, keynote speaker, and ghostwriter.
After years of building brands and websites for clients, I needed to turn the lens on myself. The site had to do what I tell every client their site needs to do: establish credibility instantly, communicate what you offer with zero ambiguity, and make it effortless for the right people to take the next step — whether that's booking a coaching call, requesting a speaking engagement, or hiring me to write their book.
The challenge was personal. When you design for yourself, you're the hardest client. Every decision gets second-guessed. The temptation to over-design, over-write, and over-engineer is real. The discipline was to treat this project with the same objectivity I bring to client work — start with the audience, build for their needs, and let the design serve the message.
The Process
The design system was built around a single principle: weight. My story — from decorated deputy sheriff to rock bottom to rebuilding everything from scratch — isn't a light story. The brand needed to feel like it had substance, like opening a well-worn leather journal. That meant a dark, warm, grounded color palette: charcoal backgrounds, cream text, and dark bronze and copper accents. No bright optimistic coaching-website pastels. This is a brand built on raw honesty, not inspiration quotes over sunset photos.
Typography does heavy lifting here. Playfair Display handles every headline — it's a high-contrast serif with editorial authority, the kind of typeface you see on magazine covers. Inter takes over for body text, providing clean modern readability that balances Playfair's boldness without competing with it. Together they create a voice that feels authoritative and approachable at the same time.
Every page features a full-bleed magazine-style hero section using a 2/3 + 1/3 asymmetric CSS Grid — text commands the left two-thirds while the right third lets the background imagery breathe. AI-generated portrait photography is integrated into the hero sections, giving each page a personal, editorial feel. On mobile, the grid collapses to a centered single column with per-page object-position tuning so the image cropping stays intentional at every breakpoint.
The entire site is pure HTML, CSS, and JavaScript — no React, no Next.js, no WordPress, no build tools. Seven pages, three focused JS files, and a deliberate loading strategy. The blog uses real-time search with category filtering and load-more pagination. The contact form includes full client-side validation with a Mailchimp integration. Accessibility was treated as a requirement, not a checkbox: full WCAG 2.1 AA compliance including skip-nav links, semantic heading hierarchy, ARIA state management on accordions and filters, focus-visible indicators, and a complete color contrast audit.
Project Gallery
The Solution
The final deliverable is a seven-page, hand-coded static website that serves as a professional hub across four verticals — coaching, speaking, ghostwriting, and books. Every page features a full-bleed magazine-style hero with AI-generated portraiture and asymmetric grid typography. The dark bronze and copper palette communicates depth and earned credibility rather than generic coaching-industry optimism.
All website copy was written in-house to match the voice and tone of my published manuscript "Ditch the Drift" — short punchy sentences, rhetorical questions, raw vulnerability balanced with humor, and calls to action that feel like conversation rather than marketing. The blog follows the same voice guide with a story-arc structure: personal story, universal principle, call to action.
The site ships with zero framework overhead and loads near-instantly. Three focused JavaScript files handle global behavior, blog search and filtering, and contact form validation — each loaded only on the pages that need them. The full accessibility audit resolved every WCAG 2.1 AA issue: semantic HTML structure, ARIA state management on interactive components, copper-to-dark-bronze contrast swaps on light backgrounds, and focus-visible indicators throughout.
From information architecture and visual design through content writing, front-end development, accessibility remediation, and deployment — this project is the complete scope of what The 23 Eleven delivers, executed on the one client who knows exactly what "done right" looks like.
Like What You See?
Ready to transform your brand with a design that engages and inspires? Let's create something amazing together.
Get Your Free Consultation