nicholai
26c2d0aa08
- Introduced a comprehensive design system in `dev/design.json` featuring color palettes, typography, spacing, and component guidelines. - Created a new homepage layout in `dev/index.html` utilizing Tailwind CSS for styling, including a custom cursor and grid overlay for visual structure. - Implemented responsive design patterns and interactive elements for enhanced user experience.
604 lines
29 KiB
HTML
604 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nicholai Vogel | VFX Artist & Technical Generalist</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Space+Mono:wght@400;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<!-- Design System Configuration -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
dark: '#0B0D11', // Primary BG
|
|
panel: '#151921', // Secondary BG
|
|
accent: '#FFB84C', // Orange/Yellow
|
|
cyan: '#22D3EE',
|
|
border: 'rgba(255, 255, 255, 0.1)',
|
|
borderStrong: 'rgba(255, 255, 255, 0.2)'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
mono: ['Space Mono', 'monospace'],
|
|
},
|
|
spacing: {
|
|
'128': '32rem',
|
|
},
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Custom Utilities based on Design JSON */
|
|
body {
|
|
background-color: #0B0D11;
|
|
color: #ffffff;
|
|
overflow-x: hidden;
|
|
cursor: none;
|
|
/* Custom cursor implementation */
|
|
}
|
|
|
|
/* The Grid Overlay */
|
|
.grid-overlay {
|
|
background-size: 100px 100px;
|
|
background-image:
|
|
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #0B0D11;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #FFB84C;
|
|
}
|
|
|
|
/* Typography Utilities */
|
|
.text-massive {
|
|
line-height: 0.9;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.text-stroke {
|
|
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
|
|
color: transparent;
|
|
}
|
|
|
|
/* Animations */
|
|
.reveal-text {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.reveal-text.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Custom Cursor */
|
|
.cursor-dot,
|
|
.cursor-outline {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cursor-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #FFB84C;
|
|
}
|
|
|
|
.cursor-outline {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid rgba(255, 184, 76, 0.5);
|
|
transition: width 0.2s, height 0.2s, background-color 0.2s;
|
|
}
|
|
|
|
/* Interactive Elements */
|
|
.hover-trigger:hover~.cursor-outline,
|
|
a:hover~.cursor-outline,
|
|
button:hover~.cursor-outline {
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: rgba(255, 184, 76, 0.05);
|
|
border-color: #FFB84C;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="antialiased selection:bg-brand-accent selection:text-brand-dark">
|
|
|
|
<!-- Custom Cursor -->
|
|
<div class="cursor-dot hidden md:block"></div>
|
|
<div class="cursor-outline hidden md:block"></div>
|
|
|
|
<!-- Fixed Grid Overlay -->
|
|
<div class="fixed inset-0 grid-overlay h-screen w-screen"></div>
|
|
|
|
<!-- 12 Column Guide (Visual Only - Low Opacity) -->
|
|
<div
|
|
class="fixed inset-0 container mx-auto px-6 lg:px-12 grid grid-cols-4 md:grid-cols-12 gap-4 pointer-events-none z-0 opacity-10 border-x border-white/5">
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
<div class="border-r border-white/5 h-full hidden md:block"></div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav
|
|
class="fixed top-0 left-0 w-full z-50 px-6 lg:px-12 py-8 flex justify-between items-center backdrop-blur-sm border-b border-white/5">
|
|
<div class="flex items-center gap-4 group cursor-none-target">
|
|
<div
|
|
class="w-10 h-10 border border-brand-accent/50 flex items-center justify-center bg-brand-accent/5 group-hover:bg-brand-accent transition-colors duration-300">
|
|
<span class="font-bold text-brand-accent group-hover:text-brand-dark">NV</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-xs font-mono uppercase tracking-widest text-slate-400">Status</span>
|
|
<span class="text-xs font-bold text-brand-accent animate-pulse">AVAILABLE FOR WORK</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex gap-12">
|
|
<a href="#about"
|
|
class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">01.
|
|
Profile</a>
|
|
<a href="#work"
|
|
class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">02.
|
|
Selected Works</a>
|
|
<a href="#experience"
|
|
class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">03.
|
|
History</a>
|
|
<a href="#skills"
|
|
class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">04.
|
|
Stack</a>
|
|
</div>
|
|
|
|
<a href="mailto:nicholai@nicholai.work"
|
|
class="border border-slate-600 px-6 py-3 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/10 transition-all cursor-none-target">
|
|
Contact
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="relative z-10 pt-32 lg:pt-48 pb-24">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="container mx-auto px-6 lg:px-12 min-h-[70vh] flex flex-col justify-center relative">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
|
<div class="col-span-12">
|
|
<p class="font-mono text-brand-accent mb-4 ml-1 reveal-text">/// TECHNICAL GENERALIST & VFX
|
|
SUPERVISOR</p>
|
|
<h1
|
|
class="text-6xl md:text-8xl lg:text-[10rem] font-bold text-massive uppercase leading-none tracking-tighter mb-8 text-white">
|
|
<span class="reveal-text block delay-100">Visual</span>
|
|
<span
|
|
class="reveal-text block delay-200 text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Alchemist</span>
|
|
</h1>
|
|
</div>
|
|
<div
|
|
class="col-span-12 md:col-span-6 lg:col-span-5 lg:col-start-8 mt-12 border-l border-brand-accent/30 pl-8 reveal-text delay-300">
|
|
<p class="text-slate-400 text-lg leading-relaxed mb-8">
|
|
I am a problem solver who loves visual effects. With 10 years of experience creating end-to-end
|
|
visual content for clients like <span class="text-white font-semibold">Post Malone</span>, <span
|
|
class="text-white font-semibold">Stinkfilms</span>, and <span
|
|
class="text-white font-semibold">Adidas</span>. Comfortable managing teams while staying
|
|
knee-deep in hands-on shot work.
|
|
</p>
|
|
<div class="flex gap-4">
|
|
<a href="#work"
|
|
class="group flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
|
|
<span class="w-8 h-[1px] bg-brand-accent group-hover:w-12 transition-all"></span>
|
|
View Selected Works
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Footer -->
|
|
<div
|
|
class="absolute bottom-0 w-full left-0 px-6 lg:px-12 pb-12 hidden md:flex justify-between items-end opacity-50">
|
|
<div class="font-mono text-xs text-slate-500">
|
|
LOC: COLORADO SPRINGS<br>
|
|
TIME: <span id="clock">00:00:00</span>
|
|
</div>
|
|
<div class="font-mono text-xs text-slate-500 text-right">
|
|
SCROLL<br>
|
|
↓
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Divider -->
|
|
<div class="w-full h-[1px] bg-white/10 my-24"></div>
|
|
|
|
<!-- Experience / Timeline -->
|
|
<section id="experience" class="container mx-auto px-6 lg:px-12 py-24">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
|
<div class="lg:col-span-4">
|
|
<h2 class="text-4xl font-bold uppercase tracking-tight mb-2 text-stroke">Experience</h2>
|
|
<h2 class="text-4xl font-bold uppercase tracking-tight mb-8">History</h2>
|
|
<p class="text-slate-400 mb-8 max-w-sm">
|
|
From founding my own VFX house to supervising global campaigns. I bridge the gap between
|
|
creative vision and technical execution.
|
|
</p>
|
|
<a href="https://biohazardvfx.com" target="_blank"
|
|
class="inline-flex items-center gap-2 text-xs font-mono uppercase text-brand-accent hover:underline">
|
|
Visit Biohazard VFX <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="lg:col-span-8 relative">
|
|
<!-- Vertical line -->
|
|
<div
|
|
class="absolute left-0 top-0 bottom-0 w-[1px] bg-gradient-to-b from-brand-accent via-slate-800 to-transparent">
|
|
</div>
|
|
|
|
<!-- Item 1 -->
|
|
<div class="pl-12 mb-20 relative reveal-text">
|
|
<div
|
|
class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-brand-dark border border-brand-accent rounded-full">
|
|
</div>
|
|
<div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
|
|
<h3 class="text-2xl font-bold text-white uppercase">Biohazard VFX</h3>
|
|
<span class="font-mono text-xs text-brand-accent bg-brand-accent/10 px-2 py-1">FOUNDER / VFX
|
|
SUPERVISOR</span>
|
|
<span class="font-mono text-xs text-slate-500 ml-auto">MAR 2022 - OCT 2025</span>
|
|
</div>
|
|
<p class="text-slate-400 mb-6 leading-relaxed">
|
|
Founded and led a VFX studio specializing in high-end commercial and music video work for
|
|
Post Malone, ENHYPEN, and Nike. Architected a custom pipeline combining cloud and
|
|
self-hosted infrastructure.
|
|
</p>
|
|
<ul class="space-y-2 mb-6">
|
|
<li class="flex items-start gap-3 text-sm text-slate-300">
|
|
<span class="text-brand-accent mt-1">▹</span>
|
|
Designed 7-plate reconciliation workflows for ENHYPEN (projection mapping live action
|
|
onto CAD).
|
|
</li>
|
|
<li class="flex items-start gap-3 text-sm text-slate-300">
|
|
<span class="text-brand-accent mt-1">▹</span>
|
|
Developed QA systems for AI-generated assets, transforming mid-tier output into
|
|
production-ready deliverables.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Item 2 -->
|
|
<div class="pl-12 mb-20 relative reveal-text">
|
|
<div class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-slate-700 rounded-full"></div>
|
|
<div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
|
|
<h3 class="text-2xl font-bold text-white uppercase">Stinkfilms</h3>
|
|
<span class="font-mono text-xs text-slate-400 border border-slate-700 px-2 py-1">GLOBAL
|
|
PRODUCTION STUDIO</span>
|
|
<span class="font-mono text-xs text-slate-500 ml-auto">SUMMER 2024</span>
|
|
</div>
|
|
<p class="text-slate-400 mb-6 leading-relaxed">
|
|
Led Biohazard VFX team (60+ artists) alongside director Felix Brady to create a brand film
|
|
for G-Star Raw.
|
|
</p>
|
|
<div
|
|
class="border border-white/5 bg-white/5 p-6 backdrop-blur-sm hover:border-brand-accent/50 transition-colors cursor-pointer group">
|
|
<h4 class="text-sm font-bold uppercase text-white mb-2 flex justify-between">
|
|
Project: G-Star Raw Olympics Campaign
|
|
<i data-lucide="arrow-right"
|
|
class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity text-brand-accent"></i>
|
|
</h4>
|
|
<p class="text-xs text-slate-400 mb-4">Managed full CG environments in Blender/Houdini and
|
|
integrated AI/ML workflows (Stable Diffusion reference gen, Copycat cleanup).</p>
|
|
<a href="https://stinkfilms.com"
|
|
class="text-[10px] font-bold text-brand-accent uppercase tracking-widest">View Case
|
|
Study</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 -->
|
|
<div class="pl-12 relative reveal-text">
|
|
<div class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-slate-700 rounded-full"></div>
|
|
<div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
|
|
<h3 class="text-2xl font-bold text-white uppercase">Freelance</h3>
|
|
<span class="font-mono text-xs text-slate-400 border border-slate-700 px-2 py-1">2D/3D
|
|
ARTIST</span>
|
|
<span class="font-mono text-xs text-slate-500 ml-auto">2015 - PRESENT</span>
|
|
</div>
|
|
<p class="text-slate-400 mb-4 leading-relaxed">
|
|
Compositor for Abyss Digital and major labels (Atlantic, Interscope). Clients: David
|
|
Kushner, Opium, Lil Durk, Don Toliver.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Divider -->
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<div class="w-full h-[1px] bg-white/10"></div>
|
|
</div>
|
|
|
|
<!-- Featured Project Section (G-Star Raw) -->
|
|
<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>
|
|
|
|
<!-- Skills Matrix -->
|
|
<section id="skills" class="container mx-auto px-6 lg:px-12 py-24 bg-brand-panel border-y border-white/5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
|
<div class="col-span-1 md:col-span-2 lg:col-span-4 mb-8">
|
|
<h2 class="text-4xl font-bold uppercase mb-2">Technical Arsenal</h2>
|
|
<p class="text-slate-400 font-mono text-sm">/// SOFTWARE & LANGUAGES</p>
|
|
</div>
|
|
|
|
<!-- Compositing -->
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
|
|
<i data-lucide="layers" class="w-4 h-4 text-brand-accent"></i> Compositing
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="skill-tag">Nuke/NukeX</span>
|
|
<span class="skill-tag">ComfyUI</span>
|
|
<span class="skill-tag">After Effects</span>
|
|
<span class="skill-tag">Photoshop</span>
|
|
<span class="skill-tag">Deep Compositing</span>
|
|
<span class="skill-tag">Live Action VFX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3D -->
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
|
|
<i data-lucide="box" class="w-4 h-4 text-brand-accent"></i> 3D Generalist
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="skill-tag">Houdini</span>
|
|
<span class="skill-tag">Blender</span>
|
|
<span class="skill-tag">Maya</span>
|
|
<span class="skill-tag">USD</span>
|
|
<span class="skill-tag">Solaris/Karma</span>
|
|
<span class="skill-tag">Unreal Engine</span>
|
|
<span class="skill-tag">Substance</span>
|
|
<span class="skill-tag">Procedural Gen</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI/ML -->
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
|
|
<i data-lucide="cpu" class="w-4 h-4 text-brand-accent"></i> AI/ML Integration
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="skill-tag bg-brand-accent/10 border-brand-accent/50 text-brand-accent">Stable
|
|
Diffusion</span>
|
|
<span class="skill-tag">LoRA Training</span>
|
|
<span class="skill-tag">Dataset Prep</span>
|
|
<span class="skill-tag">Synthetic Data</span>
|
|
<span class="skill-tag">Prompt Engineering</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dev -->
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
|
|
<i data-lucide="code" class="w-4 h-4 text-brand-accent"></i> Development
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="skill-tag">Python</span>
|
|
<span class="skill-tag">JavaScript</span>
|
|
<span class="skill-tag">React</span>
|
|
<span class="skill-tag">Docker</span>
|
|
<span class="skill-tag">Linux</span>
|
|
<span class="skill-tag">Pipeline Dev</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer / Contact -->
|
|
<footer class="container mx-auto px-6 lg:px-12 py-32 relative overflow-hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
|
|
<div>
|
|
<h2
|
|
class="text-6xl md:text-8xl font-bold uppercase leading-none tracking-tighter mb-8 text-white group cursor-pointer">
|
|
Let's<br>
|
|
<span
|
|
class="text-stroke group-hover:text-brand-accent transition-colors duration-300">Build</span><br>
|
|
Reality.
|
|
</h2>
|
|
<div class="flex flex-wrap gap-6 mt-12">
|
|
<a href="mailto:nicholai@nicholai.work" class="btn-primary">nicholai@nicholai.work</a>
|
|
<a href="tel:7196604281" class="btn-ghost">719 660 4281</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:text-right">
|
|
<div class="mb-12">
|
|
<p class="text-xs font-bold uppercase text-slate-500 mb-4 tracking-widest">Social Uplink</p>
|
|
<ul class="space-y-2">
|
|
<li><a href="https://nicholai.work"
|
|
class="text-white hover:text-brand-accent text-lg font-mono">nicholai.work</a></li>
|
|
<li><a href="#"
|
|
class="text-white hover:text-brand-accent text-lg font-mono">@nicholai.exe</a></li>
|
|
<li><a href="#" class="text-white hover:text-brand-accent text-lg font-mono">LinkedIn</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex justify-end items-end gap-2 text-[10px] text-slate-600 font-mono uppercase">
|
|
<span>© 2025 Nicholai Vogel</span>
|
|
<span>/</span>
|
|
<span>V7 SYSTEM</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative huge text bg -->
|
|
<div class="absolute -bottom-10 left-0 w-full text-center pointer-events-none opacity-5">
|
|
<span class="text-[15rem] font-bold text-white uppercase leading-none whitespace-nowrap">VOGEL</span>
|
|
</div>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<style>
|
|
/* Component Classes */
|
|
.skill-tag {
|
|
@apply text-[10px] font-mono font-bold uppercase tracking-wider px-2 py-2 border border-slate-700 text-slate-400 hover:border-brand-accent hover:text-white transition-colors cursor-default select-none;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-brand-accent text-brand-dark px-8 py-4 text-xs font-bold uppercase tracking-widest hover:bg-white transition-colors inline-block;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply border border-slate-600 text-white px-8 py-4 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/5 transition-colors inline-block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Icons
|
|
lucide.createIcons();
|
|
|
|
// Clock
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleTimeString('en-US', {hour12: false, timeZone: 'America/Denver'});
|
|
document.getElementById('clock').textContent = timeString + " MST";
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
|
|
// Custom Cursor Logic
|
|
const cursorDot = document.querySelector('.cursor-dot');
|
|
const cursorOutline = document.querySelector('.cursor-outline');
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
const posX = e.clientX;
|
|
const posY = e.clientY;
|
|
|
|
// Dot follows instantly
|
|
cursorDot.style.left = `${posX}px`;
|
|
cursorDot.style.top = `${posY}px`;
|
|
|
|
// Outline follows with slight delay (handled by CSS transition, we just set position)
|
|
// But for smoother JS animation:
|
|
cursorOutline.animate({
|
|
left: `${posX}px`,
|
|
top: `${posY}px`
|
|
}, {duration: 500, fill: "forwards"});
|
|
});
|
|
|
|
// Intersection Observer for Reveal Animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: "0px"
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('active');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.reveal-text').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|