diff --git a/src/components/BlogList.astro b/src/components/BlogList.astro
new file mode 100644
index 0000000..699284d
--- /dev/null
+++ b/src/components/BlogList.astro
@@ -0,0 +1,86 @@
+---
+import { getCollection } from "astro:content";
+
+const posts = await getCollection("blog");
+const sortedPosts = posts.sort(
+ (a, b) => b.data.date.getTime() - a.data.date.getTime()
+);
+---
+
+
+
+
\ No newline at end of file
diff --git a/src/content/blog/second-post.md b/src/content/blog/second-post.md
index f51cad2..cbdfd5a 100644
--- a/src/content/blog/second-post.md
+++ b/src/content/blog/second-post.md
@@ -1,9 +1,10 @@
---
-title: "My Second Blog Post"
-date: 2025-10-16
-description: "This is my second blog post"
+slug: "second-post"
+title: "My Second Post"
+description: "This is the description of my second post."
+date: "2025-04-05"
---
-# This is an example blog post.
+# My Second Post
-This is the content of my second example blog post.
+This is the content of my second post.
\ No newline at end of file
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 9afe886..e836129 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -7,6 +7,8 @@ import WaveDivider from "../components/WaveDivider.astro";
//import Webring from "../components/Webring.astro";
//import SpotifyNowPlaying from "../components/SpotifyNowPlaying.astro";
import Socials from "../components/Socials.astro";
+import BlogList from "../components/BlogList.astro"; // Import the new component
+
// TODO: Fill in your preferences.
const variables = {
@@ -21,8 +23,13 @@ const variables = {
+
+
+
+
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
new file mode 100644
index 0000000..412285f
--- /dev/null
+++ b/src/pages/blog/[slug].astro
@@ -0,0 +1,123 @@
+---
+import { getCollection, type CollectionEntry } from "astro:content";
+import Layout from "../../layouts/Layout.astro";
+import Intro from "../../components/Intro.astro";
+import WaveDivider from "../../components/WaveDivider.astro";
+import Socials from "../../components/Socials.astro";
+
+export async function getStaticPaths() {
+ const posts = await getCollection("blog");
+
+ return posts.map((post) => ({
+ params: { slug: post.slug },
+ props: { post },
+ }));
+}
+
+interface Props {
+ post: CollectionEntry<"blog">;
+}
+
+const { post } = Astro.props;
+const { title, description, date } = post.data;
+const { Content } = await post.render();
+---
+
+
+
+
+
+
+
+
{date.toDateString()}
+
+
+
+