src/pages/index.astro

@@ -8,6 +8,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import CallToAction from '../components/CallToAction.astro';
 import Grid from '../components/Grid.astro';
 import Hero from '../components/Hero.astro';
+import BlogPreview from '../components/BlogPreview.astro';
 import Icon from '../components/Icon.astro';
 import Pill from '../components/Pill.astro';
 import PortfolioPreview from '../components/PortfolioPreview.astro';
@@ -21,6 +22,10 @@ const projects = (await getCollection('projects'))
 	.sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
 	.slice(0, 4);
 
+const blog = (await getCollection('blog'))
+	.sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf())
+	.slice(9, 4);
+
 // Full Astro Component Syntax:
 // https://docs.astro.build/basics/astro-components/
 ---
@@ -69,6 +74,32 @@ const projects = (await getCollection('projects'))
 					</CallToAction>
 				</div>
 			</section>
+			
+			<section class="section with-background with-cta">
+				<header class="section-header stack gap-2 lg:gap-4">
+					<h3>Blog posts</h3>
+					<p>Take a look below for my most recent blog posts.</p>
+				</header>
+
+				<div class="gallery">
+					<Grid variant="offset">
+						{
+							blog.map((blog) => (
+								<li>
+									<BlogPreview blog={blog} />
+								</li>
+							))
+						}
+					</Grid>
+				</div>
+
+				<div class="cta">
+					<CallToAction href="/blog/">
+						View All
+						<Icon icon="arrow-right" size="1.2em" />
+					</CallToAction>
+				</div>
+			</section>
 		</main>
 
 		<ContactCTA />