Work

2026

ChapMagic: Magician & Mentalist Landing Page

DesignDevFrontend

A premium, high-performance bilingual landing page for ChapMagic, magician and mentalist, built with cinematic animations, a production-ready contact form, and a gold-and-obsidian design system.

Technologies

  • Astro v5 Hybrid SSG + SSR model, pairing static pages with a live server-side API route for the contact form.
  • Tailwind CSS v4 Vite-based engine with @theme tokens for a consistent, maintainable design system.
  • GSAP (ScrollTrigger + Timeline) Powers all cinematic animations, from hero reveals to scroll-based parallax on every section.
  • Lenis Butter-smooth scroll behavior elevating the overall premium feel of the site.
  • Resend Transactional email delivery from the contact form with high reliability.
  • Vercel Deployment platform enabling the hybrid SSR mode required for the server-side contact form API.
  • TypeScript Type-safe component props, API handlers, and site config throughout.
Screenshot of the ChapMagic landing page hero section.

Project Overview

ChapMagic is a premium landing page for Chap, a professional magician and mentalist who has performed across 14+ countries and accumulated 2,000+ shows and 40,000+ spectators, including appearances on Spain’s Got Talent where judges praised him live on stage. The site serves as a conversion-focused showcase for his corporate events, reception magic, theatrical shows, and intimate Speak Easy experiences, driving bookings through a polished bilingual interface.

Objectives

  • Brand Elevation - Translate ChapMagic’s premium, mysterious stage persona into a cohesive gold-and-obsidian digital identity.
  • Bilingual Reach - Serve both Spanish and English-speaking markets through Astro’s native i18n routing.
  • Lead Generation - Provide a secure, production-ready contact form that filters spam while converting visitors into booking inquiries.
  • Performance & Animation - Deliver cinematic, scroll-driven experiences without sacrificing page load speed.

Project Workflow

  • Design System - Established a dark luxury palette of Gold (#D4AF37), Obsidian (#0A0A0A), and Ivory (#F5F0E8), with Playfair Display headings and Inter body text, all defined as Tailwind 4 @theme tokens.
  • Animation Architecture - Implemented custom GSAP timelines for the Hero section, ScrollTrigger-based parallax and staggered reveals, and a bespoke “magnetic” golden cursor for desktop.
  • Hybrid Mobile UX - Designed show cards with auto-reveal behavior on mobile (via ScrollTrigger) and hover interactions on desktop, adapting seamlessly to each context.
  • i18n Implementation - Built fully localized Spanish and English versions using Astro’s dynamic [lang] routing with a centralized site-config.json as the single source of truth for all translations and content.
  • Contact Form & Anti-Spam - Developed a server-side API endpoint (SSR via Vercel) integrating Resend for reliable email delivery, protected by an invisible honeypot field and a timestamp-based bot detection guard.
  • Smooth Navigation - Integrated Lenis smooth scrolling and a custom “Liquid” mobile menu for a premium feel throughout.

Results and Impact

  • Complete Bilingual Site - Fully localized ES/EN experience delivered via Astro’s i18n routing, expanding ChapMagic’s reach to English-speaking markets.
  • Cinematic Animation System - GSAP-powered hero, scroll-triggered section reveals, and a magnetic cursor create a distinctive, high-end user experience consistent with the artist’s stage presence.
  • Spam-Resistant Contact Form - Dual-layer protection (honeypot + timestamp guard) ensures genuine inquiries reach the client without manual filtering.
  • Performance-Oriented Architecture - Static-first Astro build with SSR only where needed minimizes bundle size and time-to-interactive.
  • Centralized Content Management - All translations, show descriptions, stats, and links live in a single site-config.json, making future content updates straightforward without touching component code.