Back to Projects

Corazonada Tattoo

web-development

Private tattoo studio website with artist portfolios, booking system and blog functionality.

Next.js
React
Framer Motion
MongoDB
Contact Forms
Gallery
Responsive Design
Corazonada Tattoo

Project Overview

Corazonada Tattoo is a private tattoo studio website located in Playa del Carmen, Mexico. The site serves as the digital hub for showcasing guest artists, facilitating appointment bookings, and sharing tattoo care content through an integrated blog.

Key Features

🎨 Artist Portfolio System

  • Dynamic artist galleries with varying numbers of tattoo images
  • Individual artist pages with bio, portfolio, and contact options
  • Guest artist rotation system for visiting tattooers
  • High-resolution image displays with modal viewing

đź“… Appointment Booking

  • Contact form integration with MongoDB storage
  • Email notifications via Nodemailer
  • Form validation with Zod schemas
  • WhatsApp integration for direct communication

📱 User Experience

  • Smooth animations throughout the site using Framer Motion
  • Responsive design optimized for mobile and desktop
  • Image carousels for portfolio viewing
  • Modal galleries with navigation controls

Technical Architecture

Frontend

  • Next.js with App Router for optimal performance
  • React components with modern hooks and state management
  • Framer Motion for smooth page transitions and animations
  • Tailwind CSS for responsive styling and custom color palette

Backend & Data

  • MongoDB for storing artist information and contact submissions
  • Server Actions for form processing and database operations
  • Nodemailer for email notifications
  • Image optimization with Next.js Image component

Key Components

  • Hero Section with video background and call-to-action
  • Artist Grid with dynamic loading and filtering
  • Gallery System with Embla Carousel integration
  • Contact Forms with validation and submission handling

Main Sections

1. About the Studio

Explanation of what makes a “private studio” unique, emphasizing the personalized appointment-based approach and dedicated time for each piece.

2. Guest Artists

Showcase of visiting tattoo artists with:

  • Individual portfolios with high-quality tattoo photography
  • Artist biographies and specialization information
  • Booking links for scheduling appointments

3. Blog

Tattoo care and industry content including:

  • Aftercare guides for new tattoos
  • Artist spotlights and featured work
  • Studio updates and announcements

4. Contact & Booking

  • Appointment scheduling with detailed contact forms
  • Location information for Playa del Carmen studio
  • Social media integration and WhatsApp direct contact

Technical Highlights

  • âś… Dynamic content management with MongoDB integration
  • âś… Responsive image galleries with lazy loading
  • âś… Smooth animations and page transitions
  • âś… Form handling with validation and email notifications
  • âś… SEO optimization with dynamic metadata generation
  • âś… Mobile-first design with touch-friendly interactions

Impact

The Corazonada Tattoo website successfully establishes the studio’s digital presence, providing potential clients with an immersive preview of the artists’ work while streamlining the appointment booking process through modern web technologies.

Project Details

Objective

Create a professional digital presence that showcases tattoo artists, facilitates appointment bookings, and provides an engaging user experience.

Theme

Modern tattoo studio with pink and green color palette and smooth animations.

Date

June 11, 2024

Category

web-development

Technologies

Next.js
React
Framer Motion
MongoDB
Contact Forms
Gallery
Responsive Design