feat: add LatestPosts section to homepage

- Introduced a new LatestPosts component to display the five most recent blog posts.
- Updated the index page to include the LatestPosts section, enhancing content visibility.
- Made minor text adjustments in the Welcome section for clarity.

3 files changed, 38 insertions, 1 deletions

diff --git a/src/components/Sections/LatestPosts.astro b/src/components/Sections/LatestPosts.astro
new file mode 100644
index 0000000..04ce9fe
--- /dev/null
+++ b/src/components/Sections/LatestPosts.astro
@@ -0,0 +1,35 @@
+---
+import { getCollection } from "astro:content";
+import dayjs from "dayjs";
+
+const posts = await getCollection("blog", ({ data }) => {
+	return data.draft !== true;
+});
+
+posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+const latestPosts = posts.slice(0, 5);
+---
+
+<style lang="scss">
+	@use "../../scss/variables" as *;
+
+	small {
+		font-size: $fontSizeBase * 0.75;
+		opacity: 0.5;
+	}
+</style>
+
+<section>
+	<h2>Latest posts</h2>
+	<ul>
+		{
+			latestPosts.map((post) => (
+				<li>
+					<a href={`/blog/${post.slug}`}>{post.data.title}</a>
+					<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
+				</li>
+			))
+		}
+	</ul>
+</section>
diff --git a/src/components/Sections/Welcome.astro b/src/components/Sections/Welcome.astro
index 5d64206..15ae0a3 100644
--- a/src/components/Sections/Welcome.astro
+++ b/src/components/Sections/Welcome.astro
@@ -3,7 +3,7 @@
 		<h1>Hi, I'm Valentin Popov 👋</h1>
 		<p>
 			I'm a professional software developer currently working as a project manager and team lead. On my personal
-			website, I share insights, ideas, and articles on software development, leadership, and the digital world.
+			website, I share thoughts on tech, leadership, and digital life.
 		</p>
 		<p>Welcome, and feel free to explore!</p>
 	</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 87bd89c..e7ae23d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/BaseLayout.astro";
+import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 import WelcomeSection from "../components/Sections/Welcome.astro";
 ---
@@ -7,4 +8,5 @@ import WelcomeSection from "../components/Sections/Welcome.astro";
 <Layout>
 	<WelcomeSection />
 	<SocialLinksSection />
+	<LatestPostsSection />
 </Layout>