OSKVP Site

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

Commands

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

# 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.

3.0 KiB Raw Blame History