OnSet: populate with real content from wilddragon.net + ShareGrid
This commit is contained in:
parent
e0d3d30cda
commit
8ef973d63d
1 changed files with 112 additions and 102 deletions
|
|
@ -3,55 +3,65 @@
|
|||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import ScrollReveal from "./ScrollReveal";
|
||||
import { X, Camera, Film, Package, Award } from "lucide-react";
|
||||
import { X, Camera, Film, Package, Monitor } 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";
|
||||
const REEL_URL = "https://player.vimeo.com/video/805286240";
|
||||
|
||||
// ── 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: "" },
|
||||
];
|
||||
// Drop on-set stills into /public/images/on-set/ and add them here
|
||||
const photos: { src: string; alt: string; caption: string }[] = [];
|
||||
|
||||
// ── 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" },
|
||||
{ title: "Joe Vogel For Congress", role: "Camera Op / Trinity Op", format: "Political", year: "2024" },
|
||||
{ title: "I Am a Champion", role: "Camera Op / Trinity Op", format: "Sports", year: "2023" },
|
||||
{ title: "Washington Commanders Schedule Release", role: "Director of Photography", format: "Sports", year: "2023" },
|
||||
{ title: "Stephen Sharer – MIDNIGHT", role: "DP / Trinity Operator", format: "Narrative", year: "2023" },
|
||||
{ title: "Stephen Sharer – YOU and I", role: "DP / Trinity Operator", format: "Narrative", year: "2023" },
|
||||
{ title: "A Chocolate Lens", role: "Camera Operator", format: "Narrative", year: "2023" },
|
||||
{ title: "Capital One: Pride Month", role: "Director of Photography", format: "Corporate", year: "2021" },
|
||||
{ title: "Tafon Nchukwi: My Goal Is to Be UFC Champion", role: "Camera Operator", format: "Sports Doc", year: "2020" },
|
||||
{ title: "Conewago", role: "DP / Editor", format: "Documentary", year: "2020" },
|
||||
{ title: "Tinder", role: "Director of Photography", format: "Commercial", year: "—" },
|
||||
{ title: "In Memoriam", role: "Director of Photography", format: "Documentary", year: "2019" },
|
||||
];
|
||||
|
||||
// ── Gear / kit list ───────────────────────────────────────────────────────
|
||||
const gear = [
|
||||
{
|
||||
category: "Cameras",
|
||||
category: "Cinema Cameras",
|
||||
icon: Camera,
|
||||
items: ["RED KOMODO 6K", "Sony FX6", "GoPro HERO 12"],
|
||||
items: [
|
||||
"RED Komodo-X",
|
||||
"RED DSMC3 V-Raptor-X 8K VV + 6K S35 Dual-Format (Canon RF)",
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Lenses",
|
||||
icon: Film,
|
||||
items: ["Sigma 18-35mm T2", "Canon L Series Primes", "Rokinon Cine DS Set"],
|
||||
items: [
|
||||
"Mamiya 645 Sekor C PL 7 Lens Set",
|
||||
"Mamiya 645 Sekor C 35mm",
|
||||
"Mamiya 645 Sekor C 110mm",
|
||||
"Mamiya 645 Sekor C 150mm",
|
||||
"16-30mm / 28-75mm / 75-180mm T2.9 Zoom Set",
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Support",
|
||||
category: "Monitoring & Transmission",
|
||||
icon: Monitor,
|
||||
items: [
|
||||
"SmallHD DSMC3 7\"",
|
||||
"SmallHD Cine7 with Bolt 6 1500RX",
|
||||
"Teradek Bolt 6 Max XT Kit (TX + RX)",
|
||||
"DJI SDR Transmission",
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Camera 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"],
|
||||
items: [
|
||||
"Arri Trinity — Certified Owner & Operator",
|
||||
"Dana Dolly Kit (8 / 4ft Speedrail, 2× Matthews Stands)",
|
||||
"DJI Focus Pro All In One",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -74,9 +84,9 @@ export default function OnSet() {
|
|||
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.
|
||||
Camera Operator & DP local to the DMV. Certified Arri Trinity owner and operator
|
||||
with RED camera packages and specialized live production gear — from run-and-gun
|
||||
documentary to multi-camera sports and political campaigns.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
|
@ -87,8 +97,10 @@ export default function OnSet() {
|
|||
<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%" }}>
|
||||
<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"
|
||||
|
|
@ -110,7 +122,7 @@ export default function OnSet() {
|
|||
{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"
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-2 py-4 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>
|
||||
|
|
@ -122,79 +134,81 @@ export default function OnSet() {
|
|||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* ── Photo Gallery ── */}
|
||||
{/* ── Photo Gallery — add images to /public/images/on-set/ to enable ── */}
|
||||
{photos.length > 0 && (
|
||||
<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 ── */}
|
||||
<div>
|
||||
<ScrollReveal>
|
||||
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-6">
|
||||
On Set
|
||||
Kit
|
||||
</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="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 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>
|
||||
<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>
|
||||
|
||||
{/* ── 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 && (
|
||||
{lightbox !== null && photos.length > 0 && (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-black/90 backdrop-blur-sm flex items-center justify-center p-6"
|
||||
onClick={() => setLightbox(null)}
|
||||
|
|
@ -228,18 +242,14 @@ export default function OnSet() {
|
|||
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>
|
||||
>‹</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>
|
||||
>›</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue