diff --git a/content/blog/2024/test-post-2.md b/content/blog/2024/test-post-2.md
new file mode 100644
index 0000000..9afdd10
--- /dev/null
+++ b/content/blog/2024/test-post-2.md
@@ -0,0 +1,62 @@
+---
+title: 'Test Post 2'
+date: 2024-06-10T13:27:25-07:00
+params:
+  subtitle: Subtitle
+draft: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet
+sagittis id. Blandit aliquam etiam erat velit scelerisque in. Blandit turpis
+cursus in hac habitasse platea. Facilisi morbi tempus iaculis urna id volutpat
+lacus. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Tortor
+consequat id porta nibh venenatis cras sed felis. Laoreet sit amet cursus sit
+amet dictum. Vel quam elementum pulvinar etiam. Tellus integer feugiat
+scelerisque varius morbi. Feugiat in ante metus dictum. Congue nisi vitae
+suscipit tellus mauris a diam. Molestie a iaculis at erat pellentesque
+adipiscing commodo. Eu mi bibendum neque egestas. Tellus in metus vulputate eu
+scelerisque felis. Posuere ac ut consequat semper viverra nam.
+
+Dui accumsan sit amet nulla facilisi. Ac tortor vitae purus faucibus ornare.
+Aliquam vestibulum morbi blandit cursus risus at. Malesuada proin libero nunc
+consequat interdum varius sit amet. Sapien faucibus et molestie ac feugiat sed
+lectus vestibulum. Lorem ipsum dolor sit amet consectetur. Varius duis at
+consectetur lorem donec massa sapien. Non consectetur a erat nam at lectus.
+Maecenas pharetra convallis posuere morbi leo. Sit amet nisl purus in mollis
+nunc sed id. Sed pulvinar proin gravida hendrerit lectus. Morbi tristique
+senectus et netus. Praesent elementum facilisis leo vel fringilla est
+ullamcorper. Risus pretium quam vulputate dignissim suspendisse in. In egestas
+erat imperdiet sed euismod. Dictum sit amet justo donec. Etiam tempor orci eu
+lobortis elementum nibh. Odio pellentesque diam volutpat commodo sed egestas.
+Libero nunc consequat interdum varius sit. Ut tristique et egestas quis.
+
+Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Tortor
+posuere ac ut consequat semper viverra nam libero justo. Leo duis ut diam quam
+nulla. Malesuada bibendum arcu vitae elementum curabitur. Odio aenean sed
+adipiscing diam donec. Facilisi cras fermentum odio eu feugiat. Sollicitudin
+nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit. Ultrices
+tincidunt arcu non sodales neque sodales ut etiam sit. At varius vel pharetra
+vel turpis nunc eget lorem dolor. Eget dolor morbi non arcu risus. Sed felis
+eget velit aliquet sagittis id consectetur purus ut. Fermentum dui faucibus in
+ornare. Malesuada fames ac turpis egestas integer eget aliquet nibh.
+
+Fermentum leo vel orci porta non pulvinar neque. Eget nullam non nisi est sit
+amet facilisis. Commodo sed egestas egestas fringilla phasellus faucibus
+scelerisque eleifend donec. Pretium lectus quam id leo in vitae turpis massa.
+Egestas congue quisque egestas diam in arcu cursus. Malesuada nunc vel risus
+commodo. Mauris pharetra et ultrices neque ornare aenean. Auctor neque vitae
+tempus quam pellentesque nec nam aliquam sem. Amet nulla facilisi morbi tempus
+iaculis urna id. Sit amet risus nullam eget. Amet nisl suscipit adipiscing
+bibendum est ultricies. Congue quisque egestas diam in arcu cursus euismod quis.
+
+Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Vestibulum
+lorem sed risus ultricies tristique nulla. Sed adipiscing diam donec adipiscing
+tristique. Sed id semper risus in hendrerit gravida rutrum. Maecenas volutpat
+blandit aliquam etiam erat velit scelerisque. Augue eget arcu dictum varius duis
+at consectetur lorem. Consectetur libero id faucibus nisl tincidunt eget nullam
+non nisi. Mauris commodo quis imperdiet massa. Vitae semper quis lectus nulla at
+volutpat diam. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit
+duis. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Tellus
+pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras
+semper auctor neque.
diff --git a/content/blog/2024/test-post.md b/content/blog/2024/test-post.md
new file mode 100644
index 0000000..f69c00d
--- /dev/null
+++ b/content/blog/2024/test-post.md
@@ -0,0 +1,60 @@
+---
+title: 'Test Post'
+date: 2024-06-10T13:27:25-07:00
+draft: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Sed felis eget velit aliquet
+sagittis id. Blandit aliquam etiam erat velit scelerisque in. Blandit turpis
+cursus in hac habitasse platea. Facilisi morbi tempus iaculis urna id volutpat
+lacus. Posuere urna nec tincidunt praesent semper feugiat nibh sed. Tortor
+consequat id porta nibh venenatis cras sed felis. Laoreet sit amet cursus sit
+amet dictum. Vel quam elementum pulvinar etiam. Tellus integer feugiat
+scelerisque varius morbi. Feugiat in ante metus dictum. Congue nisi vitae
+suscipit tellus mauris a diam. Molestie a iaculis at erat pellentesque
+adipiscing commodo. Eu mi bibendum neque egestas. Tellus in metus vulputate eu
+scelerisque felis. Posuere ac ut consequat semper viverra nam.
+
+Dui accumsan sit amet nulla facilisi. Ac tortor vitae purus faucibus ornare.
+Aliquam vestibulum morbi blandit cursus risus at. Malesuada proin libero nunc
+consequat interdum varius sit amet. Sapien faucibus et molestie ac feugiat sed
+lectus vestibulum. Lorem ipsum dolor sit amet consectetur. Varius duis at
+consectetur lorem donec massa sapien. Non consectetur a erat nam at lectus.
+Maecenas pharetra convallis posuere morbi leo. Sit amet nisl purus in mollis
+nunc sed id. Sed pulvinar proin gravida hendrerit lectus. Morbi tristique
+senectus et netus. Praesent elementum facilisis leo vel fringilla est
+ullamcorper. Risus pretium quam vulputate dignissim suspendisse in. In egestas
+erat imperdiet sed euismod. Dictum sit amet justo donec. Etiam tempor orci eu
+lobortis elementum nibh. Odio pellentesque diam volutpat commodo sed egestas.
+Libero nunc consequat interdum varius sit. Ut tristique et egestas quis.
+
+Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Tortor
+posuere ac ut consequat semper viverra nam libero justo. Leo duis ut diam quam
+nulla. Malesuada bibendum arcu vitae elementum curabitur. Odio aenean sed
+adipiscing diam donec. Facilisi cras fermentum odio eu feugiat. Sollicitudin
+nibh sit amet commodo nulla facilisi. Eget nullam non nisi est sit. Ultrices
+tincidunt arcu non sodales neque sodales ut etiam sit. At varius vel pharetra
+vel turpis nunc eget lorem dolor. Eget dolor morbi non arcu risus. Sed felis
+eget velit aliquet sagittis id consectetur purus ut. Fermentum dui faucibus in
+ornare. Malesuada fames ac turpis egestas integer eget aliquet nibh.
+
+Fermentum leo vel orci porta non pulvinar neque. Eget nullam non nisi est sit
+amet facilisis. Commodo sed egestas egestas fringilla phasellus faucibus
+scelerisque eleifend donec. Pretium lectus quam id leo in vitae turpis massa.
+Egestas congue quisque egestas diam in arcu cursus. Malesuada nunc vel risus
+commodo. Mauris pharetra et ultrices neque ornare aenean. Auctor neque vitae
+tempus quam pellentesque nec nam aliquam sem. Amet nulla facilisi morbi tempus
+iaculis urna id. Sit amet risus nullam eget. Amet nisl suscipit adipiscing
+bibendum est ultricies. Congue quisque egestas diam in arcu cursus euismod quis.
+
+Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Vestibulum
+lorem sed risus ultricies tristique nulla. Sed adipiscing diam donec adipiscing
+tristique. Sed id semper risus in hendrerit gravida rutrum. Maecenas volutpat
+blandit aliquam etiam erat velit scelerisque. Augue eget arcu dictum varius duis
+at consectetur lorem. Consectetur libero id faucibus nisl tincidunt eget nullam
+non nisi. Mauris commodo quis imperdiet massa. Vitae semper quis lectus nulla at
+volutpat diam. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit
+duis. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Tellus
+pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras
+semper auctor neque.
diff --git a/content/code-test.md b/content/code-test.md
new file mode 100644
index 0000000..cb98ff3
--- /dev/null
+++ b/content/code-test.md
@@ -0,0 +1,42 @@
+---
+title: 'Code Test'
+date: 2024-06-12T15:01:00-07:00
+draft: true
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut venenatis tellus in metus
+vulputate eu scelerisque felis imperdiet. Consequat semper viverra nam libero
+justo. Sit amet massa vitae tortor condimentum lacinia quis vel. Massa massa
+ultricies mi quis hendrerit dolor magna eget. Est sit amet facilisis magna etiam
+tempor orci eu lobortis. Cursus turpis massa tincidunt dui ut ornare. Elit
+pellentesque habitant morbi tristique senectus. Morbi blandit cursus risus at
+ultrices mi tempus imperdiet nulla. Odio pellentesque diam volutpat commodo sed
+egestas egestas fringilla phasellus. Cursus vitae congue mauris rhoncus.
+
+```c
+send(to, from, count)
+register short *to, *from;
+register count;
+{
+    register n = (count + 7) / 8;
+    switch (count % 8) {
+    case 0: do { *to = *from++;
+    case 7:      *to = *from++;
+    case 6:      *to = *from++;
+    case 5:      *to = *from++;
+    case 4:      *to = *from++;
+    case 3:      *to = *from++;
+    case 2:      *to = *from++;
+    case 1:      *to = *from++;
+            } while (--n > 0);
+    }
+}
+```
+
+Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Fermentum et
+sollicitudin ac orci phasellus egestas tellus rutrum tellus. Fermentum leo vel
+orci porta non pulvinar neque laoreet. Proin libero nunc consequat interdum
+varius sit amet mattis vulputate. Semper viverra nam libero justo laoreet sit.
+Consequat id porta nibh venenatis cras sed felis. Ultrices eros in cursus turpis
+massa.
diff --git a/content/colors.html b/content/colors.html
new file mode 100644
index 0000000..65f0487
--- /dev/null
+++ b/content/colors.html
@@ -0,0 +1,86 @@
+---
+title: "Colors"
+date: 2024-06-13T21:02:17-07:00
+draft: true
+---
+
+<h2>Colors</h2>
+
+<div class="colors">
+    <input type="color" id="color1" data-index="0">
+    <input type="color" id="color2">
+    <input type="color" id="color3">
+    <input type="color" id="color4">
+    <input type="color" id="color5">
+    <input type="color" id="color6">
+</div>
+
+<script>
+    const colors = [
+    ];
+    document.addEventListener("DOMContentLoaded", () => {
+        document.querySelectorAll("input.color").forEach(() => {
+        });
+    });
+</script>
+
+<div class="colors">
+    <div class="box  dark-blue"></div>
+    <div class="box  purple"></div>
+    <div class="box" style="background-color: #9DE200"></div>
+</div>
+
+<input type="color" value="#ff6600">
+
+<h2>Grayscale</h2>
+
+<div class="colors  grayscale">
+    <div class="box  gray1"></div>
+    <div class="box  gray2"></div>
+    <div class="box  gray3"></div>
+    <div class="box  gray4"></div>
+    <div class="box  gray5"></div>
+    <div class="box  gray6"></div>
+    <div class="box  gray7"></div>
+</div>
+
+<style>
+:root {
+  --light-blue: 69, 212, 243;
+  --mid-blue: 26, 169, 239;
+  --dark-blue: 63, 46, 231;
+  --purple: 161, 49, 232;
+  --lilac: 187, 121, 245;
+  --orange: orange;
+}
+
+.colors {
+    display: flex;
+    gap: var(--space-xxs);
+    margin-block: var(--space-l);
+}
+
+.box, input[type=color] {
+    width: 50px;
+    height: 50px;
+}
+
+.box {
+    border: 1px solid black;
+}
+
+.light-blue { background-color: rgb(var(--light-blue)); }
+.mid-blue { background-color: rgb(var(--mid-blue)); }
+.dark-blue { background-color: rgb(var(--dark-blue)); }
+.purple { background-color: rgb(var(--purple)); }
+.lilac { background-color: rgb(var(--lilac)); }
+.orange { background-color: orange; }
+
+.gray1 { background-color: black; }
+.gray2 { background-color: #222; }
+.gray3 { background-color: #444; }
+.gray4 { background-color: #888; }
+.gray5 { background-color: #aaa; }
+.gray6 { background-color: #ddd; }
+.gray7 { background-color: white; }
+</style>
diff --git a/content/lorem/ggb.jpeg b/content/lorem/ggb.jpeg
new file mode 100644
index 0000000..4c5f25f
Binary files /dev/null and b/content/lorem/ggb.jpeg differ
diff --git a/content/lorem/index.md b/content/lorem/index.md
new file mode 100644
index 0000000..5b3954d
--- /dev/null
+++ b/content/lorem/index.md
@@ -0,0 +1,72 @@
+---
+title: Lorem Ipsum
+params:
+  subtitle: sed adipiscing diam donec
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Ut venenatis tellus in metus
+vulputate eu scelerisque felis imperdiet. Consequat semper viverra nam libero
+justo. Sit amet massa vitae tortor condimentum lacinia quis vel. Massa massa
+ultricies mi quis hendrerit dolor magna eget. Est sit amet facilisis magna etiam
+tempor orci eu lobortis. Cursus turpis massa tincidunt dui ut ornare. Elit
+pellentesque habitant morbi tristique senectus. Morbi blandit cursus risus at
+ultrices mi tempus imperdiet nulla. Odio pellentesque diam volutpat commodo sed
+egestas egestas fringilla phasellus. Cursus vitae congue mauris rhoncus.
+
+## Nulla at Volutpat
+
+Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Fermentum et
+sollicitudin ac orci phasellus egestas tellus rutrum tellus. Fermentum leo vel
+orci porta non pulvinar neque laoreet. Proin libero nunc consequat interdum
+varius sit amet mattis vulputate. Semper viverra nam libero justo laoreet sit.
+Consequat id porta nibh venenatis cras sed felis. Ultrices eros in cursus turpis
+massa. Dictum non consectetur a erat. Cras sed felis eget velit. Quam adipiscing
+vitae proin sagittis nisl rhoncus mattis rhoncus. Amet justo donec enim diam
+vulputate ut pharetra sit amet. Velit sed ullamcorper morbi tincidunt ornare
+massa. Posuere sollicitudin aliquam ultrices sagittis. Tortor id aliquet lectus
+proin nibh nisl condimentum. Enim lobortis scelerisque fermentum dui faucibus
+in. Diam in arcu cursus euismod quis viverra. Tellus in metus vulputate eu.
+Nullam ac tortor vitae purus faucibus ornare. Justo laoreet sit amet cursus sit
+amet dictum sit.
+
+## Nibh Mauris Cursus Mattis Molestie
+
+Lacus vestibulum sed arcu non odio euismod lacinia at. Tempus egestas sed sed
+risus pretium. Pharetra massa massa ultricies mi quis hendrerit dolor magna
+eget. Et malesuada fames ac turpis egestas integer eget. Feugiat pretium nibh
+ipsum consequat nisl vel pretium lectus quam. Cras ornare arcu dui vivamus arcu.
+Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Diam phasellus
+vestibulum lorem sed risus ultricies tristique nulla aliquet. Enim ut sem
+viverra aliquet eget sit. Mi sit amet mauris commodo. Amet facilisis magna etiam
+tempor orci eu. In hac habitasse platea dictumst vestibulum. Sapien et ligula
+ullamcorper malesuada proin libero. Quis blandit turpis cursus in hac habitasse.
+In ante metus dictum at tempor commodo ullamcorper.
+
+![the graceful arches of the Golden Gate Bridge partially obscured by fog](ggb.jpeg "The Golden Gate Bridge from Crissy Field")
+
+Id nibh tortor id aliquet lectus proin. Fringilla est ullamcorper eget nulla
+facilisi. Curabitur vitae nunc sed velit dignissim sodales. Magna fringilla urna
+porttitor rhoncus dolor purus non enim. Odio ut sem nulla pharetra diam sit
+amet. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Quis
+ipsum suspendisse ultrices gravida dictum fusce. Dictum fusce ut placerat orci
+nulla pellentesque. Sodales neque sodales ut etiam sit amet nisl purus in. Augue
+interdum velit euismod in pellentesque massa placerat duis ultricies.
+
+Sit amet commodo nulla facilisi nullam vehicula. Laoreet suspendisse interdum
+consectetur libero. Libero id faucibus nisl tincidunt eget. Consectetur a erat
+nam at lectus urna duis. Et netus et malesuada fames ac turpis egestas maecenas.
+Id donec ultrices tincidunt arcu. Urna duis convallis convallis tellus id
+interdum velit laoreet. Ut etiam sit amet nisl purus in mollis. Tempor commodo
+ullamcorper a lacus vestibulum sed arcu non odio. Risus quis varius quam quisque
+id diam. Malesuada proin libero nunc consequat interdum varius sit. Vitae
+ultricies leo integer malesuada nunc vel risus commodo viverra. Vitae suscipit
+tellus mauris a diam maecenas. Duis convallis convallis tellus id interdum velit
+laoreet id. Hac habitasse platea dictumst vestibulum rhoncus. Ac orci phasellus
+egestas tellus.
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
diff --git a/content/lorem.md b/content/lorem2.md
similarity index 96%
rename from content/lorem.md
rename to content/lorem2.md
index 66e9997..ce5ad72 100644
--- a/content/lorem.md
+++ b/content/lorem2.md
@@ -2,8 +2,6 @@
 title: Lorem Ipsum
 ---
 
-## Nulla at Volutpat
-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. Ut venenatis tellus in metus
 vulputate eu scelerisque felis imperdiet. Consequat semper viverra nam libero
@@ -14,6 +12,8 @@ pellentesque habitant morbi tristique senectus. Morbi blandit cursus risus at
 ultrices mi tempus imperdiet nulla. Odio pellentesque diam volutpat commodo sed
 egestas egestas fringilla phasellus. Cursus vitae congue mauris rhoncus.
 
+## Nulla at Volutpat
+
 Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Fermentum et
 sollicitudin ac orci phasellus egestas tellus rutrum tellus. Fermentum leo vel
 orci porta non pulvinar neque laoreet. Proin libero nunc consequat interdum
@@ -41,6 +41,8 @@ tempor orci eu. In hac habitasse platea dictumst vestibulum. Sapien et ligula
 ullamcorper malesuada proin libero. Quis blandit turpis cursus in hac habitasse.
 In ante metus dictum at tempor commodo ullamcorper.
 
+![the graceful arches of the Golden Gate Bridge partially obscured by fog](ggb.jpeg "The Golden Gate Bridge from Crissy Field")
+
 Id nibh tortor id aliquet lectus proin. Fringilla est ullamcorper eget nulla
 facilisi. Curabitur vitae nunc sed velit dignissim sodales. Magna fringilla urna
 porttitor rhoncus dolor purus non enim. Odio ut sem nulla pharetra diam sit