WildDragonLLC/wilddragon-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

seo: improve project card image alt text

Browse source
This commit is contained in:
Zac Gaetano 2026-05-01 14:21:31 -04:00
parent 653fae3761
commit cc0f253d23
1 changed files with 25 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/Projects.tsx
View file

@ -6,21 +6,20 @@ import ScrollReveal from "./ScrollReveal";
export default function Projects() { export default function Projects() {
return ( return (
<section id="projects" className="py-28 md:py-36 bg-surface"> <section id="projects" aria-label="Selected projects" className="py-24 md:py-32 bg-surface">
<div className="max-w-6xl mx-auto px-6"> <div className="max-w-6xl mx-auto px-6">
{/* Section header */} {/* Section header */}
<ScrollReveal> <ScrollReveal>
<div className="flex flex-col md:flex-row md:items-end md:justify-between mb-16"> <div className="flex flex-col md:flex-row md:items-end md:justify-between mb-16">
<div> <div>
<div className="w-10 h-px bg-accent mb-6" /> <p className="font-mono text-xs tracking-[0.25em] uppercase text-accent mb-4">
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
Projects Projects
</p> </p>
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight"> <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight">
Selected work. Selected work.
</h2> </h2>
</div> </div>
<p className="text-muted mt-4 md:mt-0 max-w-md text-[15px] leading-relaxed"> <p className="text-muted mt-4 md:mt-0 max-w-md">
Broadcast facility design and systems integration for enterprise, Broadcast facility design and systems integration for enterprise,
sports, aerospace, and financial services clients. sports, aerospace, and financial services clients.
</p> </p>
@ -28,16 +27,14 @@ export default function Projects() {
</ScrollReveal> </ScrollReveal>
{/* Project grid */} {/* Project grid */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-5"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{projects.map((project, index) => ( {projects.map((project, index) => (
<ScrollReveal <ScrollReveal key={project.slug} delay={index * 80}>
key={project.slug}
delay={index * 60}
className={index === 0 ? "md:col-span-2" : ""}
>
<Link <Link
href={`/projects/${project.slug}`} href={`/projects/${project.slug}`}
className="group relative block bg-white rounded-xl overflow-hidden border border-neutral-200/80 hover:border-accent/20 hover:shadow-xl hover:shadow-neutral-200/60 transition-all duration-400" className={`group relative block bg-white rounded-lg overflow-hidden border border-neutral-200 hover:border-accent/30 hover:shadow-lg transition-all duration-300 ${
index === 0 ? "md:col-span-2" : ""
}`}
> >
{/* Thumbnail image */} {/* Thumbnail image */}
<div <div
@ -47,43 +44,40 @@ export default function Projects() {
> >
<Image <Image
src={project.thumbnail} src={project.thumbnail}
alt={project.title} alt={`${project.client} — ${project.category} broadcast facility`}
fill fill
className="object-cover group-hover:scale-[1.03] transition-transform duration-700 ease-out" className="object-cover group-hover:scale-105 transition-transform duration-500"
sizes={index === 0 ? "100vw" : "50vw"} sizes={index === 0 ? "100vw" : "50vw"}
/> />
{/* Gradient overlay */} {/* Dark overlay for readability */}
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
{/* Hover tint */} {/* Hover overlay */}
<div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-400" /> <div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-300" />
{/* 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/50 backdrop-blur-sm text-white/90 rounded-md">
{project.category}
</span>
</div>
</div> </div>
{/* Content */} {/* Content */}
<div className="p-6 md:p-7"> <div className="p-6 md:p-8">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-3 mb-3">
<span className="font-mono text-[11px] text-muted"> <span className="font-mono text-xs tracking-wider uppercase text-accent">
{project.category}
</span>
<span className="text-neutral-300">|</span>
<span className="font-mono text-xs text-muted">
{project.year} {project.year}
</span> </span>
</div> </div>
<h3 className="text-lg md:text-xl font-semibold text-primary mb-2.5 group-hover:text-accent transition-colors duration-300"> <h3 className="text-xl md:text-2xl font-semibold text-primary mb-3 group-hover:text-accent transition-colors">
{project.client} {project.client}
</h3> </h3>
<p className="text-[13.5px] text-muted leading-relaxed mb-4 line-clamp-2"> <p className="text-muted leading-relaxed mb-4 line-clamp-2">
{project.summary} {project.summary}
</p> </p>
<div className="flex items-center text-[13px] font-medium text-accent translate-x-0 group-hover:translate-x-1 transition-transform duration-300"> <div className="flex items-center text-sm font-medium text-accent opacity-0 group-hover:opacity-100 transition-opacity">
View Case Study View Case Study
<ArrowRight size={14} className="ml-1.5" /> <ArrowRight size={16} className="ml-2" />
</div> </div>
</div> </div>
</Link> </Link>