35 lines
1 KiB
TypeScript
35 lines
1 KiB
TypeScript
|
import Reveal from '@/components/ui/reveal';
|
||
|
|
import SectionHeading from '@/components/ui/section-heading';
|
||
|
|
import { projects } from '@/lib/site';
|
||
|
|
|
||
|
|
const Projects = () => (
|
||
|
|
<section id="work" className="container-page py-16">
|
||
|
|
<SectionHeading title="Selected Work">
|
||
|
|
Instant-Response Web Applications
|
||
|
|
</SectionHeading>
|
||
|
|
|
||
|
|
<div className="grid divide-y divide-white/12 panel md:grid-cols-3 md:divide-x md:divide-y-0">
|
||
|
|
{projects.map((project, i) => (
|
||
|
|
<Reveal key={project.title} delay={i * 60}>
|
||
|
|
<article className="flex h-full flex-col justify-between p-6 transition-colors hover:bg-white/4 md:p-7">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-display text-lg font-medium tracking-tight text-ink">
|
||
|
|
{project.title}
|
||
|
|
</h3>
|
||
|
|
<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
|
||
|
|
{project.blurb}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
|
||
|
|
{project.stack}
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
</Reveal>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default Projects;
|