Corazonada Tattoo

Project Overview

Corazonada Tattoo is a private tattoo studio in Playa del Carmen, Mexico. “Private” means appointment-only: each client gets dedicated time with the artist, and there are no walk-ins. The website serves as the primary way potential clients discover the studio, preview artists’ work, and book sessions.

The studio regularly hosts guest artists from different cities and countries. The site needed to handle this rotation smoothly: artists come and go, each with their own portfolio, bio, and booking information.

Artist Portfolio System

Each artist has a dedicated page with their biography, specialization, and a gallery of their work. The system is backed by MongoDB, so adding a new guest artist or updating a portfolio doesn’t require a deployment. It’s a data operation.

Gallery Experience

Tattoo portfolios are inherently visual. The gallery uses Embla Carousel for horizontal navigation and opens images in a modal view for detailed inspection. On mobile, touch gestures feel native: swipe to navigate, pinch interactions are handled gracefully, and the modal adapts to screen size.

High-Resolution Images

Tattoo photography needs detail. Images are served through Next.js Image component with responsive sizing and lazy loading to balance quality against page load performance.

Booking Flow

The appointment booking system collects client information through a validated contact form:

• Zod schemas validate input before submission
• Server Actions process the form and store the submission in MongoDB
• Nodemailer sends confirmation emails to both the studio and the client
• WhatsApp integration provides an alternative direct contact channel

The form captures enough detail (preferred artist, tattoo idea, placement, size) to reduce the initial consultation back-and-forth.

Blog

An integrated blog publishes tattoo care content: aftercare guides for new tattoos, artist spotlights, and studio updates. This serves both as a trust-building tool for potential clients and as an SEO driver for organic discovery.

Technical Architecture

Frontend

• Next.js with App Router for SSR/SSG and optimal performance
• React with modern hooks and component-driven architecture
• Framer Motion for page transitions, scroll animations, and interactive elements
• Tailwind CSS for responsive styling with the studio’s custom color palette (pink, green, ink)

Backend

• MongoDB storing artist profiles, portfolio images, contact submissions, and blog content
• Server Actions for form handling and database operations
• Nodemailer for transactional emails via SMTP
• Next.js Image optimization with lazy loading and responsive formats

Key Components

• Hero section with video background and clear call-to-action
• Artist grid with dynamic loading and filtering by availability
• Gallery system with Embla Carousel, modal viewing, and navigation controls
• Contact forms with multi-step validation and confirmation feedback

Impact

The website established Corazonada Tattoo’s digital presence beyond Instagram. Clients can now browse portfolios, understand the studio’s approach, and book appointments without DM conversations. Guest artists get a professional showcase that elevates their work alongside the studio’s brand.