288 lines
16 KiB
Plaintext
288 lines
16 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import { SITE_TITLE } from '../consts';
|
|
|
|
const pageTitle = `Contact | ${SITE_TITLE}`;
|
|
---
|
|
|
|
<BaseLayout title={pageTitle} description="Get in touch for collaboration or inquiries." usePadding={false}>
|
|
|
|
<!-- Background Grid (Optional, low opacity) -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none">
|
|
<div class="w-full h-full grid grid-cols-12 gap-4 opacity-[0.03]">
|
|
{Array.from({ length: 12 }).map((_) => (
|
|
<div class="h-full border-r border-white"></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<section class="relative z-10 min-h-screen flex flex-col pt-32 lg:pt-48 pb-20 px-6 lg:px-12">
|
|
|
|
<!-- Page Header -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20 lg:mb-32 border-b border-white/10 pb-12">
|
|
<div class="lg:col-span-8">
|
|
<h1 class="text-6xl md:text-8xl lg:text-9xl font-bold uppercase tracking-tighter leading-[0.85] text-white mb-8">
|
|
<span class="block animate-on-scroll slide-up">Project</span>
|
|
<span class="block text-brand-accent animate-on-scroll slide-up stagger-1">Inquiry</span>
|
|
</h1>
|
|
</div>
|
|
<div class="lg:col-span-4 flex flex-col justify-end">
|
|
<p class="font-mono text-sm text-slate-400 leading-relaxed mb-8 border-l border-brand-accent pl-6 animate-on-scroll fade-in stagger-2">
|
|
Available for freelance commissions and studio collaborations.
|
|
Currently booking Q3 2026.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24 flex-grow">
|
|
|
|
<!-- Left Column: Contact Form -->
|
|
<div class="lg:col-span-7 animate-on-scroll slide-up stagger-3">
|
|
<div class="mb-8 flex items-center gap-3">
|
|
<span class="w-2 h-2 bg-brand-accent rounded-full animate-pulse"></span>
|
|
<span class="font-mono text-xs text-brand-accent uppercase tracking-widest">Transmission Uplink</span>
|
|
</div>
|
|
|
|
<form class="space-y-12" action="#" method="POST">
|
|
<div class="group relative">
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
class="block w-full bg-transparent border-b border-white/20 py-4 text-xl text-white focus:outline-none focus:border-brand-accent transition-colors duration-300 placeholder-transparent peer"
|
|
placeholder="Name"
|
|
required
|
|
/>
|
|
<label for="name" class="absolute left-0 top-4 text-slate-500 text-sm font-mono uppercase tracking-widest transition-all duration-300 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-brand-accent peer-valid:-top-6 peer-valid:text-xs peer-valid:text-slate-400 pointer-events-none">
|
|
/// Identification Name
|
|
</label>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
class="block w-full bg-transparent border-b border-white/20 py-4 text-xl text-white focus:outline-none focus:border-brand-accent transition-colors duration-300 placeholder-transparent peer"
|
|
placeholder="Email"
|
|
required
|
|
/>
|
|
<label for="email" class="absolute left-0 top-4 text-slate-500 text-sm font-mono uppercase tracking-widest transition-all duration-300 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-brand-accent peer-valid:-top-6 peer-valid:text-xs peer-valid:text-slate-400 pointer-events-none">
|
|
/// Return Address
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Custom Dropdown -->
|
|
<div class="group relative" id="custom-select">
|
|
<input type="hidden" name="subject" id="subject-input" required>
|
|
|
|
<button type="button" id="select-trigger" class="block w-full text-left bg-transparent border-b border-white/20 py-4 text-xl text-white focus:outline-none focus:border-brand-accent transition-colors duration-300 flex justify-between items-center group-hover:border-white/40">
|
|
<span id="select-value" class="text-transparent">Select</span> <!-- Hidden placeholder text to keep height -->
|
|
<div class="text-brand-accent transform transition-transform duration-300" id="select-arrow">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
</div>
|
|
</button>
|
|
|
|
<label id="select-label" class="absolute left-0 top-4 text-slate-500 text-sm font-mono uppercase tracking-widest transition-all duration-300 pointer-events-none">
|
|
/// Subject Protocol
|
|
</label>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div id="select-options" class="absolute left-0 top-full w-full bg-brand-dark border border-white/20 shadow-2xl z-50 hidden opacity-0 transform translate-y-2 transition-all duration-200 origin-top mt-2">
|
|
<div class="p-1">
|
|
<div class="option px-5 py-4 hover:bg-white/5 cursor-pointer text-white text-lg font-light transition-colors flex items-center gap-3 group/option" data-value="project">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-accent opacity-0 group-hover/option:opacity-100 transition-opacity"></span>
|
|
New Project Commission
|
|
</div>
|
|
<div class="option px-5 py-4 hover:bg-white/5 cursor-pointer text-white text-lg font-light transition-colors flex items-center gap-3 group/option" data-value="collab">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-accent opacity-0 group-hover/option:opacity-100 transition-opacity"></span>
|
|
Studio Collaboration
|
|
</div>
|
|
<div class="option px-5 py-4 hover:bg-white/5 cursor-pointer text-white text-lg font-light transition-colors flex items-center gap-3 group/option" data-value="press">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-accent opacity-0 group-hover/option:opacity-100 transition-opacity"></span>
|
|
Press / Media
|
|
</div>
|
|
<div class="option px-5 py-4 hover:bg-white/5 cursor-pointer text-white text-lg font-light transition-colors flex items-center gap-3 group/option" data-value="other">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-brand-accent opacity-0 group-hover/option:opacity-100 transition-opacity"></span>
|
|
Other Inquiry
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="4"
|
|
class="block w-full bg-transparent border-b border-white/20 py-4 text-xl text-white focus:outline-none focus:border-brand-accent transition-colors duration-300 placeholder-transparent peer resize-none"
|
|
placeholder="Message"
|
|
required
|
|
></textarea>
|
|
<label for="message" class="absolute left-0 top-4 text-slate-500 text-sm font-mono uppercase tracking-widest transition-all duration-300 peer-focus:-top-6 peer-focus:text-xs peer-focus:text-brand-accent peer-valid:-top-6 peer-valid:text-xs peer-valid:text-slate-400 pointer-events-none">
|
|
/// Message Data
|
|
</label>
|
|
</div>
|
|
|
|
<div class="pt-8">
|
|
<button type="submit" class="group relative inline-flex items-center justify-center gap-4 px-8 py-4 bg-transparent border border-white/20 hover:border-brand-accent hover:bg-brand-accent/5 transition-all duration-300">
|
|
<span class="font-mono text-xs font-bold uppercase tracking-widest text-white group-hover:text-brand-accent transition-colors">Transmit Message</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500 group-hover:text-brand-accent group-hover:translate-x-1 transition-all"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Column: System Status / Info -->
|
|
<div class="lg:col-span-5 space-y-16 animate-on-scroll slide-left stagger-4">
|
|
|
|
<!-- Data Block 1 -->
|
|
<div class="relative pl-6 border-l border-white/10">
|
|
<h3 class="font-mono text-xs text-slate-500 uppercase tracking-widest mb-4">Direct Link</h3>
|
|
<a href="mailto:nicholai@nicholai.work" class="text-2xl md:text-3xl font-bold text-white hover:text-brand-accent transition-colors break-all">
|
|
nicholai@nicholai.work
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Data Block 2 -->
|
|
<div class="relative pl-6 border-l border-white/10">
|
|
<h3 class="font-mono text-xs text-slate-500 uppercase tracking-widest mb-4">Coordinates</h3>
|
|
<p class="text-xl text-white font-light">
|
|
Colorado Springs, CO<br>
|
|
<span class="text-slate-500 text-base">United States</span>
|
|
</p>
|
|
<div class="mt-4 font-mono text-xs text-brand-accent">
|
|
38.8339° N, 104.8214° W
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Block 3 -->
|
|
<div class="relative pl-6 border-l border-white/10">
|
|
<h3 class="font-mono text-xs text-slate-500 uppercase tracking-widest mb-4">Social Feed</h3>
|
|
<ul class="space-y-4">
|
|
<li>
|
|
<a href="#" class="flex items-center gap-4 group">
|
|
<span class="text-slate-400 group-hover:text-white transition-colors text-lg">Instagram</span>
|
|
<svg class="w-4 h-4 text-slate-600 group-hover:text-brand-accent transition-colors transform group-hover:translate-x-1 group-hover:-translate-y-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="flex items-center gap-4 group">
|
|
<span class="text-slate-400 group-hover:text-white transition-colors text-lg">LinkedIn</span>
|
|
<svg class="w-4 h-4 text-slate-600 group-hover:text-brand-accent transition-colors transform group-hover:translate-x-1 group-hover:-translate-y-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="flex items-center gap-4 group">
|
|
<span class="text-slate-400 group-hover:text-white transition-colors text-lg">Vimeo</span>
|
|
<svg class="w-4 h-4 text-slate-600 group-hover:text-brand-accent transition-colors transform group-hover:translate-x-1 group-hover:-translate-y-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
/* Custom autofill styles to match dark theme */
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover,
|
|
textarea:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: white;
|
|
-webkit-box-shadow: 0 0 0px 1000px #0B0D11 inset;
|
|
transition: background-color 5000s ease-in-out 0s;
|
|
}
|
|
|
|
/* Label active state */
|
|
.label-active {
|
|
top: -1.5rem !important;
|
|
font-size: 0.75rem !important;
|
|
color: #94A3B8 !important;
|
|
}
|
|
|
|
/* Dropdown open state */
|
|
.dropdown-open #select-arrow {
|
|
transform: rotate(180deg);
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const selectContainer = document.getElementById('custom-select');
|
|
const selectTrigger = document.getElementById('select-trigger');
|
|
const selectOptions = document.getElementById('select-options');
|
|
const selectValue = document.getElementById('select-value');
|
|
const hiddenInput = document.getElementById('subject-input') as HTMLInputElement;
|
|
const selectLabel = document.getElementById('select-label');
|
|
const options = document.querySelectorAll('.option');
|
|
const arrow = document.getElementById('select-arrow');
|
|
|
|
if (selectTrigger && selectOptions && selectValue && hiddenInput && selectLabel) {
|
|
|
|
// Toggle Dropdown
|
|
selectTrigger.addEventListener('click', () => {
|
|
const isOpen = !selectOptions.classList.contains('hidden');
|
|
|
|
if (isOpen) {
|
|
closeDropdown();
|
|
} else {
|
|
openDropdown();
|
|
}
|
|
});
|
|
|
|
// Option Selection
|
|
options.forEach(option => {
|
|
option.addEventListener('click', (e) => {
|
|
const target = e.currentTarget as HTMLElement;
|
|
const value = target.dataset.value || '';
|
|
const text = target.innerText;
|
|
|
|
// Update UI
|
|
selectValue.textContent = text;
|
|
selectValue.classList.remove('text-transparent');
|
|
selectValue.classList.add('text-white');
|
|
|
|
// Update Data
|
|
hiddenInput.value = value;
|
|
|
|
// Update Label Style
|
|
selectLabel.classList.add('label-active');
|
|
selectLabel.classList.add('text-brand-accent'); // Highlight when selected
|
|
|
|
closeDropdown();
|
|
});
|
|
});
|
|
|
|
// Close clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (selectContainer && !selectContainer.contains(e.target as Node)) {
|
|
closeDropdown();
|
|
}
|
|
});
|
|
|
|
function openDropdown() {
|
|
selectOptions?.classList.remove('hidden');
|
|
// Small delay for opacity transition
|
|
requestAnimationFrame(() => {
|
|
selectOptions?.classList.remove('opacity-0', 'translate-y-2');
|
|
});
|
|
selectContainer?.classList.add('dropdown-open');
|
|
}
|
|
|
|
function closeDropdown() {
|
|
selectOptions?.classList.add('opacity-0', 'translate-y-2');
|
|
setTimeout(() => {
|
|
selectOptions?.classList.add('hidden');
|
|
}, 200);
|
|
selectContainer?.classList.remove('dropdown-open');
|
|
}
|
|
}
|
|
</script>
|