about.njk

---
layout: layouts/base.njk
title: About
permalink: false
eleventyExcludeFromCollections: true
---
<article class="h-card">
  <header class="mb-6 sm:mb-8 flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
    <img
      src="{{ site.author.avatar }}"
      alt="{{ site.author.name }}"
      class="u-photo w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover shadow-lg flex-shrink-0"
      loading="eager"
    >
    <div class="min-w-0">
      <h1 class="p-name text-2xl sm: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-accent-600 dark:text-accent-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>