90 lines
3.0 KiB
Markdown
90 lines
3.0 KiB
Markdown
# 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.
|