Nicholai
2ca66ccc6d
- Refactor component styles to use CSS custom properties for colors and backgrounds. - Replace hard‑coded Tailwind classes with theme variables across BlogCard, BlogFilters, Footer, GridOverlay, Navigation, PostNavigation, ReadingProgress, RelatedPosts, TableOfContents, ThemeToggle, sections, layouts, pages, and global.css. - Add ThemeToggle component for user‑controlled theme switching. - Update global styles to define new theme variables. - Ensure all components respect theme changes and maintain accessibility. Hubert The Eunuch
151 lines
9.0 KiB
Plaintext
151 lines
9.0 KiB
Plaintext
---
|
|
interface Props {
|
|
sectionTitle: string;
|
|
sectionSubtitle: string;
|
|
sectionLabel: string;
|
|
description: string;
|
|
entries: Array<{
|
|
systemId: string;
|
|
status: string;
|
|
dates: string;
|
|
company: string;
|
|
role: string;
|
|
tags?: string[];
|
|
description: string;
|
|
achievements?: Array<{
|
|
label: string;
|
|
text: string;
|
|
}>;
|
|
link?: {
|
|
url: string;
|
|
text: string;
|
|
};
|
|
}>;
|
|
}
|
|
|
|
const { sectionTitle, sectionSubtitle, sectionLabel, description, entries } = Astro.props;
|
|
---
|
|
<section id="experience" class="w-full py-32 border-t border-[var(--theme-border-primary)] bg-[var(--theme-bg-primary)] overflow-hidden">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<!-- Section Header -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-24 lg:mb-32">
|
|
<div class="lg:col-span-8 group cursor-default">
|
|
<div class="flex items-center gap-3 mb-6 intro-element animate-on-scroll fade-in">
|
|
<div class="w-2 h-2 bg-brand-accent animate-pulse"></div>
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.3em] text-brand-accent">SYS.RECORDS /// WORK_HISTORY</span>
|
|
</div>
|
|
<h2 class="text-5xl md:text-7xl lg:text-8xl font-bold uppercase tracking-tighter leading-[0.85] text-[var(--theme-text-primary)]">
|
|
<span class="block">{sectionTitle}</span>
|
|
<span class="block text-brand-accent">
|
|
{sectionSubtitle}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
<div class="lg:col-span-4 flex flex-col justify-end">
|
|
<div class="font-mono text-[10px] text-[var(--theme-text-subtle)] uppercase tracking-widest mb-4 animate-on-scroll fade-in stagger-2 flex items-center gap-2">
|
|
<span class="w-8 h-px bg-brand-accent/30"></span>
|
|
DATA_ARCHIVE_V7
|
|
</div>
|
|
<p class="text-[var(--theme-text-secondary)] text-lg leading-relaxed animate-on-scroll slide-up stagger-2 border-l border-brand-accent/30 pl-6">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experience List -->
|
|
<div class="w-full border-t border-[var(--theme-border-primary)]">
|
|
{entries.map((entry, index) => (
|
|
<div class="group relative border-b border-[var(--theme-border-primary)] hover:bg-white/[0.01] transition-all duration-500 overflow-hidden">
|
|
<!-- Industrial Side Accent -->
|
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-brand-accent transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out"></div>
|
|
|
|
<a
|
|
href={entry.link?.url || '#'}
|
|
class="block py-12 lg:py-16 px-4 lg:px-8"
|
|
>
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
|
<!-- Left: Header & Role -->
|
|
<div class="lg:col-span-4">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<span class="font-mono text-xs text-brand-accent opacity-50 group-hover:opacity-100 transition-opacity">[{entry.systemId || `EXP.0${index + 1}`}]</span>
|
|
<div class="flex items-center gap-2">
|
|
<div class={`w-1.5 h-1.5 rounded-full ${index === 0 ? 'bg-brand-accent animate-pulse' : 'bg-[var(--theme-text-subtle)]'}`}></div>
|
|
<span class="font-mono text-[9px] uppercase tracking-widest text-[var(--theme-text-muted)]">{index === 0 ? 'PRODUCTION_LIVE' : 'PRODUCTION_WRAP'}</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--theme-text-primary)] uppercase tracking-tighter group-hover:text-brand-accent transition-colors duration-300 mb-4">
|
|
{entry.company}
|
|
</h3>
|
|
<p class="font-mono text-xs uppercase tracking-[0.2em] text-[var(--theme-text-secondary)]">
|
|
{entry.role}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Middle: Metadata -->
|
|
<div class="lg:col-span-3 space-y-8 pt-2">
|
|
<div>
|
|
<div class="text-[10px] font-mono uppercase tracking-[0.2em] text-[var(--theme-text-muted)] mb-3 flex items-center gap-2">
|
|
<span class="text-brand-accent">/</span> DUR.TIMELINE
|
|
</div>
|
|
<div class="font-mono text-sm text-[var(--theme-text-primary)]">{entry.dates}</div>
|
|
</div>
|
|
|
|
{entry.tags && entry.tags.length > 0 && (
|
|
<div>
|
|
<div class="text-[10px] font-mono uppercase tracking-[0.2em] text-[var(--theme-text-muted)] mb-3 flex items-center gap-2">
|
|
<span class="text-brand-accent">/</span> PIP.TOOLSET
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{entry.tags.map(tag => (
|
|
<span class="text-[9px] font-mono uppercase tracking-wider px-2 py-1 border border-[var(--theme-border-secondary)] text-[var(--theme-text-muted)] group-hover:border-brand-accent/30 group-hover:text-[var(--theme-text-secondary)] transition-all">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<!-- Right: Content -->
|
|
<div class="lg:col-span-5 pt-2">
|
|
<div class="text-[10px] font-mono uppercase tracking-[0.2em] text-[var(--theme-text-muted)] mb-4 flex items-center gap-2">
|
|
<span class="text-brand-accent">/</span> LOG.PRODUCTION_MANIFEST
|
|
</div>
|
|
<p class="text-[var(--theme-text-secondary)] leading-relaxed mb-8 group-hover:text-[var(--theme-text-primary)] transition-colors duration-300">
|
|
{entry.description}
|
|
</p>
|
|
|
|
{entry.achievements && entry.achievements.length > 0 && (
|
|
<div class="space-y-6">
|
|
{entry.achievements.map((achievement) => (
|
|
<div class="relative pl-6 py-1 group/item">
|
|
<!-- Minimalist bullet -->
|
|
<div class="absolute left-0 top-3 w-3 h-px bg-brand-accent/40 group-hover/item:w-5 transition-all"></div>
|
|
<div class="text-[9px] font-mono uppercase tracking-widest text-brand-accent/60 mb-1">
|
|
{achievement.label}
|
|
</div>
|
|
<div class="text-sm text-[var(--theme-text-secondary)] group-hover:text-[var(--theme-text-primary)] transition-colors">
|
|
{achievement.text}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{entry.link && (
|
|
<div class="mt-8 flex items-center gap-2 font-mono text-[10px] text-brand-accent uppercase tracking-widest opacity-0 group-hover:opacity-100 translate-x-[-10px] group-hover:translate-x-0 transition-all duration-500">
|
|
<span>View Project</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|