<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lost Letters</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" id="switcher-id" href="">
    <link rel="icon" href="/graphics/favicon/ribbon.ico" type="image/x-icon" />
    <link href="/style-my-tooltips.css" rel="stylesheet" type="text/css"/>
    <link rel="me" href="https://cutie.city/@lostletters"/>
    <link rel="me" href="https://github.com/toritried"/>
    <link rel="webmention" href="https://webmention.io/lostletters.neocities.org/webmention"/>
    <link rel="pingback" href="https://webmention.io/lostletters.neocities.org/xmlrpc"/>
</head>
<body id="top">
    <div class="overlay"></div>
    <div class="main">
        <header class="header">
            <div class="title">
                <a href="/">
                    Welcome to Lost Letters
                </a>
            </div>
            <div class="mobile_nav">
    <a href="/feed.xml" aria-label="RSS feed" title="RSS feed">
        <img class="inline-svg" src="/graphics/phosphoricons/rss.svg">
    </a>
    <a class="blog-link" href="/blog.html">blog</a>
    <button class="dropbtn" aria-controls="dropdown-webcore" aria-expanded="false">
        💾 webcore
        <span class="fa fa-caret-down"></span>
    </button>
    <button class="dropbtn" aria-controls="dropdown-stationery" aria-expanded="false">
        ✒️ stationery
    <span class="fa fa-caret-down"></span>
    </button>
    <button class="dropbtn" aria-controls="dropdown-ttrpg" aria-expanded="false">
        🦄 ttrpgs
    <span class="fa fa-caret-down"></span>
    </button>
    <button class="dropbtn" aria-controls="dropdown-self-care" aria-expanded="false">
        🧠 self-care
    <span class="fa fa-caret-down"></span>
    </button>
    <button class="dropbtn" aria-controls="dropdown-about" aria-expanded="false">
        🔎 about
        <span class="fa fa-caret-down"></span>
    </button>
    <button class="dropbtn" aria-controls="dropdown-themes" aria-expanded="false">
        ✨ themes
        <span class="fa fa-caret-down"></span>
    </button>
    <div class="dropdown-content" id="dropdown-webcore">
        
            
        
            
        
            
            <a href="/afternoontea/">
                <span class="emoji" aria-hidden="true">🍵</span>
                afternoon tea
            </a>
            
        
            
        
            
        
            
        
            
        
            
            <a href="/halloween/">
                <span class="emoji" aria-hidden="true">🎃</span>
                halloween
            </a>
            
        
            
        
            
        
            
            <a href="/join-indie-web/">
                <span class="emoji" aria-hidden="true">🌐</span>
                join the indie web
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/pixel-clubs/">
                <span class="emoji" aria-hidden="true">🎨</span>
                pixel clubs
            </a>
            
        
            
            <a href="/pride/">
                <span class="emoji" aria-hidden="true">🏳️‍🌈</span>
                pride jam
            </a>
            
        
            
            <a href="/quilt/">
                <span class="emoji" aria-hidden="true">🐝</span>
                q*bee shrine
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/tamagotchi/">
                <span class="emoji" aria-hidden="true">🐣</span>
                tamagotchi shrine
            </a>
            
        
            
        
            
        
            
        
            
            <a href="/toybox/">
                <span class="emoji" aria-hidden="true">🧸</span>
                toybox era
            </a>
            
        
            
        
            
            <a href="/virtual-pets/">
                <span class="emoji" aria-hidden="true">🐲</span>
                virtual pets guide
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/resources/">
                <span class="emoji" aria-hidden="true">🎁</span>
                make your own site
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="dropdown-content" id="dropdown-stationery">
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/goal-system/">
                <span class="emoji" aria-hidden="true">🎯</span>
                goal → system
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/journaling/">
                <span class="emoji" aria-hidden="true">📓</span>
                journaling
            </a>
            
        
            
        
            
        
            
            <a href="/no-buy/">
                <span class="emoji" aria-hidden="true">💰</span>
                2022 "no buy"
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/stationery/">
                <span class="emoji" aria-hidden="true">💸</span>
                stationery life
            </a>
            
        
            
        
            
            <a href="/techo-kaigi/">
                <span class="emoji" aria-hidden="true">📚</span>
                techo kaigi
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="dropdown-content" id="dropdown-ttrpg">
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/ironsworn/">
                <span class="emoji" aria-hidden="true">⚔️</span>
                ironsworn
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/oc/">
                <span class="emoji" aria-hidden="true">😈</span>
                my OCs
            </a>
            
        
            
            <a href="/origins/">
                <span class="emoji" aria-hidden="true">🧝🏻‍♀️</span>
                my tabletop origin story
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/starforged/">
                <span class="emoji" aria-hidden="true">🚀</span>
                starforged
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/tt-accessories/">
                <span class="emoji" aria-hidden="true">🎲</span>
                tabletop accessories
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="dropdown-content" id="dropdown-self-care">
        Running: 
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/run-more-easily/">
                <span class="emoji" aria-hidden="true">🥵</span>
                run more easily
            </a>
            
        
            
            <a href="/running-history/">
                <span class="emoji" aria-hidden="true">🏆</span>
                life in the back of the pack
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
        <br>
        Other: 
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/short-rest/">
                <span class="emoji" aria-hidden="true">🫂</span>
                short rest
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/top-surgery/">
                <span class="emoji" aria-hidden="true">🏳️‍⚧️</span>
                top surgery
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="dropdown-content" id="dropdown-about">
        Author: 
            
        
            
            <a href="/about-me/">
                <span class="emoji" aria-hidden="true">🤡</span>
                about me
            </a>
            
        
            
        
            
        
            
            <a href="/confessions/">
                <span class="emoji" aria-hidden="true">🤫</span>
                confessions
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
            <a href="/microblog/">
                <span class="emoji" aria-hidden="true">☕</span>
                microblog
            </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
        <br>
        Site: 
        
        
        
        
        
        
        
        
        
        
        
        
        
        <a href="/guestbook/">
            <span class="emoji" aria-hidden="true">💌</span>
            guestbook
        </a>
        
        
        
        
        
        
        
        
        
        
        
        
        
        <a href="/links/">
            <span class="emoji" aria-hidden="true">🔗</span>
            links
        </a>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <a href="/site/">
            <span class="emoji" aria-hidden="true">🪲</span>
            about the site
        </a>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    </div>
    <div class="dropdown-content" id="dropdown-themes">
        <div class="theme-switches">
    <div data-theme="stars" class="switch" id="switch-2">🌠</div>
    <div data-theme="mail" class="switch" id="switch-4">💌</div>
    <div data-theme="spooky" class="switch" id="switch-5">🎃</div>
    <div data-theme="sakura" class="switch" id="switch-6">🌸</div>
    <div data-theme="green" class="switch" id="switch-7">🌱</div>
