Back to projects

Interactive Storytelling

Enzo's World

A clean, playful web application dedicated to Enzo, combining photos, field reports, contact, and merch in one warm home base.

Enzo's World home page in dark mode
Visit enzosworld.com

Idea

Create a small but complete site that feels personal and lighthearted while still supporting real content, responsive browsing, accessible interactions, and production form handling.

Implementation

Built a Next.js and MDX application with a curated gallery, blog routes, reusable themed components, a protected contact flow, and a merch bridge to Enzo's Fourthwall shop.

Project Details

Enzo's World is a clean, playful web application dedicated to Enzo: professional snack enthusiast, full-time good boy, and occasional author of suspiciously detailed field reports.

The site combines a curated photo gallery, MDX-powered blog posts, a contact form, and a merch bridge to Enzo's official Fourthwall shop. The tone is lighthearted, but the implementation focuses on responsive UI, reusable components, accessible interactions, and practical form handling.

Overview

Enzo's World is designed to feel like a small, complete home base for everything Enzo: photos, stories, contact, and merch all share the same warm visual style while staying easy to browse on any device.

Screenshots

Enzo's World home page in dark mode
Home: Dark Mode
Enzo's World home page in light mode
Home: Light Mode
Gallery page showing Enzo photos in a responsive grid
Gallery Grid
Gallery lightbox showing a selected Enzo photo
Gallery Lightbox
Blog page listing Enzo field reports
Blog
About page with Enzo details and stats
About
Contact page with message form and team details
Contact
Merch page linking to the Enzo shop
Merch Shop Link
Enzo's World Shop landing page
Shop Landing
Featured products section with an Enzo mug
Featured Products

Features

  1. Gallery: A curated collection of Enzo photos organized in a responsive grid, with a lightbox for browsing full-size images.

  2. Blog: Lighthearted MDX posts written from Enzo's perspective, rendered through modern Next.js routing and reusable page layouts.

  3. Merch: A dedicated merch page that sends visitors to Enzo's official Fourthwall storefront at shop.enzosworld.com.

  4. Contact Form: A production contact flow with client-side validation, Cloudflare Turnstile verification, and email delivery through Resend.

  5. Responsive Design: The entire site is optimized for both desktop and mobile devices, with layouts that adapt cleanly across screen sizes.

  6. Custom Theme: A warm, friendly visual system with light and dark modes, reusable card components, consistent spacing, and polished typography.

Tech Stack

  • Framework: Next.js 16
  • Library: React 19
  • Language: TypeScript
  • Styling: Tailwind CSS v4
  • Content: MDX
  • Form protection: Cloudflare Turnstile and a honeypot field
  • Email: Resend

Deployment

The main site is deployed on Vercel. DNS is managed through Cloudflare, and the shop subdomain points visitors to the Fourthwall storefront.