Add Blogs component and multiple blog posts

src/components/Blogs.astro

@@ -0,0 +1,154 @@
+---
+// TODO: List some projects
+const projects = [
+  {
+    name: "Blog",
+    url: "/blog",
+    color: "var(--ctp-lavender)",
+  },
+
+];
+---
+
+<section class="project">
+  <div class="content">
+    <h2 class="section-title">Blog</h2>
+    <div class="projects">
+      {
+        projects.map((project) => (
+          <a
+            href={project.url}
+            class="project-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={`--project-color: ${project.color}`}
+          >
+            <span class="project-icon">◈</span>
+            <span class="project-name">{project.name}</span>
+            <svg class="project-arrow" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M7 17L17 7M17 7H7M17 7V17"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</section>
+
+<style>
+  .project {
+    padding: 6rem 2rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .content {
+    max-width: 600px;
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--ctp-text);
+    margin-bottom: 3rem;
+    text-align: center;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .project-link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem 2rem;
+    background-color: var(--ctp-surface0);
+    border: 2px solid var(--project-color);
+    border-radius: 12px;
+    text-decoration: none;
+    color: var(--ctp-text);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .project-link::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    background-color: var(--project-color);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 0;
+  }
+
+  .project-link:hover::before {
+    transform: scaleX(1);
+  }
+
+  .project-icon {
+    font-size: 1.5rem;
+    color: var(--project-color);
+    transition: all 0.3s ease;
+    z-index: 1;
+  }
+
+  .project-name {
+    flex: 1;
+    font-size: 1.25rem;
+    font-weight: 500;
+    z-index: 1;
+    transition: color 0.3s ease;
+  }
+
+  .project-arrow {
+    width: 24px;
+    height: 24px;
+    color: var(--project-color);
+    transition: all 0.3s ease;
+    z-index: 1;
+  }
+
+  .project-link:hover {
+    transform: translateX(8px);
+  }
+
+  .project-link:hover .project-icon,
+  .project-link:hover .project-arrow {
+    color: var(--ctp-base);
+  }
+
+  .project-link:hover .project-name {
+    color: var(--ctp-base);
+  }
+
+  @media (max-width: 600px) {
+    .project {
+      padding: 4rem 2rem;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .project-link {
+      padding: 1.25rem 1.5rem;
+    }
+
+    .project-name {
+      font-size: 1.1rem;
+    }
+  }
+</style>

src/content/blog/fourth-porst.md

@@ -0,0 +1,9 @@
+---
+title: "My Fourth Blog Post"
+date: 2025-10-16
+description: "This is my fourth blog post"
+---
+
+# This is an example blog post.
+
+This is the content of my fourth example blog post.

src/content/blog/second-post.md

@@ -0,0 +1,9 @@
+---
+title: "My Second Blog Post"
+date: 2025-10-16
+description: "This is my second blog post"
+---
+
+# This is an example blog post.
+
+This is the content of my second example blog post.

src/content/blog/third-porst copy.md

@@ -0,0 +1,9 @@
+---
+title: "My Third Blog Post"
+date: 2025-10-16
+description: "This is my third blog post"
+---
+
+# This is an example blog post.
+
+This is the content of my third example blog post.

src/pages/index.astro

@@ -7,6 +7,7 @@ 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 Blogs from "../components/Blogs.astro";
 
 // TODO: Fill in your preferences.
 const variables = {
@@ -21,7 +22,7 @@ const variables = {
     <Intro name={variables.name} subtitle={variables.subtitles} />
     <WaveDivider color="rosewater" speed={100} size={0.8} direction="left" />
 
-    <Posts />
+    <Blogs />
     <WaveDivider color="teal" speed={100} size={0.8} direction="left" />
     
     <Projects />