Blaze Your
Own Trail
A premium consulting and media platform built for Jordan Mendoza, prioritizing blistering performance, top-tier SEO, and a highly engaging, interactive design language.
Project Overview
"Blaze Your Own Trail" is a premium consulting and media platform built for Jordan Mendoza. The goal was to build a bleeding-edge, high-performance website that serves as a central hub for his consulting services, speaking engagements, book, and highly successful top 2% global podcast.
We engineered a bespoke Next.js (App Router) application that prioritizes blistering performance, top-tier SEO, and a highly engaging, interactive design language.
System & Architecture Breakdown
1. Design System Architecture
We wanted to move away from rigid, template-like designs. To achieve this, we developed a dynamic and fluid design system built entirely on Tailwind CSS v4.
- • Glassmorphism & Depth: We heavily relied on `backdrop-blur-xl` and layered semi-transparent background colors to create a "glass" effect over decorative, fixed background motifs.
- • Dynamic Backgrounds: We used absolute-positioned glowing radial gradients and scattered, low-opacity PNG assets to create a textured, atmospheric environment that feels premium rather than flat.
- • Micro-Interactions: Features such as the rotating vinyl disk on the podcast player, floating audio equalizer wave animations, and hover-triggered scale effects make the UI continuously responsive to user intent.
2. Advanced Podcast Fetching Architecture
Instead of opting for an off-the-shelf, iframe-based podcast player that degrades SEO and ruins the UI flow, we built our own native player tightly integrated into the Next.js frontend ecosystem.
- • API Proxy for CORS Mitigation: Browsers enforce strict CORS policies when fetching remote XML feeds. To bypass this, we constructed a Next.js Serverless Route (`/api/podcast-feed`) that essentially acts as a proxy, fetching the RSS feed directly without restrictions.
- • Aggressive Edge Caching: We implemented `stale-while-revalidate=7200` alongside `s-maxage=3600`. The server aggressively caches the feed for an hour for near-instant response times, recalculating in the background.
- • Client-Side XML Parsing & Fallbacks: The frontend utilizes `DOMParser` to extract the metadata of the 20 most recent episodes. We hardcoded an intelligent fallback array of signature episodes—if the host drops connection, the UI quietly fails over.
3. Contact Pipeline: SMTP & CRM Hooks
Generating leads is the lifeblood of a consulting business. We constructed the `/api/contact` route as the gatekeeper for user inquiries.
- • reCAPTCHA Verification: Before any database or email operation executes, the request payload must contain a valid Google reCAPTCHA token, securely verified via the Next.js backend to eliminate bot spam.
- • Direct SMTP to Admin: We opted to handle emails manually via SMTP rather than relying on a 3rd party embedded form to maintain high deliverability and perfectly format the outgoing payload.
- • The CRM Handoff: The custom endpoint parses rich lead data. Rather than just sending an email, the payload is securely handed off to the organization's CRM to automate follow-ups and track conversions dynamically.
Technologies Used
Frontend Framework
Next.js 15, React 19, Tailwind CSS v4
Backend Architecture
Edge API Routes, SWR Caching
Integrations
CRM Webhooks, RSS Feeds, SMTP
Project Gallery
A visual journey through the platform's interfaces and features. Click any image to enlarge.