Front End Deep Dive

When building this website, a top priority was creating an exceptionally fast, seamless user experience. To achieve this, I carefully selected some modern packages optimized for speed, efficiency, and scalability.

MDX for Content Authoring

I write all blog posts and some pages using MDX and Content Layer. This allows us to author content in Markdown while using React components. Currently using content layer (although its no longer maintained at the moment) for type safety when rendering articles.

Content Layer handles converting MDX into optimized HTML and CSS at build time. The result is fast page loads and seamless integration of content and code.

Adding a new location is easy - I simply create a new MDX file. Next.js and Content Layer handle the rest.

Optimized Images with Next Image

I use Next.js Image to serve images optimized for each device and connection speed. This avoids downloading oversized images that slow sites down.

Image optimization is automatic based on screen size, pixel density, and network speed. Pages load faster while still providing high image quality.

Minimal Client-Side JavaScript

Nearly all site content is generated at build time, not runtime. This minimizes client-side JavaScript, improving performance.

There is no flickering between pages thanks to Next.js - just smooth, fast transitions. This delivers a more seamless user experience than traditional frameworks.

Clear Calls to Action

Each page has a primary "Book Now" CTA along with a secondary CTA like "Learn More." This guides users through a conversion funnel.

CTAs mimic natural conversation flow. Questions are asked one at a time to avoid overwhelming users. Pricing and process are transparent.

Styling with Tailwind CSS

The site is styled using Tailwind CSS. Tailwind provides utility classes for rapid development and design flexibility.

I can build reusable components faster without learning complex frameworks. Tailwind is also easy to integrate with existing CSS.

Overall, this modern front end stack focuses on speed, simplicity and scalability. Let us know if you have any other questions!