@@ -58,6 +58,28 @@ aside {
   border-color: var(--b_low);
 }
 
+.link-card {
+  box-shadow: 4px 4px var(--b_low);
+  border: 1px solid var(--b_low);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  max-width: 40rem;
+  margin: 1rem auto;
+  display: block;
+}
+.link-card > h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+.link-card > img {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+  height: 4rem;
+  border-radius: var(--border-radius);
+  filter: grayscale(80%);
+}
+
 @media screen and (max-width: 600px) {
   body {
     margin: 0 1rem;

@@ -18,6 +18,7 @@ type PageProperties struct {
 	Title       string
 	StylePath   string
 	Breadcrumbs []*HeaderLink
+	Children    []*ChildPage
 }
 
 type HeaderLink struct {
@@ -29,6 +30,12 @@ type PageConfig struct {
 	Parent string
 	Title  string
 	Image  string
+}
+
+type ChildPage struct {
+	Title string
+	Path  string
+	Image string
 }
 
 var rootPath = "."
@@ -168,12 +175,14 @@ outfile, _ := os.Create(filepath.Join(outDir, fileName+".html"))
 		template, _ := template.ParseFiles(
 			filepath.Join(templateSrcDir, "document.html"),
 			filepath.Join(templateSrcDir, "header.html"),
+			filepath.Join(templateSrcDir, "child-links.html"),
 			filepath.Join(pageSrcDir, fileName+".html"),
 		)
 		pageProps := &PageProperties{
 			Title:       pageName,
 			StylePath:   "/assets/css/style." + strconv.FormatInt(now.Unix(), 10) + ".css",
 			Breadcrumbs: breadcrumbs,
+			Children:    pageChildren(fileName, pageConfigs),
 		}
 		template.Execute(
 			outfile,
@@ -181,3 +190,24 @@ pageProps,
 		)
 	}
 }
+
+func pageChildren(parentPageName string, pages map[string]*PageConfig) []*ChildPage {
+	children := make([]*ChildPage, 0)
+	for path, page := range pages {
+		if page.Parent == parentPageName {
+			title := page.Title
+			if title == "" {
+				title = path
+			}
+			children = append(
+				children,
+				&ChildPage{
+					Title: title,
+					Path:  path,
+					Image: page.Image,
+				},
+			)
+		}
+	}
+	return children
+}

@@ -15,6 +15,9 @@ </p>
 <p>
     I work as a software developer. Despite that, I have a low opinion of modern technology. I am far more interested in low-tech solutions that prioritize simplicity, sustainability, and self-determination. To that end, I build simple software tools that meet my needs (this site being one such example).
 </p>
+
+{{ template "child-links" .Children }}
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -5,6 +5,8 @@
 {{ define "body" }}
 {{ template "header" . }}
 
+{{ template "child-links" .Children }}
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -14,6 +14,9 @@ </p>
 <p>
     This site's existence and design was inspired by <a href="https://wiki.xxiivv.com/site/home.html">Devine Lu Linvega's wiki</a>, <a href="https://100r.co/site/home.html">Hundred Rabbits</a>, and <a href="https://webring.xxiivv.com/">the many other personal sites</a> of the Merveilles collective.
 </p>
+
+{{ template "child-links" .Children }}
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -4,37 +4,11 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<style>
-    .link-card {
-        box-shadow: 4px 4px var(--b_low);
-        border: 1px solid var(--b_low);
-        border-radius: var(--border-radius);
-        padding: 1rem;
-        max-width: 40rem;
-        margin: 0 auto;
-        display: block;
-    }
-    .link-card > h2 {
-        margin-top: 0;
-        margin-bottom: 1rem;
-    }
-    .link-card > img {
-        object-fit: cover;
-        object-position: center;
-        width: 100%;
-        height: 4rem;
-        border-radius: var(--border-radius);
-        filter: grayscale(80%);
-    }
-</style>
 <p>
     Projects are things that I've built, physical or otherwise. Typically these are tools meant to serve a purpose: creative pursuits can be found on the <a href="/creative">creative page</a>.
 </p>
 
-<a class="link-card" href="/keyboard">
-    <h2>keyboard</h2>
-    <img src="/assets/img/keyboard.jpg">
-</a>
+{{ template "child-links" .Children }}
 
 {{ end }}
 

@@ -5,6 +5,8 @@
 {{ define "body" }}
 {{ template "header" . }}
 
+{{ template "child-links" .Children }}
+
 {{ end }}
 
 {{ define "scripts" }}

@@ -0,0 +1,8 @@
+{{ define "child-links" }}
+{{ range . }}
+<a class="link-card" href="{{ .Path }}">
+    <h2>{{ .Title }}</h2>
+    <img src="{{ .Image }}">
+</a>
+{{ end }}
+{{ end }}