I Built a Photography Portfolio in a Weekend

88 photos. That's what I had after my cousin's wedding. Beautiful shots, but literally just a Lightroom export folder sitting on my server doing nothing.

So I built a portfolio. In a weekend. Here's how.

The Setup

I wanted something simple:

• Load 88 photos without killing the browser
• Look good on mobile (half the traffic's gonna be from phones)
• Easy filtering if I ever added categories
• A lightbox for that "wow" factor when you tap on a photo

No complex frameworks. No build steps. Just HTML, Tailwind via CDN, and some vanilla JavaScript.

The Tech Stack

Here's the whole stack:

• HTML5 — because why overcomplicate?
• Tailwind CSS (CDN) — for styling without writing custom CSS
• PhotoSwipe — the lightbox library that actually handles touch well
• Vanilla JS — gluing it all together

That's it. No React, no Vue, no webpack. Just files in a folder.

The Fun Parts

Lazy Loading

Loading 88 full-resolution photos at once is a bad time. I implemented a simple lazy load — images only fetch when they scroll into view. Much better experience.

The Lightbox

PhotoSwipe is fantastic. It handles pinch-to-zoom on mobile, keyboard navigation on desktop, and feels native. The trick was getting the thumbnail/full-size URL structure right so it transitions smoothly.

Dark Mode

Because why would you want a bright photography site at 11pm? Used CSS variables and a simple toggle. Now it remembers your preference.

What I'd Do Different

Honestly? Not much for v1. Maybe:

• Add actual category filtering (I have the UI, just haven't tagged photos yet)
• WebP versions for faster loading
• A proper contact form instead of just a mailto: link

But for a weekend project? It works.

The Result

Live at http://100.80.49.72:8080 — 88 engagement photos, dark mode, mobile-responsive, no build required.

Sometimes the simplest approach is the right one.

Next up: automating the Lightroom export to keep the portfolio fresh.