</div>
    </div>
</div>
        </header>
        <main class="main-content">
            <article>
                <article>
    <div style="display: inline-block;">
        <p>
            <img class="theme-image" />
            You have found Lost Letters, a personal site and nostalgic tribute to girls' early 2000s-era online subcultures. I hope that this website inspires fellow web dev amateurs to see themselves as creators of a delightful and fun future internet that is inclusive, brimming with personality, and divorced from corporate social media monopolies.
        </p>
        <p>
            <b title="last updated: 2023-10-22">Website Disclaimers</b>: 
            <br />
            <img src="/graphics/toy/emoticons/warning-watercolor.gif" alt="" /> This site is <b>safe for work</b>, but only intended for adults. <b>DNI and leave if you're under 18</b>.
            <br />
            <img src="/graphics/toy/emoticons/cellphone-watercolor.gif" alt="" /> This website is <b>responsive and mobile-friendly</b> because &gt;90% of internet users access the internet using a mobile phone (<a target="_blank" href="https://explodingtopics.com/blog/mobile-internet-traffic#percentage-of-mobile-traffic">learn more</a>), and <b>being vehemently mobile-hostile is ableist and classist</b> by willfully excluding folks who many not be able to easily access the web via other means.
            <br />
            <img src="/graphics/toy/emoticons/alert-deer.gif" alt="" /> Content warnings (CW) are used for discussions of mental health, swearing, etc.
            <br />
            <img src="/graphics/toy/emoticons/distracted-moomin.gif" alt="" /> This site uses Javascript for the theme switcher, navigation, webmentions, tool tips, cursor effects, guestbook, blog post reactions, and more.
            <br />
            <img src="/graphics/toy/emoticons/hearts-2-watercolor.gif" alt="" /> <b>There will never be auto-playing music</b> on this site because screen readers are critical to an inclusive web (<a target="_blank" href="https://accessibility.its.uconn.edu/auto-playing-media-and-multimedia/">learn more</a>).
        </p>
    </div>
