---
layout: layouts/base.njk
permalink: "/blogroll/"
title: Blogroll
---
<h1 class="text-2xl font-bold mb-6">Blogroll</h1>

<div class="prose prose-lg dark:prose-invert max-w-none">
  <p>Here are some blogs and websites I follow and recommend. This is a curated list of quality content creators in the web development, design, and IndieWeb communities.</p>
</div>

<div class="mt-8 space-y-8">
  <section>
    <h2 class="text-xl font-semibold mb-4">Web Development</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
        <h3 class="font-semibold">
          <a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Example Blog</a>
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Description of the blog and why you recommend it.</p>
      </div>
      <!-- Add more blogs here -->
    </div>
  </section>

  <section>
    <h2 class="text-xl font-semibold mb-4">Design & UX</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
        <h3 class="font-semibold">
          <a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Design Blog</a>
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Great insights on design and user experience.</p>
      </div>
    </div>
  </section>

  <section>
    <h2 class="text-xl font-semibold mb-4">IndieWeb & Personal Sites</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
        <h3 class="font-semibold">
          <a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Personal Site</a>
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Excellent example of IndieWeb principles in action.</p>
      </div>
    </div>
  </section>
</div>

<div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
  <p class="text-sm">
    <strong>Want to be added?</strong> If you have a blog that fits these categories, feel free to 
    <a href="/contact/" class="text-blue-600 hover:text-blue-800">reach out</a> and let me know!
  </p>
</div>