From a91b56abb849752469aa62933d6f7d50f2d3116d Mon Sep 17 00:00:00 2001
From: Jaron <jaron@ed.link>
Date: Wed, 29 Apr 2026 23:13:10 -0500
Subject: [PATCH] feat: introduce main and writing layouts to standardize page
 structure

---
 app/layouts/main.vue            | 181 ++++++++++++++++
 app/layouts/writing.vue         | 189 +++++++++++++++++
 app/pages/index.vue             | 357 +++++---------------------------
 app/pages/writing/[...slug].vue |   8 +-
 app/pages/writing/index.vue     |  10 +-
 content/writing/index.md        |   5 +
 content/writing/thing.md        |   5 +
 7 files changed, 450 insertions(+), 305 deletions(-)
 create mode 100644 app/layouts/main.vue
 create mode 100644 app/layouts/writing.vue

diff --git a/app/layouts/main.vue b/app/layouts/main.vue
new file mode 100644
index 0000000..8fe3465
--- /dev/null
+++ b/app/layouts/main.vue
@@ -0,0 +1,181 @@
+<template>
+    <div>
+        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <filter id="grainy" x="0" y="0" width="100%" height="100%">
+                <feTurbulence
+                    type="fractalNoise"
+                    baseFrequency=".85"
+                    numOctaves="3"
+                ></feTurbulence>
+                <feColorMatrix type="saturate" values="0"></feColorMatrix>
+                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
+            </filter>
+        </svg>
+        <div class="page-wrapper">
+            <div class="trace left"></div>
+
+            <div class="trace right"></div>
+
+            <header class="header">
+                <slot name="header">
+                    <h1 class="name">Jaron</h1>
+                    <p class="title">
+                        Software Engineer by trade &mdash; builder by nature.
+                    </p>
+                </slot>
+            </header>
+
+            <main>
+                <slot />
+                <div style="flex: 1"></div>
+            </main>
+
+            <footer class="footer">
+                <div class="footer-upper">
+                    <div class="flex-center">
+                        <p>
+                            <a class="punch-link" href="mailto:yo@jp.wtf"
+                                >Say hi.</a
+                            >
+                        </p>
+                        <div class="flex-ff"></div>
+                        <p style="text-align: right">
+                            Let's make something cool.
+                        </p>
+                    </div>
+                </div>
+                <div class="footer-lower">
+                    <div class="flex-center">
+                        <p style="text-align: right">Est. 2003</p>
+                        <div class="flex-ff"></div>
+                        <p style="text-align: right">Austin, TX</p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<style>
+.page-wrapper {
+    --main-width: 50vw;
+    width: var(--main-width);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    position: relative;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.trace {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: var(--muted);
+    z-index: 1;
+}
+
+.trace.left {
+    left: 0;
+}
+
+.trace.right {
+    right: 0;
+}
+
+svg[height='0'] {
+    position: fixed;
+}
+
+.name {
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 0;
+}
+
+.title {
+    font-weight: 300;
+    margin: 0;
+    font-style: italic;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    border-top: 1px solid var(--muted);
+    border-bottom: 1px solid var(--muted);
+    padding: 2rem;
+    color: var(--bg);
+
+    margin-top: 8vh;
+    position: relative;
+    isolation: isolate;
+}
+
+.header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: left top;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
+}
+
+.footer-upper {
+    border-top: 1px solid var(--muted);
+    border-bottom: 1px solid var(--muted);
+    padding: 2rem;
+    color: var(--bg);
+    min-height: 10vh;
+    position: relative;
+    isolation: isolate;
+}
+
+.footer-upper::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
+}
+
+.footer-lower {
+    padding: 1rem;
+    height: 8vh;
+    font-size: small;
+}
+
+@media (max-width: 1024px) {
+    .page-wrapper {
+        --main-width: 80vw;
+    }
+}
+
+@media (max-width: 768px) {
+    .page-wrapper {
+        --main-width: 100vw;
+    }
+
+    .trace {
+        display: none;
+    }
+}
+</style>
diff --git a/app/layouts/writing.vue b/app/layouts/writing.vue
new file mode 100644
index 0000000..b3782d7
--- /dev/null
+++ b/app/layouts/writing.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+defineProps<{
+    title?: string;
+    description?: string;
+}>();
+</script>
+
+<template>
+    <div>
+        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <filter id="grainy" x="0" y="0" width="100%" height="100%">
+                <feTurbulence
+                    type="fractalNoise"
+                    baseFrequency=".85"
+                    numOctaves="3"
+                ></feTurbulence>
+                <feColorMatrix type="saturate" values="0"></feColorMatrix>
+                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
+            </filter>
+        </svg>
+        <div class="page-wrapper">
+            <div class="trace left"></div>
+
+            <div class="trace right"></div>
+
+            <header class="header">
+                <h1 class="name">{{ title || 'Jaron' }}</h1>
+                <p v-if="description" class="title">
+                    {{ description }}
+                </p>
+                <p v-else class="title">
+                    Software Engineer by trade &mdash; builder by nature.
+                </p>
+            </header>
+
+            <main>
+                <slot />
+                <div style="flex: 1"></div>
+            </main>
+
+            <footer class="footer">
+                <div class="footer-upper">
+                    <div class="flex-center">
+                        <p>
+                            <a class="punch-link" href="mailto:yo@jp.wtf"
+                                >Say hi.</a
+                            >
+                        </p>
+                        <div class="flex-ff"></div>
+                        <p style="text-align: right">
+                            Let's make something cool.
+                        </p>
+                    </div>
+                </div>
+                <div class="footer-lower">
+                    <div class="flex-center">
+                        <p style="text-align: right">Est. 2003</p>
+                        <div class="flex-ff"></div>
+                        <p style="text-align: right">Austin, TX</p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </div>
+</template>
+
+<style>
+.page-wrapper {
+    --main-width: 50vw;
+    width: var(--main-width);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    position: relative;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.trace {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    background: var(--muted);
+    z-index: 1;
+}
+
+.trace.left {
+    left: 0;
+}
+
+.trace.right {
+    right: 0;
+}
+
+svg[height='0'] {
+    position: fixed;
+}
+
+.name {
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 0;
+}
+
+.title {
+    font-weight: 300;
+    margin: 0;
+    font-style: italic;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    border-top: 1px solid var(--muted);
+    border-bottom: 1px solid var(--muted);
+    padding: 2rem;
+    color: var(--bg);
+
+    margin-top: 8vh;
+    position: relative;
+    isolation: isolate;
+}
+
+.header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: left top;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
+}
+
+.footer-upper {
+    border-top: 1px solid var(--muted);
+    border-bottom: 1px solid var(--muted);
+    padding: 2rem;
+    color: var(--bg);
+    min-height: 10vh;
+    position: relative;
+    isolation: isolate;
+}
+
+.footer-upper::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
+}
+
+.footer-lower {
+    padding: 1rem;
+    height: 8vh;
+    font-size: small;
+}
+
+@media (max-width: 1024px) {
+    .page-wrapper {
+        --main-width: 80vw;
+    }
+}
+
+@media (max-width: 768px) {
+    .page-wrapper {
+        --main-width: 100vw;
+    }
+
+    .trace {
+        display: none;
+    }
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f9fa33c..b11e483 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -40,300 +40,69 @@ useHead({
         },
     ],
 });
