website/src/routes/+page.svelte

<script>
    import links from "../data/links.json";
    import DateTime from "$lib/components/DateTime.svelte";
    import { getPages } from "$lib/pages";

    const pages = getPages();
</script>

<main id="main-content">
    <header>
        <h1 id="about-me">About Me</h1>
        <p>
            I'm a 21 year old from Australia (it's
            <DateTime display="time" timeZone="Australia/Brisbane" />). I like
            cats, Linux, and programming. I have a vision impairment. Some games
            I like are: Minecraft, OneShot, Team Fortress 2, Celeste,
            <span class="upper">Death Stranding</span>, and Red Dead Redemption
            2.
        </p>
    </header>

    <h2 id="links">Links</h2>
    <p>Other profiles and places you can find me on the internet:</p>

    {#each links as link}
        <div class="icon-link">
            <img src={"/assets/icons/" + link.icon} alt={link.name} />
            <a href={link.href} target="_blank">
                {link.name} ({link.username})
            </a>
        </div>
    {/each}

    <h3 id="contact">Contact</h3>
    <p>
        I would prefer if you contact me on the Fediverse
        <a href="https://cats.city/@pancakes" target="_blank">
            @pancakes@cats.city
        </a>
        or Matrix
        <a href="https://matrix.to/#/@pancakes:void.rehab" target="_blank">
            @pancakes:void.rehab
        </a>
        but I also have a Discord account @trypancakes.
    </p>

    <h2 id="pages">Pages</h2>

    <div class="notice">
        <p>
            Content under the pages section uses the
            <a
                href="https://creativecommons.org/licenses/by-sa/4.0/"
                target="_blank"
            >
                Creative Commons Attribution-ShareAlike 4.0 International (CC
                BY-SA 4.0)
            </a>
            license unless specified in the page footer.
        </p>
    </div>

    <dl>
        {#each pages as page}
            <h3>
                <a href={"/" + page.slug + "/"}>
                    {page.title}
                </a>
            </h3>
            <p>{page.description}</p>
            {#if page.published}
                <p>
                    <small>
                        Published:
                        <DateTime datetime={page.published} />
                        {#if page.edited}
                            &bull; Last edited:
                            <DateTime
                                datetime={page.edited}
                                display="dateTime"
                            />
                        {/if}
                    </small>
                </p>
            {/if}
        {/each}
    </dl>

    <h2 id="projects">Projects</h2>

    <h3 id="firefish-edits">Firefish Edits</h3>
    <p>
        A set of CSS snippets for Firefish and Iceshrimp that make the
        experience better for me. This includes things such as indicating when
        media doesn't have alt text or that a post is mention-only.
    </p>
    <p>
        <a
            href="https://codeberg.org/pancakes/firefish-edits"
            target="_blank"
            rel="noopener noreferrer"
        >
            View Project
        </a>
    </p>

    <h3 id="scp-wiki-pages">SCP Wiki Pages</h3>
    <p>
        A Fediverse bot that posts random articles from the
        <a
            href="https://scp-wiki.wikidot.com"
            target="_blank"
            rel="noopener noreferrer"
        >
            SCP Foundation Wiki
        </a>
        multiple times per day. The bot posts at
        <time datetime="00:00">00:00</time>
        <time datetime="06:00">06:00</time>,
        <time datetime="12:00">12:00</time>, and
        <time datetime="18:00">18:00</time> Sydney time. It displays the title, rating,
        author, item number, object class/anomaly classification, tags, and an image
        when possible.
    </p>

    <figure>
        <img
            src="/assets/project/scp_pages/screenshot.png"
            alt="A Mastodon post from @scp_pages@botsin.space. The post content matches the general description noted before."
        />
        <figcaption>
            Example post:
            <a
                href="https://botsin.space/@scp_pages/111328337740557018"
                target="_blank"
            >
                View Original
            </a>
        </figcaption>
    </figure>

    <p>
        <a href="https://botsin.space/@scp_pages" target="_blank">
            View Project
        </a>
    </p>

    <section id="buttons">
        <a href="/">
            <img src="/assets/buttons/pancakes.png" alt="pancakes" />
        </a>

        <a href="https://blueb.me/" target="_blank">
            <img
                src="/assets/buttons/kattgutte.D3vLs2tl.png"
                alt="blueb's website"
            />
        </a>
        <a href="https://micro.pages.gay" target="_blank">
            <img src="/assets/buttons/micro.png" alt="micro's site" />
        </a>
        <a href="https://w.on-t.work/" target="_blank">
            <img src="/assets/buttons/wontwork.png" alt="Won't Work!" />
        </a>

        <img src="/assets/buttons/css.jpg" alt="CSS is awesome" />
        <img src="/assets/buttons/valid-html5.gif" alt="W3C HTML5 validated" />
        <img src="/assets/buttons/emulate.gif" alt="Emulate Now!" />
        <a href="https://thefedi.wiki" target="_blank">
            <img src="/assets/buttons/fediverse.gif" alt="Join the Fediverse" />
        </a>
        <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"
            ><img src="/assets/buttons/getfirefox.gif" alt="Get Firefox" /></a
        >
        <img src="/assets/buttons/xenia.gif" alt="Linux Now" />
        <img src="/assets/buttons/paws.png" alt="made with My Own Two Paws" />
        <a href="https://scp-wiki.wikidot.com" target="_blank">
            <img src="/assets/buttons/scp.png" alt="SCP" />
        </a>
        <a
            href="https://store.steampowered.com/app/440/Team_Fortress_2/"
            target="_blank"
        >
            <img
                src="/assets/buttons/team_fortress_get_it.gif"
                alt="Team Fortress. Get It!"
            />
        </a>
        <a href="https://ublockorigin.com/" target="_blank">
            <img src="/assets/buttons/ublock.png" alt="uBlock Origin Now!" />
        </a>
        <img src="/assets/buttons/wii.png" alt="Wii" />
    </section>
</main>

<style>
    section#buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
    }

    section#buttons img {
        image-rendering: pixelated;
        width: 88px;
        height: 31px;
    }
</style>