public/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; object-src 'none';">
    
    <!-- Primary SEO Meta Tags -->
    <title>Keyboard Vagabond - Fediverse for Digital Nomads</title>
    <meta name="title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
    <meta name="description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
    <meta name="keywords" content="fediverse, digital nomad, remote work, travel, mastodon, piefed, pixelfed, bookwyrm, write freely, social media alternative, keyboard vagabond">
    <meta name="author" content="Keyboard Vagabond">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.keyboardvagabond.com/">
    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.keyboardvagabond.com/">
    <meta property="og:title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
    <meta property="og:description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
    <meta property="og:image" content="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=1200">
    <meta property="og:site_name" content="Keyboard Vagabond">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.keyboardvagabond.com/">
    <meta property="twitter:title" content="Keyboard Vagabond - Fediverse for Digital Nomads">
    <meta property="twitter:description" content="Join Keyboard Vagabond's fediverse community for digital nomads, remote workers, and travelers on Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely.">
    <meta property="twitter:image" content="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=1200">
    
    <!-- Additional SEO -->
    <meta name="theme-color" content="#2d5a27">
    <meta name="msapplication-TileColor" content="#2d5a27">
    <meta name="application-name" content="Keyboard Vagabond">
    
    <!-- Additional SEO for sitelinks -->
    <meta name="format-detection" content="telephone=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Keyboard Vagabond">
    
    <!-- Help search engines understand site structure -->
    <link rel="home" href="https://www.keyboardvagabond.com/">
    <link rel="index" href="https://www.keyboardvagabond.com/">
    
    
    <!-- Structured Data -->
    <script type="application/ld+json" src="/structured-data.json"></script>
    
    <link rel="stylesheet" href="css/pico.jade.min.css">
    <link rel="stylesheet" href="site-styles/style.css">
</head>

