Ahau Tech
Spanish-language tech content platform with a headless CMS
- Role
- Full Stack Developer / Software Architect
- Client
- Personal Project
- Duration
- 2026-07-01 — 2026-07-10
- Year
- 2026
- Team
- 1 persona
Problem
What needed to be solved?
Content management and search engine optimization are complex challenges in a headless environment, especially when aiming for a high-quality user experience and legal compliance.
Solution
How was it solved?
Implemented a comprehensive strategy combining the flexibility of a headless CMS with advanced SEO optimization and legal compliance, ensuring strong visibility and an enhanced user experience.
Features
What it does
- Dark/light mode with anti-flash script
- Cursor-based pagination
- Custom shortcode parser ([youtube], [affiliate])
- Dynamic table of contents powered by IntersectionObserver
- Social sharing (sticky sidebar on desktop, FAB on mobile)
- Persistent reading settings panel (font family, size, spacing, width, high contrast) using localStorage
- Cookie banner with GA4 Consent Mode (denied by default)
- Dynamically generated sitemap, robots.txt, and llms.txt
- Custom WordPress REST endpoint for affiliate banners/links secured with API key
- Legal pages compliant with Mexican regulations and FTC affiliate disclosure
Responsibilities
My role in the project
- Designed and implemented the full system architecture (frontend and headless CMS strategy)
- Built a decoupled data layer (/lib/wp, /lib/seo) with no business logic in UI components
- Implemented ISR with webhook-based revalidation from WordPress
- Integrated WPGraphQL with data normalization mappers
- Led technical SEO optimization (dynamic metadata, sitemap, structured data)
- Developed reusable UI using React Server Components by default
- Ensured legal and privacy compliance (Mexico + affiliate disclosure)
Technical Challenges
What wasn’t trivial
Unified dynamic routing
Resolved conflicts between dynamic routes ([slug] vs [page]) by consolidating them into a single route with a post-then-page fallback strategy
Tailwind v4 without config
Adapted Tailwind v4 (no tailwind.config.ts) using @theme and @utility directly within globals.css
WordPress content normalization
Normalized typographic quotes (”/″) from WordPress that were breaking shortcode attribute parsing
Duplicate images
Prevented duplication of featured images between layout and article content
next/image configuration
Configured next/image with proper remotePatterns for the headless CMS domain
Results
What was achieved
- Delivered a fully functional headless content platform (Next.js + WordPress) with a cleanly decoupled architecture
- Significantly improved performance and user experience through ISR with webhook revalidation
- Established a scalable foundation for content growth and technical SEO (dynamic sitemap, structured metadata, robots.txt)
- Built a highly customizable reading system that improves user retention (dark mode, typography, spacing, contrast)
- Implemented production-ready analytics (GA4 with Consent Mode) and full legal compliance (privacy and affiliate disclosure)
- Created a modular architecture that enables rapid iteration without impacting the data layer or SEO
- Strict separation between data (/lib/wp), SEO (/lib/seo), and UI (/components) simplifies long-term maintenance
- Normalizing HTML content from WordPress before rendering prevents subtle production issues
- ISR with webhook revalidation provides a strong balance between performance and fresh content without full SSR