+
+definePageMeta({
+    layout: 'main',
+});
 </script>
 
 <template>
-    <div>
-        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
-            <filter id="grainy" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                    type="fractalNoise"
-                    baseFrequency=".85"
-                    numOctaves="3"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="0"></feColorMatrix>
-                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
-            </filter>
-        </svg>
-        <div class="page-wrapper">
-            <div class="trace left"></div>
-
-            <div class="trace right"></div>
-
-            <header class="header">
-                <h1 class="name">Jaron</h1>
-                <p class="title">
-                    Software Engineer by trade &mdash; builder by nature.
+    <NuxtLayout name="main">
+        <section class="projects">
+            <h5>Selected Work</h5>
+            <div class="section__content">
+                <a
+                    href="https://mystwright.com/"
+                    target="_blank"
+                    class="project"
+                >
+                    <h3 class="project__title">Mystwright</h3>
+                    <p class="project__description">
+                        An AI-driven mystery detective game. Generate,
+                        investigate, solve.
+                    </p>
+                </a>
+                <a
+                    href="https://unicord.hat.fish/"
+                    target="_blank"
+                    class="project"
+                >
+                    <h3 class="project__title">Unicord</h3>
+                    <p class="project__description">
+                        Discord bot SDK inspired by webserver
+                        architecture.
+                    </p>
+                </a>
+                <a
+                    href="https://github.com/jaronpate/rift-buddy"
+                    target="_blank"
+                    class="project"
+                >
+                    <h3 class="project__title">Rune Buddy</h3>
+                    <p class="project__description">
+                        League of Legends runepage manager. Save &
+                        organise your pages for free.
+                    </p>
+                </a>
+            </div>
+        </section>
+        <section class="about">
+            <h5>About</h5>
+            <div class="section__content">
+                <p>
+                    I work across the full stack; backend, frontend, and
+                    the product decisions in between. My favorite side
+                    projects are ones that bring me new skills. Even
+                    better are ones where I solve a problem or build a
+                    tool I can use. I'm always open to interesting work
+                    and conversations.
                 </p>
