142 lines
9.1 KiB
Plaintext
142 lines
9.1 KiB
Plaintext
---
|
|
---
|
|
<section id="experience" class="container mx-auto px-6 lg:px-12 py-32 border-t border-white/10">
|
|
|
|
<!-- Section Header -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20">
|
|
<div class="lg:col-span-8">
|
|
<h2 class="text-6xl md:text-8xl lg:text-9xl font-bold uppercase tracking-tighter leading-[0.85] text-white">
|
|
<span class="block animate-on-scroll slide-up">Experience</span>
|
|
<span class="block text-transparent text-stroke animate-on-scroll slide-up stagger-1">History</span>
|
|
</h2>
|
|
</h2>
|
|
</div>
|
|
<div class="lg:col-span-4 flex flex-col justify-end pb-4">
|
|
<div class="font-mono text-xs text-slate-500 uppercase tracking-widest mb-4">/// Career Timeline</div>
|
|
<p class="text-slate-400 text-base leading-relaxed border-l border-brand-accent pl-6 animate-on-scroll fade-in stagger-2">
|
|
Bridging creative vision with technical execution. From running a dedicated VFX studio to high-end freelance supervision.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- "Rack Mount" Layout -->
|
|
<div class="flex flex-col gap-6">
|
|
|
|
<!-- Unit 01: Biohazard (Active System) -->
|
|
<div class="group relative border border-white/10 bg-white/[0.02] hover:border-brand-accent/50 hover:bg-white/[0.04] transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-1">
|
|
<!-- Active Indicator Strip -->
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-brand-accent opacity-100"></div>
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-brand-accent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
<!-- Technical Header -->
|
|
<div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-mono text-[10px] text-brand-accent uppercase tracking-widest">SYS.01 /// ACTIVE</span>
|
|
<div class="h-px w-12 bg-white/10"></div>
|
|
</div>
|
|
<span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">2022 — PRESENT</span>
|
|
</div>
|
|
|
|
<div class="p-8 lg:p-12 grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
<div class="lg:col-span-4">
|
|
<h3 class="text-4xl font-bold text-white uppercase tracking-tight mb-2">Biohazard VFX</h3>
|
|
<span class="text-sm font-mono text-slate-400">Founder & Owner</span>
|
|
|
|
<div class="mt-8 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-400">Studio Lead</span>
|
|
<span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-400">Pipeline Arch</span>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-8 flex flex-col justify-between">
|
|
<p class="text-slate-300 leading-relaxed font-light text-lg mb-8">
|
|
Founded and lead a VFX studio specializing in high-end commercial and music video work.
|
|
Delivered projects for Post Malone, ENHYPEN, and Nike. Architected a custom pipeline combining cloud and self-hosted infrastructure.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 border-t border-white/5 pt-8">
|
|
<div>
|
|
<h4 class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">Key Achievement</h4>
|
|
<p class="text-sm text-slate-400">Designed 7-plate reconciliation workflows for ENHYPEN (projection mapping live action onto CAD).</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-[10px] font-mono text-slate-500 uppercase tracking-widest mb-2">System Impact</h4>
|
|
<p class="text-sm text-slate-400">Developed QA systems for AI-generated assets, transforming mid-tier output into production-ready deliverables.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-end">
|
|
<a href="https://biohazardvfx.com" target="_blank" class="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
|
|
Visit Studio Uplink <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Split Row for Stink & Freelance -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Unit 02: Stinkfilms -->
|
|
<div class="group relative border border-white/10 bg-white/[0.02] hover:border-white/30 transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-2">
|
|
<!-- Inactive Indicator Strip -->
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-white transition-colors"></div>
|
|
|
|
<!-- Technical Header -->
|
|
<div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SYS.02 /// ARCHIVED</span>
|
|
</div>
|
|
<span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SUMMER 2024</span>
|
|
</div>
|
|
|
|
<div class="p-8 lg:p-10 flex flex-col h-full">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-white uppercase tracking-tight mb-1">Stinkfilms</h3>
|
|
<span class="text-xs font-mono text-slate-400">VFX Supervisor</span>
|
|
</div>
|
|
<p class="text-slate-400 leading-relaxed font-light text-sm mb-8 flex-grow">
|
|
Led Biohazard VFX team (60+ artists) alongside director Felix Brady to create a brand film for G-Star Raw.
|
|
Managed full CG environments in Blender/Houdini.
|
|
</p>
|
|
<div class="pt-6 border-t border-white/5">
|
|
<a href="/blog/gstar-raw-olympics/" class="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-slate-300 hover:text-white transition-colors">
|
|
Access Case Data <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Unit 03: Freelance -->
|
|
<div class="group relative border border-white/10 bg-white/[0.02] hover:border-white/30 transition-all duration-500 overflow-hidden animate-on-scroll slide-up stagger-3">
|
|
<!-- Background Process Indicator Strip -->
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-slate-700 opacity-50 group-hover:bg-white transition-colors"></div>
|
|
|
|
<!-- Technical Header -->
|
|
<div class="flex items-center justify-between px-8 py-4 border-b border-white/5 bg-white/[0.02]">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">SYS.03 /// DAEMON</span>
|
|
</div>
|
|
<span class="font-mono text-[10px] text-slate-500 uppercase tracking-widest">2016 — PRESENT</span>
|
|
</div>
|
|
|
|
<div class="p-8 lg:p-10 flex flex-col h-full">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-white uppercase tracking-tight mb-1">Freelance</h3>
|
|
<span class="text-xs font-mono text-slate-400">Senior Compositor</span>
|
|
</div>
|
|
<p class="text-slate-400 leading-relaxed font-light text-sm mb-8 flex-grow">
|
|
Taking on select freelance compositing and 3D work alongside studio operations.
|
|
Clients include Abyss Digital, Atlantic, Interscope.
|
|
</p>
|
|
<div class="pt-6 border-t border-white/5 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-500">Nuke</span>
|
|
<span class="px-2 py-1 text-[10px] font-mono uppercase border border-white/10 text-slate-500">Flame</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|