</article>
<div class="buttons-index">
    <div class="noext" style="text-align: center; image-rendering: pixelated;">
    <img src="/graphics/toy/tags/transrights.png" title="trans rights!" />
    <a target="_blank" href="/pride/">
        <img src="/graphics/toy/tags/lgbt_pan.png" title="pansexual af" />
    </a>
    <img src="/graphics/toy/tags/pride2.gif" title="queer af" />
    <img src="/graphics/toy/tags/union-member.png" title="Union Strong!" />
    <img src="/graphics/toy/tags/veganalways.png" title="I'm just doing the best I can in Japan where it's horrible for vegans 🙃" />
    <a target="_blank" href="/origins/">
        <img src="/graphics/toy/tags/alignment_chaotic_good.png" title="click for my chaotic good origin story" />
    </a>
    <a target="_blank" href="https://www.neopets.com/userlookup.phtml?user=waterfish57">
        <img src="/graphics/toy/tags/neopets.png" title="neopets badge from web.badges.world" />
    </a>
    <a target="_blank" href="/tamagotchi/">
        <img src="/graphics/toy/tags/tama.png" title="wanna see my collection?" />
    </a>
    <br />
    <a target="_blank" href="https://lostletters.neocities.org/feed.xml">
        <img src="/graphics/linkout/rss.gif" title="Only my freshest blog posts delivered straight to you via RSS!" />
    </a>
    <a target="_blank" href="https://webmentions.neocities.org/">
        <img src="/graphics/linkout/webmentions_anim.gif" title="If you mention this site's URL on mastodon, it'll display like a comment on that specific page! So cool, right? Go enable it on your site too!" />
    </a>
    <a target="_blank" href="https://kalechips.net/responsive/index">
        <img src="/graphics/linkout/responsive-web-directory.png" title="Part of the Responsive Web Directory" />
    </a>
    <a target="_blank" href="https://jekyllrb.com/">
        <img src="/graphics/linkout/jekyll.png" title="I use Jekyll as my Static Site Generator" />
    </a>
    <a target="_blank" href="https://neocities.org/site/lostletters">
        <img src="/graphics/linkout/neocitiespink.gif" title="Proudly hosted by NeoCities!" />
    </a>
    <a target="_blank" href="https://32bit.cafe/">
        <img src="/graphics/linkout/32bitcafe.gif" title="32bit.cafe is an awesome 18+ community of website hobbyists and pros. The cafe site has tutorials and resources to help you build your own place on the web and more." />
    </a>
    <a target="_blank" href="https://forum.melonland.net/">
        <img src="/graphics/linkout/melonland-forum.gif" title="Find me on the MelonLand Forum as Lost Letters!" />
    </a>
    <a target="_blank" href="https://cyber-rot.neocities.org/mine">
        <img src="/graphics/linkout/webdesign.gif" title="Webdesign is my passion button by cyber-rot" />
    </a>
    <a target="_blank" href="https://www.deviantart.com/kouenli/art/Forever-Online-Stamp-626217529">
        <img src="/graphics/linkout/forever-online.gif" title="Forever online button by kouenli (DeviantArt)" />
    </a>
    <a target="_blank" href="https://plasticdino.neocities.org/graphics">
        <img src="/graphics/linkout/queer.png" title="You're telling me a queer coded this button by kitty" />
    </a>
    <a target="_blank" href="https://rainy.gay/">
        <img src="/graphics/linkout/nonbinary.png" title="nonbinary pride button by Dime" />
    </a>
    <a target="_blank" href="https://yesterweb.org/no-to-web3/">
        <img src="/graphics/linkout/nft_sadgrl.gif" title="anti-NFT button by sadgrl.online" />
    </a>
    <a target="_blank" href="https://yourdevilfriends.neocities.org/creative/freebies">
        <img src="/graphics/linkout/masknow.png" title="Wear a mask now button by devils" />
    </a>
    <a target="_blank" href="https://keysklubhouse.com/">
        <img src="/graphics/linkout/acab.gif" title="ACAB button - button made by keysklubhouse" />
    </a>
    <a target="_blank" href="https://hillhouse.neocities.org/journal/notes/palestine">
        <img src="/graphics/linkout/palestine-hillhouse.gif" alt="the Palestinian flag with overlaying text that says From the river to the sea Palestine will be free" title="Click for ways to support freeing Palestine; button by hillhouse" />
    </a>
    <a target="_blank" href="https://zanarkand.neocities.org/">
        <img src="/graphics/linkout/bob.gif" title="Powered by bob button by zanarkand" />
    </a>
