{% import 'macros' as macros %}

<div>
  <h2 class="text-xl font-bold">About me</h2>

  <div class="mt-4">
    <div class="flex space-x-4">
      <div class="flex flex-col flex-shrink-0 justify-start">
        <img src="{{ site.assets_url }}/assets/images/social-avatar.jpg" alt="Picture of Oliver" class="my-0 w-16 h-16 rounded-full ring-2 ring-grey dark:ring-white">
      </div>

      <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
        <p>I'm an Acquia-certified Drupal Triple Expert with {{ macros.yearsExperience }} years of experience, an open-source software maintainer and Drupal core contributor, <a href="/talks">public speaker</a>, and host of the <a href="/podcast">Beyond Blocks podcast</a>.</p>
      </div>
    </div>
  </div>
</div>