diff --git a/components/base/AuthorCard.vue b/components/base/AuthorCard.vue
new file mode 100644
index 0000000..841c261
--- /dev/null
+++ b/components/base/AuthorCard.vue
@@ -0,0 +1,71 @@
+<template>
+  <main class="card-container-wrapper is-flex is-justify-content-center">
+    <div class="mt-5">
+      <DCard class="mx-3 my-3 px-3" variant="light" accent="light" width="full">
+        <template #header>
+          <div class="is-flex is-justify-content-center">
+            <figure class="image is-128x128">
+              <img
+                class="is-rounded"
+                :src="'/content/images/people/' + person.image"
+              />
+            </figure>
+          </div>
+          <div class="media-content">
+            <h2 class="title has-text-black pt-3">{{ person.name }}</h2>
+            <h2 class="subtitle has-text-black pt-3">{{ person.title }}</h2>
+            <a
+              v-if="person.github_username"
+              :href="'https://github.com/' + person.github_username"
+              aria-label="information icon"
+              ><span class="icon"><i class="mdi mdi-github" /></span>
+            </a>
+            <a
+              v-if="person.brown_directory_uuid"
+              :href="
+                'https://directory.brown.edu/uuid/' +
+                person.brown_directory_uuid
+              "
+              aria-label="information icon"
+              ><span class="icon"><i class="mdi mdi-information" /></span>
+            </a>
+          </div>
+        </template>
+        <template #footer>
+          <div class="content">{{ person.bio }}</div>
+        </template>
+      </DCard>
+    </div>
+  </main>
+</template>
+
+<script>
+import DCard from '@/components/base/DCard.vue';
+export default {
+  components: {
+    DCard,
+  },
+  props: {
+    post: {
+      default() {
+        return [];
+      },
+      type: Array,
+    },
+    people: {
+      default() {
+        return [];
+      },
+      type: Array,
+    },
+  },
+  computed: {
+    person() {
+      const person = this.people[0].data.find(
+        (d) => d.name === this.post.author
+      );
+      return person;
+    },
+  },
+};
+</script>
diff --git a/components/base/DHero.vue b/components/base/DHero.vue
index 5a7b313..c8453f5 100644
--- a/components/base/DHero.vue
+++ b/components/base/DHero.vue
@@ -81,8 +81,8 @@ export default {
   background-image: url('@/assets/bharath-g-s-aLGiPJ4XRO4-unsplash.jpg');
 
   .hero-text {
-    color: hsla(0, 0, 20%, 0.9);
-    background-color: hsla(0, 0, 100%, 0.2);
+    color: hsla(0, 0%, 20%, 0.9);
+    background-color: hsla(0, 0%, 100%, 0.2);
     padding: 1rem;
     margin: 0 -1rem 0.5rem;
   }
diff --git a/components/base/Navbar.vue b/components/base/Navbar.vue
index e5c49eb..171b9fa 100644
--- a/components/base/Navbar.vue
+++ b/components/base/Navbar.vue
@@ -248,6 +248,11 @@
             </div>
           </div>
         </div>
+        <div tabindex="0" class="navbar-item pl-0">
+          <nuxt-link class="navbar-item" to="/blog" @click.native="handleClick">
+            Blog
+          </nuxt-link>
+        </div>
       </div>
       <div class="navbar-end" data-testid="navbar-end">
         <div class="navbar-item">
@@ -259,14 +264,6 @@
             <span class="mx-0 icon"><i class="mdi mdi-file-document" /></span>
           </a>
         </div>
-        <div class="navbar-item">
-          <a
-            href="https://medium.com/brown-ccv"
-            class="d-button is-white has-text-link"
-            aria-label="CCV's Medium Blog"
-            >Blog <span class="mx-0 icon"><i class="mdi mdi-notebook" /></span
-          ></a>
-        </div>
       </div>
     </div>
     <div class="navbar-item">
diff --git a/components/blocks/FilesToCards.vue b/components/blocks/FilesToCards.vue
index 6177d7a..2d88ef6 100644
--- a/components/blocks/FilesToCards.vue
+++ b/components/blocks/FilesToCards.vue
@@ -197,8 +197,8 @@
 
 <script>
 import Multiselect from 'vue-multiselect';
-import { humanizeHero } from '@/utils';
 import DCard from '@/components/base/DCard.vue';
+import { humanizeHero } from '@/utils';
 
 export default {
   components: {
diff --git a/components/blocks/MarkdownToCards.vue b/components/blocks/MarkdownToCards.vue
new file mode 100644
index 0000000..f88773a
--- /dev/null
+++ b/components/blocks/MarkdownToCards.vue
@@ -0,0 +1,233 @@
+<template>
+  <main class="card-container-wrapper is-flex is-justify-content-center">
+    <div class="container">
+      <div
+        class="multiselect-header mt-4 mb-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
+      >
+        Filter posts by tags:
+      </div>
+      <div
+        class="dropdown is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
+      >
+        <div
+          class="mb-1 is-flex is-justify-content-space-evenly is-flex-wrap-wrap"
+        >
+          <div class="is-flex">
+            <multiselect
+              v-model="searchGroup"
+              :options="tags"
+              :close-on-select="true"
+              :clear-on-select="false"
+              :preserve-search="true"
+              :multiple="true"
+              placeholder="Select one or more"
+              :allow-empty="true"
+            >
+            </multiselect>
+            <button class="ml-1 button is-normal is-warning" @click="clearAll">
+              Clear Filters
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="multiselect-header mt-5 mb-1 is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
+      >
+        Sort posts by:
+      </div>
+      <div
+        class="dropdown is-flex is-flex-wrap-wrap is-justify-content-space-evenly"
+      >
+        <div class="mb-1 is-flex">
+          <multiselect
+            v-model="sortBy"
+            :options="sortByOptions"
+            :close-on-select="true"
+            :clear-on-select="false"
+            :multiple="false"
+            :preselect-first="true"
+            placeholder="Sort by"
+            label="name"
+            track-by="name"
+            >\
+          </multiselect>
+          <button
+            class="ml-1 button is-normal is-warning"
+            @click="ascending = !ascending"
+          >
+            <i v-if="ascending" class="mdi mdi-sort-ascending"></i>
+            <i v-else class="mdi mdi-sort-descending"></i>
+          </button>
+        </div>
+      </div>
+      <div
+        class="card-container is-flex mt-6 is-justify-content-space-evenly is-flex-wrap-wrap"
+      >
+        <DCard
+          v-for="(item, i) in sortedArray"
+          :key="'help-card-' + i"
+          class="mx-3 my-3 px-3"
+          variant="light"
+          accent="warning"
+          width="medium"
+        >
+          <!-- adding comment to test submodule merge conflict resolution -->
+          <template #header>
+            <div>
+              <span
+                v-for="tag in item.tags"
+                :key="tag"
+                class="radius-0 tag m-1 mb-5 is-yellow"
+              >
+                {{ tag }}
+              </span>
+            </div>
+            <div class="px-5">
+              <h2 class="title has-text-black">
+                {{ item.title }}
+              </h2>
+              <h2 class="subtitle has-text-black">Author: {{ item.author }}</h2>
+              <h2 class="subtitle has-text-black">
+                {{ new Date(item.date).toDateString() }}
+              </h2>
+              <h2 class="has-text-black">
+                {{ item.description }}
+              </h2>
+            </div>
+          </template>
+          <template #footer>
+            <nuxt-link
+              :to="`/blog/${item.slug}`"
+              class="m-1 link-item d-button has-background-link has-text-white has-text-weight-semibold is-size-5 link-button"
+            >
+              READ MORE
+            </nuxt-link>
+          </template>
+        </DCard>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import DCard from '@/components/base/DCard.vue';
+import { humanizeHero } from '@/utils';
+
+export default {
+  components: {
+    DCard,
+    Multiselect,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    ascending: true,
+    sortBy: [],
+    searchGroup: [],
+  }),
+  computed: {
+    filteredData() {
+      const f = this.data.filter((d) => !d.hidden);
+      return f;
+    },
+    tags() {
+      const tags = Array.from(
+        new Set(this.filteredData.map(({ tags }) => tags))
+      );
+      return [...new Set(tags.flat(1))].sort();
+    },
+    sortByOptions() {
+      const options = [{ name: 'Title' }];
+      options.push({ name: 'Author' });
+      options.push({ name: 'Date' });
+      options.sort().reverse();
+
+      return options;
+    },
+    sortedArray() {
+      let filtered = this.filteredData;
+
+      // Filter cards by tags in searchGroup
+      if (this.searchGroup.length > 0) {
+        filtered = filtered.filter((card) => {
+          return this.searchGroup.some((tag) => card.tags.includes(tag));
+        });
+      }
+
+      // Sort by title alphabetical order
+      if (this.sortBy.name === 'Title') {
+        filtered.sort((a, b) => {
+          const fa = a.title.toLowerCase();
+          const fb = b.title.toLowerCase();
+          if (fa < fb) {
+            return -1;
+          }
+          if (fa > fb) {
+            return 1;
+          }
+          return 0;
+        });
+      } else if (this.sortBy.name === 'Date') {
+        // Sort by date
+        filtered.sort((a, b) => {
+          return new Date(a.date) - new Date(b.date);
+        });
+      } else if (this.sortBy.name === 'Author') {
+        // Sort by author
+        filtered.sort((a, b) => {
+          const fa = a.author.toLowerCase();
+          const fb = b.author.toLowerCase();
+          if (fa < fb) {
+            return -1;
+          }
+          if (fa > fb) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+
+      // Show sorted array in descending or ascending order
+      if (!this.ascending) {
+        filtered.reverse();
+      }
+
+      return filtered;
+    },
+  },
+  methods: {
+    humanizeHero,
+    clearAll() {
+      this.searchGroup = [];
+    },
+  },
+};
+</script>
+
+<!-- see assets/scss/_layout.scss for relevant styles -->
+<style lang="scss" scoped>
+.help-card h2 {
+  font-weight: bold;
+}
+
+.dropdown {
+  margin-top: 30px;
+}
+
+.multiselect {
+  min-width: 225px;
+}
+
+.multiselect-header {
+  font-weight: bold;
+}
+
+.link-button {
+  width: 65%;
+}
+</style>
diff --git a/components/calendar/CalMonthlyTable.vue b/components/calendar/CalMonthlyTable.vue
index e39088f..579b983 100644
--- a/components/calendar/CalMonthlyTable.vue
+++ b/components/calendar/CalMonthlyTable.vue
@@ -35,7 +35,6 @@ import {
   TODAYS_DATE,
   weeksInMonth,
 } from '../../utils.js';
-
 import MonthlyWeek from '@/components/calendar/CalMonthlyWeek';
 
 export default {
diff --git a/content b/content
index 6eddcd4..c2e06ad 160000
--- a/content
+++ b/content
@@ -1 +1 @@
-Subproject commit 6eddcd4d5baa3aca495cb52283b599b601529d53
+Subproject commit c2e06ad2a394c2fa8c1789bf8237989e14bc8101
diff --git a/layouts/error.vue b/layouts/error.vue
index af90726..592f75c 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -24,7 +24,14 @@ export default {
     DButton,
   },
   layout: 'error',
-  props: ['error'],
+  props: {
+    error: {
+      default() {
+        return {};
+      },
+      type: Object,
+    },
+  },
 };
 </script>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index a396742..76bc195 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -93,7 +93,9 @@ export default {
         'remark-slug',
         'remark-external-links',
         'remark-footnotes',
+        // 'remark-math'
       ],
+      // rehypePlugins: () => ['rehype-katex'],
     },
   },
   buildDir: '.nuxt',
diff --git a/package-lock.json b/package-lock.json
index ff11317..f39a24d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,9 +47,11 @@
         "nuxt-svg-loader": "^1.2.0",
         "postcss": "^8.4.21",
         "prettier": "^2.3.1",
-        "sass-loader": "^10.2.0",
+        "sass": "^1.62.1",
+        "sass-loader": "^10.1.1",
         "stylelint": "^13.13.0",
         "stylelint-webpack-plugin": "^2.1.1",
+        "topojson": "^3.0.2",
         "webpack": "^4.46.0"
       }
     },
@@ -15889,7 +15891,8 @@
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
-      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -22977,6 +22980,7 @@
       "version": "1.66.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
       "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -26256,6 +26260,82 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/topojson": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/topojson/-/topojson-3.0.2.tgz",
+      "integrity": "sha512-u3zeuL6WEVL0dmsRn7uHZKc4Ao4gpW3sORUv+N3ezLTvY3JdCuyg0hvpWiIfFw8p/JwVN++SvAsFgcFEeR15rQ==",
+      "deprecated": "Use topojson-client, topojson-server or topojson-simplify directly.",
+      "dev": true,
+      "dependencies": {
+        "topojson-client": "3.0.0",
+        "topojson-server": "3.0.0",
+        "topojson-simplify": "3.0.2"
+      },
+      "bin": {
+        "geo2topo": "node_modules/topojson-server/bin/geo2topo",
+        "topo2geo": "node_modules/topojson-client/bin/topo2geo",
+        "topomerge": "node_modules/topojson-client/bin/topomerge",
+        "topoquantize": "node_modules/topojson-client/bin/topoquantize",
+        "toposimplify": "node_modules/topojson-simplify/bin/toposimplify"
+      }
+    },
+    "node_modules/topojson-client": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.0.0.tgz",
+      "integrity": "sha512-2phZ98wg/iKvsWxbB6JQcq0/N0f+sRx8ZogdvjCg+CjaJdmV0knP0OQwK5XbgnytAPx5lPZk41kiWpgH2w9FHg==",
+      "dev": true,
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
+    "node_modules/topojson-client/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/topojson-server": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.0.tgz",
+      "integrity": "sha512-UhhwQk4e2+lwhAVYkja3J5nQHQmKwORDuIQPkMnFFZFcLqWKLQWI3u7fZWtNIXTElBjTYdBUL1kzi1+oS/qDQw==",
+      "dev": true,
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "geo2topo": "bin/geo2topo"
+      }
+    },
+    "node_modules/topojson-server/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/topojson-simplify": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/topojson-simplify/-/topojson-simplify-3.0.2.tgz",
+      "integrity": "sha512-gyYSVRt4jO/0RJXKZQPzTDQRWV+D/nOfiljNUv0HBXslFLtq3yxRHrl7jbrjdbda5Ytdr7M8BZUI4OxU7tnbRQ==",
+      "dev": true,
+      "dependencies": {
+        "commander": "2",
+        "topojson-client": "3"
+      },
+      "bin": {
+        "toposimplify": "bin/toposimplify"
+      }
+    },
+    "node_modules/topojson-simplify/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
@@ -41261,7 +41341,8 @@
     "immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
-      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "dev": true
     },
     "import-fresh": {
       "version": "3.3.0",
@@ -46757,6 +46838,7 @@
       "version": "1.66.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
       "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -49395,6 +49477,69 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "topojson": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/topojson/-/topojson-3.0.2.tgz",
+      "integrity": "sha512-u3zeuL6WEVL0dmsRn7uHZKc4Ao4gpW3sORUv+N3ezLTvY3JdCuyg0hvpWiIfFw8p/JwVN++SvAsFgcFEeR15rQ==",
+      "dev": true,
+      "requires": {
+        "topojson-client": "3.0.0",
+        "topojson-server": "3.0.0",
+        "topojson-simplify": "3.0.2"
+      }
+    },
+    "topojson-client": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.0.0.tgz",
+      "integrity": "sha512-2phZ98wg/iKvsWxbB6JQcq0/N0f+sRx8ZogdvjCg+CjaJdmV0knP0OQwK5XbgnytAPx5lPZk41kiWpgH2w9FHg==",
+      "dev": true,
+      "requires": {
+        "commander": "2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "topojson-server": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/topojson-server/-/topojson-server-3.0.0.tgz",
+      "integrity": "sha512-UhhwQk4e2+lwhAVYkja3J5nQHQmKwORDuIQPkMnFFZFcLqWKLQWI3u7fZWtNIXTElBjTYdBUL1kzi1+oS/qDQw==",
+      "dev": true,
+      "requires": {
+        "commander": "2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "topojson-simplify": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/topojson-simplify/-/topojson-simplify-3.0.2.tgz",
+      "integrity": "sha512-gyYSVRt4jO/0RJXKZQPzTDQRWV+D/nOfiljNUv0HBXslFLtq3yxRHrl7jbrjdbda5Ytdr7M8BZUI4OxU7tnbRQ==",
+      "dev": true,
+      "requires": {
+        "commander": "2",
+        "topojson-client": "3"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
     "totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
diff --git a/package.json b/package.json
index 5ce085e..cbe38ff 100644
--- a/package.json
+++ b/package.json
@@ -62,9 +62,11 @@
     "nuxt-svg-loader": "^1.2.0",
     "postcss": "^8.4.21",
     "prettier": "^2.3.1",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^10.1.1",
     "stylelint": "^13.13.0",
     "stylelint-webpack-plugin": "^2.1.1",
+    "topojson": "^3.0.2",
     "webpack": "^4.46.0"
   },
   "lint-staged": {
diff --git a/pages/_main/_category/index.vue b/pages/_main/_category/index.vue
index 4259220..82bee8a 100644
--- a/pages/_main/_category/index.vue
+++ b/pages/_main/_category/index.vue
@@ -64,6 +64,7 @@ export default {
       list,
     };
   },
+
   computed: {
     categoryMeta() {
       return this.list.find((x) => x.slug === this.$route.params.category);
diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue
new file mode 100644
index 0000000..9afa3ff
--- /dev/null
+++ b/pages/blog/_slug.vue
@@ -0,0 +1,38 @@
+<template>
+  <main class="main-content">
+    <div class="container">
+      <nuxt-content class="content" :document="post" />
+      <AuthorCard :post="post" :people="people" />
+    </div>
+    <nuxtLink to="/blog" class="mb-5">
+      <DButton name="Back to blog" variant="warning" size="medium" />
+    </nuxtLink>
+  </main>
+</template>
+
+<script>
+import DButton from '@/components/base/DButton.vue';
+import AuthorCard from '@/components/base/AuthorCard.vue';
+export default {
+  components: {
+    DButton,
+    AuthorCard,
+  },
+  async asyncData({ $content, params }) {
+    const post = await $content('blog', params.slug)
+      .where({ slug: params.slug })
+      .limit(1)
+      .fetch();
+
+    const people = await $content('about')
+      .where({ slug: 'people' })
+      .only(['data'])
+      .fetch();
+
+    return {
+      post,
+      people,
+    };
+  },
+};
+</script>
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
new file mode 100644
index 0000000..d2c6534
--- /dev/null
+++ b/pages/blog/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <DHero
+      variant="light"
+      :title="index[0].title"
+      :subtitle="index[0].description"
+    >
+    </DHero>
+    <MarkdownToCards :data="data" />
+  </div>
+</template>
+
+<script>
+import DHero from '@/components/base/DHero.vue';
+// other components are lazy loaded per advice in https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/
+
+export default {
+  components: {
+    DHero,
+    MarkdownToCards: () => import('@/components/blocks/MarkdownToCards.vue'),
+  },
+  async asyncData({ $content, error }) {
+    // get the files of top content directories.
+    // this provides title and subtitle for banners
+    const index = await $content('meta', 'blog')
+      .fetch()
+      .catch((e) => error({ statusCode: 404, message: 'Page not found' }));
+
+    // get the content for directories that are only one level deep
+    const data = await $content('blog')
+      .sortBy('date', 'asc')
+      .fetch()
+      .catch((e) => error({ statusCode: 404, message: 'Page not found' }));
+
+    return { index, data };
+  },
+};
+</script>