index.html

---
{
    "title": "Olivia's silly blog :3"
}
---
{# note to self: IndieAuth/IndieLogin/RelMeAuth requires an email with `rel="me"` and a link back to Codeberg with rel="me"
on the front page.  If either of these disappear, the IndieAuth login breaks.
(I'm not actually sure what the rel="me" thing is called anymore, but it's necessary for at least one webring) #}
<div class="h-card">
    <div class="flex-horizontal">
        <div id="intro">
            <h2>About me</h2>
            <span id="foxwolfgirl-tangent" class="bottom" popover>I occasionally abbreviate to foxgirl or wolfgirl, but I'm canonically both. I also meow :3</span>
            <p>Hiya :3 I'm <span class="p-name">Olivia</span> (she/her), though I go by Zoe a few places online.
              {# TODO: awkward? #}
              {# TODO: also, this just _feels_ bad #}
              I'm a <button class="text" popovertarget="foxwolfgirl-tangent">foxwolfgirl</button> that really likes software, open-source, and open information sharing.</p>
            <p>This is my silly little blog where I occasionally write about stuff that interests me (mostly tech-related).
              I plan to expand this at some point&trade;, but I don't have the ideas for what that means yet. There's
              also at least one easter egg.
            </p>
            <p>I mostly write C++, some Lua, a lot of shell and other config, and occasionally HTML/CSS/JS - as evidenced by
            this silly little website. I used to write a lot of vimscript before the new vim maintainers decided to turn
            Vim into slopware, so now I'm using Emacs (with evil mode to make the experience tolerable).
            </p>
            <p>I work on all kinds of different projects, including games, scripting/automation/QOL, webservers, websites,
            and whatever else I find interesting. Here's a <a href="{{ site.prefix }}/projects.html">list of some of my projects</a>.</p>
            {% include "partials/link-to-me.inja" %}
        </div>
        <div class="flex-shrink flex-vertical">
        <img src="{{ site.prefix }}/assets/profile.png"
            style="max-height: 300px; aspect-ratio: 1/1; align-self: center"
            alt="Profile picture"
            id="profile-pic"
             class="u-photo"
            />
        <div id="profile-pic-popover"
            class="inline" {# Looks like this can't be top because the <img> isn't a controller? #}
            interestfor="profile-pic"
            popover
        >
            <p>Headpats? 🥺</p>
        </div>
        <hr class="rainbow" />
        <table>
            {# I could see this being more of like a wikipedia-style userbox section instead, but I'd need to source in a fair few images for that
            to be any good. There's also a separate style of mini-image in the same category as the 88x31s that might work better:
            https://fustilugz.neocities.org/whatarebuttons (at least for the personal stuff, not so much for like OS and software and other stuff)
            Might also make sense to move the 88x31 up here, but I'm completely out of ideas for stuff to put in the footer if the 88x31s don't go there #}
            <tbody>
                <tr><td><strong>Pronouns</strong></td><td>She/her</td></tr>
                <tr><td><strong>Main codeforge</strong></td><td><a href="https://codeberg.org/LunarWatcher" rel="me" class="u-url">Codeberg</a></td></tr>
                <tr><td><strong>Main OS</strong></td><td>I use arch btw :3 (but Mint is really good too)</td></tr>
                <tr><td><strong>Games I really like</strong></td><td>Factorio, WoW, Songs of Syx</td></tr>
                <tr><td><strong>Favourite animals</strong></td><td>Foxes, wolves</td></tr>
                <tr><td><strong>Current time</strong></td><td><time id="current-time">Aligning satellites...</time></td></tr>
                <tr><td><strong>Silly</strong></td><td>:3</td></tr>
            </tbody>
            <!-- Extra props for the h-card. These are already listed elsewhere on this page for human consumption -->
            <a style="display:none" aria-hidden="true" class="u-url" href="{{ site.data.domain }}">website URL for h-card (you are already here)</a>
            <p style="display:none" aria-hidden="true" class="p-note">{{ site.data.tagline }}</p>
        </table>

        </div>
    </div>

    <hr />

    <div class="flex-horizontal">
        <div id="contact">
            <h2>Contact</h2>
            <p>I don't bite :3</p>
            <ul>
                <li>Discord: @oliviawolfie</li>
                <li>Discord server: <a href="https://discord.gg/{{ site.data.links.discord }}">[invite]</a></li>
                <li><a href="mailto:{{ site.data.author.email }}" rel="me">Email</a></li>
                <li><p>Issue tracker for this website: <a href="https://codeberg.org/LunarWatcher/pages/issues">codeberg:LunarWatcher/pages</a></p>
                <p>Also serves as a place for comments and feedback on this website, because interactive stuff is hard</p>
                </li>
            </ul>
        </div>
        <div id="accounts">
            <h2>Find me on the internet</h2>
            <ul>
                <li>Codeberg: <a href="https://codeberg.org/LunarWatcher">LunarWatcher</a></li>
                <li>GitHub: <a href="https://github.com/LunarWatcher">LunarWatcher</a></li>
                <li><img alt="rss logo" style="width: 1em" src="{{ site.prefix }}/assets/svg/rss.svg" aria-hidden="true" /> RSS feeds:
                {% include "partials/rss.inja" %}
                Raw URLs:
                <pre><code class="nohighlight">{{ site.data.domain }}/blog/feed.atom
{{ site.data.domain }}/til/feed.atom
{{ site.data.domain }}/notes/feed.atom
{{ site.data.domain }}/combined.atom</code></pre>
                </li>
            </ul>
        </div>
    </div>
</div>

<h2>Smol web</h2>

<p>This website was designed in the spirit of the small web/indieweb. There's some ramblings on the design and some
nerdy stats on <a href="{{ site.prefix }}/meta.html">the /meta page</a>.</p>

<h3>Webrings</h3>
{% include "partials/webring-list.inja" %}

<h3>Outlinks (88x31 wall)</h3>
<p>Outlinks are kept on a separate page due to lots of images; see <a href="{{ site.prefix }}/outlinks.html">outlinks</a>.</p>

<script src="{{ site.prefix }}/assets/js/index-fun.js"></script>