// Direction C — Gallery-museum // Vertical stripes: a row of tall narrow columns. Hover one and it expands // (widens) revealing project info; click to open a detail panel. // Videos live on Cloudflare R2 (free tier, no egress fees). To swap host, // only this base URL needs to change. const R2_VIDEO_BASE = 'https://pub-1c4d58c649d044529f99cbc8bfa2ac81.r2.dev/'; // Contact form posts to /contact (Cloudflare Pages Function in functions/contact.js). // The real Discord webhook URL lives in the DISCORD_WEBHOOK environment variable // set in Cloudflare Pages → Settings → Environment Variables. const CONTACT_ENDPOINT = '/contact'; const SKILLS_LIST = [ { name: 'videography', desc: 'capturing high-quality video content to communicate a clear message.' }, { name: 'cinematography', desc: 'using composition, lighting, camera movement, and lens choice to create visually appealing and cinematic imagery.' }, { name: 'video editing', desc: 'transforming raw footage into a polished final video through storytelling, pacing, music, and visual refinement.' }, { name: 'directing', desc: 'overseeing the creative direction of a project, planning scenes, guiding talent, and ensuring the final vision comes together effectively.' }, { name: 'sound design', desc: 'enhancing videos with music, sound effects, ambience, and audio mixing to create a more immersive viewing experience.' }, { name: 'colour grading', desc: 'adjusting colour, contrast, and tone to create a unique visual style and mood, improving the overall look and feel of a video.' }, { name: 'motion graphics', desc: 'creating simple animated text, graphics, and visual elements that help support storytelling and improve presentation.' }, ]; const C_PROJECTS = [ // Passion { n: '01', title: 'in my dreams', kind: 'Music video', y: '2026', category: 'Passion', skills: ['Sequence', 'Sound design', 'Colour grading'], blurb: 'My first real creative project. I was doing freelance work at the time, heard this song, and decided to cut a short music video around it for my portfolio.', accent: 300, photo: 'Website/in my dreams/in my dreams.png', photoBlur: 'Website/in my dreams/in my dreams b&w blur.png', video: R2_VIDEO_BASE + 'In My Dreams.webm', }, { n: '02', title: 's.k.a.t.e', kind: 'Mini documentary', y: '2026', category: 'Passion', skills: ['Sequence', 'Sound design', 'Colour grading'], blurb: 'A mini documentary / vlog-style video of my local skate society’s tournament. I frequently skate with this bunch, but for this session I was the dedicated videographer.', accent: 220, photo: 'Website/s.k.a.t.e/skate.png', photoBlur: 'Website/s.k.a.t.e/skate b&w blur.png', video: R2_VIDEO_BASE + 'S.K.A.T.E.webm', }, { n: '03', title: 'man drops cigarette', kind: 'Short film', y: '2026', category: 'Passion', skills: ['Directing', 'Sound design', 'Colour grading'], blurb: 'A short film directed by myself and a friend — written, filmed, edited and posted all within 24 hours. The idea came after he unironically dropped a cigarette outside his house.', accent: 30, photo: 'Website/man drops cigarette/man drops cigarette.png', photoBlur: 'Website/man drops cigarette/man drops cigarette b&w blur.png', video: R2_VIDEO_BASE + 'Man Drops Cigarette.webm', }, { n: '04', title: 'cardiff', kind: 'Edit', y: '2025', category: 'Passion', skills: ['Masking', 'Sequence', 'Visual FX'], blurb: 'Recreated this edit for Cardiff after seeing the same edit on TikTok, but of Berlin. One of my earlier edits — filmed entirely on iPhone 16.', accent: 140, photo: 'Website/cardiff/cardiff.png', photoBlur: 'Website/cardiff/cardiff b&w blur.png', video: R2_VIDEO_BASE + 'cardiff.webm', }, { n: '05', title: 'volkswagen up', kind: 'Edit', y: '2025', category: 'Passion', skills: ['Sequence', 'Colour grading', 'Music'], blurb: 'My first car edit. After my TikTok feed became flooded with the cleanest and crispiest car videos, I took it upon myself to create my own. Unfortunately I do not own a Lamborghini, so I used my friend’s Volkswagen — thanks Cerys.', accent: 340, photo: 'Website/cerys car/cerys car.png', photoBlur: 'Website/cerys car/cerys car b&w blur.png', video: R2_VIDEO_BASE + 'Cerys Car.webm', }, // Work { n: '06', title: 'chippenham chamber & town', kind: 'Organic post', y: '2026', category: 'Work', skills: ['Sequence', 'Music', 'Colour grading'], blurb: 'Filmed as a favour for a friend who belongs to the Chippenham Chamber & Town community — an event for local business owners to network and discuss the town’s future.', accent: 100, photo: 'Website/chippenham chamber & town/chippenham chamber & town.png', photoBlur: 'Website/chippenham chamber & town/chippenham chamber & town b&w blur.png', video: R2_VIDEO_BASE + 'Chippenham Chamber & Town.webm', }, { n: '07', title: 'sales reps', kind: 'Hiring ad', y: '2025', category: 'Work', skills: ['Sequence', 'Motion graphics', 'Colour grading'], blurb: 'A hiring campaign for a leads-generation company specialising in the ECO4 grant sector. Posted to Facebook to attract candidates for field-sales positions.', accent: 18, photo: 'Website/sales reps/sales reps 2.png', photoBlur: 'Website/sales reps/sales reps 2 b&w blur.png', video: R2_VIDEO_BASE + 'Sales Rep AD.webm', }, { n: '08', title: 'hill barn', kind: 'Customer testimonial', y: '2025', category: 'Work', skills: ['Directing', 'Captions', 'Colour grading'], blurb: 'A customer testimonial produced as marketing material for a solar and heating installer. The customer had recently had home upgrades the client wanted to showcase.', accent: 60, photo: 'Website/hill barn/hill barn.png', photoBlur: 'Website/hill barn/hill barn b&w blur.png', video: R2_VIDEO_BASE + 'Hill Barn.webm', }, { n: '09', title: 'canary garden cafe', kind: 'Organic post', y: '2025', category: 'Work', skills: ['Sequence', 'Music', 'Colour grading'], blurb: 'A free project a friend and I filmed for a cafe in Canary Wharf. We’d gone there to work, had such a pleasant time we offered to do a shoot on the way out.', accent: 260, photo: 'Website/canary garden cafe/canary garden cafe.png', photoBlur: 'Website/canary garden cafe/canary garden cafe b&w blur.png', video: R2_VIDEO_BASE + 'canary garden cafe.webm', }, { n: '10', title: 'solar installation', kind: 'Social media ad', y: '2025', category: 'Work', skills: ['Directing', 'Captions', 'Colour grading'], blurb: 'A social media ad for a company in the energy-efficiency sector, used to demonstrate the ease of installation and attract potential customers.', accent: 200, photo: 'Website/solar installation/solar installation normal.png', photoBlur: 'Website/solar installation/solar installation b&w blur.png', video: R2_VIDEO_BASE + 'solar installation.webm', }, { n: '11', title: 'the olive clinic', kind: 'Website material', y: '2026', category: 'Work', skills: ['Sequence', 'Music', 'Colour grading'], blurb: 'A cinematic-style tour for a local clinic, made to showcase their establishment on the website and attract potential customers.', accent: 160, photo: 'Website/the olive clinic/the olive clinic.png', photoBlur: 'Website/the olive clinic/the olive clinic b&w blur.png', video: R2_VIDEO_BASE + 'Olive Clinic.webm', }, ]; // Encode space and other URL-unsafe chars so url("...") references resolve. function photoUrl(path) { return path ? encodeURI(path) : null; } function useIsMobile(maxWidth = 768) { const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.matchMedia(`(max-width: ${maxWidth}px)`).matches ); React.useEffect(() => { const mq = window.matchMedia(`(max-width: ${maxWidth}px)`); const on = (e) => setIsMobile(e.matches); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, [maxWidth]); return isMobile; } // Vertical stripe texture — runs top-to-bottom inside each column. function CStripeV({ accent, intense = false }) { const a = `oklch(${intense ? 0.28 : 0.22} 0.018 ${accent})`; const b = `oklch(${intense ? 0.22 : 0.18} 0.022 ${accent})`; const c = `oklch(${intense ? 0.34 : 0.26} 0.028 ${accent})`; return (
); } function CFrame({ accent, ratio, idx }) { const a = `oklch(0.22 0.018 ${accent})`; const b = `oklch(0.30 0.022 ${accent})`; return (
); } function CColumn({ p, i, hovered, onHover, onLeave, onClick }) { const isHover = hovered === i; const isOther = hovered != null && hovered !== i; return (
onHover(i)} onMouseLeave={onLeave} onClick={onClick} style={{ flex: isHover ? '4 1 0' : (isOther ? '0.7 1 0' : '1 1 0'), height: '100%', position: 'relative', cursor: 'pointer', overflow: 'hidden', borderLeft: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.08)', transition: 'flex 480ms cubic-bezier(.2,.7,.2,1)', }} > {/* Background: photo if we have one, otherwise the stripe pattern */} {p.photo ? ( <> {/* Blurred photo — visible by default */}
{/* Sharp photo — fades in on hover */}
) : (
)} {/* Vignette on hover for legibility */}
{/* Number — always visible, top */}
{p.n}
{/* Vertical title — collapsed state. Reads top→bottom inside the column. */}
{p.title}
{/* Expanded info panel — at the bottom */}
{p.category}  ·  {p.kind}  ·  {p.y}

