Update site — significant redesign
This commit is contained in:
parent
835363030c
commit
de1a33bd60
1 changed files with 41 additions and 163 deletions
|
|
@ -10,11 +10,7 @@ export function generateStaticParams() {
|
|||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const project = getProjectBySlug(slug);
|
||||
if (!project) return { title: "Project Not Found" };
|
||||
|
|
@ -42,14 +38,7 @@ export async function generateMetadata({
|
|||
siteName: "Wild Dragon",
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
images: [
|
||||
{
|
||||
url: project.thumbnail,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: `${project.client} — ${project.category}`,
|
||||
},
|
||||
],
|
||||
images: [{ url: project.thumbnail, width: 1200, height: 630, alt: `${project.client} — ${project.category}` }],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
|
|
@ -60,11 +49,7 @@ export async function generateMetadata({
|
|||
};
|
||||
}
|
||||
|
||||
export default async function ProjectPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
export default async function ProjectPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const project = getProjectBySlug(slug);
|
||||
|
||||
|
|
@ -78,39 +63,26 @@ export default async function ProjectPage({
|
|||
name: project.title,
|
||||
description: project.summary,
|
||||
serviceType: project.category,
|
||||
provider: {
|
||||
"@id": "https://www.wilddragon.net/#organization",
|
||||
},
|
||||
provider: { "@id": "https://www.wilddragon.net/#organization" },
|
||||
areaServed: "United States",
|
||||
};
|
||||
|
||||
// Find previous and next projects for navigation
|
||||
const currentIndex = projects.findIndex((p) => p.slug === project.slug);
|
||||
const prevProject = currentIndex > 0 ? projects[currentIndex - 1] : null;
|
||||
const nextProject =
|
||||
currentIndex < projects.length - 1 ? projects[currentIndex + 1] : null;
|
||||
const nextProject = currentIndex < projects.length - 1 ? projects[currentIndex + 1] : null;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-white">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
|
||||
/>
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }} />
|
||||
|
||||
{/* Header bar */}
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-lg shadow-sm py-3.5">
|
||||
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
|
||||
<Link
|
||||
href="/#projects"
|
||||
className="flex items-center gap-2 text-[13px] text-muted hover:text-primary transition-colors duration-200 group"
|
||||
>
|
||||
<Link href="/#projects" className="flex items-center gap-2 text-[13px] text-muted hover:text-primary transition-colors duration-200 group">
|
||||
<ArrowLeft size={15} className="group-hover:-translate-x-0.5 transition-transform duration-200" />
|
||||
Back to Projects
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted hover:text-primary transition-colors duration-200"
|
||||
>
|
||||
<Link href="/" className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted hover:text-primary transition-colors duration-200">
|
||||
Wild Dragon
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -120,19 +92,11 @@ export default async function ProjectPage({
|
|||
<section className="pt-32 pb-16 bg-primary">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="px-3 py-1.5 text-[10px] font-mono tracking-wider uppercase bg-accent/10 text-accent rounded-md">
|
||||
{project.category}
|
||||
</span>
|
||||
<span className="font-mono text-[11px] text-neutral-500">
|
||||
{project.year}
|
||||
</span>
|
||||
<span className="px-3 py-1.5 text-[10px] font-mono tracking-wider uppercase bg-accent/10 text-accent rounded-md">{project.category}</span>
|
||||
<span className="font-mono text-[11px] text-neutral-500">{project.year}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight mb-6">
|
||||
{project.client}
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-neutral-400 max-w-3xl leading-relaxed">
|
||||
{project.summary}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight mb-6">{project.client}</h1>
|
||||
<p className="text-lg md:text-xl text-neutral-400 max-w-3xl leading-relaxed">{project.summary}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -140,14 +104,7 @@ export default async function ProjectPage({
|
|||
<section className="bg-neutral-100">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="relative h-64 md:h-[28rem] overflow-hidden">
|
||||
<Image
|
||||
src={project.thumbnail}
|
||||
alt={`${project.client} — ${project.category} broadcast facility`}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="100vw"
|
||||
priority
|
||||
/>
|
||||
<Image src={project.thumbnail} alt={`${project.client} — ${project.category} broadcast facility`} fill className="object-cover" sizes="100vw" priority />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-white/10 to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -159,43 +116,29 @@ export default async function ProjectPage({
|
|||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
{/* Main content */}
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-2xl font-semibold text-primary mb-8">
|
||||
Overview
|
||||
</h2>
|
||||
<h2 className="text-2xl font-semibold text-primary mb-8">Overview</h2>
|
||||
<div className="space-y-5 text-muted leading-[1.8]">
|
||||
{project.description.map((paragraph: string, i: number) => (
|
||||
<p key={i}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Highlights */}
|
||||
<h3 className="text-lg font-semibold text-primary mt-14 mb-6">
|
||||
Key Highlights
|
||||
</h3>
|
||||
<h3 className="text-lg font-semibold text-primary mt-14 mb-6">Key Highlights</h3>
|
||||
<ul className="space-y-4">
|
||||
{project.highlights.map((highlight: string, i: number) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent mt-2.5 shrink-0" />
|
||||
<span className="text-muted leading-relaxed">
|
||||
{highlight}
|
||||
</span>
|
||||
<span className="text-muted leading-relaxed">{highlight}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-16 p-8 rounded-xl bg-surface-dark border border-neutral-100">
|
||||
<h4 className="text-base font-semibold text-primary mb-3">
|
||||
Interested in a similar project?
|
||||
</h4>
|
||||
<h4 className="text-base font-semibold text-primary mb-3">Interested in a similar project?</h4>
|
||||
<p className="text-sm text-muted mb-5 leading-relaxed">
|
||||
I bring the same engineering discipline and attention to detail to
|
||||
every facility I design. Let's discuss how I can help with your project.
|
||||
I bring the same engineering discipline and attention to detail to every facility I design. Let's discuss how I can help with your project.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:zgaetano@wilddragon.net"
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200"
|
||||
>
|
||||
<a href="mailto:zgaetano@wilddragon.net" className="inline-flex items-center gap-2 px-6 py-2.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200">
|
||||
Get in Touch
|
||||
<ExternalLink size={13} />
|
||||
</a>
|
||||
|
|
@ -205,68 +148,34 @@ export default async function ProjectPage({
|
|||
{/* Sidebar */}
|
||||
<div className="space-y-10">
|
||||
<div>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">
|
||||
Client
|
||||
</h4>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">Client</h4>
|
||||
<p className="text-primary font-medium">{project.client}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">
|
||||
Year
|
||||
</h4>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">Year</h4>
|
||||
<p className="text-primary font-medium">{project.year}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">
|
||||
Scope of Work
|
||||
</h4>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">Scope of Work</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.scope.map((item: string) => (
|
||||
<span
|
||||
key={item}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-neutral-50 border border-neutral-100 text-muted rounded-md"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
<span key={item} className="px-3 py-1.5 text-xs font-medium bg-neutral-50 border border-neutral-100 text-muted rounded-md">{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">
|
||||
Technologies
|
||||
</h4>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-3">Technologies</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.technologies.map((tech: string) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-3 py-1.5 text-xs font-medium bg-accent/5 text-accent rounded-md"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
<span key={tech} className="px-3 py-1.5 text-xs font-medium bg-accent/5 text-accent rounded-md">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick nav to other projects */}
|
||||
<div className="pt-6 border-t border-neutral-100">
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-4">
|
||||
Other Projects
|
||||
</h4>
|
||||
<h4 className="font-mono text-[10px] tracking-[0.2em] uppercase text-muted mb-4">Other Projects</h4>
|
||||
<div className="space-y-2">
|
||||
{projects
|
||||
.filter((p) => p.slug !== project.slug)
|
||||
.slice(0, 4)
|
||||
.map((p) => (
|
||||
<Link
|
||||
key={p.slug}
|
||||
href={`/projects/${p.slug}`}
|
||||
className="block text-[13px] text-muted hover:text-accent transition-colors duration-200 py-1"
|
||||
>
|
||||
{p.client}
|
||||
</Link>
|
||||
{projects.filter((p) => p.slug !== project.slug).slice(0, 4).map((p) => (
|
||||
<Link key={p.slug} href={`/projects/${p.slug}`} className="block text-[13px] text-muted hover:text-accent transition-colors duration-200 py-1">{p.client}</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -280,48 +189,24 @@ export default async function ProjectPage({
|
|||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-neutral-200">
|
||||
{prevProject ? (
|
||||
<Link
|
||||
href={`/projects/${prevProject.slug}`}
|
||||
className="group flex items-center gap-4 py-10 pr-8 hover:bg-neutral-50 transition-colors duration-200"
|
||||
>
|
||||
<ArrowLeft
|
||||
size={18}
|
||||
className="text-neutral-300 group-hover:text-accent group-hover:-translate-x-1 transition-all duration-200 shrink-0"
|
||||
/>
|
||||
<Link href={`/projects/${prevProject.slug}`} className="group flex items-center gap-4 py-10 pr-8 hover:bg-neutral-50 transition-colors duration-200">
|
||||
<ArrowLeft size={18} className="text-neutral-300 group-hover:text-accent group-hover:-translate-x-1 transition-all duration-200 shrink-0" />
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-wider uppercase text-muted mb-1">
|
||||
Previous
|
||||
</p>
|
||||
<p className="text-sm font-medium text-primary group-hover:text-accent transition-colors duration-200">
|
||||
{prevProject.client}
|
||||
</p>
|
||||
<p className="font-mono text-[10px] tracking-wider uppercase text-muted mb-1">Previous</p>
|
||||
<p className="text-sm font-medium text-primary group-hover:text-accent transition-colors duration-200">{prevProject.client}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div className="py-10" />
|
||||
)}
|
||||
) : <div className="py-10" />}
|
||||
|
||||
{nextProject ? (
|
||||
<Link
|
||||
href={`/projects/${nextProject.slug}`}
|
||||
className="group flex items-center justify-end gap-4 py-10 pl-8 hover:bg-neutral-50 transition-colors duration-200"
|
||||
>
|
||||
<Link href={`/projects/${nextProject.slug}`} className="group flex items-center justify-end gap-4 py-10 pl-8 hover:bg-neutral-50 transition-colors duration-200">
|
||||
<div className="text-right">
|
||||
<p className="font-mono text-[10px] tracking-wider uppercase text-muted mb-1">
|
||||
Next
|
||||
</p>
|
||||
<p className="text-sm font-medium text-primary group-hover:text-accent transition-colors duration-200">
|
||||
{nextProject.client}
|
||||
</p>
|
||||
<p className="font-mono text-[10px] tracking-wider uppercase text-muted mb-1">Next</p>
|
||||
<p className="text-sm font-medium text-primary group-hover:text-accent transition-colors duration-200">{nextProject.client}</p>
|
||||
</div>
|
||||
<ArrowRight
|
||||
size={18}
|
||||
className="text-neutral-300 group-hover:text-accent group-hover:translate-x-1 transition-all duration-200 shrink-0"
|
||||
/>
|
||||
<ArrowRight size={18} className="text-neutral-300 group-hover:text-accent group-hover:translate-x-1 transition-all duration-200 shrink-0" />
|
||||
</Link>
|
||||
) : (
|
||||
<div className="py-10" />
|
||||
)}
|
||||
) : <div className="py-10" />}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -329,15 +214,8 @@ export default async function ProjectPage({
|
|||
{/* Footer */}
|
||||
<footer className="py-10 bg-primary">
|
||||
<div className="max-w-6xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="font-mono text-[10px] tracking-[0.2em] uppercase text-neutral-600 hover:text-neutral-400 transition-colors duration-200"
|
||||
>
|
||||
Wild Dragon
|
||||
</Link>
|
||||
<p className="text-[11px] text-neutral-700">
|
||||
© {new Date().getFullYear()} Zachary Gaetano
|
||||
</p>
|
||||
<Link href="/" className="font-mono text-[10px] tracking-[0.2em] uppercase text-neutral-600 hover:text-neutral-400 transition-colors duration-200">Wild Dragon</Link>
|
||||
<p className="text-[11px] text-neutral-700">© {new Date().getFullYear()} Zachary Gaetano</p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue