as

_layouts/blog.html

@@ -1,9 +1,52 @@
 ---
 layout: default
+title: Blog
 ---
 
 {% include site-header.html %}
 
+<!-- Dropdown for filtering by author -->
+<section class="section">
+  <div class="container">
+    <div class="field">
+      <label class="label">Filter by Author</label>
+      <div class="control">
+        <div class="select">
+          <select id="author-filter">
+            <option value="all">All Authors</option>
+            <!-- Loop through posts to dynamically populate authors -->
+            {% assign authors = site.posts | map: 'author' | uniq %}
+            {% for author in authors %}
+              <option value="{{ author }}">{{ author }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Blog Post List -->
+    <div id="post-list" class="columns is-multiline">
+      {% for post in site.posts %}
+        <div class="column is-4 post-item" data-author="{{ post.author }}">
+          <div class="card">
+            <div class="card-image">
+              <figure class="image is-4by3">
+                <img src="{{ post.image }}" alt="{{ post.title }}">
+              </figure>
+            </div>
+            <div class="card-content">
+              <h2 class="title is-4">{{ post.title }}</h2>
+              <p class="subtitle is-6">By: {{ post.author }}</p>
+              <p>{{ post.excerpt }}</p>
+              <a href="{{ post.url }}" class="button is-link">Read More</a>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
 <main class="section">
   <div class="container">
     <div class="columns">
@@ -14,16 +57,34 @@ <h1 class="title is-1">{{ page.title }}</h1>
             {{ content }}
           </div>
         </article>
-        {% include post-list.html %}
       </div>
       {% if page.aside == true %}
       <div class="column">
         {% include site-aside.html %}
       </div>
       {% endif %}
-
     </div>
   </div>
 </main>
 
 {% include site-footer.html %}
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const authorFilter = document.getElementById('author-filter');
+    const posts = document.querySelectorAll('.post-item');
+
+    authorFilter.addEventListener('change', function () {
+      const selectedAuthor = this.value;
+
+      posts.forEach(function (post) {
+        const postAuthor = post.getAttribute('data-author');
+
+        if (selectedAuthor === 'all' || postAuthor === selectedAuthor) {
+          post.style.display = 'block'; // Show the post
+        } else {
+          post.style.display = 'none'; // Hide the post
+        }
+      });
+    });
+  });
+</script>