---
layout: layouts/base.njk
title: Bookshelf
permalink: /bookshelf/
---

<h1 class="text-2xl font-bold mb-4">Bookshelf</h1>
<p class="text-gray-600 dark:text-gray-400 mb-6">A living reading list. Track what you're reading, want to read, and your notes/reviews.</p>

<section class="grid md:grid-cols-3 gap-6">
  <div class="bg-[var(--surface)] border rounded p-4">
    <h2 class="font-semibold mb-2">Reading</h2>
    <ul class="space-y-2 text-sm">
      <li>
        <span class="font-medium">Designing for Accessibility</span>
        <div class="text-gray-500">Notes: practical patterns for forms and focus</div>
      </li>
      <li>
        <span class="font-medium">The Pragmatic Programmer</span>
        <div class="text-gray-500">Notes: small steps, continuous improvement</div>
      </li>
    </ul>
  </div>

  <div class="bg-[var(--surface)] border rounded p-4">
    <h2 class="font-semibold mb-2">Finished</h2>
    <ul class="space-y-2 text-sm">
      <li>
        <span class="font-medium">Atomic Habits</span>
        <div class="text-gray-500">Takeaway: environment design beats willpower</div>
      </li>
      <li>
        <span class="font-medium">Refactoring UI</span>
        <div class="text-gray-500">Takeaway: spacing & contrast are the 80/20</div>
      </li>
    </ul>
  </div>

  <div class="bg-[var(--surface)] border rounded p-4">
    <h2 class="font-semibold mb-2">Want to Read</h2>
    <ul class="space-y-2 text-sm">
      <li><span class="font-medium">Inclusive Components</span></li>
      <li><span class="font-medium">Every Layout</span></li>
    </ul>
  </div>
</section>