Add dynamic blog preview to homepage

- Create blog/posts.json for managing blog post metadata
- Add blog preview box (max 1/3 screen width) to homepage
- Fetch latest post dynamically with image and excerpt
- Updates automatically when new posts added to JSON
- Styled to fit no-scroll homepage layout
- Link to full blog page for each post

style.css

@@ -294,6 +294,74 @@ body {
   text-decoration: underline;
 }
 
+/* Blog Preview Box */
+.blog-preview-container {
+  margin: 30px auto 0;
+  max-width: 33%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.blog-preview {
+  border: 1px solid rgba(155, 169, 180, 0.3);
+  border-radius: 4px;
+  padding: 15px;
+  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.blog-preview img {
+  width: 100%;
+  height: auto;
+  max-height: 150px;
+  object-fit: cover;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+
+.blog-preview-title {
+  color: #ffff00;
+  font-weight: bold;
+  font-size: 0.95rem;
+  margin: 10px 0 5px;
+  text-decoration: none;
+  display: block;
+}
+
+.blog-preview-title:hover {
+  text-decoration: underline;
+}
+
+.blog-preview-date {
+  color: #aa95bd;
+  font-size: 0.8rem;
+  margin-bottom: 8px;
+}
+
+.blog-preview-excerpt {
+  color: #9d9aa4;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  margin: 8px 0 10px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.blog-preview-link {
+  display: inline-block;
+  color: #6be1e9;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.blog-preview-link:hover {
+  text-decoration: underline;
+}
+
 /* Push the navigation to the bottom using flexbox spacer */
 .bottom-nav {
   margin-top: auto;