diff --git a/.eleventy.js b/.eleventy.js
index 35db113..f886ca4 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,8 +1,35 @@
-const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
+const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+// const pluginRss = require('@11ty/eleventy-plugin-rss')
+const markdownItAnchor = require('markdown-it-anchor');
 
+const formatYear = new Intl.DateTimeFormat('en', { year: 'numeric' });
+const formatMonth = new Intl.DateTimeFormat('en', { month: 'short' });
+const formatDay = new Intl.DateTimeFormat('en', { day: '2-digit' });
+const md = require('markdown-it');
+const mdContainer = require('markdown-it-container');
+
+const markdown = md({ html: true, breaks: true, linkify: true }).use(
+  mdContainer,
+  'codeblock',
+  {
+    render: function (tokens, idx) {
+      if (tokens[idx].type === 'container_codeblock_open') {
+        return `
+          <div class="rounded-lg shadow-lg">
+        `;
+      }
+      return `</div>`;
+    },
+  }
+);
 module.exports = (config) => {
-  config.addPassthroughCopy({ public: './' })
-  config.addPlugin(eleventyNavigationPlugin)
+  config.addPassthroughCopy({ public: './' });
+  // plugins
+  config.addPlugin(eleventyNavigationPlugin);
+  config.addPlugin(pluginSyntaxHighlight);
+  // config
+  config.setLibrary('md', markdown);
 
   config.setBrowserSyncConfig({
     files: ['dist/**/*'],
@@ -12,18 +39,32 @@ module.exports = (config) => {
       rule: {
         match: /<\/head>/i,
         fn: function (snippet, match) {
-          return snippet + match
+          return snippet + match;
         },
       },
     },
-  })
-  config.setDataDeepMerge(true)
+  });
+  config.setDataDeepMerge(true);
+  // Nunjucks Filter
+  config.addNunjucksFilter('displayDate', function (d) {
+    const ye = formatYear.format(d);
+    const mo = formatMonth.format(d);
+    const da = formatDay.format(d);
+    return `${da} ${mo} ${ye}`;
+  });
+  config.addNunjucksFilter('displayTags', function (tags) {
+    // should match the list in tags.njk
+    return (tags || []).filter(
+      (tag) => ['all', 'nav', 'note', 'article'].indexOf(tag) === -1
+    );
+  });
 
   return {
-    templateFormats: ['md', 'njk', 'html', 'liquid'],
+    templateFormats: ['md', 'njk', 'html'],
+    markdownTemplateEngine: false,
     dir: {
       input: 'src',
       output: 'dist',
     },
-  }
-}
+  };
+};
diff --git a/package-lock.json b/package-lock.json
index 53b5e6d..f22d641 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,15 +15,20 @@
       "devDependencies": {
         "@11ty/eleventy": "^0.11.0",
         "@11ty/eleventy-navigation": "^0.1.6",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0",
         "@tailwindcss/forms": "^0.2.1",
         "autoprefixer": "^10.1.0",
         "cross-env": "^7.0.2",
         "css-loader": "^5.0.1",
+        "markdown-it": "^10.0.0",
+        "markdown-it-anchor": "^7.1.0",
+        "markdown-it-container": "^3.0.0",
         "mini-css-extract-plugin": "^1.3.3",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.2.1",
         "postcss-import": "^14.0.0",
         "postcss-loader": "^4.1.0",
+        "postcss-nested": "^5.0.5",
         "style-loader": "^2.0.0",
         "tailwindcss": "^2.0.2",
         "tailwindcss-debug-screens": "^2.0.0",
@@ -108,6 +113,23 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-3.1.0.tgz",
+      "integrity": "sha512-Zb+34UlXsC5ZU22LZJISdbh7UzzWosUJrB6cSuvaEGUlp8+gF6ZUm+JYUpB7O8sENDtZqCzATilGk+UejKRw6Q==",
+      "dev": true,
+      "dependencies": {
+        "linkedom": "^0.5.5",
+        "prismjs": "^1.23.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      },
+      "peerDependencies": {
+        "@11ty/eleventy": ">=0.5.4"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -320,6 +342,12 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "node_modules/@ungap/event-target": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@ungap/event-target/-/event-target-0.2.2.tgz",
+      "integrity": "sha512-z0bsRd8APns6CDBVEPEj3p82TiFc1UY8uWNhL+T0ydpQqnpHyPVwwgJ4FC5KP85sLbg80+g+h644UTatwKNi/g==",
+      "dev": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.1.tgz",
@@ -963,6 +991,12 @@
       "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
       "dev": true
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1399,6 +1433,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -1827,12 +1873,40 @@
         "node": ">=10"
       }
     },
+    "node_modules/css-select": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+      "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^4.0.0",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.3",
+        "nth-check": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
       "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
       "dev": true
     },
+    "node_modules/css-what": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+      "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1917,6 +1991,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -1988,6 +2069,61 @@
       "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
       "dev": true
     },
