index.njk

---
layout: base.njk
eleventyNavigation:
  key: Entrance
  order: 1
eleventyComputed:
  title: "{{metadata.title|safe}}: {{metadata.description|safe}}"
---

<div class="entrance margin-trim" role="none">
  <section class="intro surface" aria-label="About marchbox.com">
    <header>
      <h1>{{metadata.title}}</h1>
      <p class="intro-subtitle">{{metadata.description}}</p>
    </header>
    <p>I’m a web developer who enjoys drawing and loves Disney. On this website, I write <a href="{{'/articles/'|url}}">my opinions</a> about web design and development, Disney, and other interesting things in my life. I also post <a href="{{'/drawings/'|url}}">some of my doodlings</a>.</p>
    <footer>
      <p><a href="{{'/about'|url}}" class="readmore">Learn more about the site</a></p>
    </footer>
  </section>

  <section aria-labelledby="heading-articles" class="margin-trim">
    <h2 id="heading-articles">Recent articles</h2>
    <div class="articles-list" role="none">
      {% set articleListConfig = {
        collection: collections.article|reverse|listHead(5),
        hTag: 'h3'
      } %}
      {% include "_src/njk/article-list.njk" %}
    </div>
    <p><a href="{{'/articles/'|url}}" class="readmore">Read more articles</a></p>
  </section>

  <section aria-labelledby="heading-drawings" class="margin-trim">
    <h2 id="heading-drawings">Recent drawings</h2>
    <div class="drawing-gallery" role="none">
      {% set drawingListConfig = {
        collection: collections.drawing|reverse|listTail(1)
      } %}
      {% include "_src/njk/drawing-list.njk" %}
    </div>
    <p><a href="{{'/drawings/'|url}}" class="readmore">View more drawings</a></p>
  </section>
</div>