A comprehensive photography portfolio and booking website featuring an interactive gallery, complete e-commerce system, and professional booking management.
This is a full-featured photography business website that serves as both a portfolio showcase and a complete booking platform. Built with modern web technologies, it provides a seamless experience for clients to view work, book sessions, and manage their photography needs.
- Animated photo gallery with custom tilt effects
- Responsive design optimized for all devices
- Professional image showcase with hover animations
- Mobile-first approach with desktop enhancements
- Shopping cart with real-time calculations
- State-based tax calculations
- Multiple payment options (full payment or 50% deposit)
- Secure checkout flow with Stripe integration ready
- Interactive session scheduling
- Multiple photography package options
- Client information collection
- Booking confirmation system with email notifications
- Comprehensive booking confirmation pages
- Email template system for client communications
- Professional terms and conditions
- Code of conduct and expectations documentation
- Built-in demo functionality for testing
- Sample data population for development
- Complete checkout flow simulation
- Easy demonstration for potential clients
- ⚡ Bun - Fast JavaScript runtime and package manager
- ⚛️ React 18 - Latest React with concurrent features and hooks
- 🏗️ Vite - Lightning fast build tool with HMR
- 🎨 Tailwind CSS - Utility-first CSS framework
- 📦 TypeScript - Type safety and enhanced developer experience
- 🎭 Framer Motion - Advanced animations and page transitions
- 🎪 GSAP - Professional animation library for scroll effects
- 🎯 React Icons - Comprehensive icon library
- Bun - JavaScript runtime and package manager
- Node.js 18+ (for compatibility)
-
Clone the repository
git clone <repository-url> cd photo-web-demo
-
Install dependencies
bun install
-
Start development server
bun run dev
-
Open in browser Navigate to http://localhost:5173
# Development server with hot reload
bun run dev
# Production build
bun run build
# Preview production build
bun run previewThe application includes comprehensive demo functionality for testing and demonstrations:
- Navigate to the Book page
- Click "🚀 Add Demo Items (For Testing)" to populate cart
- Proceed to checkout to test the complete flow
- Add items to cart (use demo button or manually)
- Go to Checkout page
- Click "🚀 Demo Payment (For Testing)" to simulate successful payment
- Experience the complete booking confirmation flow
- Navigate to Schedule page
- Click "🎯 Fill Demo Data (For Testing)" to auto-populate forms
- Complete booking to see confirmation system
- Landing Page: Interactive photo cards with animations
- Portfolio: Professional gallery showcase
- About: Photographer information and process
- Package Selection: Choose from 5 professional packages
- Cart Management: Add/remove items with real-time calculations
- Checkout: Secure payment processing with tax calculations
- Booking Confirmation: Comprehensive order details
- Email Notifications: Professional confirmation emails
- Session Scheduling: Interactive calendar booking
- Guidelines: Detailed preparation instructions
- Expectations: Professional standards and code of conduct
- Communication: Direct contact information and support
photo-web-demo/
├── src/
│ ├── App.tsx # Main application with routing
│ ├── main.tsx # Application entry point
│ ├── index.css # Global styles and Tailwind imports
│ ├── components/ # Reusable UI components
│ │ ├── CardNav.tsx # Navigation component
│ │ ├── ScrollVelocity.tsx # Animated text scrolling
│ │ ├── TargetCursor.tsx # Custom cursor component
│ │ └── TiltedCard.tsx # Interactive photo card component
│ ├── pages/ # Route-based page components
│ │ ├── About.tsx # About page
│ │ ├── Book.tsx # Package booking page
│ │ ├── BookingConfirmation.tsx # Booking confirmation system
│ │ ├── Checkout.tsx # Cart checkout page
│ │ ├── Contact.tsx # Contact information page
│ │ ├── Login.tsx # User login page
│ │ ├── Portfolio.tsx # Photo gallery page
│ │ ├── Schedule.tsx # Appointment scheduling page
│ │ └── Signup.tsx # User registration page
│ ├── services/ # Business logic and data management
│ │ ├── emailService.ts # Email template and sending utilities
│ │ ├── payments.ts # Payment processing utilities
│ │ └── userStore.ts # User authentication and data persistence
│ └── templates/ # Email templates
│ └── BookingConfirmationEmail.html # Professional email template
├── public/ # Static assets
│ ├── photo-1.png # Portfolio images
│ ├── photo-2.png
│ └── ...
├── .kiro/ # Kiro configuration and steering
├── index.html # HTML entry point
├── vite.config.ts # Vite build configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies and scripts
- Primary: Black (#000000) - Professional, elegant
- Accent Colors: Dynamic based on image content
- Interactive: White on black for high contrast
- Status: Green for success, Blue for information, Red for warnings
- Headings: Bold, uppercase for impact
- Body: Clean, readable sans-serif
- Monospace: For technical information (order IDs, etc.)
- Page Transitions: Smooth fade and slide effects
- Interactive Elements: Hover states with scale and color changes
- Loading States: Professional loading indicators
- Scroll Effects: Parallax and velocity-based animations
| Package | Duration | Price | Features |
|---|---|---|---|
| Professional Headshots | 1 hour | $850 | LinkedIn, corporate, 25+ images |
| Classic Portraits | 2 hours | $1,200 | Timeless portraits, 40+ images |
| Creative Portraits | 3 hours | $1,500 | Artistic concepts, 50+ images |
| Location Sessions | 3 hours | $1,800 | On-location, 60+ images |
| Personal Branding | 4 hours | $2,500 | Complete branding, 100+ images |
Update src/services/payments.ts with your Stripe Payment Links:
export const productPaymentLinks: Record<ProductId, string | null> = {
headshots: "https://buy.stripe.com/your-headshots-link",
classic: "https://buy.stripe.com/your-classic-link",
// ... other packages
};Configure email templates in src/templates/ and update service settings in src/services/emailService.ts.
Update tax rates by state in src/pages/Checkout.tsx:
const taxRates: Record<string, number> = {
CA: 0.0825, // California
NY: 0.088, // New York
// ... other states
};bun run buildCreate .env file for production settings:
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
VITE_EMAIL_SERVICE_URL=https://your-email-service.com
VITE_CONTACT_EMAIL=hello@brandenadams.com- Vercel: Optimal for React/Vite applications
- Netlify: Great for static site deployment
- AWS S3 + CloudFront: Enterprise-level hosting
- SSL Encryption: All data transmission secured
- PCI Compliance: Stripe integration for payment security
- Input Validation: Client and server-side validation
- CSRF Protection: Built-in security measures
- Data Privacy: GDPR-compliant data handling
The application includes a comprehensive email system:
- Booking Confirmations: Automated confirmation emails
- Professional Templates: HTML email templates with inline CSS
- Preview Functionality: Test emails before sending
- Responsive Design: Mobile-optimized email layouts
- Code Splitting: Automatic route-based code splitting
- Image Optimization: Optimized image loading and caching
- Bundle Analysis: Optimized bundle sizes
- Lazy Loading: Components loaded on demand
- Caching Strategy: Efficient browser caching
- TypeScript: Full type safety
- ESLint: Code quality enforcement
- Prettier: Code formatting
- Hot Reload: Instant development feedback
- Source Maps: Enhanced debugging
- Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
- Mobile Browsers: iOS Safari, Chrome Mobile
- Progressive Enhancement: Graceful degradation for older browsers
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or support:
- Email: hello@brandenadams.com
- Phone: (123) 456-7890
- Website: brandenadams.com
- Design Inspiration: Modern photography portfolio trends
- Animation Libraries: Framer Motion and GSAP communities
- UI Components: Tailwind CSS ecosystem
- Development Tools: Bun and Vite teams
Built with ❤️ for professional photographers