Light In My Lens

A photography showcase site for Cen — a gallery of the work, and a route for visitors to order any frame as a print or product.

The site never handles money. Each photograph links out to print-on-demand services that take the payment, print the item, ship it and handle returns. You upload the files and set your markup; they do everything else. See docs/SELLING.md for how to set that up — it is the part that turns this from a portfolio into a shop.

Running it

There is no build step, no framework and no dependencies. Open index.html in a browser and it works.

For a closer match to the deployed site (nicer URLs, no file:// quirks), serve the folder:

python3 -m http.server 8000
# then open http://localhost:8000

Adding a photograph

1. Put the image in assets/img/photos/. JPEG is right for real photos — roughly 2000px on the long edge, quality 80, which keeps pages fast.
2. Add an entry to the list in assets/data/photos.js. Copy an existing block and edit it; the comment at the top of that file explains each field.
3. width and height must match the real pixel dimensions. They reserve the right space while the image loads so the page does not jump.
4. Set featured: true to include it on the home page.

That is the whole process — no other file needs touching. The gallery, filters, lightbox, photo pages and category list all build themselves from that data.

To add a category, add it to LIML_CATEGORIES at the top of the same file. Filters only appear for categories that actually have photos in them.

Where things live

index.html          Home: hero, featured work, how ordering works
gallery.html        The full archive, with category filters
photo.html          One photograph + where to order it (reads ?photo=<slug>)
shop.html           How ordering works, and the vendor comparison
about.html          About the photographer
contact.html        Contact details and form
404.html            Not-found page

assets/data/photos.js     Your photographs. The file you will edit most.
assets/data/vendors.js    The print services and what each one makes.
assets/data/config.js     Site name, email, social links, active vendors.

assets/css/styles.css     All styling. Colours are CSS variables at the top.
assets/js/site.js         Header, theme toggle, config-driven text
assets/js/gallery.js      Grid, filters, lightbox
assets/js/photo.js        Photo page and its order panel
assets/js/shop.js         Vendor comparison
assets/js/contact.js      Contact form fallback

Pages share their header and footer by having identical markup rather than by templating. If you change the nav or footer, change it in every .html file — or re-generate them, since these pages were produced from a small script.

Things to personalise

Nothing below is guesswork you have to keep:

• assets/data/config.js — your real email address, social links, and which vendors to show. The email in there is a placeholder.
• "Photography by Cen" — the strapline in every page header, plus the About and Contact copy. Written as a plausible first draft; rewrite it in your own voice.
• The placeholder images in assets/img/photos/ are generated SVGs, not photographs. Replace them as you add real work, and update src in photos.js.
• The hero image (assets/img/site/hero-placeholder.svg) — swap in a wide, darker frame of your own. The headline sits on top of it.

Theme

Dark by default, with a toggle in the header that remembers the visitor's choice. To follow the visitor's operating-system setting instead, see the comment above currentTheme() in assets/js/site.js.

Deploying

The site is plain static files, so any host works. All three of these are free for a site this size and give you HTTPS automatically:

• Cloudflare Pages — connect this repository, set the build command to none and the output directory to /.
• GitHub Pages — Settings → Pages → deploy from a branch, root folder. The .nojekyll file is already here to stop Jekyll interfering.
• Netlify — drag the folder in, or connect the repository.

Then point your domain at it and you are live.