---
import { getCollection } from 'astro:content';

import BaseLayout from '../layouts/BaseLayout.astro';

import ContactCTA from '../components/ContactCTA.astro';
import PortfolioPreview from '../components/PortfolioPreview.astro';
import Hero from '../components/Hero.astro';
import Grid from '../components/Grid.astro';

const projects = (await getCollection('work')).sort(
	(a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
);
---

<BaseLayout
	title="My Work | Jeanine White"
	description="Learn about Jeanine White's most recent projects"
>
	<div class="stack gap-20">
		<main class="wrapper stack gap-8">
			<Hero
				title="My Work"
				tagline="See my most recent projects below to get an idea of my past experience."
				align="start"
			/>
			<Grid variant="offset">
				{
					projects.map((project) => (
						<li>
							<PortfolioPreview project={project} />
						</li>
					))
				}
			</Grid>
		</main>
		<ContactCTA />
	</div>
</BaseLayout>