This is a completely redesigned and enhanced version of an AI Resume Analyzer, featuring:

• 🎨 Beautiful Pastel Theme - Soft, modern design with mint, pink, and blue accents
• 🌙 Dark/Light Mode Toggle - Seamless theme switching with SSR support
• 📱 Fully Mobile Responsive - Optimized for all screen sizes and devices
• ⚡ Performance Optimized - Faster image loading and improved PDF processing
• 🎯 Enhanced UX - Smooth animations, better navigation, and intuitive interactions

1. 🎯 Features
2. 🛠️ Tech Stack
3. 🚀 Quick Start
4. 🎨 Design Enhancements
5. 📱 Mobile Optimizations
6. ⚡ Performance Improvements
7. 🔧 Development

• ✅ AI-Powered Resume Analysis - Smart evaluation with ATS scoring
• ✅ Multi-Resume Management - Upload, store, and organize multiple resumes
• ✅ Detailed Feedback System - Comprehensive analysis across multiple categories
• ✅ Browser-Based Authentication - Secure auth using Puter.js
• ✅ PDF Processing - Advanced PDF to image conversion

• 🎨 Custom Pastel Theme - Beautiful soft color palette
• 🌙 Theme Toggle - Switch between light and dark modes
• 📱 Mobile-First Design - Responsive across all devices
• 🎭 Smooth Animations - Elegant transitions and micro-interactions
• 🔄 Loading States - Better user feedback during operations

• ⚡ Optimized Performance - Faster loading and processing
• 🏗️ Modern Architecture - Clean, maintainable code structure
• 🎯 TypeScript - Full type safety and better development experience
• 📦 Component Reusability - Modular, reusable UI components

• Node.js (v18 or higher)
• npm or yarn
• Git

# Clone the repository  
git clone https://github.com/PJBalogun/ai-resume-analyser.git
cd ai-resume-analyser

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

# Build the project
npm run build

# Preview production build
npm run preview

• Mint Green (#6ee7b7) - Primary actions and success states
• Soft Pink (#fde2e7) - Accent colors and highlights
• Light Blue (#93c5fd) - Secondary elements and info states
• Warm Neutrals - Balanced grays and whites for text and backgrounds

• 🔘 Rounded Design Language - Consistent 2rem border radius
• 🌟 Soft Shadows - Subtle depth with custom shadow system
• 🎭 Hover Animations - Smooth micro-interactions
• 📐 Better Typography - Improved text hierarchy and readability

• 🌙 Dark Mode - Carefully crafted dark theme with proper contrast
• ☀️ Light Mode - Clean, bright interface with soft pastels
• ⚡ Instant Switching - No flash or layout shift during theme changes
• 💾 Persistent Preference - Remembers user's theme choice

• 📱 Mobile-First Approach - Designed for small screens first
• 🔄 Adaptive Layouts - Smart component reorganization on mobile
• 👆 Touch-Friendly - Proper touch targets and gestures
• 📐 Flexible Typography - Scales beautifully across screen sizes

• 🍔 Mobile-Optimized Navigation - Clean, accessible mobile menu
• 📊 Stacked Cards - Better content organization on small screens
• 🎯 Improved Badges - Better visibility and alignment on mobile
• 📋 Accordion Enhancement - Touch-friendly expandable sections

• 📸 Reduced PDF Scale - 2x instead of 4x for 75% smaller files
• 🗜️ JPEG Compression - 85% quality for optimal size/quality balance
• ⚡ Lazy Loading - Images load only when needed
• 🏃 Loading States - Better user feedback during processing

• 🎯 Component Lazy Loading - Faster initial page loads
• 🗄️ Efficient State Management - Optimized Zustand store
• 📦 Bundle Optimization - Smaller production builds
• 🔄 Smooth Animations - Hardware-accelerated transitions

src/
├── components/          # Reusable UI components
│   ├── Accordion.tsx   # Enhanced accordion with theme support
│   ├── Details.tsx     # Improved analysis details
│   ├── Navbar.tsx      # Navigation with theme toggle
│   └── ...
├── routes/             # Page components
├── lib/                # Utilities and helpers
└── app.css            # Global styles and theme system

• 🎨 Complete UI/UX Redesign - From dark glassmorphism to soft pastels
• 🌙 Theme System Implementation - Full dark/light mode support
• 📱 Mobile Responsiveness - Complete mobile optimization
• ⚡ Performance Optimization - Faster loading and better UX
• 🔧 Code Quality - Better TypeScript usage and component structure

• 🎨 CSS Custom Properties - Dynamic theming system
• 📱 Responsive Utilities - Mobile-first responsive design
• 🎭 Animation System - Smooth, performant animations
• 🎯 Component Classes - Reusable styling patterns