implemented blog posts

.eleventy.js

@@ -3,6 +3,18 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/css");
   eleventyConfig.addPassthroughCopy("src/js");
   eleventyConfig.addPassthroughCopy("src/resume");
+  // Add a filter for readable dates using vanilla JS
+  eleventyConfig.addFilter("readableDate", dateObj => {
+    // The toLocaleDateString method can be used to format dates
+    // without any external libraries.
+    // The 'UTC' timeZone option is added to prevent off-by-one day errors.
+    return new Date(dateObj).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      timeZone: 'UTC' 
+    });
+  });
 
   // Add a shortcode for the current year for the footer
   eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

src/_includes/layout.njk

@@ -19,6 +19,7 @@
             <a href="/" class="text-2xl font-bold text-white">{{ site.author.name }}</a>
             <div class="hidden md:flex space-x-6 items-center">
                 <a href="/#about" class="text-gray-300 hover:text-white">About</a>
+                <a href="/blog" class="text-gray-300 hover:text-white">Blog</a>
                 <a href="/#services" class="text-gray-300 hover:text-white">Services</a>
                 <a href="/#skills" class="text-gray-300 hover:text-white">Skills</a>
                 <a href="/#experience" class="text-gray-300 hover:text-white">Experience</a>
@@ -34,6 +35,7 @@
         <!-- Mobile Menu -->
         <div id="mobile-menu" class="hidden md:hidden px-6 pt-2 pb-4 space-y-2">
             <a href="/#about" class="block text-gray-300 hover:text-white">About</a>
+            <a href="/blog" class="block text-gray-300 hover:text-white">Blog</a>
             <a href="/#services" class="block text-gray-300 hover:text-white">Services</a>
             <a href="/#skills" class="block text-gray-300 hover:text-white">Skills</a>
             <a href="/#experience" class="block text-gray-300 hover:text-white">Experience</a>

src/_includes/post.njk

@@ -0,0 +1,9 @@
+---
+layout: "layout.njk"
+---
+<article class="prose prose-invert lg:prose-xl max-w-none">
+  <h1>{{ title }}</h1>
+  <p class="text-gray-400">Published on: {{ date | readableDate }}</p>
+  
+  {{ content | safe }}
+</article>

src/blog.njk

@@ -0,0 +1,22 @@
+---
+title: "Blog"
+layout: "layout.njk"
+---
+
+<h1 class="text-4xl font-bold text-white mb-8 section-title">All Posts</h1>
+
+<div class="space-y-8">
+{%- for post in collections.posts | reverse -%}
+  <div class="card">
+    <h2 class="text-2xl font-bold mb-2">
+      <a href="{{ post.url }}" class="text-blue-400 hover:underline">{{ post.data.title }}</a>
+    </h2>
+    <p class="text-gray-400 mb-4">
+      {{ post.date | readableDate }}
+    </p>
+    {% if post.data.excerpt %}
+      <p class="text-gray-300">{{ post.data.excerpt }}</p>
+    {% endif %}
+  </div>
+{%- endfor -%}
+</div>

src/js/main.js

@@ -8,22 +8,26 @@ if (mobileMenuButton && mobileMenu) {
     });
 }
 
-
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="/#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
-        e.preventDefault();
+        // Check if the current page is the homepage.
+        const isHomePage = window.location.pathname === '/';
+        const targetId = this.getAttribute('href').substring(2);
+        const targetElement = document.getElementById(targetId);
 
-        let targetId = this.getAttribute('href').substring(2);
-        let targetElement = document.getElementById(targetId);
-        
-        if (targetElement) {
+        // If we are on the homepage AND the target element exists, then smooth scroll.
+        if (isHomePage && targetElement) {
+            e.preventDefault(); // Stop the browser from navigating.
             targetElement.scrollIntoView({
                 behavior: 'smooth'
             });
         }
+        // If we are on any other page (like /blog/), this 'if' condition is false,
+        // so e.preventDefault() is NOT called, and the browser performs its
+        // default action: navigating to the homepage and jumping to the hash.
 
-        // Close mobile menu on link click
+        // Close mobile menu on any nav link click
         if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
             mobileMenu.classList.add('hidden');
         }

src/posts/6-5-25.md

@@ -0,0 +1,15 @@
+---
+title: "My First Blog Post"
+date: "2025-08-05"
+layout: "post.njk"
+tags: "posts"
+---
+
+Welcome to my new blog! This is my very first post, written in Markdown.
+
+Eleventy makes it easy to create content. You can use standard Markdown syntax.
+
+-   Like lists
+-   And more lists
+
+Check back soon for more updates on networking, homelabbing, and technology!