nicholai
0c41e45b97
- Changed site title and description to reflect personal branding as a VFX Artist & Technical Generalist. - Added social links for contact and networking. - Revamped footer layout for improved aesthetics and functionality. - Reorganized blog and homepage layouts to enhance user experience and visual appeal. - Updated global styles to incorporate Tailwind CSS for a modern design approach.
56 lines
3.5 KiB
Plaintext
56 lines
3.5 KiB
Plaintext
---
|
|
---
|
|
<section id="work" class="py-24">
|
|
<div class="container mx-auto px-6 lg:px-12 mb-12">
|
|
<span class="text-xs font-mono text-brand-accent mb-2 block">/// HIGHLIGHT</span>
|
|
<h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4">G-Star Raw <span
|
|
class="text-stroke">Olympics</span></h2>
|
|
</div>
|
|
|
|
<!-- Full Width Project Card -->
|
|
<div class="w-full h-[80vh] relative group overflow-hidden border-y border-white/10">
|
|
<!-- Abstract Background representing the project -->
|
|
<div
|
|
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-1000 group-hover:scale-105">
|
|
</div>
|
|
<div class="absolute inset-0 bg-brand-dark/80 mix-blend-multiply"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/20 to-transparent"></div>
|
|
|
|
<!-- Grid Overlay on image -->
|
|
<div
|
|
class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdHRlcm4gaWQ9ImIiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvcGF0dGVybj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjYikiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=')] opacity-30">
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-0 left-0 w-full p-6 lg:p-12 flex flex-col md:flex-row items-end justify-between">
|
|
<div
|
|
class="max-w-2xl transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
|
|
<div class="flex gap-2 mb-4">
|
|
<span class="bg-brand-accent text-brand-dark text-[10px] font-bold uppercase px-2 py-1">VFX
|
|
Supervision</span>
|
|
<span
|
|
class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">AI/ML</span>
|
|
<span
|
|
class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">Houdini</span>
|
|
</div>
|
|
<p class="text-xl md:text-2xl text-white font-medium mb-6">
|
|
Managed full CG environment builds, procedural city generation, and integrated AI-generated
|
|
normal maps for relighting in Nuke.
|
|
</p>
|
|
<a href="https://f.io/7ijf23Wm"
|
|
class="inline-flex items-center gap-3 text-sm font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
|
|
Watch Making Of <i data-lucide="play-circle" class="w-5 h-5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hidden md:block text-right">
|
|
<span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Year</span>
|
|
<span class="block text-2xl font-bold text-white mb-4">2024</span>
|
|
<span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Client</span>
|
|
<span class="block text-xl font-bold text-white">Stinkfilms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|