74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
|
import { projects, projectsPage } from "@/data/projects";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export default function ProjectsPage() {
|
|
return (
|
|
<main className="min-h-screen bg-deep-space">
|
|
{/* Header */}
|
|
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
<p className="section-label">{projectsPage.pageLabel}</p>
|
|
<h1
|
|
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
>
|
|
{projectsPage.pageTitle}
|
|
</h1>
|
|
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
{projectsPage.subtitle}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Project Grid */}
|
|
<section className="py-20 md:py-32 px-[5vw]">
|
|
<div className="max-w-[1200px] mx-auto space-y-16">
|
|
{projects.map((project) => (
|
|
<div
|
|
key={project.id}
|
|
className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 items-start border-t border-warm-grey pt-12"
|
|
>
|
|
<div className="border border-warm-grey overflow-hidden group/image">
|
|
<img
|
|
src={project.image}
|
|
alt={project.title}
|
|
className="w-full h-auto group-hover/image:scale-105 transition-transform duration-700 ease-out"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div className="space-y-6">
|
|
<div className="flex flex-wrap gap-2">
|
|
{project.tags.map((tag) => (
|
|
<span key={tag} className="chip">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<h2 className="font-display font-semibold text-text-primary text-3xl tracking-tight">
|
|
{project.title}
|
|
</h2>
|
|
<p className="text-text-secondary leading-relaxed">
|
|
{project.description}
|
|
</p>
|
|
<p className="text-text-secondary leading-relaxed">
|
|
{projectsPage.detailText}
|
|
</p>
|
|
<Link
|
|
href={project.link}
|
|
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
|
>
|
|
<span className="text-link">{projectsPage.linkText}</span>
|
|
<ArrowRight
|
|
size={18}
|
|
className="group-hover:translate-x-1 transition-transform"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|