My personal photography website steve.phot
portfolio photography svelte sveltekit
Svelte 49.6%
TypeScript 47.1%
JavaScript 1.2%
HTML 0.7%
CSS 0.3%
Other 1.1%
21 1 0

Clone this repository

https://tangled.org/stevedylan.dev/steve.photo
git@tangled.org:stevedylan.dev/steve.photo

For self-hosted knots, clone URLs may differ based on your setup.

README.md

steve.photo#

cover

My personal photography website built with SvelteKit

Features#

  • Photo gallery with infinite scroll and progressive image loading
  • Automatic EXIF metadata extraction (camera, lens, aperture, ISO, etc.)
  • Admin panel for uploading, editing, and deleting photos
  • RSS feed for content syndication
  • SEO optimized with dynamic OpenGraph and Twitter card metadata

Quickstart#

# Install dependencies
bun install

# Run development server
bun run dev

# Build for production
bun run build

# Deploy to Cloudflare
bun run deploy

Structure#

src/
├── lib/
│   ├── auth.ts              # HMAC session management
│   ├── feed.ts              # RSS feed photo retrieval
│   ├── types.ts             # TypeScript interfaces
│   └── components/
│       └── ProgressiveImage.svelte
├── routes/
│   ├── +page.svelte         # Gallery with infinite scroll
│   ├── photo/[slug]/        # Photo detail page
│   ├── admin/               # Protected upload panel
│   ├── login/               # Authentication
│   ├── api/photos/          # Pagination endpoint
│   └── rss.xml/             # RSS feed
└── hooks.server.ts          # Session verification

Stack#

  • SvelteKit - Full-stack framework handling routing, SSR, and API endpoints
  • Cloudflare Workers - Edge runtime for serverless deployment
  • D1 Database - SQLite database for storing photo metadata
  • R2 Storage - Object storage for hosting images and thumbnails