</div>
</div>
<hr />

<div class="col-wrapper">
    <div class="two-col">
        <div id="latest-blog">
            <img class="theme-stamp" align="right" style="margin: 0 20px;" />
            <article>
                <h2>Latest Blog Post</h2>
                <h3 style="margin-bottom: 0;"><a href="/2025/03/10/tending-to-creative-pursuits.html">Update on Tending to Creative Pursuits</a></h3>
                <img class="index-svg" src="/graphics/phosphoricons/calendar-dots.svg" /><text style="border-bottom: 1px dotted;">10 March 2025</text> | <img class="index-svg" src="/graphics/phosphoricons/clock.svg" />6 min read

                <p>If you didn’t read my last blog entry, I’ve been lacking a creative passion for quite some time, and I finally decided this past week that I’m no longer going to be passive about it. Since it has been almost a week since I started gently tending to my creative pursuits again, I wanted to write up a brief progress update as a commitment to the practice. At the start of this, I said I wasn’t going to be attached to outcomes, so I’m going to frame my update in terms of feelings instead.</p>

                <div id="continueReading-react">
                    <div id="continueReading">
                        <i><a href="/2025/03/10/tending-to-creative-pursuits.html">continue reading...</a></i>
                    </div>
                    <div id="react">
                        <!-- reactions by https://www.benji.dog/articles/interactions-or-reactions/ -->
                        <open-heart href="https://corazon.sploot.com?id=https://lostletters.neocities.org/2025/03/10/tending-to-creative-pursuits.html" emoji="❤️">❤️</open-heart>
                        <!-- if you want more than one emoji, add another one of ^^^ and change the emoji value -->
                        <!-- load webcomponent -->
                        <script src="https://unpkg.com/open-heart-element" type="module"></script>
                        <!-- when the webcomponent loads, fetch the current counts for that page -->
                        <script>
                            window.customElements.whenDefined('open-heart').then(() => {
                            for (const oh of document.querySelectorAll('open-heart')) {
                                oh.getCount()
                            }
                            })
                            // refresh component after click
                            window.addEventListener('open-heart', e => {
                            e && e.target && e.target.getCount && e.target.getCount()
                            })
                        </script>
                    </div>
                </div>
            </article>
        </div>
        <div id="mastofeed">
            <article>
                <div id="mastodon_timeline">
                    <h1>Latest Mastodon Post</h1>
                    <p>My mastodon feed is loading...</p>
                </div>
            </article>
        </div>
    </div>
