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() {
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">
{/* 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" />
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
<p className="font-mono text-xs tracking-[0.25em] uppercase text-accent mb-4">
Projects
</p>
<h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight">
Selected work.
</h2>
</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,
sports, aerospace, and financial services clients.
</p>
@ -28,16 +27,14 @@ export default function Projects() {
</ScrollReveal>
{/* 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) => (
<ScrollReveal
key={project.slug}
delay={index * 60}
className={index === 0 ? "md:col-span-2" : ""}
>
<ScrollReveal key={project.slug} delay={index * 80}>
<Link
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 */}
<div
@ -47,43 +44,40 @@ export default function Projects() {
>
<Image
src={project.thumbnail}
alt={project.title}
alt={`${project.client} — ${project.category} broadcast facility`}
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"}
/>
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 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/50 backdrop-blur-sm text-white/90 rounded-md">
{project.category}
</span>
</div>
{/* Dark overlay for readability */}
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
{/* Hover overlay */}
<div className="absolute inset-0 bg-accent/0 group-hover:bg-accent/10 transition-colors duration-300" />
</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-muted">
<div className="p-6 md:p-8">
<div className="flex items-center gap-3 mb-3">
<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}
</span>
</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}
</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}
</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
<ArrowRight size={14} className="ml-1.5" />
<ArrowRight size={16} className="ml-2" />
</div>
</div>
</Link>