diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..6e97e59
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,15 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const blog = defineCollection({
+  loader: glob({ base: "./src/content/posts", pattern: "**/*.{md,mdx}" }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    pubDate: z.coerce.date(),
+    modifiedDate: z.coerce.date().optional(),
+    wantsPanel: z.boolean().default(true)
+  })
+});
+
+export const collections = { blog };
\ No newline at end of file
diff --git a/src/content/posts/myExperiencesWithAstro.md b/src/content/posts/myExperiencesWithAstro.md
new file mode 100644
index 0000000..82488fa
--- /dev/null
+++ b/src/content/posts/myExperiencesWithAstro.md
@@ -0,0 +1,27 @@
+---
+title: "My experiences with Astro"
+description: ""
+pubDate: "18 Feb 2026 21:07"
+---
+
+<!-- 
+- what i learned about it
+  - astro components (similar to react components?)
+  - interactive components are difficult
+  - static dynamic routes (dynamically generated at build time, but static on the website)
+  - content collections
+  - mdx
+ -->
+
+ # What is Astro?
+Astro is a static site generator that allows you to combine components together to quickly put together a website. It's somewhat similar to something like React, but instead of having the bloat of all the javascript it generates, Astro outputs a static HTML website. The only javascript it includes is what you write in `<script>` tags. It has bindings for those web frameworks, so you can use React components in your website alongside the astro ones. It will also still generate a static site that doesn't require any javascript other than what you put there yourself.
+
+I found out about astro from [Éva's website](https://www.poti.chat/), which she made in Astro. She mentioned that it allowed you to use components, like React does, but outputs HTML "like in the good old days of the internet". This made me curious about it, as some of my friends at the time were making their own websites trying to recreate the look and feel of websites back in the day. Also, I had noticed that my website on Neocities took some time to load up all of the 88x31 buttons/badges that are on the front page. So I decided to give it a go, with some hopes that it would make the website quicker to load.
+
+ # My initial experieces with it
+Coming from React, getting used to Astro's components took a while. I tried copying the React version of my website to Astro using its React bindings, but ran into issues with how Astro handles component properties. It seemed that they worked similar from the documentation, but in practice they have differences that caused my React components to not work. I spent way too long trying to figure out why it wasn't working, and eventually gave up.
+
+After a while, I decided to try recreating my website in Astro using only Astro components the way it was meant to be used. It took a while to get used to, and a lot of referring back to the documentation as well as my React website, But I did manage to recreate my website using Astro! The Astro website used less components than the React website, and contained no javascript at all! There was one component that I couldn't figure out how to recreate in an Astro component, so that one is still a React component. But I do want to revisit it and try creating an Astro component of it again in the future. <!-- i fukcign forgor what happened TwT -->
+
+ # Would I recommend it?
+ Yes! Astro is very fun and somewhat simple to use. It is great if you want to create a static site without the bloat of a web framework's javascript, while also having the flexability of those web frameworks' components. It does take a bit to get used to, especially if you're used to using a web framework like React. But I believe that learning it is worth it! Astro can also be used to create interactive components as well, if that's something you want on your website. However, if you want the flexability and ease-of-use of an interactive react component, you will be disapointed here (unless you use a React component ;3). 
\ No newline at end of file
diff --git a/src/content/posts/post.md.example b/src/content/posts/post.md.example
new file mode 100644
index 0000000..f1006f4
--- /dev/null
+++ b/src/content/posts/post.md.example
@@ -0,0 +1,8 @@
+---
+title: "bwa"
+pubDate: "18 Feb 2026 10:30"
+---
+
+Test Poast
+
+# bwaaaa
\ No newline at end of file
diff --git a/src/content/posts/post.mdx.example b/src/content/posts/post.mdx.example
new file mode 100644
index 0000000..b2fd1b1
--- /dev/null
+++ b/src/content/posts/post.mdx.example
@@ -0,0 +1,17 @@
+---
+title: "bwaaa"
+description: "This is a test description"
+pubDate: "18 Feb 2026 12:00"
+wantsPanel: false
+---
+
+import Panel from "../../layouts/Panel.astro";
+
+<Panel>
+# bwaaaa
+poast
+</Panel>
+<Panel>
+# bwaaaaa
+multi-panel poast!!!
+</Panel>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 3471e98..51b3fc2 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,5 +1,12 @@
 ---
+import Panel from "./Panel.astro";
 import "../styles/global.scss";
+import { getCollection } from "astro:content";
+
+const { title } = Astro.props;
+const pageTitle = title || "FoxGirlRiley's shitty website | Bwaaa 🎺";
+
+const hasPosts = (await getCollection("blog")).length > 0;
 ---
 
 <!doctype html>
@@ -8,9 +15,19 @@ import "../styles/global.scss";
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FoxGirlRiley's shitty website | Bwaaa 🎺</title>
+    <title>{pageTitle}</title>
   </head>
   <body>
+    {
+      hasPosts && (
+        <Panel>
+          <span style="display: flex; flex-direction: row; justify-content: space-between; width: 200px;">
+            <a href="/">Home</a>
+            <a href="/blog">Blog</a>
+          </span>
+        </Panel>
+      )
+    }
     <slot />
   </body>
 </html>
diff --git a/src/layouts/Panel.astro b/src/layouts/Panel.astro
index ee904d2..6ca9123 100644
--- a/src/layouts/Panel.astro
+++ b/src/layouts/Panel.astro
@@ -1,9 +1,9 @@
 ---
 import "../styles/Panel.scss";
-const { title } = Astro.props;
+const { title, customClass } = Astro.props;
 ---
 
-<div class="panel">
+<div class={`panel ${customClass}`}>
   {title && <h3 class="panelTitle">{title}</h3>}
   <slot />
 </div>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
new file mode 100644
index 0000000..6d201a1
--- /dev/null
+++ b/src/pages/blog/[...slug].astro
@@ -0,0 +1,33 @@
+---
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
+import Main from "../../layouts/MainLayout.astro";
+import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
+import Panel from "../../layouts/Panel.astro";
+
+export const getStaticPaths = async () => {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: post,
+  }));
+};
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<Main title={post.data.title}>
+  <TransFlagPanel>
+    <h1>{post.data.title}</h1>
+  </TransFlagPanel>
+  {
+    post.data.wantsPanel ? (
+      <Panel>
+        <Content />
+      </Panel>
+    ) : (
+      <Content />
+    )
+  }
+</Main>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..17229f1
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,31 @@
+---
+import { getCollection } from "astro:content";
+import Main from "../../layouts/MainLayout.astro";
+import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
+import Panel from "../../layouts/Panel.astro";
+import "./index.scss";
+
+const latestPosts = (await getCollection("blog")).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Main title="Blog">
+  <TransFlagPanel>
+    <h1>Blog!!!</h1>
+  </TransFlagPanel>
+  {
+    latestPosts.map((post) => {
+      return (
+        <a href={`/blog/${post.id}`} class="blog-post-link">
+          <Panel
+            title={`${post.data.title} - ${post.data.pubDate.toLocaleString()}`}
+            customClass="blog-post-panel"
+          >
+            <p>{post.data.description}</p>
+          </Panel>
+        </a>
+      );
+    })
+  }
+</Main>
diff --git a/src/pages/blog/index.scss b/src/pages/blog/index.scss
new file mode 100644
index 0000000..3bba555
--- /dev/null
+++ b/src/pages/blog/index.scss
@@ -0,0 +1,8 @@
+.blog-post-panel {
+  background-color: lightgray;
+}
+
+.blog-post-link {
+  text-decoration: none;
+  color: black;
+}
\ No newline at end of file