97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
|
import { projects } from "@/data/projects";
|
||
|
|
import { ArrowRight } from "lucide-react";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Link from "next/link";
|
||
|
|
import ScrollReveal from "./ScrollReveal";
|
||
|
|
|
||
|
|
export default function Projects() {
|
||
|
|
return (
|
||
|
|
<section id="projects" className="py-28 md:py-36 bg-surface noise-overlay">
|
||
|
|
<div className="relative z-10 max-w-6xl mx-auto px-6">
|
||
|
|
{/* Section header */}
|
||
|
|
<ScrollReveal>
|
||
|
|
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-16">
|
||
|
|
<div>
|
||
|
|
<div className="w-10 h-px bg-accent mb-6 glow-accent-sm" />
|
||
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
|
||
|
|
Projects
|
||
|
|
</p>
|
||
|
|
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight">
|
||
|
|
Selected <span className="text-gradient">work.</span>
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<p className="text-white/55 mt-4 md:mt-0 max-w-md text-[15px] leading-relaxed">
|
||
|
|
Broadcast facility design and systems integration for enterprise,
|
||
|
|
sports, aerospace, and financial services clients.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</ScrollReveal>
|
||
|
|
|
||
|
|
{/* Project grid */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||
|
|
{projects.map((project, index) => (
|
||
|
|
<ScrollReveal
|
||
|
|
key={project.slug}
|
||
|
|
delay={index * 60}
|
||
|
|
className={index === 0 ? "md:col-span-2" : ""}
|
||
|
|
>
|
||
|
|
<Link
|
||
|
|
href={`/projects/${project.slug}`}
|
||
|
|
className="group relative block bg-surface-card rounded-xl overflow-hidden border border-border hover:border-border-hover transition-all duration-400 border-glow"
|
||
|
|
>
|
||
|
|
{/* Thumbnail image */}
|
||
|
|
<div
|
||
|
|
className={`relative overflow-hidden ${
|
||
|
|
index === 0 ? "h-64 md:h-80" : "h-48 md:h-56"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src={project.thumbnail}
|
||
|
|
alt={project.title}
|
||
|
|
fill
|
||
|
|
className="object-cover group-hover:scale-[1.03] transition-transform duration-700 ease-out"
|
||
|
|
sizes={index === 0 ? "100vw" : "50vw"}
|
||
|
|
/>
|
||
|
|
{/* Gradient overlay */}
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-surface-card via-black/30 to-transparent" />
|
||
|
|
{/* Hover tint */}
|
||
|
|
<div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-400" />
|
||
|
|
|
||
|
|
{/* Category badge on image */}
|
||
|
|
<div className="absolute top-4 left-4">
|
||
|
|
<span className="px-3 py-1.5 text-[10px] font-mono tracking-wider uppercase bg-black/60 backdrop-blur-sm text-white/90 rounded-md border border-white/10">
|
||
|
|
{project.category}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="p-6 md:p-7">
|
||
|
|
<div className="flex items-center gap-2 mb-3">
|
||
|
|
<span className="font-mono text-[11px] text-white/45">
|
||
|
|
{project.year}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-lg md:text-xl font-semibold text-white mb-2.5 group-hover:text-accent transition-colors duration-300">
|
||
|
|
{project.client}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-[13.5px] text-white/55 leading-relaxed mb-4 line-clamp-2">
|
||
|
|
{project.summary}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="flex items-center text-[13px] font-medium text-accent translate-x-0 group-hover:translate-x-1 transition-transform duration-300">
|
||
|
|
View Case Study
|
||
|
|
<ArrowRight size={14} className="ml-1.5" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</ScrollReveal>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|