A modern, responsive photography portfolio website built with Next.js, showcasing professional photography and videography services.
- Professional Portfolio Gallery - Pinterest-style grid layout with 91+ high-quality photos
- Responsive Design - Mobile-first approach with Tailwind CSS
- Performance Optimized - Lazy loading, image optimization, and smooth animations
- Contact Form Integration - Netlify functions with email functionality
- Modern UI/UX - Clean, professional design perfect for showcasing photography work
- Frontend: Next.js 15.1.7
- Styling: Tailwind CSS
- Language: TypeScript
- Deployment: Netlify
- Email Service: Nodemailer (via Netlify Functions)
- Image Optimization: Next.js Image component
- Multi-column Grid Layout - Responsive 6-column grid for optimal photo display
- Lazy Loading - Images load as users scroll for better performance
- Hover Effects - Smooth scale animations on image hover
- Modal View - Click any image to view in full-screen modal
- Category Organization - Photos organized by type (Portraits, Studio, Events, Lifestyle, Collections)
- Professional Portrait Photography
- Studio Photography
- Event Photography & Videography
- Lifestyle Photography
- Special Collections
- Premium Photography Services
- Node.js 20.17.0 (specified in .nvmrc)
- npm or yarn
# Clone the repository
git clone https://github.com/BTheCoderr/vesalvisuals.git
# Navigate to project directory
cd vesalvisuals
# Install dependencies
npm install
# Run development server
npm run dev# Build for production
npm run build
# Export static files
npm run exportWebsite: vesalvisuals.com
vesalvisuals/
├── app/ # Next.js app directory
│ ├── components/ # Reusable React components
│ ├── gallery/ # Gallery page
│ ├── contact/ # Contact page
│ └── globals.css # Global styles
├── public/ # Static assets
│ └── images/ # Photography portfolio images
├── netlify/ # Netlify configuration
│ └── functions/ # Serverless functions
└── scripts/ # Utility scripts
- Color Scheme: Professional navy and cream palette
- Typography: Modern, readable fonts
- Animations: Smooth transitions and hover effects
- Responsive: Works perfectly on all device sizes
- Accessibility: WCAG compliant design
- Netlify Functions - Serverless backend for contact form
- Email Service - Automatic email notifications for inquiries
- Form Validation - Client-side validation with error handling
- Service Pre-filling - Contact form automatically fills service type from navigation
- Image Optimization - Next.js automatic image optimization
- Lazy Loading - Images load only when needed
- Code Splitting - Automatic route-based code splitting
- Static Generation - Pre-rendered pages for fast loading
- CDN Ready - Optimized for global content delivery
- HTTPS Only - Secure connections enforced
- Form Protection - Built-in spam protection
- Data Privacy - No unnecessary data collection
- Secure Headers - Modern security headers implemented
- Touch Optimized - Smooth touch interactions
- Responsive Images - Automatically sized for device
- Mobile Navigation - Optimized mobile menu
- Fast Loading - Optimized for mobile networks
This website represents a complete, professional photography portfolio solution that:
- Showcases Work Beautifully - Perfect grid layout for photography
- Converts Visitors - Clear calls-to-action and contact forms
- Performs Excellently - Fast loading and smooth interactions
- Looks Professional - Modern design that builds trust
- Works Everywhere - Responsive design for all devices
This is a personal portfolio project, but suggestions and feedback are welcome!
This project is private and proprietary to Vesal Visuals.
Business: vesalvisuals.com
GitHub: @BTheCoderr
Built with ❤️ using Next.js and modern web technologies