Nicholai
0cc1612fbb
- Introduced a comprehensive guide on building a production-ready VFX pipeline using open-source tools, detailing cost breakdowns and workflows. - Added new sections for experience, featured projects, skills, and contact information, enhancing the overall site structure and user navigation. - Updated components to utilize dynamic content from new markdown files, improving maintainability and scalability of the site. - Enhanced the contact page with structured data for better user interaction and accessibility.
107 lines
4.9 KiB
Plaintext
107 lines
4.9 KiB
Plaintext
---
|
|
interface Props {
|
|
role: string;
|
|
client: string;
|
|
year: string;
|
|
region: string;
|
|
projectTitle: string;
|
|
projectSubtitle: string;
|
|
projectDescription: string;
|
|
stats: Array<{
|
|
label: string;
|
|
value: string;
|
|
}>;
|
|
videoUrl: string;
|
|
linkUrl: string;
|
|
}
|
|
|
|
const { role, client, year, region, projectTitle, projectSubtitle, projectDescription, stats, videoUrl, linkUrl } = Astro.props;
|
|
---
|
|
<section id="work" class="relative overflow-hidden group min-h-[100dvh] flex flex-col cursor-pointer">
|
|
<!-- Main Link Overlay -->
|
|
<a href={linkUrl} class="absolute inset-0 z-30" aria-label={`View ${projectTitle} ${projectSubtitle} 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={videoUrl} 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">{role}</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">{client}</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">{year}</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">{region}</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">
|
|
{projectTitle}
|
|
</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">
|
|
{projectTitle} <span class="text-transparent text-stroke">{projectSubtitle}</span>
|
|
</h2>
|
|
<p class="text-slate-300 font-light max-w-lg text-sm md:text-base leading-relaxed">
|
|
{projectDescription}
|
|
</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">
|
|
{stats.map((stat) => (
|
|
<div class="border-l border-brand-accent/30 pl-3">
|
|
<span class="block text-slate-500 text-[10px] uppercase mb-1">{stat.label}</span>
|
|
<span class="block text-white font-bold">{stat.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|