blog/index.html

@@ -237,15 +237,11 @@
 <p>
   dangrubb.net/blog
 </p>
-<div></div>
-<h1 style="color:white;text-align:center;">Status</h1>
-<p>
-  dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.
-</p>
-  <div><p></p></div>
- <div class="img-container">
-        <img src="./src/img/CannotConnect.JPEG" alt="Cannot Connect" class="viewport-image">
+
+<div id="blogsContainer" class="blogs-container">
+  <p style="color: #9d9aa4;">Loading blog posts...</p>
 </div>
+
 <!-- partial -->
   <script src="./script.js"></script>
 

blog/posts.json

@@ -1,10 +1,11 @@
 [
   {
     "id": "01",
-    "title": "First Blog Post",
+    "title": "Status",
     "date": "2026-02-28",
-    "excerpt": "This is the first blog post excerpt. Add your own blog entries by updating this JSON file with a title, date, image path, and excerpt.",
+    "excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.",
+    "content": "<p>dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.</p>",
     "image": "./src/img/CannotConnect.JPEG",
-    "slug": "first-blog-post"
+    "slug": "status"
   }
 ]

blog/script.js

@@ -0,0 +1,53 @@
+"use strict";
+
+// Load and display blog posts from JSON
+async function loadBlogPosts() {
+  try {
+    const response = await fetch('./posts.json');
+    const posts = await response.json();
+    
+    const blogsContainer = document.getElementById('blogsContainer');
+    
+    if (posts.length === 0) {
+      blogsContainer.innerHTML = '<div class="no-posts"><p>No blog posts yet.</p></div>';
+      return;
+    }
+    
+    // Create HTML for each post
+    const postsHTML = 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">
+          ${post.content}
+        </div>
+        <div class="blog-post-image">
+          <img src="${post.image}" alt="${post.title}" />
+        </div>
+      </article>
+    `).join('');
+    
+    blogsContainer.innerHTML = postsHTML;
+  } catch (error) {
+    console.error('Error loading blog posts:', error);
+    document.getElementById('blogsContainer').innerHTML = '<div class="error"><p>Error loading blog posts.</p></div>';
+  }
+}
+
+// Load blog posts when page is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', loadBlogPosts);
+} else {
+  loadBlogPosts();
+}
+
+// Handle hash-based navigation to specific posts
+window.addEventListener('hashchange', () => {
+  const postId = window.location.hash.slice(1);
+  if (postId) {
+    const element = document.getElementById(postId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+});

blog/style.css

@@ -220,3 +220,67 @@ a:focus-visible {
     height: 40vh; /* 60% of the viewport height */
     width: auto; /* Maintain aspect ratio */
 }
+
+/* Blog Posts Styling */
+.blogs-container {
+  margin: 40px auto 0;
+  max-width: 65em;
+  width: 100%;
+}
+
+.blog-post {
+  margin: 40px 0;
+  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;
+}
+
+.blog-post-title {
+  color: #ffff00;
+  font-weight: bold;
+  font-size: 1.8rem;
+  margin: 0 0 10px;
+  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;
+  margin: 20px 0;
+}
+
+.blog-post-content p {
+  margin: 0 0 15px;
+}
+
+.blog-post-image {
+  display: flex;
+  justify-content: center;
+  align-items: 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);
+}
+
+.no-posts,
+.error {
+  text-align: center;
+  color: #9d9aa4;
+  padding: 40px 20px;
+}