-            </header>
-
-            <main>
-                <section class="projects">
-                    <h5>Selected Work</h5>
-                    <div class="section__content">
-                        <a
-                            href="https://mystwright.com/"
-                            target="_blank"
-                            class="project"
-                        >
-                            <h3 class="project__title">Mystwright</h3>
-                            <p class="project__description">
-                                An AI-driven mystery detective game. Generate,
-                                investigate, solve.
-                            </p>
-                        </a>
-                        <a
-                            href="https://unicord.hat.fish/"
-                            target="_blank"
-                            class="project"
-                        >
-                            <h3 class="project__title">Unicord</h3>
-                            <p class="project__description">
-                                Discord bot SDK inspired by webserver
-                                architecture.
-                            </p>
-                        </a>
-                        <a
-                            href="https://github.com/jaronpate/rift-buddy"
-                            target="_blank"
-                            class="project"
-                        >
-                            <h3 class="project__title">Rune Buddy</h3>
-                            <p class="project__description">
-                                League of Legends runepage manager. Save &
-                                organise your pages for free.
-                            </p>
-                        </a>
-                    </div>
-                </section>
-                <section class="about">
-                    <h5>About</h5>
-                    <div class="section__content">
-                        <p>
-                            I work across the full stack; backend, frontend, and
-                            the product decisions in between. My favorite side
-                            projects are ones that bring me new skills. Even
-                            better are ones where I solve a problem or build a
-                            tool I can use. I'm always open to interesting work
-                            and conversations.
-                        </p>
-                    </div>
-                </section>
-                <!-- <section class="photos">
-                    <h5>Photos</h5>
-                    <div class="section__content">
-                        <div class="photo-grid">
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/underground.jpg"
-                                        alt="London Underground Sign"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>London, UK</p>
-                                    <p>2026</p>
-                                </div>
-                            </div>
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/london_porsche.jpg"
-                                        alt="London Porsche"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>London, UK</p>
-                                    <p>2025</p>
-                                </div>
-                            </div>
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/austin_parking.jpg"
-                                        alt="Austin Parking Sign"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>Austin, TX</p>
-                                    <p>2024</p>
-                                </div>
-                            </div>
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/athens_red_scooter.jpg"
-                                        alt="Athens Red Scooter"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>Athens, Greece</p>
-                                    <p>2026</p>
-                                </div>
-                            </div>
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/athens_subway.jpg"
-                                        alt="Athens Subway"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>Athens, Greece</p>
-                                    <p>2026</p>
-                                </div>
-                            </div>
-                            <div class="photo-grid__item">
-                                <div class="photo__image">
-                                    <img
-                                        src="/photography/athens_sunset.jpg"
-                                        alt="Athens Sunset"
-                                    />
-                                </div>
-                                <div class="photo__overlay">
-                                    <p>Athens, Greece</p>
-                                    <p>2026</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section> -->
-                <div style="flex: 1"></div>
-            </main>
-
-            <footer class="footer">
-                <div class="footer-upper">
-                    <div class="flex-center">
-                        <p>
-                            <a class="punch-link" href="mailto:yo@jp.wtf"
-                                >Say hi.</a
-                            >
-                        </p>
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">
-                            Let's make something cool.
-                        </p>
-                    </div>
-                </div>
-                <div class="footer-lower">
-                    <div class="flex-center">
-                        <p style="text-align: right">Est. 2003</p>
-                        <div class="flex-ff"></div>
-                        <p style="text-align: right">Austin, TX</p>
-                    </div>
-                </div>
-            </footer>
-        </div>
-    </div>
+            </div>
+        </section>
+    </NuxtLayout>
 </template>
 
 <style>
