This is a photography portfolio website built with PHP that showcases photography services, galleries, and workshops. The site features a performance-optimized architecture with critical CSS inlining, deferred asset loading, and accessibility-first design principles. It serves as a comprehensive platform for a photographer to display their work, manage client galleries, and offer workshops.
- Dynamic Photography folder system: New folder-based photography categories with api/photography.php scanning
photography/[category]/folders - Featured image from metadata: Each category's
metadata.yamlspecifiesfeatured_imagefor category card backgrounds - Photography gallery modal: Click any category to open full-screen lightbox gallery with keyboard navigation and thumbnails
- Metadata structure: Each category folder contains
metadata.yamlwith name, description, and featured_image fields
- "Find Your Gallery" feature removed: Eliminated client search functionality from Photography section for cleaner UI
- Photography layout: 2-column grid layout confirmed working correctly (displays 2x2 grid with Weddings, Portraits, Events, Lifestyle)
- Community section disabled: Removed Community from navigation, carousel slides, and routing (can be re-enabled later)
- Carousel slide sync fixed: Made carousel globally accessible so router properly syncs carousel with nav clicks
- NSFW content filtering: Reads nsfw flag directly from project.yaml metadata with blur effects and consent modal
- Workshop category filtering: URL hash fragments working for workshop filters (e.g., ./workshop#metalwork)
Preferred communication style: Simple, everyday language.
- Performance-first design: Critical CSS (≤8-12KB) inlined for fast first paint, with deferred loading for non-critical styles
- Progressive enhancement: Core functionality works without JavaScript, enhanced with interactive features
- Single-page application structure: Scroll-based content switching with sticky section headers
- Accessible carousel: Custom implementation with 3 slides (Photography, Workshop, About) using keyboard navigation, ARIA attributes, and reduced motion support
- Mobile-first responsive design: CSS Grid and Flexbox layouts with fluid typography and spacing tokens
- Touch/swipe support: Native gesture handling for carousel and gallery interactions
- File-based content system: JSON files for data storage (carousel-slides.json)
- Workshop project system: YAML-driven project metadata with automatic image scanning in workshops/ directory
- Photography category system: Folder-based categories in
photography/[category]/with metadata.yaml for each- Structure:
photography/weddings/,photography/portraits/,photography/events/,photography/lifestyle/ - Each folder contains:
metadata.yaml(name, description, featured_image) + image files - Featured image: Specified in metadata.yaml, falls back to first image alphabetically
- API:
api/photography.phpscans folders and returns category data with all images
- Structure:
- Automatic image processing: First gallery access triggers processing if no sizes/ directory exists
- Manual batch processing: Command-line script (scripts/process-images.php) for processing all workshops
- Zero-CMS approach: Ultra-low maintenance with folder-driven content organization
- Dynamic carousel content: Slide titles, descriptions, and CTAs editable via carousel-slides.json
- Category-based portfolio: Organized photography galleries with 2x2 grid layout, clickable for full gallery modal
- Flexible workshop structure: Supports both simple image galleries and detailed step-by-step instructions
- NSFW content management: Projects with
nsfw: truein project.yaml show blurred thumbnails with warning modal
- Critical rendering path: Optimized CSS delivery with above-the-fold prioritization
- Advanced image pipeline: Automated multi-size outputs (thumb:400px, medium:800px, large:1200px, xlarge:2000px)
- Smart image serving: API prioritizes processed images over originals for optimal loading
- Original file management: Moves originals to separate folders for potential deletion after verification
- Deferred loading: Non-critical CSS and JavaScript loaded after initial paint
- On-demand processing: Images processed automatically when workshop gallery is first accessed
- WCAG compliance: Keyboard navigation, focus management, and screen reader support
- Reduced motion respect: Honors user preferences for animation and transitions
- Semantic HTML: Proper heading hierarchy, landmarks, and ARIA attributes
- Color contrast: Design system ensures sufficient contrast ratios
- Skip links: Direct navigation to main content for assistive technologies
- Modular design: Separate files for carousel, photography, workshops, and contact functionality
- Scroll-based navigation: ScrollManager class coordinates carousel and content switching based on scroll position
- Router sync: Carousel is globally accessible to router for proper nav-to-carousel synchronization
- Event-driven: DOM-ready initialization with progressive enhancement and custom events for component communication
- Error handling: Graceful degradation when APIs or data sources fail
- Form validation: Real-time validation with accessibility announcements
- FullCalendar: Community events calendar (currently disabled, can be re-enabled)
- PhotoSwipe: Lightbox gallery with performance optimization and CLS prevention
- Automated resizing service: Multi-format output with metadata stripping and quality optimization
- CDN integration: Future implementation for cache headers and immutable asset paths
- JSON APIs: Local file-based data storage for galleries, events, and workshops
- PHP backend: Server-side form processing and workshop management API
- Critical CSS extraction: Automated tooling for above-the-fold CSS identification
- Compression: Brotli/Gzip for text assets, optimized image formats for media
- Lighthouse: Automated accessibility auditing
- axe DevTools: In-browser accessibility testing
- WAVE: Web accessibility evaluation tools