248 lines
11 KiB
TypeScript
248 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import ScrollReveal from "./ScrollReveal";
|
|
import { X, Camera, Film, Package, Award } from "lucide-react";
|
|
|
|
// ── Replace this with your actual Vimeo or YouTube embed URL ──────────────
|
|
// Vimeo: https://player.vimeo.com/video/YOUR_VIDEO_ID?autoplay=0
|
|
// YouTube: https://www.youtube.com/embed/YOUR_VIDEO_ID
|
|
const REEL_URL = "https://player.vimeo.com/video/YOUR_VIDEO_ID";
|
|
|
|
// ── On-set stills ─────────────────────────────────────────────────────────
|
|
// Drop files into /public/images/on-set/ and update this list
|
|
const photos = [
|
|
{ src: "/images/on-set/on-set-1.jpg", alt: "On set", caption: "" },
|
|
{ src: "/images/on-set/on-set-2.jpg", alt: "On set", caption: "" },
|
|
{ src: "/images/on-set/on-set-3.jpg", alt: "On set", caption: "" },
|
|
{ src: "/images/on-set/on-set-4.jpg", alt: "On set", caption: "" },
|
|
{ src: "/images/on-set/on-set-5.jpg", alt: "On set", caption: "" },
|
|
{ src: "/images/on-set/on-set-6.jpg", alt: "On set", caption: "" },
|
|
];
|
|
|
|
// ── Production credits ────────────────────────────────────────────────────
|
|
const credits = [
|
|
{ title: "Production Title", role: "Camera Operator", format: "Feature Film", year: "2024" },
|
|
{ title: "Production Title", role: "Camera Operator", format: "Commercial", year: "2024" },
|
|
{ title: "Production Title", role: "1st AC", format: "Short Film", year: "2023" },
|
|
{ title: "Production Title", role: "Camera Operator", format: "Documentary", year: "2023" },
|
|
{ title: "Production Title", role: "DIT", format: "Music Video", year: "2022" },
|
|
{ title: "Production Title", role: "Camera Operator", format: "TV / Broadcast", year: "2022" },
|
|
];
|
|
|
|
// ── Gear / kit list ───────────────────────────────────────────────────────
|
|
const gear = [
|
|
{
|
|
category: "Cameras",
|
|
icon: Camera,
|
|
items: ["RED KOMODO 6K", "Sony FX6", "GoPro HERO 12"],
|
|
},
|
|
{
|
|
category: "Lenses",
|
|
icon: Film,
|
|
items: ["Sigma 18-35mm T2", "Canon L Series Primes", "Rokinon Cine DS Set"],
|
|
},
|
|
{
|
|
category: "Support",
|
|
icon: Package,
|
|
items: ["DJI RS 3 Pro Gimbal", "Sachtler Fluid Head", "Dana Dolly"],
|
|
},
|
|
{
|
|
category: "Accessories",
|
|
icon: Award,
|
|
items: ["SmallHD 502 Monitor", "Teradek Bolt 500", "Litepanels Astra 1x1"],
|
|
},
|
|
];
|
|
|
|
export default function OnSet() {
|
|
const [lightbox, setLightbox] = useState<number | null>(null);
|
|
|
|
return (
|
|
<>
|
|
<section id="on-set" className="py-28 md:py-36 bg-surface">
|
|
<div className="max-w-6xl mx-auto px-6 space-y-24">
|
|
|
|
{/* ── Header ── */}
|
|
<ScrollReveal>
|
|
<div className="max-w-3xl">
|
|
<div className="w-10 h-px bg-accent mb-6" />
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
|
|
On Set
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
|
|
Behind the lens.
|
|
</h2>
|
|
<p className="text-muted leading-relaxed">
|
|
Camera operator and on-set technician for film, commercial, and broadcast productions.
|
|
Comfortable in fast-paced environments — from documentary run-and-gun to multi-camera
|
|
studio setups.
|
|
</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* ── Reel ── */}
|
|
<ScrollReveal>
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
|
|
Reel
|
|
</p>
|
|
<div className="relative w-full rounded-xl overflow-hidden border border-neutral-200/80 shadow-lg shadow-neutral-200/40"
|
|
style={{ paddingBottom: "56.25%" }}>
|
|
<iframe
|
|
src={REEL_URL}
|
|
className="absolute inset-0 w-full h-full"
|
|
allow="autoplay; fullscreen; picture-in-picture"
|
|
allowFullScreen
|
|
title="Showreel"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* ── Credits ── */}
|
|
<ScrollReveal>
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
|
|
Selected Credits
|
|
</p>
|
|
<div className="divide-y divide-neutral-100">
|
|
{credits.map((credit, i) => (
|
|
<div
|
|
key={i}
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-2 py-4 group hover:bg-surface-dark -mx-3 px-3 rounded-lg transition-colors duration-200"
|
|
>
|
|
<span className="text-sm font-medium text-primary">{credit.title}</span>
|
|
<span className="text-sm text-muted">{credit.role}</span>
|
|
<span className="text-sm text-muted hidden md:block">{credit.format}</span>
|
|
<span className="font-mono text-[11px] text-muted text-right md:text-left">{credit.year}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* ── Photo Gallery ── */}
|
|
<div>
|
|
<ScrollReveal>
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
|
|
On Set
|
|
</p>
|
|
</ScrollReveal>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
|
|
{photos.map((photo, i) => (
|
|
<ScrollReveal key={photo.src} delay={i * 60}>
|
|
<button
|
|
onClick={() => setLightbox(i)}
|
|
className="group relative block w-full overflow-hidden rounded-lg cursor-pointer"
|
|
>
|
|
<div className="relative h-44 md:h-56 w-full">
|
|
<Image
|
|
src={photo.src}
|
|
alt={photo.alt}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
|
|
sizes="33vw"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300" />
|
|
{photo.caption && (
|
|
<div className="absolute inset-0 flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<span className="text-xs font-medium text-white">{photo.caption}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Gear ── */}
|
|
<ScrollReveal>
|
|
<div>
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
|
|
Kit
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
{gear.map((g, i) => (
|
|
<ScrollReveal key={g.category} delay={i * 100}>
|
|
<div className="group bg-white rounded-xl p-7 border border-neutral-200/80 hover:border-accent/20 hover:shadow-lg hover:shadow-neutral-200/50 transition-all duration-300 h-full">
|
|
<div className="w-11 h-11 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-5 group-hover:bg-accent/5 group-hover:border-accent/20 transition-all duration-300">
|
|
<g.icon
|
|
size={20}
|
|
className="text-neutral-400 group-hover:text-accent transition-colors duration-300"
|
|
strokeWidth={1.5}
|
|
/>
|
|
</div>
|
|
<h3 className="text-base font-semibold text-primary mb-4">{g.category}</h3>
|
|
<ul className="space-y-2">
|
|
{g.items.map((item) => (
|
|
<li key={item} className="text-[13px] text-muted flex items-start gap-2">
|
|
<span className="mt-1.5 w-1 h-1 rounded-full bg-accent/40 shrink-0" />
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Lightbox ── */}
|
|
{lightbox !== null && (
|
|
<div
|
|
className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center p-6"
|
|
onClick={() => setLightbox(null)}
|
|
>
|
|
<button
|
|
onClick={() => setLightbox(null)}
|
|
className="absolute top-6 right-6 text-white/60 hover:text-white transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<X size={28} />
|
|
</button>
|
|
<div
|
|
className="relative max-w-5xl w-full max-h-[85vh]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Image
|
|
src={photos[lightbox].src}
|
|
alt={photos[lightbox].alt}
|
|
width={1200}
|
|
height={800}
|
|
className="object-contain w-full h-auto max-h-[80vh] rounded-lg"
|
|
/>
|
|
{photos[lightbox].caption && (
|
|
<p className="text-center text-sm text-white/70 mt-4">
|
|
{photos[lightbox].caption}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{lightbox > 0 && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setLightbox(lightbox - 1); }}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
|
|
aria-label="Previous"
|
|
>
|
|
‹
|
|
</button>
|
|
)}
|
|
{lightbox < photos.length - 1 && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); setLightbox(lightbox + 1); }}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
|
|
aria-label="Next"
|
|
>
|
|
›
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|