-.page-wrapper {
-    --main-width: 50vw;
-    width: var(--main-width);
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    position: relative;
-}
-
-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.trace {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 1px;
-    background: var(--muted);
-    z-index: 1;
-}
-
-.trace.left {
-    left: 0;
-}
-
-.trace.right {
-    right: 0;
-}
-
-svg[height='0'] {
-    position: fixed;
-}
-
-.name {
-    font-size: 4rem;
-    font-weight: 400;
-    line-height: 1.2;
-    margin: 0;
-}
-
-.title {
-    font-weight: 300;
-    margin: 0;
-    font-style: italic;
-}
-
-.header {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-
-    border-top: 1px solid var(--muted);
-    border-bottom: 1px solid var(--muted);
-    padding: 2rem;
-    color: var(--bg);
-
-    margin-top: 8vh;
-    position: relative;
-    isolation: isolate;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: left top;
-    background-repeat: no-repeat;
-    filter: url(#grainy);
-    z-index: -1;
-}
-
-.footer-upper {
-    border-top: 1px solid var(--muted);
-    border-bottom: 1px solid var(--muted);
-    padding: 2rem;
-    color: var(--bg);
-    min-height: 10vh;
-    position: relative;
-    isolation: isolate;
-}
-
-.footer-upper::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: url(#grainy);
-    z-index: -1;
-}
-
-.footer-lower {
-    padding: 1rem;
-    height: 8vh;
-    font-size: small;
-}
-
 section {
     margin-top: 2rem;
 }
@@ -468,21 +237,7 @@ section:last-of-type {
     margin: 0;
 }
 
-@media (max-width: 1024px) {
-    .page-wrapper {
-        --main-width: 80vw;
-    }
-}
-
 @media (max-width: 768px) {
-    .page-wrapper {
-        --main-width: 100vw;
-    }
-
-    .trace {
-        display: none;
-    }
-
     .photo-grid {
         grid-template-columns: 1fr;
     }
diff --git a/app/pages/writing/[...slug].vue b/app/pages/writing/[...slug].vue
index 250b235..71b5aff 100644
--- a/app/pages/writing/[...slug].vue
+++ b/app/pages/writing/[...slug].vue
@@ -12,10 +12,14 @@ useSeoMeta({
     title: page.value?.title,
     description: page.value?.description,
 });
+
+definePageMeta({
+    layout: 'writing',
+});
 </script>
 
 <template>
-    <div>
+    <NuxtLayout name="writing" :title="page?.title" :description="page?.description">
         <ContentRenderer v-if="page" :value="page" />
-    </div>
+    </NuxtLayout>
 </template>
diff --git a/app/pages/writing/index.vue b/app/pages/writing/index.vue
index ede44ca..c2948e8 100644
--- a/app/pages/writing/index.vue
+++ b/app/pages/writing/index.vue
@@ -10,6 +10,12 @@ useSeoMeta({
 </script>
 
 <template>
-    <ContentRenderer v-if="home" :value="home" />
-    <div v-else>Home not found</div>
+    <NuxtLayout
+        name="writing"
+        :title="home?.title"
+        :description="home?.description"
+    >
+        <ContentRenderer v-if="home" :value="home" />
+        <div v-else>Home not found</div>
+    </NuxtLayout>
 </template>
diff --git a/content/writing/index.md b/content/writing/index.md
index 34e277e..36b8728 100644
--- a/content/writing/index.md
+++ b/content/writing/index.md
@@ -1,3 +1,8 @@
+---
+title: Writing
+description: Some thoughts I've had over the years. Not all of them are good, but here we are.
+---
+
 # Hello Content
 
 blah blah blah
diff --git a/content/writing/thing.md b/content/writing/thing.md
index 34e277e..062f22a 100644
--- a/content/writing/thing.md
+++ b/content/writing/thing.md
@@ -1,3 +1,8 @@
+---
+description: This is a test.
+title: Thing
+---
+
 # Hello Content
 
 blah blah blah