stevedylan.dev
My personal photography website
steve.phot
portfolio
photography
svelte
sveltekit
chore: updated readme
-1
.npmrc
-1
.npmrc
···
1
-
engine-strict=true
+41
-27
README.md
+41
-27
README.md
···
1
-
# sv
1
+
# steve.photo
2
2
3
-
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
3
+
4
4
5
-
## Creating a project
5
+
My personal photography website built with [SvelteKit](https://svelte.dev)
6
6
7
-
If you're seeing this, you've probably already done this step. Congrats!
7
+
## Features
8
8
9
-
```sh
10
-
# create a new project
11
-
npx sv create my-app
12
-
```
13
-
14
-
To recreate this project with the same configuration:
9
+
- Photo gallery with infinite scroll and progressive image loading
10
+
- Automatic EXIF metadata extraction (camera, lens, aperture, ISO, etc.)
11
+
- Admin panel for uploading, editing, and deleting photos
12
+
- RSS feed for content syndication
13
+
- SEO optimized with dynamic OpenGraph and Twitter card metadata
15
14
16
-
```sh
17
-
# recreate this project
18
-
bun x sv create --template minimal --types ts --add tailwindcss="plugins:none" --install bun steve-photo-svelte
19
-
```
15
+
## Quickstart
20
16
21
-
## Developing
17
+
```bash
18
+
# Install dependencies
19
+
bun install
22
20
23
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
21
+
# Run development server
22
+
bun run dev
24
23
25
-
```sh
26
-
npm run dev
24
+
# Build for production
25
+
bun run build
27
26
28
-
# or start the server and open the app in a new browser tab
29
-
npm run dev -- --open
27
+
# Deploy to Cloudflare
28
+
bun run deploy
30
29
```
31
30
32
-
## Building
33
-
34
-
To create a production version of your app:
31
+
## Structure
35
32
36
-
```sh
37
-
npm run build
33
+
```
34
+
src/
35
+
├── lib/
36
+
│ ├── auth.ts # HMAC session management
37
+
│ ├── feed.ts # RSS feed photo retrieval
38
+
│ ├── types.ts # TypeScript interfaces
39
+
│ └── components/
40
+
│ └── ProgressiveImage.svelte
41
+
├── routes/
42
+
│ ├── +page.svelte # Gallery with infinite scroll
43
+
│ ├── photo/[slug]/ # Photo detail page
44
+
│ ├── admin/ # Protected upload panel
45
+
│ ├── login/ # Authentication
46
+
│ ├── api/photos/ # Pagination endpoint
47
+
│ └── rss.xml/ # RSS feed
48
+
└── hooks.server.ts # Session verification
38
49
```
39
50
40
-
You can preview the production build with `npm run preview`.
51
+
## Stack
41
52
42
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
53
+
- **SvelteKit** - Full-stack framework handling routing, SSR, and API endpoints
54
+
- **Cloudflare Workers** - Edge runtime for serverless deployment
55
+
- **D1 Database** - SQLite database for storing photo metadata
56
+
- **R2 Storage** - Object storage for hosting images and thumbnails
cover.jpg
cover.jpg
This is a binary file and will not be displayed.
+1
-1
package.json
+1
-1
package.json
···
6
6
"scripts": {
7
7
"dev": "vite dev",
8
8
"build": "vite build",
9
-
"deploy": "wrangler deploy --minify",
9
+
"deploy": "bun run build && wrangler deploy --minify",
10
10
"preview": "vite preview",
11
11
"prepare": "svelte-kit sync || echo ''",
12
12
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",