🎨 Rawchitr - Cultural Art Portfolio

Rawchitr is a modern, responsive art portfolio website that showcases culturally rich Indian artwork and customised personalized products. The platform bridges traditional Indian heritage with contemporary digital expression.

📖 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• 🏗️ Project Structure
• 🚀 Getting Started
• ⚙️ Environment Setup
• 🌐 Deployment
• 🔧 Configuration
• ⚡ Performance Features

✨ Features

• Interactive 3D Carousel with smooth touch/swipe navigation and lazy loading
• Responsive Gallery with grid layout adapting to all screen sizes
• Product Mockup Previews for t-shirts, tote bags, phone cases, and portraits
• Smooth Animations powered by Framer Motion with 3D transform effects
• Mobile-First Design with touch-friendly interactions and gestures
• Integrated Contact Form powered by Formspree with real-time validation
• Progressive Loading with skeleton screens and visual feedback

🛠️ Tech Stack

Category	Technologies
Frontend Framework	React 18.3.1, Vite 6.3.5, React Router DOM 6.20.1
Styling & Design	Tailwind CSS 3.4.1, Custom Brand Colors, Responsive Design
Animation & Interactions	Framer Motion 10.16.16, React Intersection Observer 9.16.0, React CountUp 6.5.3
Icons & Assets	Lucide React 0.344.0, React Icons 4.12.0, Phosphor Icons 2.1.10
Form Handling	Formspree, Environment Variables, Client-side Validation
Development Tools	ESLint 9.9.1, PostCSS 8.4.35

🏗️ Project Structure

rawchitr-portfolio/
├── public/
│   ├── assets/
│   │   ├── paintings/
│   │   ├── products/
│   │   └── steps/
│   └── data/
│       └── paintings.json
├── src/
│   ├── components/
│   ├── pages/
│   │   ├── Landing.jsx
│   │   ├── Gallery.jsx
│   │   ├── PaintingDetail.jsx
│   │   ├── HowItWorks.jsx
│   │   └── About.jsx
│   ├── config/
│   │   └── formConfig.js
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── vite.config.js
├── tailwind.config.js
├── package.json
├── vercel.json
├── .env
└── README.md

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager
• Git for version control

Installation

1. Clone the repository

   git clone https://github.com/snehaagarwal03/Rawchitr.git
   cd Rawchitr

2. Install dependencies

   npm install

3. Set up environment variables

   # Create .env file
   touch .env
   
   # Add Formspree endpoint
   echo "VITE_FORMSPREE_ENDPOINT=your_formspree_endpoint_here" > .env

4. Start development server

   npm run dev

5. Open in browser

   http://localhost:5173
   

Build for Production

# Create optimized build
npm run build

⚙️ Environment Setup

Formspree Configuration

1. Create Formspree Account

   • Go to formspree.io
   • Sign up with your email
   • Create a new form project

2. Get Form Endpoint

   • Copy your form endpoint URL and paste in .env file
   • Format: https://formspree.io/f/YOUR_FORM_ID

Production Deployment

For production, set environment variables in your hosting platform:

• Vercel: Project Settings → Environment Variables
• Netlify: Site Settings → Environment Variables
• Others: Platform-specific configuration

🌐 Deployment

Vercel (Recommended)

1. Connect Repository

   • Go to vercel.com and sign in with GitHub
   • Click "New Project" and import your GitHub repository
   • Vercel will automatically detect it as a Vite project

2. Configure Environment Variables

   • Go to Vercel Dashboard
   • Project Settings → Environment Variables
   • Add VITE_FORMSPREE_ENDPOINT

3. Custom Domain (Optional)

   • Add custom domain in Vercel dashboard
   • Configure DNS settings

🔧 Configuration

Tailwind Configuration (tailwind.config.js)

• Custom Colors: Brand palette integration
• Animations: Custom keyframes and transitions
• Font Family: Inter font configuration
• Content Paths: Optimized for React components

ESLint Configuration

• React Hooks: Rules for proper hook usage
• React Refresh: Hot reload compatibility
• Modern JavaScript: ES2022+ support

⚡ Performance Features

🏃‍♂️ Speed Optimizations

• Vite Build Tool - Lightning-fast development and builds
• Lazy Loading - Images load only when needed
• Code Splitting - Route-based code splitting
• Tree Shaking - Unused code elimination
• Bundle Optimization - Optimized for production

📱 Mobile Optimizations

• Touch Gestures - Swipe navigation for carousels
• Responsive Images - Different sizes for different screens
• Mobile-First CSS - Optimized for mobile performance
• Touch-Friendly UI - Larger tap targets and spacing

🙏 Acknowledgments

• Framer Motion - For incredible animation capabilities
• Tailwind CSS - For rapid UI development
• Vite - For blazing-fast development experience
• Formspree - For reliable form handling
• Vercel - For seamless deployment
• React Community - For amazing ecosystem and support

---

🌟 Star this repository if you found it helpful! 🌟

Built with ❤️ by Sneha Agarwal

---