---
layout: base.njk
title: ~/home
permalink: /
---

{# ── Desktop icons ───────────────────────────────── #}
<div class="desktop-icons" aria-label="Desktop icons">
  <div class="desktop-icon" data-opens="win-about" role="button" tabindex="0" aria-label="Open about">
    <div class="icon-art">[i]</div>
    <div class="icon-label">about_me.txt</div>
  </div>
  <div class="desktop-icon" data-opens="win-blog" role="button" tabindex="0" aria-label="Open blog">
    <div class="icon-art">[/]</div>
    <div class="icon-label">blog/</div>
  </div>
  <div class="desktop-icon" data-opens="win-projects" role="button" tabindex="0" aria-label="Open projects">
    <div class="icon-art">[/]</div>
    <div class="icon-label">projects/</div>
  </div>
  <div class="desktop-icon" data-opens="win-contact" role="button" tabindex="0" aria-label="Open contact">
    <div class="icon-art">[@]</div>
    <div class="icon-label">contact.vcf</div>
  </div>
</div>

{# ════════════════════════════════════════════════ #}
{# ABOUT WINDOW                                     #}
{# ════════════════════════════════════════════════ #}
<div class="window hidden"
     id="win-about"
     data-wid="win-about"
     data-title="$whoami"
     style="top:50px; left:120px; width:540px;">

  <div class="window-content">
    {{ collections.aboutContent[0].templateContent | safe }}
    <p><a href="/boring/about/">→ plaintext version</a></p>
  </div>

</div>

{# ════════════════════════════════════════════════ #}
{# BLOG WINDOW                                      #}
{# ════════════════════════════════════════════════ #}
<div class="window hidden"
     id="win-blog"
     data-wid="win-blog"
     data-title="blog/"
     style="top:60px; left:400px; width:500px; height:460px;">

  <div class="window-content" id="blog-window-content">

    {# ── Listing view ─────────────────────────── #}
    <div id="blog-listing">

      {# Tag filters #}
      {% set tagCounts = collections.posts | tagCounts %}
      {% if tagCounts.length %}
      <div class="blog-tags">
        <button class="blog-tag active" data-tag="*">all <span class="tag-count">{{ collections.posts.length }}</span></button>
        {% for tc in tagCounts %}
        <button class="blog-tag" data-tag="{{ tc.tag }}">{{ tc.tag }} <span class="tag-count">{{ tc.count }}</span></button>
        {% endfor %}
      </div>
      {% endif %}

      {# Post list #}
      {% if collections.posts.length %}
      <ul class="post-list" id="blog-post-list">
        {% for post in collections.posts %}
        <li class="post-list-item"
            data-tags="{{ post.data.tags | join(' ') if post.data.tags else '' }}">
          <a href="#"
             class="blog-open-post"
             data-post-idx="{{ loop.index0 }}">{{ post.data.title }}</a>
          <span class="post-date">{{ post.date | readableDate }}</span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p style="color:var(--p-dim);">No posts yet — check back soon.</p>
      {% endif %}

      <p style="margin-top:14px; border-top:1px solid var(--p-dim); padding-top:10px;">
        <a href="/boring/blog/">→ plaintext version</a>
      </p>
    </div>

    {# ── Per-post views (built at compile time, hidden by default) ── #}
    {% for post in collections.posts %}
    <div class="blog-post-panel hidden" id="blog-post-{{ loop.index0 }}">
      <button class="blog-back">← back</button>
      <h2 style="margin-top:10px;">{{ post.data.title }}</h2>
      <p class="post-meta">
        {{ post.date | readableDate }}
        {% if post.data.tags %}· {{ post.data.tags | join(', ') }}{% endif %}
      </p>
      <hr class="post-rule">
      {{ post.templateContent | safe }}
    </div>
    {% endfor %}

  </div>

</div>

{# ════════════════════════════════════════════════ #}
{# PROJECTS WINDOW                                  #}
{# ════════════════════════════════════════════════ #}
<div class="window hidden"
     id="win-projects"
     data-wid="win-projects"
     data-title="projects/"
     style="top:140px; left:120px; width:560px; height:380px;">

  <div class="window-content" id="projects-window-content">

    {# ── Listing view ─────────────────────────── #}
    <div id="projects-listing">

      {# Tag filters #}
      {% set projectTagCounts = collections.projects | tagCounts %}
      {% if projectTagCounts.length %}
      <div class="blog-tags">
        <button class="project-tag active" data-tag="*">all <span class="tag-count">{{ collections.projects.length }}</span></button>
        {% for tc in projectTagCounts %}
        <button class="project-tag" data-tag="{{ tc.tag }}">{{ tc.tag }} <span class="tag-count">{{ tc.count }}</span></button>
        {% endfor %}
      </div>
      {% endif %}

      {# Project list #}
      {% if collections.projects.length %}
      <ul class="post-list" id="projects-list">
        {% for project in collections.projects %}
        <li class="project-list-item"
            data-tags="{{ project.data.tags | join(' ') if project.data.tags else '' }}">
          <a href="#"
             class="project-open-item"
             data-project-idx="{{ loop.index0 }}">{{ project.data.title }}</a>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p style="color:var(--p-dim);">No projects yet.</p>
      {% endif %}

      <p style="margin-top:14px; border-top:1px solid var(--p-dim); padding-top:10px;">
        <a href="/boring/projects/">→ plaintext version</a>
      </p>
    </div>

    {# ── Per-project detail panels (built at compile time, hidden by default) ── #}
    {% for project in collections.projects %}
    <div class="project-detail-panel hidden" id="project-item-{{ loop.index0 }}">
      <button class="project-back">← back</button>
      <h2 style="margin-top:10px;">{{ project.data.title }}</h2>
      {% if project.data.tags %}
      <p class="post-meta">{{ project.data.tags | join(' · ') }}</p>
      {% endif %}
      <hr class="post-rule">
      {{ project.templateContent | safe }}
    </div>
    {% endfor %}

  </div>

</div>

{# ════════════════════════════════════════════════ #}
{# CONTACT WINDOW                                   #}
{# ════════════════════════════════════════════════ #}
<div class="window hidden"
     id="win-contact"
     data-wid="win-contact"
     data-title="contact"
     style="top:120px; left:240px; width:480px;">

  <div class="window-content">
    {{ collections.contactContent[0].templateContent | safe }}
    <p style="margin-top:14px"><a href="/boring/contact/">→ plaintext version</a></p>
  </div>

</div>
<script src="/assets/js/blog.js"></script>