Nicholai
ff01d99d35
- Remove scanline, video, and grid overlays in light mode for higher contrast. - Add global style rules to hide overlays when data-theme="light". - Update FeaturedProject component class names for consistent styling. - Refactor contact page header: add branding elements, adjust spacing, remove redundant borders. - Simplify form label markup and adjust size for better readability. Hubert The Eunuch
186 lines
9.6 KiB
Plaintext
186 lines
9.6 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">
|
|
<!-- Industrial Scanlines -->
|
|
<div class="project-scanlines absolute inset-0 z-1 pointer-events-none opacity-[0.05] bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,112,0.06))] bg-[length:100%_2px,3px_100%]"></div>
|
|
|
|
<video
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
class="w-full h-full object-cover opacity-60 transition-opacity duration-700 group-hover:opacity-100"
|
|
>
|
|
<source src={videoUrl} type="video/mp4" />
|
|
</video>
|
|
<!-- Cinematic Letterboxing / Gradient Vignette -->
|
|
<div class="project-video-overlay absolute inset-0 bg-gradient-to-b from-[var(--theme-bg-primary)] via-transparent to-[var(--theme-bg-primary)] pointer-events-none transition-colors duration-500 opacity-80"></div>
|
|
<div class="project-video-overlay absolute inset-0 bg-gradient-to-r from-[var(--theme-bg-primary)] via-transparent to-[var(--theme-bg-primary)] pointer-events-none transition-colors duration-500 opacity-40"></div>
|
|
|
|
<!-- Subtle Grid Overlay -->
|
|
<div class="project-grid absolute inset-0 bg-[linear-gradient(var(--theme-grid-line)_1px,transparent_1px),linear-gradient(90deg,var(--theme-grid-line)_1px,transparent_1px)] bg-[size:100px_100px] pointer-events-none opacity-20"></div>
|
|
|
|
<!-- Technical Telemetry Overlay (Decorative) -->
|
|
<div class="absolute top-1/2 left-6 -translate-y-1/2 hidden lg:flex flex-col gap-12 font-mono text-[9px] text-brand-accent/30 uppercase tracking-[0.4em] [writing-mode:vertical-lr]">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-px h-12 bg-brand-accent/20"></div>
|
|
<span>SIGNAL_STRENGTH: OPTIMAL</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-px h-12 bg-brand-accent/20"></div>
|
|
<span>BUFFERING: COMPLETE</span>
|
|
</div>
|
|
</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-20 pointer-events-none">
|
|
|
|
<!-- TOP HUD: Telemetry Data -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-12 border-t border-brand-accent/20 pt-8 animate-on-scroll slide-up">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-1.5 h-1.5 bg-brand-accent animate-pulse"></div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-[0.2em] block">SYS.ROLE</span>
|
|
</div>
|
|
<span class="text-xl md:text-2xl font-bold text-[var(--theme-text-primary)] uppercase tracking-tight leading-tight block">{role}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-[0.2em] block mb-2 opacity-60">SYS.CLIENT</span>
|
|
<span class="text-xl md:text-2xl font-bold text-[var(--theme-text-primary)] uppercase tracking-tight leading-tight block">{client}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-[0.2em] block mb-2 opacity-60">SYS.YEAR</span>
|
|
<span class="text-xl md:text-2xl font-bold text-[var(--theme-text-primary)] uppercase tracking-tight leading-tight block">{year}</span>
|
|
</div>
|
|
<div class="text-left md:text-left">
|
|
<span class="text-[9px] font-mono text-brand-accent uppercase tracking-[0.2em] block mb-2 opacity-60">SYS.REGION</span>
|
|
<span class="text-xl md:text-2xl font-bold text-[var(--theme-text-primary)] uppercase tracking-tight leading-tight block">{region}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CENTER AREA: Vertical Label -->
|
|
<div class="flex-1 relative flex items-center min-h-[100px] lg:min-h-0">
|
|
<div class="hidden lg:block absolute -left-12 origin-left -rotate-90">
|
|
<h3 class="text-[10px] font-mono font-bold text-brand-accent uppercase tracking-[0.6em] opacity-40">
|
|
CASE_STUDY_REF. {projectTitle.replace(/\s+/g, '_').toUpperCase()}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOTTOM HUD: Project Details & Stats -->
|
|
<div class="border-b border-brand-accent/20 pb-8 animate-on-scroll slide-up stagger-1">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:items-end">
|
|
|
|
<!-- Title & Description -->
|
|
<div class="lg:col-span-8">
|
|
<h2 class="text-4xl md:text-7xl lg:text-8xl font-bold uppercase text-[var(--theme-text-primary)] mb-6 tracking-tighter leading-[0.85]">
|
|
{projectTitle} <span class="block text-brand-accent">{projectSubtitle}</span>
|
|
</h2>
|
|
<p class="text-[var(--theme-text-secondary)] font-light max-w-xl text-sm md:text-lg leading-relaxed border-l border-brand-accent/30 pl-6">
|
|
{projectDescription}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Technical Stats (Mini-Table) -->
|
|
<div class="lg:col-span-4 mt-8 lg:mt-0">
|
|
<div class="grid grid-cols-1 gap-6 font-mono">
|
|
{stats.map((stat, idx) => (
|
|
<div class="relative group/stat">
|
|
<div class="flex justify-between items-baseline mb-2 gap-4">
|
|
<span class="text-[var(--theme-text-muted)] text-[9px] uppercase tracking-[0.2em] truncate">0{idx + 1}. {stat.label}</span>
|
|
<span class="text-brand-accent font-bold text-base md:text-lg whitespace-nowrap">{stat.value}</span>
|
|
</div>
|
|
<div class="w-full h-px bg-[var(--theme-border-primary)] relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-brand-accent w-1/3 transform -translate-x-full group-hover:translate-x-[300%] transition-transform duration-[2s] ease-in-out"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div class="mt-10 flex justify-end">
|
|
<div class="flex items-center gap-3 group/btn">
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.2em] text-brand-accent">UPLINK.PROJECT_DETAIL</span>
|
|
<div class="w-8 h-8 flex items-center justify-center border border-brand-accent/30 text-brand-accent group-hover/btn:bg-brand-accent group-hover/btn:text-brand-dark transition-all duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<style>
|
|
/* Clean light mode: zero overlays, full contrast video, white high-contrast text */
|
|
:global([data-theme="light"]) .project-video-overlay,
|
|
:global([data-theme="light"]) .project-scanlines,
|
|
:global([data-theme="light"]) .project-grid {
|
|
display: none !important;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work video {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work .text-\[var\(--theme-text-primary\)\],
|
|
:global([data-theme="light"]) #work .text-\[var\(--theme-text-secondary\)\],
|
|
:global([data-theme="light"]) #work .text-\[var\(--theme-text-muted\)\],
|
|
:global([data-theme="light"]) #work p,
|
|
:global([data-theme="light"]) #work span:not(.text-brand-accent) {
|
|
color: #ffffff !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work .text-\[var\(--theme-text-secondary\)\] {
|
|
font-weight: 400;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work .text-\[var\(--theme-text-muted\)\] {
|
|
font-weight: 600;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work .opacity-60,
|
|
:global([data-theme="light"]) #work .opacity-40,
|
|
:global([data-theme="light"]) #work .text-brand-accent\/30,
|
|
:global([data-theme="light"]) #work .text-brand-accent\/40,
|
|
:global([data-theme="light"]) #work .text-brand-accent\/60 {
|
|
opacity: 1 !important;
|
|
color: var(--color-brand-accent) !important;
|
|
}
|
|
|
|
:global([data-theme="light"]) #work .border-brand-accent\/20,
|
|
:global([data-theme="light"]) #work .border-t,
|
|
:global([data-theme="light"]) #work .border-b {
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
</style>
|