---
import Page from "../../layouts/Page.astro";
import "../../styles/cards.css";
import archive from '../../data/website.json';
---
<Page title="Website Archive" description="Collection of my old websites">
    <main>
        <h1>Personal</h1>
        <div class="grid">
        {
            archive.personal.map((item) => {
                return (
                            <article class="card">
                              <h1><a href={item.link}>{item.name} (<small>{item.year}</small>)</a></h1>
                              <p>{item.description}</p>
                            </article>
                )
            })
        }
        </div>
        <h1>School Project</h1>
        <div class="grid">
            {
                archive.school.map((item) => {
                    return (
                            <article class="card">
                                <h1><a href={item.link}>{item.name} (<small>{item.year}</small>)</a></h1>
                                <p>{item.description}</p>
                            </article>
                    )
                })
            }
        </div>
        <h1>Collaboration</h1>
        <div class="grid">
            {
                archive.collaborations.map((item) => {
                    return (
                            <article class="card">
                                <h1><a href={item.link}>{item.name} (<small>{item.year}</small>)</a></h1>
                                <p>{item.description}</p>
                            </article>
                    )
                })
            }
        </div>
    </main>
</Page>