+    "node_modules/dom-serializer": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+      "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+      "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
+      "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.1.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz",
+      "integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/easy-extender": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
@@ -2785,6 +2921,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -2914,6 +3060,12 @@
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
+    "node_modules/html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
+      "dev": true
+    },
     "node_modules/html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@@ -2923,6 +3075,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.0.1.tgz",
+      "integrity": "sha512-GDKPd+vk4jvSuvCbyuzx/unmXkk090Azec7LovXP8as1Hn8q9p3hbjmDGbUqqhknw0ajwit6LiiWqfiTUPMK7w==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.4",
+        "entities": "^2.0.0"
+      }
+    },
     "node_modules/http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -3567,6 +3738,19 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "node_modules/linkedom": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.5.6.tgz",
+      "integrity": "sha512-6PLYvs7memANEiA7aqzI6hPfi0yRJwup8uwp8yviCyQLu1hdvdlkULYATA4G/y/kMEpgGPnIQ57mTL5/0TylZw==",
+      "dev": true,
+      "dependencies": {
+        "@ungap/event-target": "^0.2.2",
+        "css-select": "^3.1.2",
+        "html-escaper": "^3.0.3",
+        "htmlparser2": "^6.0.0",
+        "uhyphen": "^0.1.0"
+      }
+    },
     "node_modules/linkify-it": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
@@ -3739,6 +3923,21 @@
         "markdown-it": "bin/markdown-it.js"
       }
     },
+    "node_modules/markdown-it-anchor": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-7.1.0.tgz",
+      "integrity": "sha512-loQggrwsIkkP7TOrESvmYkV2ikbQNNKhHcWyqC7/C2CmfHl1tkUizJJU8C5aGgg7J6oXVQJx17gk7i47tNn/lQ==",
+      "dev": true,
+      "peerDependencies": {
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it-container": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-3.0.0.tgz",
+      "integrity": "sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==",
+      "dev": true
+    },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
@@ -4251,6 +4450,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nunjucks": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.1.tgz",
@@ -4965,15 +5176,22 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.3.tgz",
-      "integrity": "sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
+      "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
       },
       "engines": {
         "node": ">=10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.13"
       }
     },
     "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
@@ -5070,6 +5288,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
+      "dev": true,
+      "optionalDependencies": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -5700,6 +5927,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/semver": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@@ -6682,6 +6916,13 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/to-array": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
@@ -6784,6 +7025,12 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/uhyphen": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz",
+      "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==",
+      "dev": true
+    },
     "node_modules/unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
@@ -7366,6 +7613,16 @@
         }
       }
     },
+    "@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-3.1.0.tgz",
+      "integrity": "sha512-Zb+34UlXsC5ZU22LZJISdbh7UzzWosUJrB6cSuvaEGUlp8+gF6ZUm+JYUpB7O8sENDtZqCzATilGk+UejKRw6Q==",
+      "dev": true,
+      "requires": {
+        "linkedom": "^0.5.5",
+        "prismjs": "^1.23.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -7559,6 +7816,12 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@ungap/event-target": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@ungap/event-target/-/event-target-0.2.2.tgz",
+      "integrity": "sha512-z0bsRd8APns6CDBVEPEj3p82TiFc1UY8uWNhL+T0ydpQqnpHyPVwwgJ4FC5KP85sLbg80+g+h644UTatwKNi/g==",
+      "dev": true
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.1.tgz",
@@ -8117,6 +8380,12 @@
       "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
       "dev": true
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8467,6 +8736,18 @@
         }
       }
     },
+    "clipboard": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -8824,12 +9105,31 @@
         }
       }
     },
+    "css-select": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+      "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^4.0.0",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.3",
+        "nth-check": "^2.0.0"
+      }
+    },
     "css-unit-converter": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
       "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
       "dev": true
     },
+    "css-what": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+      "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -8893,6 +9193,13 @@
         "rimraf": "^2.2.8"
       }
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -8946,6 +9253,43 @@
       "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
       "dev": true
     },
+    "dom-serializer": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+      "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+      "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
+      "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.1.0"
+      }
+    },
+    "domutils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.5.0.tgz",
+      "integrity": "sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0"
+      }
+    },
     "easy-extender": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.4.tgz",
@@ -9592,6 +9936,16 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -9694,12 +10048,30 @@
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
       "dev": true
     },
+    "html-escaper": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
+      "dev": true
+    },
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
       "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
       "dev": true
     },
