Initial commit: LisiLou Photography Portfolio
Features: - Immich integration with automatic album image carousel - Dynamic configuration via JSON files - Nginx proxy for Immich API access - Docker deployment ready - Gitea Actions CI/CD workflow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Project Overview
|
||||
|
||||
LisiLou Photography Portfolio is a lightweight, zero-framework photography portfolio website designed to integrate with Immich for image hosting and client gallery access. It's a single-page application with all code in one HTML file, using vanilla JavaScript and inline CSS.
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Frontend:** Vanilla HTML5, CSS3, JavaScript (no framework)
|
||||
- **Server:** Nginx (Alpine-based)
|
||||
- **Deployment:** Docker + Docker Compose
|
||||
- **CI/CD:** Gitea Actions
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
# Start development server (serves at http://localhost:8080)
|
||||
docker compose up -d
|
||||
|
||||
# Rebuild after code changes to src/index.html
|
||||
docker compose build && docker compose up -d
|
||||
|
||||
# View container logs
|
||||
docker logs lisilou-portfolio
|
||||
```
|
||||
|
||||
**Note:** Configuration (`config/`) and image (`public/images/`) changes are applied immediately without rebuild since they're mounted as volumes.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Single-File SPA
|
||||
The entire application lives in `src/index.html` (~865 lines):
|
||||
- Lines 1-605: Inline CSS with CSS custom properties for theming
|
||||
- Lines 606-865: HTML structure and vanilla JavaScript
|
||||
|
||||
### Configuration-Driven Content
|
||||
All site content is loaded dynamically from `config/site.json` at runtime:
|
||||
- Site branding (title, tagline, logo)
|
||||
- Theme colors (applied to CSS variables)
|
||||
- Portfolio categories with Immich album links
|
||||
- Social media links
|
||||
- Client gallery access settings
|
||||
|
||||
### Immich Integration
|
||||
The app serves as a gateway to Immich shared albums:
|
||||
- Portfolio categories link to Immich albums via `immichAlbumId`
|
||||
- Client gallery codes are Immich share IDs
|
||||
- Full URLs constructed as: `{baseUrl}{publicAlbumPrefix}{albumId}`
|
||||
|
||||
### Multi-Tenant Support
|
||||
Multiple photographers can be supported via `config/profiles.json`, mapping domains to different configuration files.
|
||||
|
||||
## Key Files
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `src/index.html` | Complete SPA (CSS + HTML + JS) |
|
||||
| `config/site.json` | Runtime configuration for all content |
|
||||
| `config/profiles.json` | Multi-tenant profile routing |
|
||||
| `nginx.conf` | Caching rules, security headers, SPA routing |
|
||||
| `Dockerfile` | Multi-stage build (Node Alpine → Nginx Alpine) |
|
||||
| `.gitea/workflows/deploy.yml` | CI/CD pipeline |
|
||||
|
||||
## Nginx Configuration Highlights
|
||||
|
||||
- **Caching:** Images = 1 year, CSS/JS = 1 month, Config = 5 minutes
|
||||
- **Health Check:** `/health` endpoint for container monitoring
|
||||
- **SPA Routing:** Falls back to `index.html` for all unmatched routes
|
||||
- **Security Headers:** X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Referrer-Policy
|
||||
Reference in New Issue
Block a user