101 lines
5.5 KiB
Plaintext
101 lines
5.5 KiB
Plaintext
---
|
|
---
|
|
<section id="work" class="relative overflow-hidden group min-h-screen flex flex-col cursor-pointer">
|
|
<!-- Main Link Overlay -->
|
|
<a href="/blog/gstar-raw-olympics/" class="absolute inset-0 z-30" aria-label="View G-Star Raw Olympics Case Study"></a>
|
|
|
|
<!-- Video Background -->
|
|
<div class="absolute inset-0 z-0">
|
|
<video
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
class="w-full h-full object-cover opacity-70 transition-opacity duration-700 group-hover:opacity-100"
|
|
>
|
|
<source src="https://media.nicholai.work/FF_PUFF_GStar_DC_v08_4608x3164.mp4" type="video/mp4" />
|
|
</video>
|
|
<!-- Cinematic Letterboxing / Gradient Vignette -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-brand-dark/80 via-transparent to-brand-dark/80 pointer-events-none"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-brand-dark/40 via-transparent to-brand-dark/40 pointer-events-none"></div>
|
|
|
|
<!-- Subtle Grid Overlay -->
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px] pointer-events-none opacity-30"></div>
|
|
</div>
|
|
|
|
<!-- Main Content Container - Spaced to frame the video -->
|
|
<div class="container mx-auto px-6 lg:px-12 relative z-10 flex-1 flex flex-col justify-between py-12 lg:py-16 pointer-events-none">
|
|
|
|
<!-- TOP HUD: Telemetry Data -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-white/20 pt-6 animate-on-scroll slide-up">
|
|
<div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Role</span>
|
|
<span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">VFX Sup</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Client</span>
|
|
<span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Stink</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Year</span>
|
|
<span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">2024</span>
|
|
</div>
|
|
<div class="text-right md:text-left">
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Region</span>
|
|
<span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Global</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CENTER AREA: Clear for Video -->
|
|
<div class="flex-1 relative">
|
|
<!-- Side Vertical Title (Optional, unobtrusive) -->
|
|
<div class="hidden lg:block absolute -left-8 top-1/2 -translate-y-1/2 origin-left -rotate-90">
|
|
<h2 class="text-6xl font-bold text-transparent text-stroke uppercase tracking-tighter opacity-20 select-none">
|
|
G-Star Raw
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOTTOM HUD: Project Details & Stats -->
|
|
<div class="border-b border-white/20 pb-6 animate-on-scroll slide-up stagger-1">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">
|
|
|
|
<!-- Title & Description -->
|
|
<div class="lg:col-span-7">
|
|
<h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4 tracking-tighter leading-none">
|
|
G-Star <span class="text-transparent text-stroke">Olympics</span>
|
|
</h2>
|
|
<p class="text-slate-300 font-light max-w-lg text-sm md:text-base leading-relaxed">
|
|
Full CG environment production for the 2024 Olympic Campaign.
|
|
Orchestrated procedural city generation and AI-enhanced lighting workflows.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Technical Stats (Mini-Table) -->
|
|
<div class="lg:col-span-5">
|
|
<div class="grid grid-cols-2 gap-x-8 gap-y-4 font-mono text-xs">
|
|
<div class="border-l border-brand-accent/30 pl-3">
|
|
<span class="block text-slate-500 text-[10px] uppercase mb-1">Shot Count</span>
|
|
<span class="block text-white font-bold">12 Sequences</span>
|
|
</div>
|
|
<div class="border-l border-brand-accent/30 pl-3">
|
|
<span class="block text-slate-500 text-[10px] uppercase mb-1">Resolution</span>
|
|
<span class="block text-white font-bold">4K DCI</span>
|
|
</div>
|
|
<div class="border-l border-brand-accent/30 pl-3">
|
|
<span class="block text-slate-500 text-[10px] uppercase mb-1">Pipeline</span>
|
|
<span class="block text-white font-bold">Houdini / Solaris</span>
|
|
</div>
|
|
<div class="border-l border-brand-accent/30 pl-3">
|
|
<span class="block text-slate-500 text-[10px] uppercase mb-1">Render</span>
|
|
<span class="block text-white font-bold">Karma XPU</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|