Back to projects

Interactive Storytelling

Enzo's World

A playful website dedicated to Enzo, featuring a photo gallery, blog, contact page, and a linked Fourthwall merch store.

Enzo's World home page in light mode
Visit enzosworld.comView on GitHub

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

Screenshot appearance
Enzo's World home page in light mode
Home: Light Mode
Gallery page showing Enzo photos in a responsive grid in light mode
Gallery Grid: Light Mode
Merch page linking to Enzo's Fourthwall shop in light mode
Merch Shop Link: Light Mode
Enzo's World Shop landing page featuring Enzo and a Shop now link
Fourthwall Storefront
Blog page listing Enzo field reports in light mode
Blog: Light Mode
Enzo newsletter signup form with name, email, and Cloudflare verification in light mode
Newsletter Signup: Light Mode
Individual blog post on Enzo's World in light mode
Blog Post: Light Mode
Enzo's World contact page with a message form in light mode
Contact: Light Mode

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.