Nicholai
7632e48b9d
- Create structured projects collection with schema - Add new dev page and navigation link - Refactor hero animation for view transitions - Update project descriptions and tags - Add new projects: Summit Painting, United Tattoos, etc. - Trapped in endless work, despise this commit Hubert The Eunuch
162 lines
11 KiB
Plaintext
162 lines
11 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import { SITE_TITLE } from '../consts';
|
|
|
|
// Fetch all projects sorted by order
|
|
const allProjects = (await getCollection('projects')).sort(
|
|
(a, b) => a.data.order - b.data.order,
|
|
);
|
|
|
|
const pageTitle = `Dev | ${SITE_TITLE}`;
|
|
---
|
|
|
|
<BaseLayout title={pageTitle} description="Development projects and system architecture.">
|
|
<!-- Global Background Elements -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none">
|
|
<div class="absolute inset-0 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%] opacity-[0.04]"></div>
|
|
<div class="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-10"></div>
|
|
</div>
|
|
|
|
<!-- Page Hero -->
|
|
<section class="relative z-10 px-6 lg:px-12 pt-32 lg:pt-48 pb-20 border-b border-[var(--theme-border-primary)]">
|
|
<!-- Back Navigation -->
|
|
<div class="absolute top-12 lg:top-24 left-6 lg:left-12">
|
|
<a href="/" class="inline-flex items-center gap-3 text-xs font-mono font-bold uppercase tracking-widest text-[var(--theme-text-muted)] hover:text-brand-accent transition-colors duration-300 group">
|
|
<span class="text-brand-accent group-hover:-translate-x-1 transition-transform duration-300"><</span>
|
|
<span>RETURN_TO_HOME</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex items-center gap-3 mb-8 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.DEV /// INDEX</span>
|
|
</div>
|
|
<h1 class="text-6xl md:text-8xl lg:text-9xl font-bold uppercase tracking-tighter leading-[0.85] mb-12 animate-on-scroll slide-up">
|
|
<span class="block text-[var(--theme-text-primary)]">DEV</span>
|
|
<span class="block text-brand-accent">LOG</span>
|
|
</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 animate-on-scroll slide-up stagger-1">
|
|
<div class="lg:col-span-8">
|
|
<p class="text-[var(--theme-text-secondary)] text-lg md:text-xl font-light leading-relaxed border-l border-brand-accent/30 pl-6 max-w-2xl">
|
|
Deploying scalable web solutions and high-performance applications.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projects Grid -->
|
|
<section class="relative z-10 py-24 container mx-auto px-6 lg:px-12">
|
|
<div class="grid grid-cols-1 gap-24">
|
|
{allProjects.map((project, index) => (
|
|
<article class={`group relative border border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)] overflow-hidden flex flex-col lg:flex-row animate-on-scroll slide-up stagger-${(index % 4) + 1} min-h-[600px]`}>
|
|
|
|
<!-- Left: Info Panel -->
|
|
<div class="relative z-10 w-full lg:w-1/3 p-8 lg:p-12 flex flex-col justify-between bg-[var(--theme-bg-secondary)]/95 backdrop-blur-sm border-b lg:border-b-0 lg:border-r border-[var(--theme-border-primary)]">
|
|
<!-- Header -->
|
|
<div>
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div class="font-mono text-[10px] text-brand-accent uppercase tracking-[0.2em] flex items-center gap-3">
|
|
<span>PRJ.0{project.data.order}</span>
|
|
<span class="w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse"></span>
|
|
<span>LIVE_FEED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-3xl lg:text-5xl font-bold uppercase tracking-tight text-[var(--theme-text-primary)] mb-6 group-hover:text-brand-accent transition-colors duration-300">
|
|
{project.data.title}
|
|
</h2>
|
|
<p class="text-[var(--theme-text-secondary)] text-base leading-relaxed font-light mb-8">
|
|
{project.data.description}
|
|
</p>
|
|
|
|
<!-- Stack -->
|
|
<div class="font-mono text-[10px] text-[var(--theme-text-subtle)] uppercase tracking-[0.2em] mb-4">
|
|
/// STACK_MANIFEST
|
|
</div>
|
|
{project.data.tags && (
|
|
<div class="flex flex-wrap gap-2 mb-8">
|
|
{project.data.tags.map((tag) => (
|
|
<span class="px-3 py-1.5 text-[10px] font-mono uppercase bg-[var(--theme-bg-tertiary)] border border-[var(--theme-border-primary)] text-[var(--theme-text-muted)] group-hover:text-[var(--theme-text-secondary)] group-hover:border-[var(--theme-border-strong)] transition-colors">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<a
|
|
href={project.data.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="w-full flex items-center justify-between px-6 py-4 bg-[var(--theme-hover-bg)] border border-[var(--theme-border-primary)] text-xs font-bold uppercase tracking-widest text-[var(--theme-text-primary)] hover:bg-brand-accent hover:text-brand-dark hover:border-brand-accent transition-all duration-300 group/btn mt-auto"
|
|
>
|
|
<span>Initialize Project</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="square" stroke-linejoin="miter" class="group-hover/btn:translate-x-1 transition-transform">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right: Live Preview (Iframe) -->
|
|
<div class="relative w-full lg:w-2/3 h-[400px] lg:h-auto overflow-hidden bg-[var(--theme-bg-primary)] group-hover:border-brand-accent/50 transition-colors duration-500">
|
|
<!-- Iframe Container with Scale Hack for Desktop View -->
|
|
<div class="w-[200%] h-[200%] origin-top-left transform scale-50 pointer-events-none">
|
|
<iframe
|
|
src={project.data.link}
|
|
class="w-full h-full border-none grayscale-[0.8] group-hover:grayscale-0 transition-all duration-700 opacity-60 group-hover:opacity-100"
|
|
loading="lazy"
|
|
title={`Live preview of ${project.data.title}`}
|
|
></iframe>
|
|
</div>
|
|
|
|
<!-- Scanline Overlay -->
|
|
<div class="absolute inset-0 pointer-events-none z-10 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%] opacity-20"></div>
|
|
|
|
<!-- Vignette -->
|
|
<div class="absolute inset-0 pointer-events-none z-10 shadow-[inset_0_0_100px_rgba(0,0,0,0.8)]"></div>
|
|
|
|
<!-- Hover "Engage" Overlay -->
|
|
<div class="absolute inset-0 z-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
|
<div class="px-6 py-3 bg-brand-accent/10 border border-brand-accent backdrop-blur-md text-brand-accent font-mono text-xs font-bold uppercase tracking-widest">
|
|
Live Connection
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VFX Bridge Section -->
|
|
<section class="relative z-10 py-32 border-t border-[var(--theme-border-primary)] bg-[var(--theme-bg-secondary)]">
|
|
<div class="container mx-auto px-6 lg:px-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
<div class="lg:col-span-7">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.3em] text-brand-accent">/// SECONDARY_SPECIALIZATION</span>
|
|
</div>
|
|
<h2 class="text-4xl md:text-5xl font-bold uppercase text-[var(--theme-text-primary)] mb-6 tracking-tight">
|
|
Visual Effects & <br/> <span class="text-brand-accent">Technical Art</span>
|
|
</h2>
|
|
<p class="text-[var(--theme-text-secondary)] text-lg font-light leading-relaxed max-w-xl">
|
|
Beyond traditional web development, I specialize in high-end VFX production and pipeline automation.
|
|
</p>
|
|
</div>
|
|
<div class="lg:col-span-5 flex justify-end">
|
|
<a href="/#work" class="group relative inline-flex items-center justify-center gap-6 px-10 py-5 bg-brand-accent/5 border border-brand-accent/30 hover:bg-brand-accent hover:border-brand-accent transition-all duration-300">
|
|
<span class="relative z-10 font-mono text-xs font-bold uppercase tracking-[0.2em] text-brand-accent group-hover:text-brand-dark transition-colors">View VFX Portfolio</span>
|
|
<div class="relative z-10 w-8 h-8 flex items-center justify-center border border-brand-accent/20 group-hover:border-brand-dark/30 transition-colors">
|
|
<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" class="text-brand-accent group-hover:text-brand-dark group-hover:translate-x-1 transition-all">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</BaseLayout> |