+    "htmlparser2": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.0.1.tgz",
+      "integrity": "sha512-GDKPd+vk4jvSuvCbyuzx/unmXkk090Azec7LovXP8as1Hn8q9p3hbjmDGbUqqhknw0ajwit6LiiWqfiTUPMK7w==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.4",
+        "entities": "^2.0.0"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -10207,6 +10579,19 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "linkedom": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.5.6.tgz",
+      "integrity": "sha512-6PLYvs7memANEiA7aqzI6hPfi0yRJwup8uwp8yviCyQLu1hdvdlkULYATA4G/y/kMEpgGPnIQ57mTL5/0TylZw==",
+      "dev": true,
+      "requires": {
+        "@ungap/event-target": "^0.2.2",
+        "css-select": "^3.1.2",
+        "html-escaper": "^3.0.3",
+        "htmlparser2": "^6.0.0",
+        "uhyphen": "^0.1.0"
+      }
+    },
     "linkify-it": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
@@ -10345,6 +10730,19 @@
         "uc.micro": "^1.0.5"
       }
     },
+    "markdown-it-anchor": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-7.1.0.tgz",
+      "integrity": "sha512-loQggrwsIkkP7TOrESvmYkV2ikbQNNKhHcWyqC7/C2CmfHl1tkUizJJU8C5aGgg7J6oXVQJx17gk7i47tNn/lQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "markdown-it-container": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-3.0.0.tgz",
+      "integrity": "sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==",
+      "dev": true
+    },
     "maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
@@ -10743,6 +11141,15 @@
         }
       }
     },
+    "nth-check": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
     "nunjucks": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.1.tgz",
@@ -11309,9 +11716,9 @@
       }
     },
     "postcss-nested": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.3.tgz",
-      "integrity": "sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
+      "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
       "dev": true,
       "requires": {
         "postcss-selector-parser": "^6.0.4"
@@ -11385,6 +11792,15 @@
         "parse-ms": "^0.1.0"
       }
     },
+    "prismjs": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -11936,6 +12352,13 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
     "semver": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@@ -12788,6 +13211,13 @@
         }
       }
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "optional": true
+    },
     "to-array": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
@@ -12869,6 +13299,12 @@
       "dev": true,
       "optional": true
     },
+    "uhyphen": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.1.0.tgz",
+      "integrity": "sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==",
+      "dev": true
+    },
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
diff --git a/package.json b/package.json
index 66614ff..0dcaec5 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "url": "git+https://github.com/mattwaler/tea-stack.git"
   },
   "prettier": {
-    "semi": false,
+    "semi": true,
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
@@ -42,15 +42,20 @@
   "devDependencies": {
     "@11ty/eleventy": "^0.11.0",
     "@11ty/eleventy-navigation": "^0.1.6",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0",
     "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.1.0",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
+    "markdown-it": "^10.0.0",
+    "markdown-it-anchor": "^7.1.0",
+    "markdown-it-container": "^3.0.0",
     "mini-css-extract-plugin": "^1.3.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.1",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.1.0",
+    "postcss-nested": "^5.0.5",
     "style-loader": "^2.0.0",
     "tailwindcss": "^2.0.2",
     "tailwindcss-debug-screens": "^2.0.0",
diff --git a/postcss.config.js b/postcss.config.js
index 980a0c5..b391d6f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,8 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
-    require('tailwindcss')('./tailwind.config.js'),
+    require('tailwindcss'),
+    require('postcss-nested'),
     require('autoprefixer'),
   ],
-}
+};
diff --git a/public/images/icons/bx-arrow.svg b/public/images/icons/bx-arrow.svg
new file mode 100644
index 0000000..c7105c8
--- /dev/null
+++ b/public/images/icons/bx-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.214" height="9.214" viewBox="0 0 9.214 9.214"><defs><style>.a{fill:#d9d6c5;}</style></defs><path class="a" d="M9.636,13.536l.971.971L15.214,9.9,10.607,5.293l-.971.971,2.949,2.949H6v1.374h6.585Z" transform="translate(-6 -5.293)"/></svg>
\ No newline at end of file
diff --git a/src/_bundle/main.js b/src/_bundle/main.js
index 1b453c8..1402a78 100644
--- a/src/_bundle/main.js
+++ b/src/_bundle/main.js
@@ -1,9 +1,9 @@
 // CSS
-import './main.pcss'
+import './main.pcss';
 
-// JS
-import 'alpinejs'
-import 'turbolinks'
-import Turbolinks from 'turbolinks'
+// // JS
+// import 'alpinejs'
+// import 'turbolinks'
+// import Turbolinks from 'turbolinks'
 
-Turbolinks.start()
+// Turbolinks.start()
diff --git a/src/_bundle/main.pcss b/src/_bundle/main.pcss
index 887e6e3..8309614 100644
--- a/src/_bundle/main.pcss
+++ b/src/_bundle/main.pcss
@@ -3,6 +3,8 @@
 
 @import 'tailwindcss/components';
 @import './styles/components.pcss';
+@import './styles/markdown.pcss';
+@import './styles/code.pcss';
 
 @import 'tailwindcss/utilities';
 @import './styles/utilities.pcss';
