Sneha Yoga Fit - Yoga Instructor Website

A modern, professional website for a yoga instructor built with React, featuring smooth animations, integrated booking system, and seamless user experience.

ReactViteTailwind CSSFramer MotionEmailJSFrontend

A wellness-focused web experience combining elegant design with practical functionality.

🌐 Live Preview: snehayogafit.in
📂 Source Code: GitHub Repository (Private - Contact for access)

💡 What I Built

A modern, professional website for Sneha, a professional yoga instructor, designed to attract clients and streamline class bookings. The site combines calm aesthetics with smooth interactions to create a premium user experience that reflects the wellness brand.

Core Features Implemented

  • Premium Design System — Crafted a calm, professional aesthetic with custom color palette (primary greens, light backgrounds, accent tones) using Tailwind CSS for a cohesive wellness brand identity

  • Smooth Page Animations — Implemented Framer Motion animations throughout the site with scroll-triggered reveals, hover effects, and transitions that enhance user engagement without overwhelming

  • Integrated Booking System — Built a complete booking form with EmailJS integration allowing clients to schedule classes directly from the website with instant email notifications

  • WhatsApp Quick Booking — Implemented one-click WhatsApp booking with pre-filled messages, making it easy for clients to reach out instantly via their preferred messaging platform

  • Floating WhatsApp Button — Added an always-accessible floating action button that follows users throughout the site, ensuring they can always connect easily

  • One-Page Scroll Experience — Designed seamless navigation with smooth scrolling between sections, creating a cohesive storytelling experience without page reloads

  • Fully Responsive Design — Ensured perfect display and functionality across all devices (mobile, tablet, desktop) with mobile-first approach and responsive breakpoints

  • Multiple Contact Channels — Integrated email, phone, WhatsApp, and social media links providing flexible communication options for different user preferences

  • Performance Optimized — Built with Vite for lightning-fast load times, optimized bundle size, and smooth interactions even on slower connections

  • Component Architecture — Structured the application using 10+ reusable React components (Navbar, Hero, About, Skills, Achievements, Testimonials, Booking, Contact, Footer, FloatingWhatsApp) for maintainability

🛠 Tech Stack

Frontend Framework: React 18 with Vite build tool
Styling: Tailwind CSS with custom configuration
Animations: Framer Motion for smooth interactions
Icons: React Icons library
Form Handling: EmailJS for serverless email integration
Deployment: Vercel with automatic deployments
Communication: WhatsApp API integration for instant booking
Code Quality: Component-based architecture, clean code practices

🚀 Why This Project Matters

This project demonstrates my ability to:

  • Build client-focused solutions that solve real business problems (attracting and booking yoga clients)
  • Create delightful user experiences with smooth animations and intuitive navigation
  • Implement practical integrations (EmailJS, WhatsApp) without complex backend infrastructure
  • Design responsive interfaces that work beautifully on all devices
  • Write clean, maintainable React code with proper component structure
  • Deliver production-ready applications with proper hosting and deployment

🏗 Architecture Highlights

  • Component-Based Design — 10+ modular React components with clear separation of concerns and reusability

  • Serverless Communication — EmailJS integration for form submissions without requiring a backend server, reducing infrastructure costs

  • Multi-Channel Integration — WhatsApp deep-linking, email forms, and social media links all seamlessly integrated

  • Performance First — Vite for ultra-fast builds, lazy loading where appropriate, and optimized asset delivery

  • Tailwind Configuration — Custom color palette, spacing, and utilities configured for consistent design system

  • Animation Strategy — Strategic use of Framer Motion for entrance animations, hover effects, and scroll-triggered reveals without impacting performance

  • Mobile-First Approach — Responsive design built from mobile up, ensuring perfect experience on smartphones where most users browse

📊 Technical Achievements

  • 10+ React Components with clean, reusable architecture
  • Framer Motion Animations throughout for enhanced UX
  • EmailJS Integration for serverless form handling
  • WhatsApp API deep-linking for instant communication
  • Fully Responsive across all screen sizes
  • One-Page Scroll with smooth navigation
  • Production Deployed on Vercel with custom domain
  • Fast Load Times with Vite optimization
  • Accessibility with semantic HTML and ARIA labels

🎨 Design Philosophy

The website embodies the calm and premium feel of a wellness brand:

  • Calm Color Palette — Soothing greens and neutral tones create a relaxing atmosphere
  • Smooth Interactions — Gentle animations that don't distract but enhance
  • Clear Typography — Readable fonts and proper hierarchy guide users naturally
  • Generous Whitespace — Breathing room that reflects the yoga philosophy
  • Premium Feel — Professional design that builds trust and credibility

🌟 Business Impact

  • Streamlined Bookings — Clients can book directly from the website via email or WhatsApp
  • 24/7 Availability — Website and booking system available anytime
  • Professional Presence — Establishes credibility and attracts serious clients
  • Multiple Contact Options — Meets clients where they prefer to communicate
  • Reduced Friction — One-click booking reduces barriers to client acquisition

Visit the live site: snehayogafit.in

Interested in the codebase? The repository is private but I'm happy to provide access for discussion or review.