LR Presets Catalog
Personal Project — Claude Code · Python · Vanilla JS · GitHub Pages | In Active Development (Phases 1 & 2 Complete)
A static web catalog for distributing original Adobe Lightroom presets — designed, engineered, and deployed end-to-end using Claude Code. The project demonstrates that production-quality engineering decisions (multilingual architecture, code-first data visualisation, Python image pipelines) apply equally to personal and professional projects.
Engineering Highlights
Custom i18n System (ES / EN / FR)
A zero-dependency, client-side internationalisation module built from scratch. Language is auto-detected from navigator.language, persisted in localStorage, and applied via data-i18n attributes — no framework, no build step. Three full JSON translation files (ES as primary source) cover all UI text, metadata labels, and contextual descriptions. The module is a reusable singleton injectable into any static page.
Python Image Processing Pipeline
A Python pipeline using Pillow, OpenCV, and NumPy generates all before/after split preview images programmatically. The pipeline simulates preset parameters (tone curve via cv2.LUT, exposure, saturation, colour temperature, vignette) on original photos and composites a split image with a centred divider line. A second script, generate_xmp.py, synthesises valid Adobe XMP preset files from the presets.json data source — enabling batch preset generation without Lightroom.
Technical Analytics Panel (Chart.js + Canvas 2D)
Each preset detail page renders a full technical panel driven by presets.json XMP values:
- Tone curve — Chart.js line chart showing RGB master curve and per-channel (R, G, B) vs. a linear reference
- Exposure panel — bidirectional progress bars (positive/negative) for 10 parameters: Exposure, Contrast, Highlights, Shadows, Whites, Blacks, Clarity, Texture, Dehaze, Vibrance/Saturation
- Colour temperature — gradient bar (cool ↔ warm) + tint bar (green ↔ magenta)
- HSL by channel — 8-channel chromatic table (Hue, Saturation, Luminance) for Red, Orange, Yellow, Green, Aqua, Blue, Purple, Magenta
- Vignette preview — animated circular miniature
- Grain canvas — procedurally generated texture using Canvas 2D
- Histogram comparison — RGB histograms (original vs. preset) computed in real time from loaded images via Canvas 2D pixel data
Data-Driven Architecture
data/presets.json is the single source of truth for all catalog data — XMP values, multilingual descriptions, suggested-use metadata, download counts, and gallery paths. All pages derive from it; no content is hardcoded. The detail.js module derives the active slug from window.location.pathname, allowing all detail pages to share one JS file.
Tools & Stack
- Development: Claude Code (primary engineering agent), GitHub Pages (hosting)
- Frontend: Vanilla HTML5, CSS (Tailwind via CDN), Vanilla JS (no SPA framework)
- Visualisation: Chart.js 4.4 (tone curves), Canvas 2D (histograms, grain),
img-comparison-sliderweb component - i18n: Custom singleton module, JSON per language,
data-i18nattributes - Python pipeline: Pillow, OpenCV, NumPy — preview generation + XMP synthesis
- Data:
presets.jsonstatic file as single source of truth - CI/CD: GitHub Pages auto-deploy on push to
main
Current Status
- Phase 1 (MVP — complete): Filterable catalog, i18n, landing page, 4 presets (1 per category), GitHub Pages deployment.
- Phase 2 (Detail & analytics — complete): Before/after slider, full technical analytics panel, related presets, collapsible install instructions in 3 languages.
- Phase 3 (Content & polish — in progress): 16+ presets (4 per category), mobile responsive verification, SEO (Open Graph, sitemap, hreflang), favicon.
- Phase 4 (Analytics — pending): Download tracking (GoatCounter or Cloudflare Worker + KV), social sharing.