M assets/css/style.css → assets/css/style.css

@@ -4,8 +4,7 @@ color: var(--f_high);
 }
 
 body {
-  margin: 1rem;
-  margin-bottom: 5rem;
+  margin: 0 auto;
   max-width: 60rem;
   -webkit-text-size-adjust: 100%;
 }
@@ -59,5 +58,7 @@ border-color: var(--b_low);
 }
 
 @media screen and (max-width: 600px) {
-
+  body {
+    margin: 0 1rem;    
+  }
 }

M build/build.go → build/build.go

@@ -232,6 +232,7 @@ }
 }
 
 func build() {
+	now = time.Now()
 	fmt.Println("Starting build...")
 	os.RemoveAll(filepath.Join("out"))
 	os.Mkdir(filepath.Join("out"), 0777)

M pages/keyboard.html → pages/keyboard.html

@@ -4,7 +4,14 @@ {{ end }}
 
 {{ define "body" }}
 {{ template "header" . }}
-<img style="width: 80ch;" src="/assets/img/keyboard.jpg"/>
+<style>
+img {
+    width: 100%;
+    margin-top: 1rem;
+    border-radius: var(--border-radius);
+}
+</style>
+<img src="/assets/img/keyboard.jpg"/>
 
 <p>
     My keyboard is a hand-built (except for the PCB) Atreus62 from Profet Keyboards.
@@ -12,6 +19,10 @@ This project was a few firsts for me: it was my first soldering project (all those surface-mount diodes were a challenge) and it was my first time using a laser cutter to cut the acrylic for the case.
 </p>
 <p>
     The keyswitches for the alphanumerics are Cherry MX Clears, while the modifiers use Cherry MX Browns.
+</p>
+<h2>firmware</h2>
+<p>
+    The firmware is built using <a href="https://qmk.fm/">QMK</a>.
 </p>
 {{ end }}
 

M pages/projects.html → pages/projects.html

@@ -4,6 +4,37 @@ {{ 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>
 
 {{ end }}