Skip to main content
Henderson Digital logo

How I Built This Website: A Technical Deep Dive

Published on

Building your own business website as a developer is both liberating and challenging. You have complete control over every decision, but you also have to resist the urge to over-engineer everything. Here's how I approached building HendersonDigital.com.au and the decisions that shaped the final product.

The Stack

Next.js 15 with App Router formed the foundation. The App Router's file-based routing and built-in optimizations make it perfect for a business site that needs to perform well and rank in search engines.

TypeScript everywhere because life's too short for runtime type errors. Even the content is typed using Zod schemas, which means I catch content structure issues at build time.

Tailwind CSS for styling, configured with a custom design system that maintains consistency across components while keeping the CSS bundle minimal.

Vercel for deployment because the integration with Next.js is seamless, and the edge network ensures fast load times for visitors across Australia.

Content Architecture

Rather than reaching for a headless CMS, I built a content system using TypeScript modules. Each content type (services, testimonials, case studies) has its own Zod schema that validates the data at build time.

[object Object]

This approach gives me type safety, version control for content changes, and eliminates the overhead of managing a separate CMS. For a business website that doesn't need client content updates, it's perfect.

Performance Considerations

Image optimization using Next.js Image component with proper srcset generation and lazy loading. Every image is served in WebP format with fallbacks.

Font optimization with next/font to eliminate layout shift and reduce time to first contentful paint.

Bundle analysis to ensure JavaScript payloads stay minimal. The homepage ships less than 50KB of JavaScript.

SEO and Schema Markup

Structured data is crucial for local businesses. I built a schema generator that outputs JSON-LD markup for:

  • Organization (business details)
  • LocalBusiness (location and hours)
  • Service offerings
  • FAQ pages
  • BlogPosting for articles

The metadata is dynamically generated for each page, ensuring proper Open Graph and Twitter Card support.

Testing Strategy

Unit tests with Vitest for business logic and component behavior.

Accessibility testing with axe-core to ensure WCAG 2.1 AA compliance on every page.

E2E testing with Playwright for critical user journeys like contact form submission.

Performance monitoring in production using Core Web Vitals reporting.

Lessons Learned

Start simple, evolve thoughtfully. I resisted the urge to build a complex CMS or over-engineer the architecture. The current solution handles all requirements while remaining maintainable.

Performance is a feature. Spending time on image optimization and bundle analysis pays dividends in user experience and search rankings.

Content structure matters. Taking time to design proper content schemas prevented countless refactoring sessions later.

Case Study Connection

This website rebuild is actually featured as one of my case studies, demonstrating the same process I use for client projects. If you're curious about the business outcomes and design decisions, check out the full case study.

Want to Build Something Similar?

If you're a business owner looking to build a high-performance website that actually converts visitors into customers, let's talk. I'd love to apply the same thoughtful approach to your project.

The source code for this website is available on my GitHub if you're interested in the implementation details.