diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
new file mode 100644
index 00000000..6c83ff18
--- /dev/null
+++ b/.vitepress/theme/Layout.vue
@@ -0,0 +1,36 @@
+<template>
+  <Layout>
+    <template #home>
+      <main class="home" aria-labelledby="main-title">
+        <Profectus style="height: 30vmin; margin: auto; display: block" />
+        <HomeHero />
+        <HomeFeatures />
+        <div class="home-content">
+          <Content />
+        </div>
+        <HomeFooter />
+      </main>
+    </template>
+  </Layout>
+</template>
+
+<script setup>
+import DefaultTheme from 'vitepress/theme';
+import Profectus from './Profectus.vue';
+// I want Profectus above the hero text, so I effectively need to recreate the Home class now
+import HomeHero from './home/HomeHero.vue';
+import HomeFeatures from './home/HomeFeatures.vue';
+import HomeFooter from './home/HomeFooter.vue';
+const { Layout } = DefaultTheme;
+</script>
+
+<style scoped>
+.home {
+  padding-top: var(--header-height);
+}
+.home-content {
+  max-width: 960px;
+  margin: 0px auto;
+  padding: 0 1.5rem;
+}
+</style>
diff --git a/.vitepress/theme/Profectus.vue b/.vitepress/theme/Profectus.vue
new file mode 100644
index 00000000..3a7700bd
--- /dev/null
+++ b/.vitepress/theme/Profectus.vue
@@ -0,0 +1,195 @@
+<template>
+    <transition appear>
+        <svg
+            id="eaRe02fYmMp1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 228 521"
+            shape-rendering="geometricPrecision"
+            text-rendering="geometricPrecision"
+        >
+            <g id="P">
+                <path
+                    d="m 101,512.877 c -17.547386,-5.3519 -50.794681,-10.26296 -80,0 10.737201,-217.43031 5.7244,-300.999 0,-464.9995 0,0 46.6144,-37.1164 80,-42.00002 33.386,-4.883633 86.025,10.45942 120,50.00002 5,30 -4.353,106.6565 -44,156.0005 -34.149,42.5 -130,38.48 -130,92.999 0,102 54,208 54,208 z"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 10;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="trunk"
+                    class="svg-elem-1"
+                ></path>
+                <path
+                    d="M 221,55.8775 C 209.023,126.453 185.39,166.835 158.997,191.5 93.783098,252.444 11.718998,217.436 46.999998,304.877"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="vine2"
+                    class="svg-elem-2"
+                ></path>
+                <path
+                    d="m 194.5,188 c -11.225,4.447 -19.066,5.134 -35.503,3.5"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="short_vine4"
+                    class="svg-elem-3"
+                ></path>
+                <path
+                    d="M 73.499996,246.5 C 111.145,245.626 127.011,238.775 156.5,228"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="short_vine3"
+                    class="svg-elem-4"
+                ></path>
+                <path
+                    d="M 221,55.8775 C 169.5,17.8262 86.0943,44.9468 47,107 c -4.743,7.528 -7.1041,15.373 -8.326,24 -3.5282,24.91 2.4426,56.34 -12.0011,105.5"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="vine1"
+                    class="svg-elem-5"
+                ></path>
+                <path
+                    d="M 21,47.8775 38.674,131"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="short_vine2"
+                    class="svg-elem-6"
+                ></path>
+                <path
+                    d="m 3,326.5 c 13.1783,22.208 16.4863,42.834 21.6997,81"
+                    style="
+                        display: inline;
+                        fill: none;
+                        stroke: rgb(163, 190, 140);
+                        stroke-width: 5;
+                        stroke-linecap: round;
+                        stroke-miterlimit: 16;
+                    "
+                    id="short_vine1"
+                    class="svg-elem-7"
+                ></path>
+            </g>
+        </svg>
+    </transition>
+</template>
+
+<style scoped>
+svg {
+    background: #2e3440;
+}
+
+/***************************************************
+ * Generated by SVG Artista on 1/7/2022, 4:39:47 PM
+ * MIT license (https://opensource.org/licenses/MIT)
+ * W. https://svgartista.net
+ **************************************************/
+
+svg .svg-elem-1 {
+    stroke-dashoffset: 2648.758056640625px;
+    stroke-dasharray: 1324.3790283203125px;
+    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
+}
+
+svg.v-enter-from .svg-elem-1,
+svg.v-leave-to .svg-elem-1 {
+    stroke-dashoffset: 1324.3790283203125px;
+}
+
+svg .svg-elem-2 {
+    stroke-dashoffset: 680.4000854492188px;
+    stroke-dasharray: 340.2000427246094px;
+    transition: stroke-dashoffset 1s ease-out 0.4s;
+}
+
+svg.v-enter-from .svg-elem-2,
+svg.v-leave-to .svg-elem-2 {
+    stroke-dashoffset: 340.2000427246094px;
+}
+
+svg .svg-elem-3 {
+    stroke-dashoffset: 76.21031951904297px;
+    stroke-dasharray: 38.105159759521484px;
+    transition: stroke-dashoffset 1s ease-out 0.8s;
+}
+
+svg.v-enter-from .svg-elem-3,
+svg.v-leave-to .svg-elem-3 {
+    stroke-dashoffset: 38.105159759521484px;
+}
+
+svg .svg-elem-4 {
+    stroke-dashoffset: 175.18072509765625px;
+    stroke-dasharray: 87.59036254882812px;
+    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
+}
+
+svg.v-enter-from .svg-elem-4,
+svg.v-leave-to .svg-elem-4 {
+    stroke-dashoffset: 87.59036254882812px;
+}
+
+svg .svg-elem-5 {
+    stroke-dashoffset: 671.9447021484375px;
+    stroke-dasharray: 335.97235107421875px;
+    transition: stroke-dashoffset 1s ease-out 0.8s;
+}
+
+svg.v-enter-from .svg-elem-5,
+svg.v-leave-to .svg-elem-5 {
+    stroke-dashoffset: 335.97235107421875px;
+}
+
+svg .svg-elem-6 {
+    stroke-dashoffset: 173.96141052246094px;
+    stroke-dasharray: 86.98070526123047px;
+    transition: stroke-dashoffset 1s ease-out 1s;
+}
+
+svg.v-enter-from .svg-elem-6,
+svg.v-leave-to .svg-elem-6 {
+    stroke-dashoffset: 86.98070526123047px;
+}
+
+svg .svg-elem-7 {
+    stroke-dashoffset: 172.99151611328125px;
+    stroke-dasharray: 86.49575805664062px;
+    transition: stroke-dashoffset 1s ease-out 0.85s;
+}
+
+svg.v-enter-from .svg-elem-7,
+svg.v-leave-to .svg-elem-7 {
+    stroke-dashoffset: 86.49575805664062px;
+}
+</style>
diff --git a/.vitepress/theme/home/HomeFeatures.vue b/.vitepress/theme/home/HomeFeatures.vue
new file mode 100644
index 00000000..d33b772f
--- /dev/null
+++ b/.vitepress/theme/home/HomeFeatures.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+
+const hasFeatures = computed(() => {
+  return frontmatter.value.features && frontmatter.value.features.length > 0
+})
+
+interface Feature {
+  title?: string
+  details?: string
+}
+
+const features = computed<Feature[]>(() => {
+  return frontmatter.value.features ? frontmatter.value.features : []
+})
+</script>
+
+<template>
+  <div v-if="hasFeatures" class="home-features">
+    <div class="wrapper">
+      <div class="container">
+        <div class="features">
+          <section
+            v-for="(feature, index) in features"
+            :key="index"
+            class="feature"
+          >
+            <h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
+            <p class="details" v-if="feature.details">{{ feature.details }}</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-features {
+  margin: 0 auto;
+  padding: 2.5rem 0 2.75rem;
+  max-width: 960px;
+}
+
+.home-hero + .home-features {
+  padding-top: 0;
+}
+
+@media (min-width: 420px) {
+  .home-features {
+    padding: 3.25rem 0 3.5rem;
+  }
+
+  .home-hero + .home-features {
+    padding-top: 0;
+  }
+}
+
+@media (min-width: 720px) {
+  .home-features {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+  }
+}
+
+.wrapper {
+  padding: 0 1.5rem;
+}
+
+.home-hero + .home-features .wrapper {
+  border-top: 1px solid var(--c-divider);
+  padding-top: 2.5rem;
+}
+
+@media (min-width: 420px) {
+  .home-hero + .home-features .wrapper {
+    padding-top: 3.25rem;
+  }
+}
+
+@media (min-width: 720px) {
+  .wrapper {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 392px;
+}
+
+@media (min-width: 720px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+.features {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -20px -24px;
+}
+
+.feature {
+  flex-shrink: 0;
+  padding: 20px 24px;
+  width: 100%;
+}
+
+@media (min-width: 720px) {
+  .feature {
+    width: calc(100% / 3);
+  }
+}
+
+.title {
+  margin: 0;
+  border-bottom: 0;
+  line-height: 1.4;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+@media (min-width: 420px) {
+  .title {
+    font-size: 1.4rem;
+  }
+}
+
+.details {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 1rem;
+  color: var(--c-text-light);
+}
+
+.title + .details {
+  padding-top: 0.25rem;
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/home/HomeFooter.vue b/.vitepress/theme/home/HomeFooter.vue
new file mode 100644
index 00000000..8492e59a
--- /dev/null
+++ b/.vitepress/theme/home/HomeFooter.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <footer v-if="frontmatter.footer" class="footer">
+    <div class="container">
+      <p class="text">{{ frontmatter.footer }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+@media (min-width: 720px) {
+  .footer {
+    padding: 0 1.5rem;
+  }
+}
+
+.container {
+  padding: 2rem 1.5rem 2.25rem;
+}
+
+.home-hero + .footer .container,
+.home-features + .footer .container,
+.home-content + .footer .container {
+  border-top: 1px solid var(--c-divider);
+}
+
+@media (min-width: 420px) {
+  .container {
+    padding: 3rem 1.5rem 3.25rem;
+  }
+}
+
+.text {
+  margin: 0;
+  text-align: center;
+  line-height: 1.4;
+  font-size: 0.9rem;
+  color: var(--c-text-light);
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/home/HomeHero.vue b/.vitepress/theme/home/HomeHero.vue
new file mode 100644
index 00000000..b404165d
--- /dev/null
+++ b/.vitepress/theme/home/HomeHero.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+import NavLink from './NavLink.vue'
+
+const { site, frontmatter } = useData()
+
+const showHero = computed(() => {
+  const { heroImage, heroText, tagline, actionLink, actionText } =
+    frontmatter.value
+  return heroImage || heroText || tagline || (actionLink && actionText)
+})
+
+const heroText = computed(() => frontmatter.value.heroText || site.value.title)
+const tagline = computed(
+  () => frontmatter.value.tagline || site.value.description
+)
+</script>
+
+<template>
+  <header v-if="showHero" class="home-hero">
+    <figure v-if="frontmatter.heroImage" class="figure">
+      <img
+        class="image"
+        :src="withBase(frontmatter.heroImage)"
+        :alt="frontmatter.heroAlt"
+      />
+    </figure>
+
+    <h1 v-if="heroText" id="main-title" class="title">{{ heroText }}</h1>
+    <p v-if="tagline" class="tagline">{{ tagline }}</p>
+
+    <NavLink
+      v-if="frontmatter.actionLink && frontmatter.actionText"
+      :item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
+      class="action"
+    />
+
+    <NavLink
+      v-if="frontmatter.altActionLink && frontmatter.altActionText"
+      :item="{
+        link: frontmatter.altActionLink,
+        text: frontmatter.altActionText
+      }"
+      class="action alt"
+    />
+  </header>
+</template>
+
+<style scoped>
+.home-hero {
+  margin: 2.5rem 0 2.75rem;
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+@media (min-width: 420px) {
+  .home-hero {
+    margin: 3.5rem 0;
+  }
+}
+
+@media (min-width: 720px) {
+  .home-hero {
+    margin: 4rem 0 4.25rem;
+  }
+}
+
+.figure {
+  padding: 0 1.5rem;
+}
+
+.image {
+  display: block;
+  margin: 0 auto;
+  width: auto;
+  max-width: 100%;
+  max-height: 280px;
+}
+
+.title {
+  margin-top: 1.5rem;
+  font-size: 2rem;
+}
+
+@media (min-width: 420px) {
+  .title {
+    font-size: 3rem;
+  }
+}
+
+@media (min-width: 720px) {
+  .title {
+    margin-top: 2rem;
+  }
+}
+
+.tagline {
+  margin: 0;
+  margin-top: 0.25rem;
+  line-height: 1.3;
+  font-size: 1.2rem;
+  color: var(--c-text-light);
+}
+
+@media (min-width: 420px) {
+  .tagline {
+    line-height: 1.2;
+    font-size: 1.6rem;
+  }
+}
+
+.action {
+  margin-top: 1.5rem;
+  display: inline-block;
+}
+
+.action.alt {
+  margin-left: 1.5rem;
+}
+
+@media (min-width: 420px) {
+  .action {
+    margin-top: 2rem;
+    display: inline-block;
+  }
+}
+
+.action :deep(.item) {
+  display: inline-block;
+  border-radius: 6px;
+  padding: 0 20px;
+  line-height: 44px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--c-bg);
+  background-color: var(--c-brand);
+  border: 2px solid var(--c-brand);
+  transition: background-color 0.1s ease;
+}
+
+.action.alt :deep(.item) {
+  background-color: var(--c-bg);
+  color: var(--c-brand);
+}
+
+.action :deep(.item:hover) {
+  text-decoration: none;
+  color: var(--c-bg);
+  background-color: var(--c-brand-light);
+}
+
+@media (min-width: 420px) {
+  .action :deep(.item) {
+    padding: 0 24px;
+    line-height: 52px;
+    font-size: 1.2rem;
+    font-weight: 500;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/home/NavLink.vue b/.vitepress/theme/home/NavLink.vue
new file mode 100644
index 00000000..ff265974
--- /dev/null
+++ b/.vitepress/theme/home/NavLink.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { useRoute, withBase } from 'vitepress'
+import { useNavLink } from '../composables/navLink'
+import OutboundLink from './icons/OutboundLink.vue'
+
+const props = defineProps<{
+  item: {
+    text: string
+    target?: string
+    rel?: string
+    ariaLabel?: string
+    activeMatch?: string
+    link: string
+  }
+}>()
+
+const propsRefs = toRefs(props)
+
+const route = useRoute()
+const linkProps = computed(() => {
+  const routePath = normalizePath(`/${route.data.relativePath}`)
+
+  let active = false
+  if (propsRefs.item.value.activeMatch) {
+    active = new RegExp(propsRefs.item.value.activeMatch).test(routePath)
+  } else {
+    const itemPath = normalizePath(propsRefs.item.value.link)
+    active =
+      itemPath === '/'
+        ? itemPath === routePath
+        : routePath.startsWith(itemPath)
+  }
+
+  return {
+    class: {
+      active
+    },
+    href: withBase(propsRefs.item.value.link),
+    target: propsRefs.item.value.target || null,
+    rel: propsRefs.item.value.rel || null,
+    'aria-label': propsRefs.item.value.ariaLabel
+  }
+})
+
+function normalizePath(path: string): string {
+  return path
+    .replace(/#.*$/, '')
+    .replace(/\?.*$/, '')
+    .replace(/\.(html|md)$/, '')
+    .replace(/\/index$/, '/')
+}
+</script>
+
+<template>
+  <div class="nav-link">
+    <a class="item" v-bind="linkProps">
+      {{ item.text }}
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  display: block;
+  padding: 0 1.5rem;
+  line-height: 36px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--c-text);
+  white-space: nowrap;
+}
+
+.item:hover,
+.item.active {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+.item.external:hover {
+  border-bottom-color: transparent;
+  color: var(--c-text);
+}
+
+@media (min-width: 720px) {
+  .item {
+    border-bottom: 2px solid transparent;
+    padding: 0;
+    line-height: 24px;
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  .item:hover,
+  .item.active {
+    border-bottom-color: var(--c-brand);
+    color: var(--c-text);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 42a715a8..7e1b50a8 100644
--- a/.vitepress/theme/index.js
+++ b/.vitepress/theme/index.js
@@ -1,6 +1,8 @@
-import DefaultTheme from 'vitepress/theme'
-import './vars.css'
+import DefaultTheme from 'vitepress/theme';
+import Layout from './Layout.vue';
+import './vars.css';
 
 export default {
-  ...DefaultTheme
-}
+  ...DefaultTheme,
+  Layout
+};