Initial commit: Indiekit Eleventy theme

about.njk

@@ -0,0 +1,68 @@
+---
+layout: layouts/base.njk
+title: About
+permalink: /about/
+---
+<article class="h-card">
+  <header class="mb-8 flex flex-col md:flex-row gap-8 items-start">
+    <img
+      src="{{ site.author.avatar }}"
+      alt="{{ site.author.name }}"
+      class="u-photo w-40 h-40 rounded-full object-cover shadow-lg"
+      loading="eager"
+    >
+    <div>
+      <h1 class="p-name text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+        {{ site.author.name }}
+      </h1>
+      {% if site.author.title %}
+      <p class="p-job-title text-xl text-primary-600 dark:text-primary-400 mb-2">
+        {{ site.author.title }}
+      </p>
+      {% endif %}
+      {% if site.author.location %}
+      <p class="p-locality text-surface-600 dark:text-surface-400 mb-4">
+        {{ site.author.location }}
+      </p>
+      {% endif %}
+      <a href="{{ site.author.url }}" class="u-url u-uid hidden" rel="me">{{ site.author.url }}</a>
+    </div>
+  </header>
+
+  <div class="prose dark:prose-invert prose-lg max-w-none">
+    <p class="p-note text-lg">{{ site.author.bio }}</p>
+
+    <h2>About This Site</h2>
+    <p>
+      This site is powered by <a href="https://getindiekit.com">Indiekit</a>, an IndieWeb
+      server that supports Micropub, Webmentions, and other IndieWeb standards. It runs on
+      <a href="https://cloudron.io">Cloudron</a> for easy self-hosting.
+    </p>
+
+    <h2>IndieWeb</h2>
+    <p>
+      I'm part of the <a href="https://indieweb.org">IndieWeb</a> movement - owning my content
+      and identity online. You can interact with my posts through Webmentions - reply, like,
+      or repost from your own website and it will show up here.
+    </p>
+
+    {% if site.social.length > 0 %}
+    <h2>Connect</h2>
+    <p>Find me on:</p>
+    <ul>
+      {% for link in site.social %}
+      <li>
+        <a href="{{ link.url }}" rel="me" target="_blank">{{ link.name }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+
+    {% if site.author.email %}
+    <p>
+      Or send me an email at
+      <a href="mailto:{{ site.author.email }}" class="u-email">{{ site.author.email }}</a>
+    </p>
+    {% endif %}
+  </div>
+</article>