</div>

            </article>
        </main>
        <!-- inspired by https://www.benji.dog/ -->
<footer class="noext" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0;">
    <div>
        <a target="_blank" class="noext" aria-label="Mastodon" title="Mastodon" href="https://cutie.city/@lostletters" rel="me">
    <img class="inline-svg" src="/graphics/phosphoricons/mastodon-logo.svg">
</a>
<a target="_blank" class="noext" aria-label="Neocities profile" title="Neocities profile" href="https://neocities.org/site/lostletters">
    <img class="inline-svg" src="/graphics/phosphoricons/hard-hat.svg">
</a>
<a target="_blank" class="noext" aria-label="StoryGraph" title="StoryGraph" href="https://app.thestorygraph.com/profile/lostletters" rel="me">
    <img class="inline-svg" src="/graphics/phosphoricons/books.svg">
</a>
<a target="_blank" class="noext" aria-label="The Final Outpost" title="The Final Outpost" href="https://finaloutpost.net/visit/lostletters" rel="me">
    <img class="inline-svg" src="/graphics/phosphoricons/flask.svg">
</a>
<a target="_blank" class="noext" aria-label="Dragon Cave" title="Dragon Cave" href="https://dragcave.net/user/lostletters" rel="me">
    <img class="inline-svg" src="/graphics/phosphoricons/egg-crack.svg">
</a>
<a target="_blank" class="noext" aria-label="Ravelry" title="Ravelry" href="https://www.ravelry.com/projects/foolishfibers" rel="me">
    <img class="inline-svg" src="/graphics/phosphoricons/yarn.svg">
</a>
    </div>
    <div>
        <a href="#top" aria-label="return to top" title="return to top">
            <img class="inline-svg" src="/graphics/phosphoricons/arrow-up.svg">
        </a>
        <a href="/" aria-label="return home" title="return home">
            <img class="inline-svg" src="/graphics/phosphoricons/house.svg">
        </a>
        <a href="/guestbook/" aria-label="sign my guestbook" title="sign my guestbook">
            <img class="inline-svg" src="/graphics/phosphoricons/pencil-line.svg">   
        </a>
        <a href="https://github.com/toritried/lostletters" aria-label="view source code on github" title="view source code on github">
            <img class="inline-svg" src="/graphics/phosphoricons/code.svg">
        </a>
    </div>
</footer>
<script src="//gc.zgo.at/count.js" data-goatcounter="https://lostletters.goatcounter.com/count" async></script>
<script src="/tinkerbelleffect.js"></script>
<script src="/webmention.min.js" async></script>
<script src="/navigation.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/jquery.style-my-tooltips.js"></script>
<script src="/theme-switch.js"></script>
<script src="/mastodon.js" defer></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>
<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var site_data = JSON.parse(this.responseText);
            var num_arr = site_data.info.views.toString().split("");
            var num_str = "";
            for (i = 0; i < num_arr.length; i++) {
                num_str += num_arr[i];
                if ( (num_arr.length-1 - i) % 3 == 0 && (num_arr.length-1 - i) != 0 ) {num_str += ",";}
                var date_str = site_data.info.last_updated;
                var date_obj = new Date(site_data.info.last_updated);
                document.getElementById("lastupdate").innerHTML = (date_obj.getMonth()+1) + "-" + date_obj.getDate() + "-" + date_obj.getFullYear();
            }
            document.getElementById("hitcount").innerHTML = num_str;
        }
    };
    xhttp.open("GET", "https://weirdscifi.ratiosemper.com/neocities.php?sitename=lostletters", true);
    xhttp.send();
</script>
    </div>
</body>
</html>
