index.vto

{{ layout "base.vto" { bodystyle: "overflow-x: hidden;" } }}
<div id="sun"></div>
{{ include "partials/nav.vto" }}
<div id="content">
  <article class="full">
    <div id="home-wrapper">
      <div id="welcome-message">
        <center>
          <header>
            <h1>Welcome!</h1>
          </header>
          <p>My name is <a href="/about/">Marcus Crane</a> and you're currently logged on to my personal website.</p>
          <p>I maintain a <a href="/blog/">blog</a> and also keep a running list of <a href="/questions/">questions</a> regarding topics I often want to remember things about for later.</p>
          <p>There's also a <a href="/now/">now</a> page for, realistically, what I was up to two weeks ago and a <a href="/projects/">projects</a> page documenting my small experiments.</p>
          <p>Finally, if you have any questions or just want to drop a comment, you can pick your poison down in the bottom right of the footer.</p>
        </center>
        <hr />
        <center>
          <header>
            <h3>Here's a random(ly generated) thought</h3>
          </header>
          <p>{{ gags[Math.floor(Math.random() * gags.length)] }}</p>
        </center>
        <hr />
        <div class="post-stream">
          <center>
            <header>
              <h3>
                <a href="/books/">Books I'm *ahem* paging through</a>
              </h3>
            </header>
            <ul>
            {{ for item of books[0].books }}
            {{ if item.progress !== 100 }}
            <li style="display: inline-block;">
              <img alt="A cover photo of the book titled {{ item.title }}" src="{{ item.cover }}" height="180px" style="border-radius: 3px;" />
              <figcaption style="display: none;">You can learn more by visiting <a target="_blank" href={{ item.link }}>{{ item.link }}</a></figcaption>
              <p>{{ item.progress }}% read</p>
            </li>
            {{ /if }}
            {{ /for }}
            </ul>
          </center>
        </div>
        <hr />
        <div class="post-stream">
          <center>
            <header>
              <h3>
                <a href="/manga/">Manga I'm actively churning through</a>
              </h3>
            </header>
            <ul>
            {{ for item of manga }}
            {{# I read a lot of ongoign manga so we just filter for finished so we can surface a percentage complete #}}
            {{ if item.status === "FINISHED" }}
            <li style="display: inline-block;">
              <img alt="A cover image of {{ item.title }}, a manga series by {{ item.author }}" src="{{ item.cover }}" height="180px" style="border-radius: 3px;" />
              <figcaption style="display: none;">You can learn more by visiting <a target="_blank" href="{{ item.url }}">Anilist</a></figcaption>
              <p>{{ item.chapters - item.progress }} chapters left<p>
            </li>
            {{ /if }}
            {{ /for }}
            </ul>
          </center>
        </div>
      </div>
      <div id="recent-updates">
        <div id="liveplayer">
          {{ "<!-- Curious how my live player works? The unminified source code lives at https://github.com/marcus-crane/utf9k/blob/main/assets/js/live-player.js -->" |> safe }}
          <h3 id="action">😵‍💫 This widget should have loaded by now!</h3>
          <div>
            <div id="rotating-border" class="rotating-border-hidden">
              <img src="/placeholder.png" id="cover" alt="A grey placeholder cover that is just taking up space until the real cover art is loaded">
            </div>
          </div>
          <strong id="title">Fingers Crossed</strong>
          <br />
          <i id="subtitle">It should update if things aren't broken</i>
          <br />
            <div id="progress">
              <i id="elapsed">00:00</i> / <i id="duration">59:59</i>
            </div>
        </div>
        <div class="player-history">
          <p>Previously</p>
          <ul id="played-items"></ul>
        </div>
        <hr />
        <div class="post-stream">
          <h3>Recently updated pages</h3>
          <ul>
            {{ for item of search.pages() |> filter(p => p.category === "blog") |> filter(p => !p.draft) |> sort((a, b) => b.date - a.date) |> slice(0, 6) }}
            <li>
              <a href="{{ item.url }}">{{ item.title }}</a>
            </li>
            {{ /for }}
          </ul>
        </div>
        <hr />
        <center>
          <div class="post-stream">
            <header>
              <h3>
                <a href="/games/">Games I'm (slowly) progressing through</a>
              </h3>
            </header>
            <ul>
            {{ for item of games[0].games }}
            <li style="display: inline-block;">
              <img alt="Box art for the game titled {{ item.title |> escape }}" src="{{ item.cover.url }}" height="180px" style="border-radius: 3px;" />
              <figcaption style="display: none;">You can learn more by visiting <a target="_blank" href="{{ item.link }}">Backloggd</a></figcaption>
            </li>
            {{ /for }}
            </ul>
          </div>
        </center>
        <hr />
      </div>
    </div>
  </article>
  <script src="/js/live-player.js"></script>
</div>
<div id="fullscreen"></div>
<script src="/js/image-viewer.js"></script>
{{ /layout }}