---
import { getCollection } from "astro:content";
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
const allProjects = await getCollection("projects");
const pageTitle = "Works";
---
<Layout pageTitle={pageTitle}>
    <div class="gif">
        <img src="/.netlify/images?url=/images/laptop.webp" role="presentation" width="300" height="259" decoding="async">
    </div>
    <h2>Projects</h2>
    <ul role="list" class="link-card-grid">
        {allProjects.map((card) => <Card 
            url={`/projects/${card.id}/`} 
            image={card.data.image.url} 
            title={card.data.title} 
            body={card.data.description}
        />)}
    </ul>
</Layout>