{p.title}

{p.blurb}

{p.skills.map((s) => ( {s} ))}
); } function CMobileCard({ p, expanded, onToggle, onOpen }) { return (
{p.photo ? ( <>
) : (
)} {/* Scrim — always present so top text is readable on bright photos; deepens when the card is expanded so the blurb area is fully covered. */}
{p.n} {p.category} · {p.y}

{p.title}

{p.blurb}

{p.skills.map((s) => ( {s} ))}
); } function CProjectDetail({ p, onClose }) { const isMobile = useIsMobile(); React.useEffect(() => { const k = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', k); return () => document.removeEventListener('keydown', k); }, [onClose]); return (
e.stopPropagation()} style={{ padding: isMobile ? '14px 18px 48px' : '20px 32px 60px' }}>
{p.n} / {p.title}  ·  {p.category} · {p.y}
{p.video ? (

{p.title}

{p.category}  ·  {p.kind}  ·  {p.y}

{p.blurb}

Skills
{p.skills.map((s, i) => (
{s}
))}
); } function CAboutPopup({ onClose }) { const isMobile = useIsMobile(); const [form, setForm] = React.useState({ name: '', email: '', message: '' }); const [status, setStatus] = React.useState('idle'); React.useEffect(() => { const k = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', k); return () => document.removeEventListener('keydown', k); }, [onClose]); async function handleSubmit(e) { e.preventDefault(); if (status === 'submitting') return; setStatus('submitting'); try { const res = await fetch(CONTACT_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), }); if (res.ok) { setStatus('success'); setForm({ name: '', email: '', message: '' }); } else { setStatus('error'); } } catch { setStatus('error'); } } const inputBase = { width: '100%', padding: '10px 12px', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.18)', color: '#f5f5f5', fontFamily: 'inherit', fontSize: 13, borderRadius: 2, outline: 'none', textTransform: 'none', boxSizing: 'border-box', }; const labelStyle = { display: 'block', fontSize: 11, color: '#a0a0a0', letterSpacing: 0.3, marginBottom: 6 }; const fieldWrap = { marginTop: 16 }; return (
e.stopPropagation()} style={{ padding: isMobile ? '14px 18px 48px' : '20px 32px 60px', maxWidth: 1100, margin: '0 auto' }}>
about / contact
{/* Bio */}

about

i’m sam — a director, editor, colourist and filmmaker based in cardiff. my entire skill set is self taught and has been constantly developing since i started making gaming videos in 2013 (yes, i was one of those cringe youtubers). i particularly enjoy working on creative projects such as music, food, fashion and film; though, i will involve myself with anything that allows me to put my creative flair to good use.

{/* Skills */}

what i do

{SKILLS_LIST.map((s) => (

{s.name}

{s.desc}

))}
{/* Contact details */}

get in touch

{/* Contact form */}

send a message

setForm({ ...form, name: e.target.value })} style={inputBase} />
setForm({ ...form, email: e.target.value })} style={inputBase} />