← PROJECTS & AI

DVEDEE.COM

Full portfolio website for Dylan van Druten Photography — built from scratch with Claude Code, with no prior web development experience.

CLAUDE CODE HTML/CSS/JS NETLIFY FUNCTIONS INSTAGRAM API RESEND API WEB DESIGN

Overview

dvedee.com is a fully custom photography portfolio site built without using any web framework or template. The entire site — design, layout, functionality, and deployment — was built collaboratively with Claude Code. No prior HTML, CSS, or JavaScript experience was needed to ship it.

The architecture is intentionally simple: pure HTML/CSS/JS with no build step. Serverless Netlify Functions handle the backend concerns — contact form, Instagram feed, and client gallery delivery. The result is a fast, maintainable site that can be updated with a single file edit and a git push.

The live site is at dvedee.com.

What's Inside

Portfolio galleries — masonry grid with lightbox for headshots, maternity, couples, families, and film pages. New photos are added by dropping a file in the folder — no HTML edits needed.
Instagram strip — homepage pulls the latest posts via a serverless proxy that caches the response and keeps the API token server-side.
Contact form — rate-limited to 5 requests per IP per hour, with a honeypot field to catch bots. Submissions are delivered via Resend.
Blog — self-contained HTML post files with a curated index page. Posts cover photography advice and behind-the-scenes content.
Client gallery — password-protected photo delivery system with Cloudflare R2 storage, presigned URLs, and auto-expiry. Documented separately as its own project.
Google Reviews — manually curated review cards in the homepage HTML, kept up to date as new reviews come in.

Architecture

Pure HTML/CSS/JS — each page is a self-contained .html file. No framework, no bundler, no build step. Deployed to Netlify; a push to main on GitHub triggers an automatic deploy.

index.html              # Homepage — gallery, about, reviews, Instagram strip
headshots / maternity / couples / families / films .html
about.html
contact.html
blog/
  index.html
  what-to-wear-for-headshots.html
  how-i-edit-headshots.html
netlify/functions/
  instagram.js          # Proxies Instagram Graph API, caches response 1 hour
  contact.js            # Contact form handler, sends email via Resend
  gallery.js            # Serves portfolio image lists per category