<body>
    <!-- Header -->
    <header class="container">
        <nav role="navigation" aria-label="Main navigation">
            <!-- Desktop Navigation -->
            <ul class="desktop-nav">
                <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public" rel="noopener">Mastodon</a></li>
                <li><a target="_blank" href="https://piefed.keyboardvagabond.com" rel="noopener">Piefed</a></li>
                <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com" rel="noopener">Pixelfed</a></li>
                <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com" rel="noopener">Bookwyrm</a></li>
                <li><a target="_blank" href="https://blog.keyboardvagabond.com" rel="noopener">Write Freely</a></li>
                <li><a target="_blank" href="https://picsur.keyboardvagabond.com" rel="noopener">Picsur</a></li>
            </ul>
            
            <!-- Mobile Navigation -->
            <ul class="mobile-nav">
                <li>
                    <details class="dropdown">
                        <summary role="button" class="secondary">Sites</summary>
                        <ul>
                            <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public" rel="noopener">Mastodon</a></li>
                            <li><a target="_blank" href="https://piefed.keyboardvagabond.com" rel="noopener">Piefed</a></li>
                            <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com" rel="noopener">Pixelfed</a></li>
                            <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com" rel="noopener">Bookwyrm</a></li>
                            <li><a target="_blank" href="https://blog.keyboardvagabond.com" rel="noopener">Write Freely</a></li>
                            <li><a target="_blank" href="https://picsur.keyboardvagabond.com" rel="noopener">Picsur</a></li>
                        </ul>
                    </details>
                </li>
            </ul>
            
            <ul>
                <li><a href="about.html">About</a></li>
                <li>
                    <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                        <span id="theme-icon">🌙</span>
                    </button>
                </li>
            </ul>
        </nav>
    </header>

    <section class="banner-container" role="banner" aria-labelledby="main-heading">
        <picture>
            <source media="(min-width: 1500px" srcset="https://picsur.keyboardvagabond.com/i/9334b89b-ce7a-49e7-ab85-43047e00f9ee.jpg">
            <source media="(min-width: 1000px" srcset="https://picsur.keyboardvagabond.com/i/9334b89b-ce7a-49e7-ab85-43047e00f9ee.jpg?width=1500&shrinkonly=true">
            <source media="(min-width: 500px" srcset="https://picsur.keyboardvagabond.com/i/9334b89b-ce7a-49e7-ab85-43047e00f9ee.jpg?width=1000&shrinkonly=true">
            <img src="https://picsur.keyboardvagabond.com/i/9334b89b-ce7a-49e7-ab85-43047e00f9ee.jpg" alt="Cartoon view of mountains with a dirt trail in the center. A wooden sign reads Keyboard Vagabond.">
        </picture>
        <p class="banner-subtitle">A fediverse community for digital nomads, remote workers, and travel enthusiasts</p>
    </section>

    <!-- Main content -->
    <main class="container">
        <section aria-labelledby="intro-heading">
            <h2 id="intro-heading" class="sr-only">About Keyboard Vagabond</h2>
            <p>We welcome you to this space to connect with others, share information, create memories, and help each other
                to travel responsibly and considerately as we explore the world.</p>
            <p><strong>Here, you are a member, not just a user</strong> - We want to create community in this space, being
                respectful of each other as well as the places we go and the people we see. This space is what we make of it.
            </p>

            <div class="mascot-section">
                <div class="mascot-image">
                    <picture>
                        <source srcset="assets/logos/primary-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml" />
                        <source srcset="assets/logos/primary-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml" />
                        <img src="assets/logos/primary-light.svg" alt="Otter mascot holding a laptop with the words Keyboard Vagabond circling it" width="200" type="image/svg+xml" />
                    </picture>
                </div>
                <span class="mascot-text">
                    Seymour is the official mascot of Keyboard Vagabond and a nomadic otter who always wants to see more!
                    He makes his home wherever he goes and adapts to his new environments.
                    Let our adorable friend guide you through the fediverse and give you a break from the
                    algorithms and attention grabbing of corporate social media.
                    He was lovingly created by nomad and designer Lori Kendall at <a href="https://branddesigncreate.com" target="_blank" rel="nofollow">branddesigncreate.com</a>,
                    Instagram at <a target="_blank" rel="nofollow" href="https://www.instagram.com/branddesigncreate/">@branddesigncreate</a>.
                </span>
            </div>
        </section>
        
        
        
        <section aria-labelledby="services-heading">
            <!-- Services Summary for SEO -->
            <div class="services-summary" role="region" aria-label="Quick access to all services">
                <h3>Our Fediverse Services</h3>
                <div class="service-links">
                    <a href="https://mastodon.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Mastodon - Social Media Alternative">
                        <picture class="service-icon">
                            <source srcset="assets/logos/mastodon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml"/>
                            <source srcset="assets/logos/mastodon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml"/>
                            <img src="assets/logos/mastodon-light.svg" alt="Mastodon mascot holding a phone with mastodon mascot" type="image/svg+xml"/>
                        </picture>
                        <span class="service-text">
                            <strong>Mastodon</strong> - Microblogging
                        </span>
                    </a>
                    <a href="https://piefed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Piefed - Community Forum">
                        <picture class="service-icon">
                            <source srcset="assets/logos/piefed-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml" />
                            <source srcset="assets/logos/piefed-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml" />
                            <img src="assets/logos/piefed-light.svg" alt="Piefed mascot holding a pie" type="image/svg+xml" />
                        </picture>
                        <span class="service-text">
                            <strong>Piefed</strong> - Community Forum
                        </span>
                    </a>
                    <a href="https://pixelfed.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Pixelfed - Photo Sharing">
                        <picture class="service-icon">
                            <source srcset="assets/logos/pixelfed-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
                            <source srcset="assets/logos/pixelfed-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
                            <img src="assets/logos/pixelfed-light.svg" alt="Pixelfed mascot holding camera" type="image/svg+xml"/>
                        </picture>
                        <span class="service-text">
                            <strong>Pixelfed</strong> - Photo Sharing
                        </span>
                    </a>
                    <a href="https://bookwyrm.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Bookwyrm - Book Reviews">
                        <picture class="service-icon">
                            <source srcset="assets/logos/bookwyrm-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
                            <source srcset="assets/logos/bookwyrm-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
                            <img src="assets/logos/bookwyrm-light.svg" alt="Bookwyrm mascot holding book" type="image/svg+xml"/>
                        </picture>
                        <span class="service-text">
                            <strong>Bookwyrm</strong> - Book Reviews
                        </span>
                    </a>
                    <a href="https://blog.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Write Freely - Blogging">
                        <picture class="service-icon">
                            <source srcset="assets/logos/default-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
                            <source srcset="assets/logos/default-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
                            <img src="assets/logos/default-light.svg" alt="Default mascot holding laptop" type="image/svg+xml"/>
                        </picture>
                        <span class="service-text">
                            <strong>Write Freely</strong> - Blogging
                        </span>
                    </a>
                    <a href="https://picsur.keyboardvagabond.com" target="_blank" class="service-link" aria-label="Picsur - Image Hosting">
                        <picture class="service-icon">
                            <source srcset="assets/logos/default-dark.svg" media="(prefers-color-scheme: dark)"  type="image/svg+xml"/>
                            <source srcset="assets/logos/default-light.svg" media="(prefers-color-scheme: light)"  type="image/svg+xml"/>
                            <img src="assets/logos/default-light.svg" alt="Default mascot holding laptop" type="image/svg+xml"/>
                        </picture>
                        <span class="service-text">
                            <strong>Picsur</strong> - Image Hosting
                        </span>
                    </a>
                </div>
            </div>
        </section>
            
        <h3>Detailed Service Information</h3>
        <ul>
            <li><strong><a href="https://piefed.keyboardvagabond.com">Piefed</a></strong> - An alternative to Reddit and similar to and compatible
                with <a href="https://join-lemmy.org">Lemmy</a>, but with extra features for topics and communities.
                See more at <a href="https://join-lemmy.org">join-lemmy.org</a> and
                <a href="https://join.piefed.social/try/">join.piefed.social</a>.</li>
            <li><strong><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong> - Like old instagram, where you can share your photos, albums, and create stories. See more at <a
                    href="https://pixelfed.org/servers">pixelfed.org</a>.</li>
            <li><strong><a href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong> - An alternative to
                twitter. Create your timeline by following users and hashtags. See more at <a
                    href="https://joinmastodon.org/servers">joinmastodon.org</a>.</li>
            <li><strong><a href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong> - All about books! Discuss
                and review books with people across the fediverse. See more at <a
                    href="https://joinbookwyrm.com">joinbookwyrm.com</a>.</li>
            <li><strong><a href="https://blog.keyboardvagabond.com">Write Freely</a></strong> - A minimalist, federated
                blogging platform. Comment and discuss across the fediverse, such as on mastodon (direct comments aren't
                available yet, but can be done on Mastodon). See more at <a
                    href="https://writefreely.org/instances">writefreely.org</a>.</li>
            <li><strong><a href="https://picsur.keyboardvagabond.com">Picsur</a></strong> - Like Imgur for image
                hosting, to use for images in your blogs. You can also use Pixelfed. Contact the admin for Picsur
                signup, as there's no automated signup process.</li>
        </ul>
        <strong>Mobile Apps</strong>
        <section>
            <ul>
            <li>
                <strong>Piefed</strong> - Piefed has support in <a href="https://www.lemmyapps.com/Interstellar" target="_blank">Interstellar (cross platform)</a> and experimental support in 
                <a href="https://vger.app/settings/install">Voyager (Android)</a>, though features like topics and communities are best served on the website.
            </li>
            <li>
                <strong><a href="https://pixelfed.org/mobile-apps" target="_blank">Pixelfed</a></strong>, <strong><a href="https://joinmastodon.org/apps" target="_blank">Mastodon</a></strong> - have native mobile apps
            </li>
            <li>
                <strong>Lemmy</strong> - many of your favorite reddit apps can be used with Lemmy
            </li>
            </ul>
            <span>The rest of the applications are accessible on the websites and can be added to your homescreen.</span><br/>
            <span><strong>Signing in</strong> - you'll search the server that you want to join, such as mastodon.social or mastodon.keyboardvagabond.com, or use the provided default instances.</span>  
        </section>
        <h2>What is the Fediverse</h2>
        <section>
        <p>The fediverse is a collection of big-tech alternative social media that all communicate with each other using
            the same protocol, called ActivityPub. This means that not only can different “instances,” such as this
            community, participate with discussions on other servers, but also with the different applications. You can
            think of it like email, where people can have accounts with different companies, but can communicate with
            any other email provider - but on steroids.</p>
        <p>You can make a post on Mastodon, tag a community on Lemmy/Piefed and people there can respond. Someone can
            make a video on PeerTube (Youtube alternative) and discuss on Mastodon. Your Write Freely blog posts will,
            if you enable it, be visible on Mastodon and people can follow your blog account.</p>
        <p>Check out this amazing four minute video by <a href="https://news.elenarossini.com">Elena Rossini</a>. You can follow her
            on Mastodon by searching <a href="https://mastodon.social/@_elena@mastodon.social" target="_blank">@_elena@mastodon.social</a>.</p>
        <div class="video-container">
            <iframe title="Introducing the Fediverse: a New Era of Social Media"
                        src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" allowfullscreen=""
                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                        loading="lazy"></iframe>
        </div>
        </section>
        <h2>Getting started in the Fediverse</h2>
        <section>
        <p>The best way to see what's available in the fediverse is to start off on a larger instance, which will be
            following the most content. From there you can follow communities and members on Keyboard Vagabond, or
            export your profiles, follows, etc over to Keyboard Vagabond. You can, of course, have multiple profiles
            across instances.</p>
        <p>Once you choose and place and sign up, wait for your admin approval. Many instances require manual account
            approval to prevent spam.</p>
        <strong>Popular places to get started are</strong>:<br/>
        <ul>
            <li>
            <strong><a href="https://lemmy.zip" target="_blank" rel="nofollow">Lemmy.zip</a></strong> for Lemmy or <strong><a
                    href="https://piefed.social" target="_blank" rel="nofollow">Piefed.social</a></strong> for PieFed, which is the software that this
            community runs.
        </li>
        <li><strong><a href="https://mastodon.social" target="_blank" rel="nofollow">Mastodon.social</a></strong> - the largest mastodon instance.
            Search for hashtags or check out whats trending and follow them to create your timeline.
        </li>
        <li><strong><a href="https://pixelfed.social" target="_blank" rel="nofollow">Pixelfed.social</a></strong> - the largest Pixelfed instance. Also
            search for timelines and hashtags of things that you're interested in or what may be trending.
        </li>
        </ul>
        <strong>Codes of Conduct</strong><br />
        <span>
            While corporate media is primarily interested in the Terms of Service, the Fediverse cares about the 
            Code of Conduct, the agreement of how we treat each other and what behavior is and is not tolerated.
            Each instance should have one, including those of Keyboard Vagabond. These agreements help us to 
            create welcoming spaces that are free of harassment and bigotry.
        </span>
        </section>
        <h2>Creating your experience</h2>
        <section>
        <p>
            In the fediverse, there are no algorithms. No one is trying to harvest your data or monetize your attention.
            No one is trying to push anything in front of you. Try searching for hashtags like <a
                href="https://mastodon.keyboardvagabond.com/tags/travel" target="_blank">#travel</a>, <a
                href="https://mastodon.keyboardvagabond.com/tags/travelphotography" target="_blank">#travelphotography</a>, or <a 
                href="https://mastodon.keyboardvagabond.com/tags/EscapeFlights" target="_blank">#EscapeFlights</a>.</p>
        <div class="photo-gallery">
            <div class="photo-item">
                <small>Check out that Explore button on the main page.</small>
                <img src="https://picsur.keyboardvagabond.com/i/e8ab899f-5bb4-4cf1-b531-8621ac93670e.png?width=600"
                    alt="Explore button on main page" loading="lazy" />
            </div>
            <div class="photo-item">
                <small>Visit the Posts, Hashtags, and News tabs to see what's on the server</small>
                <img src="https://picsur.keyboardvagabond.com/i/aea3c3c5-b011-4680-be4c-96fc1fdb009a.png?width=700"
                    alt="Posts, Hashtags, and News tabs" loading="lazy" />
            </div>
            <div class="photo-item">
                <small>Look at the local communities to see what communities have been created on this server specifically. The rest of the communities are ones that this server is following.
                    Following communities on other instances will result in them being shown here.
                </small>
                <img src="https://picsur.keyboardvagabond.com/i/b5d316d9-8958-47bf-ba74-fb853e2d2be8.png?width=700"
                    alt="Communities, Local Communities" loading="lazy" />
            </div>
            <div class="photo-item">
                <small>Scroll all the way to the bottom to find local topics. Topics are groups of communities. You can suggest more in the Meta community.</small>
                <img src="https://picsur.keyboardvagabond.com/i/e5909364-3c4f-4bca-8631-5b1225781177.png?width=700"
                    alt="Local topics" loading="lazy" />
            </div>
        </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="container" role="contentinfo">
        <hr>
        <section aria-labelledby="footer-heading">
            <h2 id="footer-heading" class="sr-only">Footer Information</h2>
            <p><strong>Keyboard Vagabond</strong> - A fediverse community for digital nomads, remote workers, and travel enthusiasts.</p>
            <span>Connect with us across the fediverse:</span><br/>
            <ul>
                <li><a href="https://mastodon.keyboardvagabond.com">Mastodon</a>&nbsp;- Social Media</li>
                <li><a href="https://piefed.keyboardvagabond.com">Piefed</a>&nbsp;- Community Forum</li>
                <li><a href="https://pixelfed.keyboardvagabond.com">Pixelfed</a>&nbsp;- Photo Sharing</li>
                <li><a href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a>&nbsp;- Book Reviews</li>
                <li><a href="https://blog.keyboardvagabond.com">Write Freely</a>&nbsp;- Blogging</li>
            </ul>
            <p><small>&copy; 2025 Keyboard Vagabond. Part of the decentralized fediverse network.</small></p>
        </section>
    </footer>

    <script src="scripts/bundle.js"></script>
</body>

</html>