Katherine Lucas Photography

A state-of-the-art photography portfolio website for Katherine Lucas, a London-based portrait and athletics photographer.

Overview

This site showcases two primary bodies of work:

• Athletics Photography — Diamond League, World Championships, elite athletes
• Portrait Photography — Editorial, studio, and environmental portraits

Design Philosophy

• Editorial, gallery-like aesthetic inspired by Magnum Photos and high-end fashion lookbooks
• Strong typography hierarchy using Cormorant Garamond (serif) + Inter (sans-serif)
• Confident use of whitespace and asymmetric layouts
• Subtle motion and interaction (scroll reveals, hover states)
• Images as the hero — UI disappears to let photography shine

Getting Started

Local Development

Simply open index.html in a browser, or serve locally:

# Using Python
python -m http.server 8000

# Using Node.js
npx serve

Then visit http://localhost:8000

Production Deployment

This is a static site that can be deployed to any static hosting:

• Netlify
• Vercel
• GitHub Pages
• AWS S3 + CloudFront

Structure

/
├── index.html              # Homepage
├── pages/
│   ├── athletics.html      # Athletics gallery
│   ├── portraits.html      # Portraits gallery
│   ├── about.html          # About page
│   └── contact.html        # Contact/Commission
├── css/
│   ├── main.css            # Main import file
│   ├── tokens.css          # Design tokens
│   ├── base.css            # Reset & utilities
│   ├── components.css      # UI components
│   └── pages.css           # Page-specific styles
├── js/
│   └── main.js             # Navigation, lightbox, animations
└── images/                 # Photography assets (add your images here)

Customization

Adding Images

Replace the placeholder elements in HTML files with actual <img> tags:

<!-- Replace this -->
<div style="width: 100%; height: 100%; background: ...">

<!-- With this -->
<img src="images/your-photo.jpg" alt="Description" loading="lazy">

Contact Form

The form currently logs to console. To enable submissions:

1. Netlify Forms: Add data-netlify="true" to the form tag
2. Formspree: Change form action to your Formspree endpoint
3. Custom backend: Modify js/main.js form handler

Updating Content

• Edit text directly in HTML files
• Update metadata in <head> sections
• Modify design tokens in css/tokens.css

Features

• Responsive design (mobile-first)
• Scroll-triggered reveal animations
• Lightbox gallery viewer
• Mobile navigation menu
• Reduced motion support
• Safe area insets (notched devices)
• Custom form styling
• Editorial marquee element

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• iOS Safari
• Chrome for Android

Credits

Designed and built as a premium portfolio replacement for katlufoto.com.

---

For the full project documentation, see tasks.md.