chore: badge grid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "7.2.3",
+  "version": "7.3.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/badge-grid.liquid

@@ -0,0 +1,26 @@
+{% capture css %}
+  {% render "../../assets/styles/components/badge-grid.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<div class="badge__grid">
+  <a href="https://11ty.dev">
+    {% image './src/assets/img/badges/eleventy.png', 'Made with 11ty' %}
+  </a>
+  <a href="https://social.lol/@cory">
+    {% image './src/assets/img/badges/mastodon.png', 'Follow me on Mastodon' %}
+  </a>
+  {% image './src/assets/img/badges/notarobot.png', 'Not a robot' %}
+  <a href="https://github.com/cdransf">
+    {% image './src/assets/img/badges/github.png', 'Check out my GitHub' %}
+  </a>
+  <a href="https://www.last.fm/user/coryd_">
+    {% image './src/assets/img/badges/lastfm.png', 'Check out my GitHub' %}
+  </a>
+  {% image './src/assets/img/badges/validhtml5.png', 'Valid HTML5' %}
+  <a href="https://coryd.dev/feeds">
+    {% image './src/assets/img/badges/validrss.png', 'Valid RSS' %}
+  </a>
+  <a href="https://coryd.dev/uses">
+    {% image './src/assets/img/badges/macOS.png', 'Made with macOS' %}
+  </a>
+</div>

src/assets/styles/components/badge-grid.css

@@ -0,0 +1,20 @@
+:root {
+  --grid: repeat(3,minmax(0,1fr));
+}
+
+.badge__grid {
+  display: grid;
+  gap: var(--sizing-md);
+  grid-template-columns: var(--grid);
+}
+
+.badge__grid > * {
+  display: flex;
+  justify-content: center;
+}
+
+@media screen and (min-width: 768px) {
+  :root {
+    --grid: repeat(4,minmax(0,1fr));
+  }
+}

src/pages/about.md

@@ -23,3 +23,5 @@ I build, maintain and design web applications. I've been coding professionally s
 I tend to write about whatever strikes me, with a focus on development, technology, automation or issues I run into with these things. This is all typically light on editing with and heavy on spur of the moment thoughts.
 
 [You can also see what I'm doing now](/now), [take a look at the links I've shared recently](/links) or [check out the webrings I'm a member of](/webrings).
+
+{% render "partials/badge-grid.liquid" %}