diff --git a/src/_bundle/styles/code.pcss b/src/_bundle/styles/code.pcss
new file mode 100644
index 0000000..0c83a6e
--- /dev/null
+++ b/src/_bundle/styles/code.pcss
@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #c5c8c6;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #7c7c7c;
+}
+
+.token.punctuation {
+  color: #c5c8c6;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+  color: #96cbfe;
+}
+
+.token.class-name {
+  color: #ffffb6;
+  text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+  color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.number {
+  color: #ff73fd;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a8ff60;
+}
+
+.token.variable {
+  color: #c6c5fe;
+}
+
+.token.operator {
+  color: #ededed;
+}
+
+.token.entity {
+  color: #ffffb6;
+  cursor: help;
+}
+
+.token.url {
+  color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+  color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+  color: #f9ee98;
+}
+
+.token.function {
+  color: #dad085;
+}
+
+.token.regex {
+  color: #e9c062;
+}
+
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
diff --git a/src/_bundle/styles/markdown.pcss b/src/_bundle/styles/markdown.pcss
new file mode 100644
index 0000000..a59ee75
--- /dev/null
+++ b/src/_bundle/styles/markdown.pcss
@@ -0,0 +1,92 @@
+.markdown {
+  pre {
+    margin: 0;
+  }
+  & > * + * {
+    @apply mt-8;
+  }
+
+  blockquote {
+    @apply border-l-2 border-gray-500 italic pl-4;
+  }
+
+  a {
+    @apply text-indigo-200 font-medium underline;
+  }
+
+  p {
+    @apply text-gray-50 text-lg leading-relaxed;
+  }
+
+  ul {
+    @apply ml-8;
+  }
+
+  li::before {
+    content: ⚪;
+    margin-top: 3px;
+    margin-left: -26px;
+    @apply absolute left-0 top-0;
+  }
+
+  li + li {
+    @apply mt-4;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-extrabold leading-tight;
+
+    & + * {
+      @apply mt-4;
+    }
+
+    * + & {
+      @apply mt-16;
+    }
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+  h2 {
+    @apply text-2xl;
+  }
+  h3 {
+    @apply text-xl;
+  }
+  h4 {
+    @apply text-lg;
+  }
+  h5 {
+    @apply text-base;
+  }
+  h6 {
+    @apply text-base;
+  }
+
+  @screen md {
+    h1 {
+      @apply text-4xl;
+    }
+    h2 {
+      @apply text-3xl;
+    }
+    h3 {
+      @apply text-2xl;
+    }
+    h4 {
+      @apply text-xl;
+    }
+    h5 {
+      @apply text-lg;
+    }
+    h6 {
+      @apply text-lg;
+    }
+  }
+}
diff --git a/src/_includes/banner.njk b/src/_includes/banner.njk
index f4c65a4..b79cc21 100644
--- a/src/_includes/banner.njk
+++ b/src/_includes/banner.njk
@@ -1,6 +1,11 @@
 <section class="bg-mydark-500  w-full  py-10">
 <div class="container w-8/12 "> 
-  <h1 class="sm:text-5xl text-3xl title-font font-black text-white my-4">{{banner.title}}</h1>
-  <p class="mb-4 text-gray-300">{{banner.subtitle}}</p>
+  <h1 class="sm:text-5xl text-3xl title-font font-black text-white my-4">
+  {% if banner.title==null %}
+    {{title}}
+  {% endif %}
+    {{ banner.title }}
+  </h1>
+  <p class="mb-4 text-gray-300">{{ banner.description }}</p>
 </div>
 </section>
\ No newline at end of file
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
index e5ba1b9..524b342 100644
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -1,13 +1,21 @@
-<nav class="bg-mydark-500 flex justify-between align-middle p-4 fixed w-full top-0">
-    <a class="block title-font text-xl w-1/12 text-right" href="/">
-   Kelvin Lockwood  
-    </a>
-    <div class="flex items-center">
+<nav
+  class="bg-mydark-500 flex justify-between align-middle p-4 sticky w-full top-0"
+>
+  <a class="block title-font text-xl w-1/12 text-right" href="/">
+    Kelvin Lockwood
+  </a>
+  <div class="flex items-center">
     {% for item in collections.all | eleventyNavigation %}
-      <a class="mx-2 {{ 'font-black' if page.url == item.url }}"
-        href="{{ item.url | url }}">
-        {{ item.title }}
-      </a>
+    <a
+      class="mx-2 {{ 'font-black' if page.url == item.url }}"
+      href="{{ item.url | url }}"
+    >
+      {{ item.title }}
+    </a>
     {% endfor %}
-    </div>
+  </div>
+  <div
+    id="reading-progress"
+    class="-left-4 bottom-0 h-0.5 w-screen absolute bg-myred-500"
+  ></div>
 </nav>
diff --git a/src/_includes/layouts/article.njk b/src/_includes/layouts/article.njk
new file mode 100644
index 0000000..0693630
--- /dev/null
+++ b/src/_includes/layouts/article.njk
@@ -0,0 +1,43 @@
+---
+layout: layouts/base.njk
+---
+
+{% block body %}
+<main class="w-full bg-mydark-300 flex justify-center">
+  <section class="container sm:w-8/12 mx-auto w-full m-0 flex py-10">
+    <div class="w-1/3 pr-12 text-sm">
+      <div class="flex flex-col border-b-4 border-mygray-500 pb-5">
+        <span class="my-2 text-gray-400 flex items-center font-light">
+          <img class="w-3 mr-2" src="/images/icons/bxs-pencil.svg" alt="link" />
+          {{ date | displayDate }}
+        </span>
+        <span class="my-2 text-gray-400 flex items-center font-light">
+          <img
+            class="w-3 mr-2"
+            src="/images/icons/bxs-stopwatch.svg"
+            alt="link"
+          />
+          {% set wc = content | striptags | wordcount %} {% set wPerMinute = (wc
+          / 200) + 1 %}
+          {{ wPerMinute | round }} min read.
+        </span>
+      </div>
+      <div class="flex flex-col items-start mt-3">
+        <span
+          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
+        >
+          technology
+        </span>
+        <span
+          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
+        >
+          ui-ux
+        </span>
+      </div>
+    </div>
+    <div class="flex flex-col w-2/3 markdown text-white">
+      {{ content | safe }}
+    </div>
+  </section>
+</main>
+{% endblock %}
diff --git a/src/_includes/layout.njk b/src/_includes/layouts/base.njk
similarity index 60%
rename from src/_includes/layout.njk
rename to src/_includes/layouts/base.njk
index aaf8d3c..1ab69d4 100644
--- a/src/_includes/layout.njk
+++ b/src/_includes/layouts/base.njk
@@ -8,15 +8,12 @@
     <title>{{ title }} | TEA Stack</title>
     {% block head %}{% endblock %}
   </head>
-  <body
-    class="mt-20 text-white bg-mydark-500 {{ 'debug-screens' if env.devMode }}"
-  >
-    {% include 'header.njk' %} 
-    {% if banner %}
-      {% include "banner.njk" %}
-    {% endif %}
-    {% block body %}
-    <div class="py-8">
+  <body class="text-white bg-mydark-500 {{ 'debug-screens' if env.devMode }}">
+    {% include 'header.njk' %} {% if banner %} {% include "banner.njk" %} {%
+    endif %} {% block body %}
+    <div
+      class="py-8 m-0 w-full bg-mydark-300 {% if container %} px-48 {% endif %}"
+    >
       {{ content | safe }}
     </div>
     {% endblock %}
@@ -45,7 +42,7 @@
             praesent semper feugiat nibh. Massa sed elementum tempus.
           </p>
           <button
-            class="bg-myred-500 rounded-lg text-white px-4 py-2 mt-10 w-1/2"
+            class="bg-myred-500 rounded-lg text-white hover:bg-white hover:text-myred-500 px-4 py-2 mt-10 w-1/2"
           >
             Check it out!
           </button>
@@ -80,5 +77,44 @@
         </div>
       </div>
     </footer>
+    <script defer>
+      if (window.ResizeObserver) {
+        const progress = document.getElementById('reading-progress');
+
+        let timeOfLastScroll = 0;
+        let requestedAniFrame = false;
+        function scroll() {
+          if (!requestedAniFrame) {
+            requestAnimationFrame(updateProgress);
+            requestedAniFrame = true;
+          }
+          timeOfLastScroll = Date.now();
+        }
+        addEventListener('scroll', scroll);
+
+        let winHeight = 1000;
+        let bottom = 10000;
+        function updateProgress() {
+          requestedAniFrame = false;
+          const percent = Math.min(
+            (document.scrollingElement.scrollTop / (bottom - winHeight)) * 100,
+            100
+          );
+          progress.style.transform = `translate(-${100 - percent}vw, 0)`;
+          if (Date.now() - timeOfLastScroll < 3000) {
+            requestAnimationFrame(updateProgress);
+            requestedAniFrame = true;
+          }
+        }
+
+        new ResizeObserver(() => {
+          bottom =
+            document.scrollingElement.scrollTop +
+            document.querySelector('footer').getBoundingClientRect().top;
+          winHeight = window.innerHeight;
+          scroll();
+        }).observe(document.body);
+      }
+    </script>
   </body>
 </html>
diff --git a/src/articles/article1.md b/src/articles/article1.md
new file mode 100644
index 0000000..70de49b
--- /dev/null
+++ b/src/articles/article1.md
@@ -0,0 +1,38 @@
+---
+title: This is my first post.
+description: This is a post on My Blog about agile frameworks.
+date: 2018-05-01
+tags:
+  - another-tag
+image: https://cdn.pixabay.com/photo/2020/08/30/20/54/rice-field-5530707_1280.jpg
+layout: layouts/article.njk
+banner:
+  title: Magna etiam tempor orci eu lino loborti na lapa di toli
+  description: Tellus elementum sagittis vitae et leo duis ut diam. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.
+---
+
+Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+## this is header
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+![An image](https://cdn.pixabay.com/photo/2020/08/30/20/54/rice-field-5530707_1280.jpg)
+
+## Section Header
+
+Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+::: codeblock
+
+```js
+// this is a command
+function myCommand() {
+  let counter = 0;
+  counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+:::
diff --git a/src/posts/post1.md b/src/articles/article2.md
similarity index 87%
rename from src/posts/post1.md
rename to src/articles/article2.md
index e711d93..be36cea 100644
--- a/src/posts/post1.md
+++ b/src/articles/article2.md
@@ -1,14 +1,14 @@
 ---
-title: Magna etiam tempor orci eu lino loborti na lapa di toli
-layout: layout.njk
+title: an interesting title
+layout: layouts/article.njk
+date: 2018-01-02
 banner:
-  title: Magna etiam tempor orci eu lino loborti na lapa di toli
-  subtitle: Tellus elementum sagittis vitae et leo duis ut diam. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.
+  description: Tellus elementum sagittis vitae et leo duis ut diam. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.
+tags:
+  - ui
 ---
 
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ut cum,
-nostrum porro, molestiae voluptates nam neque placeat aliquid saepe quod
-blanditiis eligendi ab illo ad corrupti ex culpa velit aspernatur
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ut cum,nostrum porro, molestiae voluptates nam neque placeat aliquid saepe quod blanditiis eligendi ab illo ad corrupti ex culpa velit aspernatur
 accusamus dolorum quae natus. Dolor consectetur ut autem sit, atque,
 corporis cupiditate praesentium harum placeat, odit dolore explicabo? Ea
 eos repellat dignissimos, ex maxime non officiis doloribus eius sit a
diff --git a/src/articles/articles.json b/src/articles/articles.json
new file mode 100644
index 0000000..d4e0bb5
--- /dev/null
+++ b/src/articles/articles.json
@@ -0,0 +1,3 @@
+{
+  "tags": "article"
+}
diff --git a/src/index.njk b/src/index.njk
index fbd0cb1..6a5743d 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -1,5 +1,5 @@
 {# This page is built with nunjucks! #} {% set title = 'Home' %} {% extends
-"layout.njk" %} {% block body %}
+"layouts/base.njk" %} {% block body %}
 <main>
   <section class="text-gray-400 bg-mydark-500 body-font">
     <div
diff --git a/src/pages/about.md b/src/pages/about.md
index be36f86..61a2caf 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -1,11 +1,18 @@
 ---
 title: About
-layout: layout.njk
+layout: layouts/base.njk
 eleventyNavigation:
   key: About
   order: 2
+banner:
+  description: About me!!!
+container: true
 ---
 
-<!-- This page is written in markdown! -->
+## HELLO
 
-# This is the {{ title }} page.
+Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis dolorum, illo beatae distinctio, nostrum atque delectus dignissimos, nihil quod quas odio expedita commodi explicabo. Reiciendis optio eligendi illo amet at?
+Cumque voluptas, magnam porro quas labore facere tenetur beatae eum libero voluptates voluptate consequatur dolor aperiam, eos minus veniam consectetur. Officia adipisci voluptatum saepe sapiente impedit facere eos molestias ullam.
+Minus necessitatibus, sapiente non excepturi sed cupiditate pariatur, ullam voluptatem omnis inventore quas voluptatum doloremque quam in eligendi. Laudantium veniam unde odit nulla excepturi totam iusto repellat nesciunt provident illum.
+In ullam nulla ducimus qui vel necessitatibus at quos consectetur fugiat. Quo atque maxime consectetur voluptatem corrupti rerum praesentium facilis, eaque porro minus quam magnam laboriosam laborum quia, officia totam?
+Harum veniam dolores voluptate nostrum, adipisci corrupti ea dignissimos placeat! Qui laboriosam quaerat, eligendi vitae, voluptatem, cumque neque quisquam earum beatae fugiat blanditiis distinctio aperiam reiciendis a! Consequuntur, voluptates corrupti.
diff --git a/src/pages/article.njk b/src/pages/article.njk
deleted file mode 100644
index 3810482..0000000
--- a/src/pages/article.njk
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Single Article
-layout: layout.njk
-eleventyNavigation:
-  key: Article
-  order: 1
-banner:
-  title: Magna etiam tempor orci eu lino loborti na lapa di toli
-  subtitle: Tellus elementum sagittis vitae et leo duis ut diam. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus.
----
-
-{% block body %}
-<main class="w-full bg-mydark-300 flex justify-center">
-  <section class="container sm:w-8/12 mx-auto w-full m-0 flex py-10">
-    <div class="w-1/3 pr-12 text-sm">
-      <div class="flex flex-col border-b-4 border-mygray-500 pb-5">
-        <span class="my-2 text-gray-400 flex items-center font-light">
-          <img class="w-3 mr-2" src="/images/icons/bxs-pencil.svg" alt="link" />
-          10 Feb2020
-        </span>
-        <span class="my-2 text-gray-400 flex items-center font-light">
-          <img
-            class="w-3 mr-2"
-            src="/images/icons/bxs-stopwatch.svg"
-            alt="link"
-          />
-
-          2 min read
-        </span>
-      </div>
-      <div class="flex flex-col items-start mt-3">
-        <span
-          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
-        >
-          technology
-        </span>
-        <span
-          class="mt-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
-        >
-          ui-ux
-        </span>
-      </div>
-    </div>
-    <p class="flex w-2/3">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ut cum,
-      nostrum porro, molestiae voluptates nam neque placeat aliquid saepe quod
-      blanditiis eligendi ab illo ad corrupti ex culpa velit aspernatur
-      accusamus dolorum quae natus. Dolor consectetur ut autem sit, atque,
-      corporis cupiditate praesentium harum placeat, odit dolore explicabo? Ea
-      eos repellat dignissimos, ex maxime non officiis doloribus eius sit a
-      facilis consectetur, maiores voluptate quas, iusto ullam nihil perferendis
-      harum nobis repellendus delectus libero debitis nisi architecto? Quia
-      laboriosam tempora magnam eos. Illum mollitia architecto est, facilis,
-      soluta odit, qui laboriosam itaque molestias ullam hic. Voluptatem modi
-      blanditiis vel in hic repudiandae id, ratione quisquam error voluptatibus
-      quae eveniet dolorem, qui nostrum quas consequuntur laborum sunt,
-      exercitationem quia inventore rerum nobis? Perferendis similique,
-      blanditiis, eius, voluptates eveniet autem itaque accusamus praesentium
-      quis optio deleniti. Animi temporibus repudiandae minus eveniet, aliquid
-      id explicabo voluptatum, voluptatibus distinctio quis eum in et modi
-      recusandae ipsa culpa! Voluptas earum repellat porro error esse adipisci
-      blanditiis a rerum, exercitationem enim nesciunt natus, optio tempore
-      fugit facilis accusamus modi explicabo repellendus! Tempora laudantium
-      iste nulla eligendi accusantium, temporibus enim vel ut dicta, adipisci
-      culpa modi quibusdam reiciendis quasi? Eius tempora exercitationem nisi
-      sapiente odit saepe modi aperiam recusandae, soluta numquam esse eligendi
-      sit ad natus, aliquid, minima consectetur magni asperiores laboriosam
-      nihil magnam tempore sequi! Temporibus deleniti eveniet corporis veniam
-      doloremque velit, sint est consequatur qui? Suscipit nihil quaerat harum
-      enim quibusdam numquam accusantium eligendi. Ipsum dolorem accusamus iusto
-      officiis minus hic, aut, ut rem molestiae quod ratione quam sint amet, ea
-      aliquid alias aperiam repudiandae officia consectetur sapiente dolore odio
-      animi tempore eius. Quis excepturi fugiat ad. Dolor quam fugit vero nulla!
-      Nam culpa sapiente adipisci! Alias dolore earum ex exercitationem iusto
-      provident corporis repellat, quaerat tempore quidem delectus at voluptate
-      velit necessitatibus eum architecto rem. Odit impedit quam quos harum.
-      Quidem quasi officia, itaque illo saepe odit! Unde suscipit, maiores
-      doloremque quos placeat nisi maxime optio officiis libero possimus, dolore
-      aperiam cupiditate assumenda saepe omnis quasi est et ducimus ad. A fugiat
-      nemo dicta rem, ducimus eligendi voluptatibus excepturi sunt expedita quas
-      ea corrupti totam aliquid minima eveniet quidem. Laboriosam odit excepturi
-      ratione? Unde ex debitis voluptas, repudiandae, qui excepturi consequatur
-      et molestias repellendus ipsa magni! Ea nihil distinctio esse culpa!
-      Itaque doloremque explicabo voluptas officia labore earum voluptatibus
-      optio nobis ullam, incidunt fugiat quaerat qui maxime ea deleniti ab modi
-      architecto. Eius nam voluptas odio inventore nemo quos aliquid, sapiente
-      optio! Enim expedita sint corrupti quos odio. Rerum aliquam ut cupiditate,
-      repellat culpa, officiis explicabo ratione quaerat qui voluptatibus esse,
-      eveniet deserunt repudiandae corrupti blanditiis ullam enim eaque
-      distinctio. Repellat quibusdam vel ipsum autem dignissimos officia ab
-      perferendis sequi. Vitae autem deleniti iste voluptates, assumenda totam,
-      quae nostrum fuga doloremque ducimus veniam quaerat accusamus. Vel rem
-      itaque cum, corporis dolorem excepturi repellendus quos fuga fugiat
-      debitis nostrum. Molestiae voluptatem odit minus expedita atque omnis,
-      voluptate facilis optio officiis autem ullam dicta veritatis culpa in
-      sequi aliquid magni dolore voluptates? Dolores, ipsa quia?
-    </p>
-  </section>
-</main>
-{% endblock %}
diff --git a/src/pages/articles.njk b/src/pages/articles.njk
index 49f4c88..18792c5 100644
--- a/src/pages/articles.njk
+++ b/src/pages/articles.njk
@@ -1,12 +1,11 @@
 ---
 title: Articles
-layout: layout.njk
+layout: layouts/base.njk
 eleventyNavigation:
   key: Articles
   order: 1
 banner:
-  title: Articles 
-  subtitle: Here are some of the articles I wrote. Blaperi floco shotine marine tanterios
+  description: Here are some of the articles I wrote. Blaperi floco shotine marine tanterios
 ---
 
 {% block body %}
@@ -15,41 +14,37 @@ banner:
     class="container sm:w-8/12 mx-auto w-full m-0 flex items-center justify-center"
   >
     <div class="pt-5">
+      {%- for article in collections.article -%}
       <div class="md:w-3/4 flex flex-col items-start">
         <div class="flex items-center justify-center">
           <img class="w-3" src="/images/icons/bxs-pencil.svg" alt="link" />
           <span
             class="py-1 px-2 text-gray-400 text-opacity-75 text-xs font-medium tracking-widest"
           >
-            17 Feb 2021
+            {{ article.date | displayDate }}
           </span>
         </div>
         <h2
           class="sm:text-2xl text-xl title-font font-medium text-white mt-1 mb-4"
         >
-          Saving Your Web Workflows with Prototyping
+          <a href="{{ article.url }}">
+            {{ article.data.title }}
+          </a>
         </h2>
         <p class="leading-relaxed mb-5">
-          A brilliant post by Matthias Ott on common UI and design / engineering
-          problems and how trying to solve them is often a greater lesson than
-          only learning about a new technology. “Learning comes from exploring
-          the problem space and trying different possible tradeoffs.”
+          {{ article.data.banner.description }}
         </p>
-        <div
-          class="flex items-center flex-wrap border-b-2 border-gray-800 border-opacity-75 mb-5 mt-auto w-full"
-        >
-          <span
-            class="mr-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
-          >
-            technology
-          </span>
+        <div class="flex items-center flex-wrap mb-5 mt-auto w-full">
+          {% for tag in article.data.tags | displayTags %}
           <span
             class="mr-4 py-1 px-2 bg-mygray-500 rounded-xl text-gray-200 text-opacity-75 text-xs font-medium tracking-widest"
           >
-            ui-ux
+            {{ tag }}
           </span>
+          {% endfor %}
         </div>
       </div>
+      {%- endfor -%}
     </div>
   </section>
 </main>
diff --git a/src/pages/notes.njk b/src/pages/notes.njk
index ec8ea10..d9e5338 100644
--- a/src/pages/notes.njk
+++ b/src/pages/notes.njk
@@ -1,12 +1,11 @@
 ---
 title: Notes
-layout: layout.njk
+layout: layouts/base.njk
 eleventyNavigation:
   key: Notes
   order: 3
 banner:
-  title: Notes
-  subtitle: Here are some of my references. These links are here because they helped me on my work!
+  description: Here are some of my references. These links are here because they helped me on my work!
 ---
 
 {% block body %}
diff --git a/src/pages/products.njk b/src/pages/products.njk
index 89c9ba3..124ce2e 100644
--- a/src/pages/products.njk
+++ b/src/pages/products.njk
@@ -1,12 +1,12 @@
 ---
 title: Products
-layout: layout.njk
+layout: layouts/base.njk
 eleventyNavigation:
   key: Products
   order: 1
 banner:
   title: Products I built. 
-  subtitle: This is a list of all the projects I've worked on. Vel quam elementum pulvinar etiam non. Nunc aliquet.
+  description: This is a list of all the projects I've worked on. Vel quam elementum pulvinar etiam non. Nunc aliquet.
 ---
 {% block body %}
 <section class="w-full py-4 bg-mydark-300 flex items-center  justify-center">
@@ -24,7 +24,7 @@ banner:
             </ul>
             </p>
             <button
-            class="bg-myred-500 rounded-lg text-white px-4 py-2 my-5 w-1/2"
+            class="bg-myred-500 rounded-lg text-white  hover:bg-white hover:text-myred-500 px-4 py-2 my-5 w-1/2"
           >
             Visit
           </button>
diff --git a/webpack.config.js b/webpack.config.js
index 9cac331..eeca440 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,4 @@
-const path = require('path')
+const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
@@ -14,11 +14,11 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, 'dist', 'assets'),
-    filename: 'main.bundle.js'
+    filename: 'main.bundle.js',
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'main.bundle.css'
+      filename: 'main.bundle.css',
     }),
   ],
-}
+};