diff --git a/docs/ideas.md b/docs/ideas.md index 541998f..20f367f 100644 --- a/docs/ideas.md +++ b/docs/ideas.md @@ -1,71 +1,63 @@ -# Portfolio Ideas +# Portfolio Backlog & Ideas -## πŸ§‘β€πŸ’» Developer - -- **Internationalization (i18n)** β€” Multi-language UI support (DE/EN). Extend YAML config with locale files -- **ISR / Stale-While-Revalidate** β€” Replace `force-dynamic` with Incremental Static Regeneration + on-demand revalidation - -## πŸ“Έ Photographer - -- **Photo stories / Essays** β€” Vertical scroll format with images + text interspersed, like a photo essay. Portfolio differentiator -- **Map view** β€” Minimal world map from EXIF city/country data, each dot links to an album. Mapbox GL or Leaflet -- **Collections by camera/lens** β€” Auto-generate virtual albums from EXIF data ("Shot on Leica Q3", "Summilux 35mm") -- **Client proofing** β€” Let clients favorite/select photos in password-protected galleries. Extends existing password gate -- **Download originals** β€” Button in lightbox to download full-res, proxied through server (keeps Immich hidden). Unlocks client delivery -- **Before/After slider** β€” Drag-to-reveal comparison component for retouching/editing showcases -- **Print shop integration** β€” "Buy Print" button linking to external print-on-demand service or contact form with photo reference -- **Watermarking** β€” Server-side watermark overlay on proxied images (corner logo, center text, or diagonal). Configurable in YAML -- **Curated homepage feed** β€” Hand-picked "best of" sequence across all albums, like an Instagram highlights page -- **Photo of the Day** β€” Auto-rotate hero image daily from a designated favorites album. Gives visitors a reason to return -- **EXIF analytics page** β€” Visual breakdown of shooting patterns: most-used focal lengths, aperture distribution, camera body stats -- **Color palette extraction** β€” Show dominant colors per photo/album as subtle accents. Art direction + bespoke feel -- **Timeline / Year view** β€” Chronological scroll of all work by year/month, showing progression over time -- **Search by EXIF** β€” Filter entire portfolio by camera settings ("everything at f/1.4", "all black & white") - -## πŸ‘€ User / Visitor - -- **Slideshow mode** β€” Auto-advance through photos (3s/5s/10s). Great for exhibitions and ambient display -- **Photo sharing** β€” "Copy link" button in lightbox with toast notification -- **Keyboard shortcut hints** β€” `?` button revealing available shortcuts (arrows, Esc, F for fullscreen) -- **Fullscreen API** β€” Chrome-free immersive viewing in lightbox -- **Pinch-to-zoom** β€” Touch gesture zoom in lightbox for detail viewing -- **Progressive loading animation** β€” Ken Burns zoom/pan on ThumbHash placeholders while loading +Eine konsolidierte Liste an Features und Ideen fΓΌr zukΓΌnftige Versionen, bereinigt um alles, was bereits implementiert wurde. ## πŸ† Quick Wins (High Impact / Low Effort) | Idea | Effort | Impact | |------|--------|--------| -| Slideshow mode | Low | High β€” exhibition ready | -| Fullscreen API in lightbox | Low | Medium β€” immersive | -| Monochrome toggle | Low | Medium β€” Leica vibes | -| Download originals | Low | High β€” client delivery | -| ISR caching | Medium | High β€” performance | -| Photo of the Day | Low | Medium β€” return visits | -| Before/After slider | Medium | Medium β€” editing showcase | -| Photo stories/essays | High | Very high β€” differentiator | -| Map view | Medium | High β€” wow factor | -| Client proofing | High | Very high β€” business tool | -| EXIF analytics | Medium | Medium β€” gear-nerd appeal | +| **Slideshow mode** | Low | High β€” exhibition ready (Auto-advance 3s/5s/10s) | +| **Fullscreen API in lightbox** | Low | Medium β€” immersive (Chrome-free) | +| **Download originals** | Low | High β€” client delivery (Button in lightbox) | +| **Photo of the Day** | Low | Medium β€” return visits (Auto-rotate hero image) | +| **Keyboard shortcut hints** | Low | Medium β€” `?` button for shortcuts (arrows, Esc, F) | +| **Photo sharing** | Low | Medium β€” "Copy link" button in lightbox | -## βœ… Already Implemented +--- -| Feature | Notes | -|---------|-------| -| Image CDN / Edge caching | `Cache-Control: immutable` on `/api/image` proxy | -| OG image generation | Dynamic OG images via `/api/og` | -| Hero image carousel | Crossfade carousel from `gallery.yaml` hero images | -| EXIF metadata display | Print-style captions on photo grid hover | -| Per-album password protection | Cookie-based auth gate per subpage | -| Asset ID obfuscation | AES-encrypted tokens in public URLs | -| Rate limiting | On image proxy endpoint | -| YAML-based config | `gallery.yaml` replaces env-var config | -| Playwright E2E tests | Basic test suite in `e2e/` | -| Fade-in animations | Intersection Observer based | -| Theme toggle (dark/light) | Persisted via cookie | -| Scroll-to-top button | Appears on scroll | -| Footer with social links | Configurable via `gallery.yaml` | -| Image count badges | On subpage cover tiles | -| Custom cursor (crosshair) | On photo grid items | -| About page | Markdown-driven with portrait + gear | -| Content Security Policy | CSP + security headers in `next.config.ts` | -| Album descriptions | Uses Immich's built-in album description field | +## 🌍 Bigger Features & Enhancements + +- **ISR / Stale-While-Revalidate** β€” Replace `force-dynamic` with Incremental Static Regeneration + on-demand revalidation. +- **Client proofing** β€” Let clients favorite/select photos in password-protected galleries. +- **Map view** β€” Minimal world map from EXIF city/country data, each dot links to an album. +- **EXIF analytics page** β€” Visual breakdown of shooting patterns: most-used focal lengths, aperture distribution. +- **Before/After slider** β€” Drag-to-reveal comparison component for retouching showcases. +- **Watermarking** β€” Server-side watermark overlay on proxied images. +- **Internationalization (i18n)** β€” Multi-language UI support (DE/EN). + +--- + +## πŸ“– Deep Dive Feature Plan: Photo Stories / Essays + +*Vertical scroll format with images + text interspersed, like a photo essay. A major portfolio differentiator.* + +### Proposed Architecture + +**How it works:** +The photographer writes standard Markdown files in `content/stories/`. +We extend the standard Markdown image syntax to pull images directly from Immich using the asset UUID: + +```md +# My trip to Japan + +Here is some text introducing the story. + +![Kyoto street at night](asset:b8c2d...) +``` + +### Implementation Layers + +1. **Parser Layer (`lib/storyParser.ts`)** + - Parse markdown files using `marked`. + - Identify `asset:UUID` image nodes. + - Batch-fetch necessary `ImmichAsset` data to generate `ThumbHash` and Proxy-URLs. + - Return a structured array of blocks (e.g. `{ type: 'text', html: '...' }`, `{ type: 'image', assetId: '...', url: '...' }`). + +2. **Routing Layer** + - `app/stories/page.tsx`: Index page showing cards for all stories (sorted by date). + - `app/stories/[slug]/page.tsx`: The essay reader. + +3. **Design Layer** + - Immersive, single-column reading experience. + - Consecutive images can automatically adapt to side-by-side or masonry presentation depending on aspect ratios. + - Typography should be highly legible, matching the chosen global theme.