Add Projects section with inverted pendulum and real-time interface pages

layouts/projects/list.html

@@ -0,0 +1,31 @@
+{{ define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end }}
+
+{{ define "content" }}
+{{ partial "projects/styles.html" . }}
+<article class="post">
+  {{- with .Content }}<div class="post-content">{{ . }}</div>{{ end }}
+
+  <div class="project-grid">
+    {{- range .Pages.ByDate.Reverse }}
+    {{- $cover := .Resources.GetMatch (.Params.cover | default "cover.*") -}}
+    <div class="project-card">
+      {{- if $cover }}
+      <a class="project-card-cover" href="{{ .RelPermalink }}" tabindex="-1" aria-hidden="true">
+        <img src="{{ $cover.RelPermalink }}" alt="" loading="lazy">
+      </a>
+      {{- else }}
+      <a class="project-card-cover placeholder" href="{{ .RelPermalink }}" tabindex="-1" aria-hidden="true">{{ index (split .Title ":") 0 }}</a>
+      {{- end }}
+      <div class="project-card-body">
+        <h2 class="project-card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+        {{- with .Params.summary }}<p class="project-card-summary">{{ . }}</p>{{ end }}
+        <div class="project-card-footer">
+          {{- with .Params.status }}<span class="project-status" data-status="{{ . | lower }}">{{ . }}</span>{{ else }}<span></span>{{ end }}
+          {{- with .Params.repo }}<a href="{{ . }}" target="_blank" rel="noopener">Source code ↗</a>{{ end }}
+        </div>
+      </div>
+    </div>
+    {{- end }}
+  </div>
+</article>
+{{ end }}