# OSKVP Site

Astro portfolio site for Oliver Shore and Kevin Von Puttkammer — film director duo based in Amsterdam.

## Commands

```bash
bun dev          # local dev server
bun run build    # production build (always use this, not bun build)
bun preview      # build + wrangler pages dev at :8788
bun deploy       # build + deploy to Cloudflare Pages
bun cf-typegen   # regenerate wrangler types
```

## Stack

- Astro 5 + Cloudflare Pages adapter
- React 19 (client components)
- Tailwind CSS 4 (via Vite plugin)
- GSAP 3 for animations
- TypeScript, strict mode

## Architecture

- **Rendering**: Static (prerendered). All pages generate to HTML at build time.
- **Hydration**: `client:load` for above-fold (Nav, Hero). `client:visible` for below-fold (Grid, Footer, Marquee).
- **Fonts**: Playfair Display (display/headings) + Inter (body) via Google Fonts CDN. No self-hosted fonts.

## Pages

| Route | File | Description |
|-------|------|-------------|
| `/` | `src/pages/index.astro` | Homepage: Hero + all projects with filter |
| `/music-videos` | `src/pages/music-videos.astro` | Music videos + album trailers |
| `/commercials` | `src/pages/commercials.astro` | Commercial work |
| `/about` | `src/pages/about.astro` | About page |
| `/contact` | `src/pages/contact.astro` | Contact page |
| `/404` | `src/pages/404.astro` | Not found |

## Key Files

- `src/data/projects.ts` — All 23 project entries (title, category, vimeoId, thumbnail)
- `src/components/ProjectGrid.tsx` — Video grid with filter + Vimeo modal
- `src/components/Hero.tsx` — Full-screen hero with background video loop
- `src/components/Navigation.tsx` — Fixed header + mobile overlay menu
- `src/styles/global.css` — Global styles + Tailwind theme tokens
- `src/consts.ts` — Site constants (title, email, social links)
- `wrangler.jsonc` — Cloudflare Pages config

## Design System

Colors:
- Background: `#0A0A0A` (dark), `#050505` (darker/footer)
- Text: white, with `/40`, `/50`, `/60` opacity variants for hierarchy
- Accent: `#F0EDE8` (warm off-white)

Fonts:
- Display/headings: `font-display` = Playfair Display, Georgia fallback
- Body: `font-body` = Inter, system-ui fallback

## Adding Projects

Edit `src/data/projects.ts`. Each project needs:
- `title`: string
- `category`: `'Music Video' | 'Commercial' | 'Album Trailer' | 'Edit'`
- `vimeoId`: Vimeo video ID
- `vimeoUrl`: full Vimeo URL (handles hash URLs like `vimeo.com/id/hash`)
- `thumbnail`: vimeocdn.com thumbnail URL
- `featured`: optional boolean (used for future featured section)

## Vimeo Embed

Videos with a hash (e.g. `vimeo.com/765609109/dd374ab013`) are embedded as:
`https://player.vimeo.com/video/{id}?h={hash}&autoplay=1`

Standard videos: `https://player.vimeo.com/video/{id}?autoplay=1`

## Deployment

```bash
# Set account ID
export CLOUDFLARE_ACCOUNT_ID=<id>

# Deploy
bun deploy
```

Configure custom domain in Cloudflare Pages dashboard.
Domain to use: update `site` in `astro.config.mjs` from `https://oskvp.com` to actual domain.