Convert dangrubb.net to Astro framework

- Migrated main site, blog, CV, and music sections to Astro
- Component-based architecture with layouts
- JSON-based blog posts
- Static site generation
- Preserved original styling and functionality

src/pages/blog/index.astro

@@ -0,0 +1,107 @@
+---
+import Base from '../../layouts/Base.astro';
+import GlitchBard from '../../components/GlitchBard.astro';
+import posts from '../../data/posts.json';
+---
+
+<Base title="dangrubb.net/blog">
+  <div class="page">
+    <GlitchBard />
+
+    <p class="page-title">dangrubb.net/blog</p>
+    <p class="back-link"><a href="/">← back to home</a></p>
+
+    <div class="blogs-container">
+      {posts.map(post => (
+        <article class="blog-post" id={post.slug}>
+          <h2 class="blog-post-title">{post.title}</h2>
+          <div class="blog-post-date">
+            {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+          </div>
+          <div class="blog-post-content" set:html={post.content} />
+          <div class="blog-post-image">
+            <img src={post.image} alt={post.title} />
+          </div>
+        </article>
+      ))}
+    </div>
+  </div>
+</Base>
+
+<style>
+  @import '../../styles/bard.css';
+
+  .page {
+    padding: 20px 20px 40px;
+    min-height: 100vh;
+    box-sizing: border-box;
+  }
+
+  .page-title, .back-link {
+    margin: 20px auto 0;
+    max-width: 400px;
+    text-align: center;
+    line-height: 1.3;
+    font-size: 0.875rem;
+  }
+
+  .blogs-container {
+    margin: 40px auto 0;
+    max-width: 65em;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .blog-post {
+    margin: 40px auto;
+    padding: 20px;
+    border: 1px solid rgba(155, 169, 180, 0.2);
+    border-radius: 4px;
+    background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
+    scroll-margin-top: 100px;
+    max-width: 700px;
+    width: 100%;
+  }
+  .blog-post-title {
+    color: #ffff00;
+    font-weight: bold;
+    font-size: 1.8rem;
+    text-align: center;
+  }
+  .blog-post-date {
+    color: #aa95bd;
+    font-size: 0.9rem;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .blog-post-content {
+    color: #9d9aa4;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    text-align: center;
+  }
+  .blog-post-content :global(p) {
+    margin: 0 0 15px;
+  }
+  .blog-post-image {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  .blog-post-image img {
+    max-width: 100%;
+    height: auto;
+    max-height: 60vh;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  @media (max-width: 768px) {
+    .page { padding: 20px 10px 40px; }
+    .page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
+    .blog-post { padding: 15px; margin: 20px auto; }
+    .blog-post-title { font-size: 1.4rem; }
+  }
+</style>