fix styling of headers and nav bar

add SEO adjustments, apply html segments

Reviewed-on: #18
Co-authored-by: Michael DiLeo <michael_dileo@proton.me>
Co-committed-by: Michael DiLeo <michael_dileo@proton.me>

minify-build.js

@@ -35,10 +35,11 @@ async function createOptimizedBuild() {
         const purgeResults = await new PurgeCSS().purge({
             content: [
                 'public/index.html',
-                'public/about.html'
+                'public/about.html',
+                'public/getting-started.html',
             ],
             css: [
-                'public/css/pico.jade.css'
+                'public/css/pico.jade.css',
                 // 'public/css/pico.colors.min.css'
             ],
             safelist: {
@@ -152,21 +153,28 @@ async function createOptimizedBuild() {
         console.log('📄 Step 4: Minifying HTML...');
         await minifyHTMLFile('public/index.html', 'dist/index.html');
         await minifyHTMLFile('public/about.html', 'dist/about.html');
+        await minifyHTMLFile('public/getting-started.html', 'dist/getting-started.html');
 
-        // Step 5: Copy assets
-        console.log('📁 Step 5: Copying assets...');
+        // Step 5: Copy assets and SEO files
+        console.log('📁 Step 5: Copying assets and SEO files...');
         try {
-            const assets = await fs.readdir('public/assets');
-            for (const asset of assets) {
-                await fs.copyFile(
-                    path.join('public/assets', asset),
-                    path.join('dist/assets', asset)
-                );
-            }
+            await copyDirectoryRecursive('public/assets', 'dist/assets');
+            console.log('   ✅ Assets directory copied recursively');
         } catch (err) {
             console.log('   No assets directory found, skipping...');
         }
 
+        // Copy SEO files
+        try {
+            await fs.copyFile('public/structured-data.json', 'dist/structured-data.json');
+            await fs.copyFile('public/getting-started-structured-data.json', 'dist/getting-started-structured-data.json');
+            await fs.copyFile('public/sitemap.xml', 'dist/sitemap.xml');
+            await fs.copyFile('public/robots.txt', 'dist/robots.txt');
+            console.log('   ✅ SEO files copied (structured-data.json, getting-started-structured-data.json, sitemap.xml, robots.txt)');
+        } catch (err) {
+            console.log('   ⚠️  Some SEO files not found, skipping...');
+        }
+
         // Calculate compression results
         const originalCSSSize = (await fs.stat('public/css/pico.jade.min.css')).size + 
                                (await fs.stat('public/css/pico.min.css')).size;
@@ -286,6 +294,41 @@ async function bundleAndMinifyJS() {
     }
 }
 
+async function copyDirectoryRecursive(src, dest) {
+    // Create destination directory if it doesn't exist
+    await fs.mkdir(dest, { recursive: true });
+    
+    // Read all items in source directory
+    const entries = await fs.readdir(src, { withFileTypes: true });
+    
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        
+        if (entry.isDirectory()) {
+            // Recursively copy subdirectories
+            await copyDirectoryRecursive(srcPath, destPath);
+        } else {
+            // Copy files
+            await fs.copyFile(srcPath, destPath);
+        }
+    }
+}
+
+async function injectStructuredData(html, jsonPath) {
+    try {
+        const json = await fs.readFile(jsonPath, 'utf8');
+        const minified = JSON.stringify(JSON.parse(json));
+        return html.replace(
+            /<script type="application\/ld\+json">[\s\S]*?<\/script>/,
+            `<script type="application/ld+json">${minified}</script>`
+        );
+    } catch (err) {
+        console.log(`   ⚠️  ${jsonPath} not found, skipping injection`);
+        return html;
+    }
+}
+
 async function minifyHTMLFile(inputPath, outputPath) {
     const html = await fs.readFile(inputPath, 'utf8');
     
@@ -296,6 +339,15 @@ async function minifyHTMLFile(inputPath, outputPath) {
                 '<link rel="stylesheet" href="css/bundle.css">')
         .replace(/<script src="site-scripts\/theme-toggle\.js"><\/script>/g, ''); // Remove individual script references
 
+    const structuredDataByPage = {
+        'index.html': 'public/structured-data.json',
+        'getting-started.html': 'public/getting-started-structured-data.json',
+    };
+    const structuredDataPath = structuredDataByPage[path.basename(inputPath)];
+    if (structuredDataPath) {
+        updatedHTML = await injectStructuredData(updatedHTML, structuredDataPath);
+    }
+
     const minified = await htmlMinify(updatedHTML, {
         collapseWhitespace: true,
         removeComments: true,

nginx.conf

@@ -16,6 +16,7 @@ http {
     
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
+    charset utf-8;
     
     access_log /dev/stdout;
     error_log /dev/stderr;
@@ -39,6 +40,21 @@ http {
         add_header X-Content-Type-Options "nosniff" always;
         add_header X-XSS-Protection "1; mode=block" always;
         add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; object-src 'none';" always;
+        
+        # Favicon: serve at standard /favicon.ico location
+        location = /favicon.ico {
+            alias /usr/share/nginx/html/assets/logos/favicon.png;
+            expires 7d;
+            add_header Cache-Control "public, max-age=604800";
+            access_log off;
+        }
+        
+        # Logo assets: 1 hour cache
+        location ~* ^/assets/logos/ {
+            expires 1h;
+            add_header Cache-Control "public, max-age=3600";
+        }
         
         # Temporary: Disable caching during development
         location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
@@ -57,6 +73,11 @@ http {
         #     add_header Expires "0";
         }
 
+        location ~* \.json$ {
+            expires 1d;
+            add_header Cache-Control "public, must-revalidate";
+        }
+        
         location /health {
             access_log off;
             return 200 'healthy\n';

public/about.html

@@ -4,9 +4,23 @@
         <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>About Keyboard Vagabond | Digital Nomad Online Community</title>
+        <meta name="description" content="Learn about Keyboard Vagabond, an online community for digital nomads and remote workers. Community-run, ad-free social media built on respect, courtesy, and federated services.">
+        <meta name="robots" content="index, follow">
+        <link rel="canonical" href="https://www.keyboardvagabond.com/about.html">
+
+        <!-- Open Graph -->
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="https://www.keyboardvagabond.com/about.html">
+        <meta property="og:title" content="About Keyboard Vagabond | Digital Nomad Online Community">
+        <meta property="og:description" content="Learn about Keyboard Vagabond, an online community for digital nomads and remote workers. Community-run, ad-free social media built on respect, courtesy, and federated services.">
+        <meta property="og:site_name" content="Keyboard Vagabond">
+
         <link rel="stylesheet" href="css/pico.jade.min.css">
         <link rel="stylesheet" href="site-styles/style.css">
-        <title>Keyboard Vagabond - About</title>
     </head>
   <body>
     <header class="container">
@@ -38,7 +52,17 @@
                 </li>
             </ul>
             <ul>
-                <li><a href="index.html">Home</a></li>
+                <li class="nav-page-link"><a href="index.html">Home</a></li>
+                <li class="nav-page-link"><a href="getting-started.html">Getting Started</a></li>
+                <li class="nav-pages-dropdown">
+                    <details class="dropdown">
+                        <summary role="button" class="secondary">Pages</summary>
+                        <ul>
+                            <li><a href="index.html">Home</a></li>
+                            <li><a href="getting-started.html">Getting Started</a></li>
+                        </ul>
+                    </details>
+                </li>
                 <li>
                     <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                         <span id="theme-icon">🌙</span>
@@ -57,6 +81,7 @@
         <p>Keyboard Vagabond was made because I saw multiple instances of people saying that, while there are travel communities on different instances, there was not a space specifically for nomads, so I thought I would make it.</p>
         
         <h2>What to expect and commitments</h2>
+        <p><strong>Code of Conduct</strong> - This community is welcoming and accepting, thus it does not tolerate bigotry, hate speech, or homo/trans-phobic comments. More details can be found on each instance's policies.</p>
         <p><strong>Moderation style</strong> - 
         An online community of respect and courtesy that is simultaneously light on moderation and banning, yet firm on not tolerating bigotry, hatred, etc. Be kind and we'll all have a good time.</p>
         <p><strong>Sign ups</strong> - 
@@ -65,33 +90,57 @@
         Your data is yours and you can download it at any time through the apps.
         The servers are run in a cluster with data redundancy across nodes + nightly and weekly backups to offline storage.</p>
         <p><strong>Should shutdown happen</strong> - 
-        There will be a 3 month announcement in advance, in accordance with the <a href="https://joinmastodon.org/covenant" target="_blank">Mastodon Server Covenant</a>.</p>
+        There will be a 3 month announcement in advance, in accordance with the <a href="https://joinmastodon.org/covenant" rel="nofollow" target="_blank">Mastodon Server Covenant</a>.</p>
         <p><strong>Funding</strong> - 
         Keyboard Mastodon is currently funded by the admin, for a cost of ~$40 - $45 per month. Donations may be opened in the future, but have not been set up at this time.</p>
-        <h1>The Dirty Technicals</h1>
+        
+        <section>
+        <h2>The Dirty Technicals</h2>
         <p>If you're not a mega-nerd, turn back now.</p>
         <p>I warned you.</p>
         <p>Keyboard Vagabond is run on a 3 node Kubernetes cluster running on 3x Arm VPSs hosted by NetCup in Amsterdam. I chose Amsterdam because I thought that Europe would be more centrally located for people who are traveling the world.</p>
+        </section>
+        <section>
         <h4>The Specs</h4>
-        <p><strong>Servers</strong> - 3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev" target="_blank">Talos</a> and Kubernetes.
-        <p><strong>Storage</strong> - Longhorn ensures that there are at least 2 copies across the nodes.</p>
-        <p><strong>Backups and Content</strong> - Backups and content are stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</p>
-        <p><strong>CDN</strong> - CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</p>
-        <p><strong>Security</strong> - ports are closed off to the world and secured with CloudFlare tunnels and TailScale as the only means of access outside of website access.</p>
-        <p><strong>Observability and Logging</strong> - OpenObserve dashboards and log aggregation.</p>
-        <p><strong>Domain</strong> - domain is provided by CloudFlare</p>
-        <p><strong>Services</strong> - Typical arrangement for services is that web services get 2 instances and workers get 1 instance with autoscaling. Web pods scale horizontally and workers scale vertically, then horizontally.</p>
-        <p><strong>Source Code</strong> - If I get the source code to where I'm comfortable sharing, I'll post a link here. And if you're experienced in k8s, I'd always appreciate a review.  :)</p>
-        <p><strong>Costs</strong><br />
-        VPS servers - 3x ~$13 / mth = $40/mth<br />
-        Domain name - $12/year<br />
-        Backblaze - $6/TB/mth = ~$2/mth<br />
-        Total: ~$45/mth</p>
+        <dl>
+        <dt><strong>Servers</strong></dt>
+        <dd>3x 10 ARM vCPUs, 16GB Ram, 500GB (~50GB for Talos and the rest for Longhorn) storage running <a href="https://www.talos.dev" rel="nofollow">Talos</a> and Kubernetes.</dd>
+        <dt><strong>Storage</strong></dt>
+        <dd>Longhorn ensures that there are at least 2 copies across the nodes.</dd>
+        <dt><strong>Backups and Content</strong></dt>
+        <dd>Stored in S3 storage hosted by BackBlaze with CloudFlare providing CDN. I've already run through disaster recovery and restored database backups from S3.</dd>
+        <dt><strong>CDN</strong></dt>
+        <dd>CloudFlare provides CDN and special rules have been set up to be sure that as much as possible is cached.</dd>
+        <dt><strong>Security</strong></dt>
+        <dd>Ports are closed off to the world and secured with CloudFlare tunnels and secure VPN as the only means of access outside of website access.</dd>
+        <dt><strong>Observability and Logging</strong></dt>
+        <dd>OpenObserve dashboards and log aggregation.</dd>
+        <dt><strong>Domain</strong></dt>
+        <dd>Domain is provided by CloudFlare</dd>
+        <dt><strong>Services</strong></dt>
+        <dd>Typical arrangement for services is that web services get 2 instances and workers get 1 instance with autoscaling. Web pods scale horizontally and workers scale vertically, then horizontally.</dd>
+        <dt><strong>Source Code</strong></dt>
+        <dd>If I get the source code to where I'm comfortable sharing, I'll post a link here. And if you're experienced in k8s, I'd always appreciate a review.  :)</dd>
+        </dl>
+    </section>
+
+        <p>
+        <span><strong>Costs</strong></span><br />
+        
+            <span>
+            VPS servers - 3x ~$13 / mth = $40/mth<br />
+            Domain name - $12/year<br />
+            Backblaze - $6/TB/mth = ~$2/mth<br />
+            Total: ~$45/mth
+            </span>
+        </p>
     </main>
 
     <footer class="container">
-        <p>Contact: <a href="mailto:sysadmin@mailkeyboardvagabond.com">sysadmin@mail.keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</p>
-        <p>Copyright 2025 Keyboard Vagabond</p>
+        <p>
+            <span>Contact: <a href="mailto:admin@mail.keyboardvagabond.com">admin@mail.keyboardvagabond.com</a>, any of the @sysadmin accounts on the instances</span></br>
+            <span>Copyright 2025 Keyboard Vagabond</span>
+        </p>
     </footer>
 
     <script src="scripts/bundle.js"></script>

public/getting-started-structured-data.json

@@ -0,0 +1,54 @@
+[
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "@id": "https://www.keyboardvagabond.com/getting-started.html#webpage",
+        "url": "https://www.keyboardvagabond.com/getting-started.html",
+        "name": "Getting Started | Keyboard Vagabond Fediverse Guide for Digital Nomads",
+        "description": "Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. An introductory guide for digital nomads joining our federated online community.",
+        "isPartOf": {
+            "@id": "https://www.keyboardvagabond.com/#website"
+        },
+        "about": {
+            "@id": "https://www.keyboardvagabond.com/#organization"
+        }
+    },
+    {
+        "@context": "https://schema.org",
+        "@type": "HowTo",
+        "@id": "https://www.keyboardvagabond.com/getting-started.html#howto",
+        "name": "How to join Keyboard Vagabond",
+        "description": "Sign up on a Keyboard Vagabond fediverse service and customize your feed to connect with digital nomads, remote workers, and travelers.",
+        "totalTime": "PT15M",
+        "step": [
+            {
+                "@type": "HowToStep",
+                "position": 1,
+                "name": "Complete the sign up form",
+                "text": "Complete the sign up form on Piefed, Pixelfed, Mastodon, Bookwyrm, or Write Freely and give a good answer to the question so that we know you're a human.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 2,
+                "name": "Wait for approval and explore",
+                "text": "Wait for approval, but browse and explore communities and hashtags.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 3,
+                "name": "Subscribe and customize your feed",
+                "text": "Follow the guide below and subscribe to communities, feeds, topics, and hashtags. On Piefed, check the box to limit or hide political posts if you want. Look under settings to customize your view, or block what you don't want to see.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            },
+            {
+                "@type": "HowToStep",
+                "position": 4,
+                "name": "Use scaled and active sortings on Piefed",
+                "text": "On Piefed, check out the scaled and active sortings. They help bring smaller communities into view that may not have a lot of votes or comments.",
+                "url": "https://www.keyboardvagabond.com/getting-started.html#basic-steps-heading"
+            }
+        ]
+    }
+]

public/getting-started.html

@@ -0,0 +1,156 @@
+<!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>Getting Started | Keyboard Vagabond Fediverse Guide for Digital Nomads</title>
+        <meta name="description" content="Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. A step-by-step guide for digital nomads joining our federated online community.">
+        <meta name="robots" content="index, follow">
+        <link rel="canonical" href="https://www.keyboardvagabond.com/getting-started.html">
+
+        <!-- Open Graph -->
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="https://www.keyboardvagabond.com/getting-started.html">
+        <meta property="og:title" content="Getting Started | Keyboard Vagabond Fediverse Guide for Digital Nomads">
+        <meta property="og:description" content="Sign up for Keyboard Vagabond on Mastodon, Piefed, Pixelfed, and more. A step-by-step guide for digital nomads joining our federated online community.">
+        <meta property="og:site_name" content="Keyboard Vagabond">
+
+        <!-- Structured Data -->
+        <script type="application/ld+json">
+
+        </script>
+
+        <link rel="stylesheet" href="css/pico.jade.min.css">
+        <link rel="stylesheet" href="site-styles/style.css">
+    </head>
+    <body>
+        <header class="container">
+            <nav role="navigation" aria-label="Main 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>
+
+                <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 class="nav-page-link"><a href="index.html">Home</a></li>
+                    <li class="nav-page-link"><a href="about.html">About</a></li>
+                    <li class="nav-pages-dropdown">
+                        <details class="dropdown">
+                            <summary role="button" class="secondary">Pages</summary>
+                            <ul>
+                                <li><a href="index.html">Home</a></li>
+                                <li><a href="about.html">About</a></li>
+                            </ul>
+                        </details>
+                    </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>
+
+        <main class="container">
+            <h1>Get started with Keyboard Vagabond</h1>
+            <p>New to the fediverse? This guide walks you through signing up on Keyboard Vagabond and customizing your feed. Accounts require manual approval to prevent spam—allow a little time after you sign up. For background on how the community works, see our <a href="about.html">about page</a>.</p>
+
+            <section aria-labelledby="basic-steps-heading">
+                <h2 id="basic-steps-heading">Basic steps for getting started</h2>
+                <ol>
+                    <li>Complete the sign up form on <strong><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></strong>,
+                        <strong><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></strong>, <strong><a target="_blank" href="https://mastodon.keyboardvagabond.com">Mastodon</a></strong>,
+                        <strong><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></strong>, or <strong><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></strong> and give a <em>good</em> answer to the question so that we know you're a human.</li>
+                    <li>Wait for approval, but browse and explore communities and hashtags</li>
+                    <li>Follow the guide below and subscribe to communities, feeds, topics, and hashtags. On Piefed, check the box to limit or hide political posts if you want. Look under settings to customize your view, or block what you don't want to see.</li>
+                    <li>On Piefed, check out the scaled and active sortings. They help bring smaller communities into view that may not have a lot of votes or comments.</li>
+                </ol>
+            </section>
+
+            <h2>Navigating Communities and Following Hashtags</h2>
+            <section>
+                <h3>Piefed</h3>
+                <p>Browse the home page to see all known posts, or click the Local button to see posts made on this server.</p>
+                <figure>
+                    <img src="https://picsur.keyboardvagabond.com/i/40afcd10-8779-4600-9df9-0bf3e48fd097.png?width=1000&shrinkOnly=true" alt="Screenshot showing Local posts on Piefed" loading="lazy">
+                </figure>
+                <p>Expand the explore menu to see collections of communities.</p>
+                <figure>
+                    <img src="https://picsur.keyboardvagabond.com/i/b1350126-eaa0-40f1-969b-6a4683e06ccc.png?width=1000&shrinkOnly=true" alt="Screenshot of expanded feeds and topics on Piefed" loading="lazy">
+                </figure>
+
+                <h3>Mastodon</h3>
+                <p>After creating your account, head over to <a target="_blank" href="https://fedidevs.com/starter-packs/" rel="nofollow">fedidevs.com/starter-packs</a>
+                    and search for accounts that fit your interests.</p>
+                <figure>
+                    <img src="https://picsur.keyboardvagabond.com/i/43db7444-0d38-4761-aa68-2681085115c4.png?width=1000&shrinkOnly=true" alt="Screenshot of starter pack search on fedidevs.com" loading="lazy">
+                </figure>
+                <p>You can also visit the Explore page to see trending hashtags to follow. 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>
+                <figure>
+                    <img src="https://picsur.keyboardvagabond.com/i/973f0461-e4ef-4440-b5a6-71cffeffe3f9.png?width=1000&shrinkOnly=true" alt="Screenshot of trending hashtags on Mastodon" loading="lazy">
+                </figure>
+            </section>
+
+            <h2>Expanding what you see</h2>
+            <section>
+                <p>Keyboard Vagabond is a smaller server, and the fediverse works by sharing what each instance follows.
+                    Larger instances may have more content visible by default, but that does not mean they are better.
+                    You can explore other servers, create accounts elsewhere, or subscribe to users and communities so their posts show up here.</p>
+
+                <h3>Other fediverse servers</h3>
+                <ul>
+                    <li><a href="https://piefed.keyboardvagabond.com/auth/instance_chooser">Piefed Instance Chooser</a> — find other Piefed servers. <a href="https://piefed.social/" rel="nofollow">Piefed.social</a> is the flagship instance.</li>
+                    <li><a href="https://join-lemmy.org/instances" rel="nofollow">Join Lemmy</a> — the original Reddit alternative; <a href="https://lemmy.zip/" rel="nofollow">Lemmy.zip</a> as a popular choice.</li>
+                    <li><a href="https://joinmastodon.org/servers" rel="nofollow">Join Mastodon</a> — Twitter alternative; <a href="https://mastodon.social" rel="nofollow">Mastodon.social</a> is the flagship instance.</li>
+                    <li><a href="https://pixelfed.org/servers" rel="nofollow">Join Pixelfed</a> — photo sharing / Instagram alternative; <a href="https://pixelfed.social" rel="nofollow">Pixelfed.social</a> is the flagship instance.</li>
+                </ul>
+            </section>
+
+            <h2>Codes of Conduct</h2>
+            <section>
+                <p>While corporate media is primarily interested in the Terms of Service, the fediverse cares about the
+                    Code of Conduct, the agreement for how we treat each other and what behavior is and is not tolerated.
+                    Each instance should have one and Keyboard Vagabond does. These agreements help us
+                    create welcoming spaces that are free of harassment and bigotry.</p>
+            </section>
+        </main>
+
+        <footer class="container" role="contentinfo">
+            <p>
+                <span><a href="index.html">Home</a> · <a href="about.html">About</a></span><br>
+                <span>Contact: <a href="mailto:admin@mail.keyboardvagabond.com">admin@mail.keyboardvagabond.com</a></span><br>
+                <span>Copyright 2025 Keyboard Vagabond</span>
+            </p>
+        </footer>
+
+        <script src="scripts/bundle.js"></script>
+    </body>
+</html>

public/index.html

@@ -5,23 +5,73 @@
     <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 | Digital Nomad Online Community & Social Media</title>
+    <meta name="title" content="Keyboard Vagabond | Digital Nomad Online Community & Social Media">
+    <meta name="description" content="Keyboard Vagabond is an online community and social media hub for digital nomads and remote workers. Join Mastodon, Piefed, Pixelfed, and more—ad-free, community-run, and federated.">
+    <meta name="keywords" content="fediverse, digital nomad, digital nomad online community, digital nomad social media, nomad community, remote worker community, decentralized social media, travel community, 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 | Digital Nomad Online Community & Social Media">
+    <meta property="og:description" content="Keyboard Vagabond is an online community and social media hub for digital nomads and remote workers. Join Mastodon, Piefed, Pixelfed, and more—ad-free, community-run, and federated.">
+    <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 | Digital Nomad Online Community & Social Media">
+    <meta property="twitter:description" content="Keyboard Vagabond is an online community and social media hub for digital nomads and remote workers. Join Mastodon, Piefed, Pixelfed, and more—ad-free, community-run, and federated.">
+    <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">
+        
+    </script>
+    
     <link rel="stylesheet" href="css/pico.jade.min.css">
     <link rel="stylesheet" href="site-styles/style.css">
-    <title>Keyboard Vagabond</title>
 </head>
 
 <body>
     <!-- Header -->
     <header class="container">
-        <nav>
+        <nav role="navigation" aria-label="Main navigation">
             <!-- Desktop Navigation -->
             <ul class="desktop-nav">
-                <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li>
-                <li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li>
-                <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li>
-                <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li>
-                <li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li>
-                <li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li>
+                <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 -->
@@ -30,19 +80,29 @@
                     <details class="dropdown">
                         <summary role="button" class="secondary">Sites</summary>
                         <ul>
-                            <li><a target="_blank" href="https://mastodon.keyboardvagabond.com/public">Mastodon</a></li>
-                            <li><a target="_blank" href="https://piefed.keyboardvagabond.com">Piefed</a></li>
-                            <li><a target="_blank" href="https://pixelfed.keyboardvagabond.com">Pixelfed</a></li>
-                            <li><a target="_blank" href="https://bookwyrm.keyboardvagabond.com">Bookwyrm</a></li>
-                            <li><a target="_blank" href="https://blog.keyboardvagabond.com">Write Freely</a></li>
-                            <li><a target="_blank" href="https://picsur.keyboardvagabond.com">Picsur</a></li>
+                            <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 class="nav-page-link"><a href="getting-started.html">Getting Started</a></li>
+                <li class="nav-page-link"><a href="about.html">About</a></li>
+                <li class="nav-pages-dropdown">
+                    <details class="dropdown">
+                        <summary role="button" class="secondary">Pages</summary>
+                        <ul>
+                            <li><a href="getting-started.html">Getting Started</a></li>
+                            <li><a href="about.html">About</a></li>
+                        </ul>
+                    </details>
+                </li>
                 <li>
                     <button id="theme-toggle" class="outline secondary" role="switch" aria-label="Toggle theme">
                         <span id="theme-icon">🌙</span>
@@ -52,32 +112,128 @@
         </nav>
     </header>
 
-    <div class="banner-container">
-        <img src="https://picsur.keyboardvagabond.com/i/076a5b88-20d3-426e-ad7f-f24a68d3fa70.jpg?width=2048" alt="Scenic mountain road with snow-capped peaks" class="banner">
-        <h1 class="banner-title">Welcome to Keyboard Vagabond</h1>
-        <p class="banner-subtitle">A space in the fediverse for travelers, nomads, and vagabonds of all kinds</p>
-    </div>
+    <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>
+        <h1 id="main-heading" class="banner-title">Keyboard Vagabond</h1>
+        <p class="banner-subtitle">Online community and social media for digital nomads, remote workers, and travel enthusiasts</p>
+    </section>
 
     <!-- Main content -->
     <main class="container">
-        <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>&lt;mascot here? :D &gt;
-            <strong>mascot intro and why it was chosen</strong>
-        </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 go and the people we see. This space is what we make of it.
-        </p>
-        <h2>What you'll find here</h2>
-        <p>Keyboard Vagabond hosts the various fediverse alternatives to big tech and participates in the network.
-            Available to you is:</p>
+        <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="nomad-community-heading">
+            <h2 id="nomad-community-heading">Social media and online communities for digital nomads and travelers</h2>
+            <p>Looking for social media for digital nomads or a remote worker community that isn't driven by ads and algorithms? Keyboard Vagabond is an online community hub built for people who work and travel. Instead of one corporate platform, we connect a suite of federated services, each focused on a different way to connect.</p>
+            <p>Mastodon handles microblogging and networking, Piefed hosts forums and topic-based discussions, Pixelfed is for sharing photos, Bookwyrm covers book clubs and reviews, and Write Freely supports long-form blogging. All of these services talk to each other through the fediverse, so you can follow, reply, and participate across platforms from one nomad-focused community with no one harvesting or tracking your attention. <a href="about.html">Learn about our community values</a>, or jump straight to our <a href="getting-started.html">getting started guide</a> if you are ready to sign up.</p>
+        </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> - Similar to and compatible
+            <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.
-                Both are an alternative to Reddit. See more at <a href="https://join-lemmy.org">join-lemmy.org</a> and
+                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> - An alternative to
-                instagram, where you can share your photos, albums, and create stories. See more at <a
+            <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
@@ -94,7 +250,7 @@
                 signup, as there's no automated signup process.</li>
         </ul>
         <strong>Mobile Apps</strong>
-        <p>
+        <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 
@@ -109,8 +265,9 @@
             </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>  
-        </p>
-        <h1>What is the Fediverse</h1>
+        </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
@@ -120,78 +277,39 @@
             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 @_elena@mastodon.social.</p>
+            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" frameborder="0" allowfullscreen=""
+                        src="https://videos.elenarossini.com/videos/embed/64VuNCccZNrP4u9MfgbhkN" allowfullscreen=""
                         sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                         loading="lazy"></iframe>
         </div>
-        <h2>Getting started in the Fediverse</h2>
-        <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">Lemmy.zip</a></strong> for Lemmy or <strong><a
-                    href="https://piefed.social" target="_blank">Piefed.social</a></strong> for PieFed, which is the software that this
-            community runs.
-        </li>
-        <li><strong><a href="https://mastodon.social" target="_blank">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">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>
-        </p>
 
-        <h2>Creating your experience</h2>
-        <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=400"
-                    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>
+
+        <section aria-labelledby="get-started-heading">
+            <h2 id="get-started-heading">Ready to join?</h2>
+            <p>New to the fediverse? Our <a href="getting-started.html">getting started guide</a> walks you through signing up on Mastodon, Piefed, Pixelfed, and the rest of Keyboard Vagabond, then customizing your feed to find nomads, travelers, and remote workers.</p>
+        </section>
     </main>
 
     <!-- Footer -->
-    <footer></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> - An online community and social media hub 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>

public/robots.txt

@@ -0,0 +1,23 @@
+User-agent: *
+Allow: /
+
+# Sitemap location
+Sitemap: https://www.keyboardvagabond.com/sitemap.xml
+
+# Disallow crawling of fediverse subdomains to focus on main site
+Disallow: /mastodon/
+Disallow: /piefed/
+Disallow: /pixelfed/
+Disallow: /bookwyrm/
+Disallow: /blog/
+Disallow: /picsur/
+
+# Allow important pages
+Allow: /about.html
+Allow: /getting-started.html
+Allow: /css/
+Allow: /scripts/
+Allow: /site-styles/
+
+# Crawl delay to be respectful
+Crawl-delay: 1

public/site-scripts/theme-toggle.js

@@ -40,10 +40,7 @@
         
         applyTheme(storedTheme);
         
-        themeToggle.addEventListener('click', toggleTheme);
-        
         window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            // Only apply theme if user hasn't made an explicit choice
             const storedTheme = getStoredTheme();
             if (storedTheme === 'auto') {
                 applyTheme();

public/site-styles/style.css

@@ -1,9 +1,19 @@
 .banner-container {
     position: relative;
     width: 100%;
-    max-height: 40vh;
-    min-height: 200px;
     overflow: hidden;
+    margin-bottom: 0;
+}
+
+.banner-container picture {
+    width: 100%;
+    display: block;
+}
+
+.banner-container img {
+    width: 100%;
+    height: auto;
+    display: block;
 }
 
 .banner {
@@ -15,107 +25,69 @@
     display: block;
 }
 
+.banner-title,
+.banner-subtitle {
+    position: static;
+    width: 100%;
+    max-width: none;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--pico-spacing);
+    padding-right: var(--pico-spacing);
+    box-sizing: border-box;
+    text-shadow: none;
+}
+
 .banner-title {
-    position: absolute;
-    top: var(--pico-spacing);
-    left: var(--pico-spacing);
-    right: var(--pico-spacing);
-    color: white; /* Keep white for banner overlay readability */
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-    margin: 0;
+    margin-top: var(--pico-spacing);
+    margin-bottom: 0;
+    color: var(--pico-h1-color);
     font-family: var(--pico-font-family);
-    font-size: 2.5rem;
+    font-size: 1.8rem;
     font-weight: 700;
-    z-index: 10;
 }
 
 .banner-subtitle {
-    position: absolute;
-    bottom: var(--pico-typography-spacing-vertical);
-    left: var(--pico-spacing);
-    right: var(--pico-spacing);
-    color: white;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: var(--pico-spacing);
+    color: var(--pico-muted-color);
     font-family: var(--pico-font-family);
     font-size: var(--pico-font-size);
     font-weight: var(--pico-font-weight);
-    z-index: 10;
-}
-
-/* Responsive positioning to match Pico container */
-@media (min-width: 576px) {
-    .banner-title {
-        left: 50%;
-        right: auto;
-        transform: translateX(-50%);
-        max-width: 510px;
-        width: 100%;
-    }
-}
-
-@media (min-width: 768px) {
-    .banner-title {
-        max-width: 700px;
-    }
-}
-
-@media (min-width: 1024px) {
-    .banner-title {
-        max-width: 950px;
-    }
-}
-
-@media (min-width: 1280px) {
-    .banner-title {
-        max-width: 1200px;
-    }
-}
-
-@media (min-width: 1536px) {
-    .banner-title {
-        max-width: 1450px;
-    }
-}
-
-@media (max-width: 768px) {
-    .banner-title {
-        font-size: 1.8rem;
-        top: calc(var(--pico-typography-spacing-vertical) * 0.5);
-        left: var(--pico-spacing);
-        right: var(--pico-spacing);
-    }
 }
 
 @media (min-width: 576px) {
+    .banner-title,
     .banner-subtitle {
-        left: 50%;
-        right: auto;
-        transform: translateX(-50%);
         max-width: 510px;
-        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
     }
 }
 
 @media (min-width: 768px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 700px;
     }
 }
 
 @media (min-width: 1024px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 950px;
     }
 }
 
 @media (min-width: 1280px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 1200px;
     }
 }
 
 @media (min-width: 1536px) {
+    .banner-title,
     .banner-subtitle {
         max-width: 1450px;
     }
@@ -127,6 +99,7 @@
     width: 100%;
     max-width: 560px;
     margin: var(--pico-typography-spacing-vertical) auto;
+    border: 0;
 }
 
 .video-container::before {
@@ -224,17 +197,19 @@
     color: #2d5016 !important;
 }  */
 
-/* Theme toggle button styling */
+/* Theme toggle button styling — match nav link height */
 #theme-toggle {
-    margin: 0;
-    padding: calc(var(--pico-spacing) * 0.5);
+    margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
+    padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
     min-height: auto;
+    height: auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--pico-border-radius);
-    font-size: 1.2rem;
-    transition: all 0.2s ease;
+    font-size: inherit;
+    line-height: var(--pico-line-height);
+    transition: transform 0.2s ease;
 }
 
 #theme-toggle:hover {
@@ -257,22 +232,68 @@
     display: flex;
 }
 
+.nav-pages-dropdown {
+    display: none;
+}
+
 /* Mobile breakpoint - hide desktop nav and show mobile nav */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
     .desktop-nav {
         display: none;
     }
     
     .mobile-nav {
         display: flex;
+        flex: 0 0 auto;
+        gap: calc(var(--pico-spacing) * 0.5);
     }
 
-    /* Style the dropdown for mobile */
-    .mobile-nav .dropdown {
-        width: 100%;
+    .nav-page-link {
+        display: none;
     }
 
-    .mobile-nav .dropdown summary {
+    .nav-pages-dropdown {
+        display: inline-block;
+    }
+    
+    /* Arrange mobile nav items horizontally */
+    header nav {
+        flex-direction: row !important;
+        justify-content: space-between !important;
+        align-items: center;
+        gap: 0;
+    }
+    
+    /* Make the About/theme toggle ul display as flex */
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) {
+        display: flex !important;
+        gap: calc(var(--pico-spacing) * 0.5);
+        align-items: center;
+        flex: 0 0 auto;
+        margin: 0;
+    }
+    
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) {
+        padding: 0;
+    }
+    
+    header nav > ul:not(.desktop-nav):not(.mobile-nav) li {
+        margin: 0;
+    }
+    
+    .mobile-nav li,
+    .nav-pages-dropdown {
+        position: relative;
+    }
+
+    .mobile-nav .dropdown,
+    .nav-pages-dropdown .dropdown {
+        width: auto;
+        min-width: auto;
+    }
+    
+    .mobile-nav .dropdown summary,
+    .nav-pages-dropdown .dropdown summary {
         margin: 0;
         padding: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
         border-radius: var(--pico-border-radius);
@@ -280,16 +301,18 @@
         user-select: none;
     }
     
-    .mobile-nav .dropdown[open] summary {
+    .mobile-nav .dropdown[open] summary,
+    .nav-pages-dropdown .dropdown[open] summary {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
     
-    .mobile-nav .dropdown ul {
+    .mobile-nav .dropdown ul,
+    .nav-pages-dropdown .dropdown ul {
         position: absolute;
         top: 100%;
-        left: 0;
-        right: 0;
+        width: auto;
+        min-width: 100%;
         background: var(--pico-background-color);
         border: 1px solid var(--pico-muted-border-color);
         border-top: none;
@@ -299,18 +322,32 @@
         margin: 0;
         padding: 0;
         list-style: none;
+        white-space: nowrap;
     }
 
-    .mobile-nav .dropdown ul li {
+    .mobile-nav .dropdown ul {
+        left: 0;
+        right: auto;
+    }
+
+    .nav-pages-dropdown .dropdown ul {
+        left: auto;
+        right: 0;
+    }
+    
+    .mobile-nav .dropdown ul li,
+    .nav-pages-dropdown .dropdown ul li {
         margin: 0;
         border-bottom: 1px solid var(--pico-muted-border-color);
     }
     
-    .mobile-nav .dropdown ul li:last-child {
+    .mobile-nav .dropdown ul li:last-child,
+    .nav-pages-dropdown .dropdown ul li:last-child {
         border-bottom: none;
     }
     
-    .mobile-nav .dropdown ul li a {
+    .mobile-nav .dropdown ul li a,
+    .nav-pages-dropdown .dropdown ul li a {
         display: block;
         padding: calc(var(--pico-spacing) * 0.75) var(--pico-spacing);
         text-decoration: none;
@@ -318,13 +355,281 @@
         transition: background-color 0.2s ease;
     }
     
-    .mobile-nav .dropdown ul li a:hover {
+    .mobile-nav .dropdown ul li a:hover,
+    .nav-pages-dropdown .dropdown ul li a:hover {
         background-color: var(--pico-muted-color);
         opacity: 0.1;
     }
+}
 
-    /* Ensure proper positioning context */
-    .mobile-nav li {
-        position: relative;
+/* Services Summary Styling */
+.services-summary {
+    background: var(--pico-muted-color);
+    background: rgba(var(--pico-muted-color-rgb, 0, 0, 0), 0.05);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    padding: var(--pico-spacing);
+    margin: var(--pico-typography-spacing-vertical) 0;
+}
+
+.services-summary h3 {
+    margin-top: 0;
+    margin-bottom: var(--pico-typography-spacing-vertical);
+    color: var(--pico-primary);
+}
+
+.service-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: calc(var(--pico-spacing) * 0.75);
+    margin: 0;
+}
+
+.service-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 0.75);
+    padding: calc(var(--pico-spacing) * 0.75);
+    background: var(--pico-background-color);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    text-decoration: none;
+    color: var(--pico-color);
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.service-link:hover {
+    background: var(--pico-primary);
+    color: var(--pico-primary-inverse);
+    border-color: var(--pico-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.service-icon {
+    flex-shrink: 0;
+    display: block;
+    width: 60px;
+    height: 60px;
+}
+
+.service-icon img {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+    display: block;
+}
+
+.service-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.service-link strong {
+    display: block;
+    font-size: 1.1em;
+    margin-bottom: calc(var(--pico-spacing) * 0.25);
+}
+
+/* Screen reader only class */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+
+/* Main Navigation Structure */
+.main-nav {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 0.5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.main-nav li {
+    margin: 0;
+}
+
+.main-nav a[aria-current="page"] {
+    font-weight: bold;
+    color: var(--pico-primary);
+}
+
+/* Services Navigation */
+.services-nav {
+    margin-top: calc(var(--pico-spacing) * 0.5);
+    padding-top: calc(var(--pico-spacing) * 0.5);
+    border-top: 1px solid var(--pico-muted-border-color);
+}
+
+.services-nav h2 {
+    margin: 0 0 calc(var(--pico-spacing) * 0.5) 0;
+    font-size: 1em;
+    color: var(--pico-muted-color);
+}
+
+/* Navigation Layout */
+header nav {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--pico-spacing) * 0.5);
+}
+
+/* Desktop navigation layout */
+@media (min-width: 768px) {
+    header nav {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-wrap: wrap;
+    }
+
+    header nav > ul {
+        align-items: flex-start;
+    }
+    
+    .main-nav {
+        order: 1;
+        flex: 0 0 auto;
+    }
+    
+    .services-nav {
+        order: 2;
+        margin-top: 0;
+        padding-top: 0;
+        border-top: none;
+        flex: 1 1 100%;
+        margin-top: calc(var(--pico-spacing) * 0.5);
+    }
+}
+
+/* Mobile navigation layout */
+@media (max-width: 767px) {
+    .services-nav {
+        margin-top: calc(var(--pico-spacing) * 0.5);
+        padding-top: calc(var(--pico-spacing) * 0.5);
+        border-top: 1px solid var(--pico-muted-border-color);
+    }
+}
+
+/* Responsive service links */
+@media (max-width: 768px) {
+    .service-links {
+        grid-template-columns: 1fr;
+        gap: calc(var(--pico-spacing) * 0.5);
+    }
+    
+    .service-link {
+        padding: calc(var(--pico-spacing) * 0.5);
+    }
+}
+
+footer ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--pico-spacing) * 0.5);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+}
+
+footer li {
+    margin: 0;
+    display: flex;
+    align-items: center;
+}
+
+footer li:not(:last-child)::after {
+    content: "|";
+    margin: 0 calc(var(--pico-spacing) * 0.5);
+    color: var(--pico-muted-color);
+    font-weight: normal;
+}
+
+@media (max-width: 480px) {
+    footer ul {
+        flex-direction: column;
+        align-items: center;
+        gap: calc(var(--pico-spacing) * 0.5);
+    }
+    
+    footer li:not(:last-child)::after {
+        content: none; /* Remove delimiters on mobile */
+    }
+}
+
+/* Mascot section styling */
+.mascot-section {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 2);
+    margin: var(--pico-typography-spacing-vertical) 0;
+}
+
+.mascot-image {
+    flex-shrink: 0;
+    min-width: 120px; /* Prevent image from disappearing on thin screens */
+}
+
+.mascot-image picture,
+.mascot-image img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.mascot-image img {
+    width: 200px;
+    max-width: min(200px, 30vw);
+    min-width: 120px; /* Ensure image stays visible on very thin screens */
+}
+
+.mascot-text {
+    flex: 1;
+    min-width: 0; /* Allows text to shrink properly */
+}
+
+/* Stack on small devices */
+@media (max-width: 576px) {
+    .mascot-section {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--pico-spacing);
+    }
+    
+    .mascot-image {
+        min-width: auto; /* Reset min-width when stacked */
+    }
+    
+    .mascot-image img {
+        width: 100%;
+        max-width: 200px;
+        min-width: 120px; /* Keep minimum size even when stacked */
+    }
+    
+    .mascot-text {
+        text-align: center;
+    }
+}
+
+/* Very thin screens - ensure image stays visible */
+@media (max-width: 400px) {
+    .mascot-image img {
+        min-width: 100px; /* Smaller but still visible on very thin screens */
     }
 }

public/sitemap.xml

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://www.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>1.0</priority>
+    </url>
+    <url>
+        <loc>https://www.keyboardvagabond.com/getting-started.html</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.9</priority>
+    </url>
+    <url>
+        <loc>https://www.keyboardvagabond.com/about.html</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <!-- Fediverse Services - These are external but part of our ecosystem -->
+    <url>
+        <loc>https://mastodon.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.5</priority>
+    </url>
+    <url>
+        <loc>https://piefed.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.5</priority>
+    </url>
+    <url>
+        <loc>https://pixelfed.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.5</priority>
+    </url>
+    <url>
+        <loc>https://bookwyrm.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.4</priority>
+    </url>
+    <url>
+        <loc>https://blog.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.4</priority>
+    </url>
+    <url>
+        <loc>https://picsur.keyboardvagabond.com/</loc>
+        <lastmod>2026-06-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.4</priority>
+    </url>
+</urlset>

public/structured-data.json

@@ -0,0 +1,171 @@
+[
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "@id": "https://www.keyboardvagabond.com/#website",
+        "name": "Keyboard Vagabond",
+        "url": "https://www.keyboardvagabond.com",
+        "description": "Keyboard Vagabond is an online community and social media hub for digital nomads, remote workers, and travel enthusiasts. Connect through Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely—ad-free, community-run, and federated.",
+        "publisher": {
+            "@id": "https://www.keyboardvagabond.com/#organization"
+        },
+        "mainEntity": {
+            "@type": "ItemList",
+            "name": "Keyboard Vagabond Services",
+            "itemListElement": [
+                {
+                    "@type": "ListItem",
+                    "position": 1,
+                    "name": "Home",
+                    "url": "https://www.keyboardvagabond.com/",
+                    "description": "Keyboard Vagabond main landing page"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 2,
+                    "name": "Getting Started",
+                    "url": "https://www.keyboardvagabond.com/getting-started.html",
+                    "description": "Guide to signing up and customizing your feed on Keyboard Vagabond"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 3,
+                    "name": "About",
+                    "url": "https://www.keyboardvagabond.com/about.html",
+                    "description": "Learn more about Keyboard Vagabond community"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 4,
+                    "name": "Mastodon",
+                    "url": "https://mastodon.keyboardvagabond.com",
+                    "description": "Social media for digital nomads—alternative to Twitter"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 5,
+                    "name": "Piefed",
+                    "url": "https://piefed.keyboardvagabond.com",
+                    "description": "Community forums for digital nomads—alternative to Reddit"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 6,
+                    "name": "Pixelfed",
+                    "url": "https://pixelfed.keyboardvagabond.com",
+                    "description": "Photo sharing for travelers—alternative to Instagram"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 7,
+                    "name": "Bookwyrm",
+                    "url": "https://bookwyrm.keyboardvagabond.com",
+                    "description": "Book discussion and review platform for nomads"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 8,
+                    "name": "Write Freely",
+                    "url": "https://blog.keyboardvagabond.com",
+                    "description": "Federated blogging platform for digital nomads"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 9,
+                    "name": "Picsur",
+                    "url": "https://picsur.keyboardvagabond.com",
+                    "description": "Image hosting service"
+                }
+            ]
+        }
+    },
+    {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "@id": "https://www.keyboardvagabond.com/#organization",
+        "name": "Keyboard Vagabond",
+        "url": "https://www.keyboardvagabond.com",
+        "logo": "https://picsur.michaeldileo.org/i/b4579222-367e-4601-b634-87e6d66e3a99.png?width=400",
+        "description": "Keyboard Vagabond is an online community and social media hub for digital nomads, remote workers, and travel enthusiasts. Connect through Mastodon, Piefed, Pixelfed, Bookwyrm, and Write Freely—ad-free, community-run, and federated.",
+        "sameAs": [
+            "https://mastodon.keyboardvagabond.com",
+            "https://piefed.keyboardvagabond.com",
+            "https://pixelfed.keyboardvagabond.com",
+            "https://bookwyrm.keyboardvagabond.com",
+            "https://blog.keyboardvagabond.com"
+        ],
+        "foundingDate": "2025",
+        "areaServed": "Global",
+        "knowsAbout": [
+            "Fediverse",
+            "Digital Nomadism",
+            "Remote Work",
+            "Travel",
+            "Social Media Alternatives",
+            "Online Communities",
+            "Digital Nomad Social Media",
+            "Community Forums",
+            "Decentralized Social Media"
+        ],
+        "hasOfferCatalog": {
+            "@type": "OfferCatalog",
+            "name": "Fediverse Services",
+            "itemListElement": [
+                {
+                    "@type": "Offer",
+                    "itemOffered": {
+                        "@type": "Service",
+                        "name": "Mastodon",
+                        "description": "Decentralized social media for digital nomads—alternative to Twitter"
+                    }
+                },
+                {
+                    "@type": "Offer",
+                    "itemOffered": {
+                        "@type": "Service",
+                        "name": "Piefed",
+                        "description": "Community forums for digital nomads—alternative to Reddit with enhanced features"
+                    }
+                },
+                {
+                    "@type": "Offer",
+                    "itemOffered": {
+                        "@type": "Service",
+                        "name": "Pixelfed",
+                        "description": "Photo sharing for travelers—alternative to Instagram"
+                    }
+                },
+                {
+                    "@type": "Offer",
+                    "itemOffered": {
+                        "@type": "Service",
+                        "name": "Bookwyrm",
+                        "description": "Book discussion and review platform for nomads"
+                    }
+                },
+                {
+                    "@type": "Offer",
+                    "itemOffered": {
+                        "@type": "Service",
+                        "name": "Write Freely",
+                        "description": "Federated blogging platform for digital nomads"
+                    }
+                }
+            ]
+        }
+    },
+    {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        "@id": "https://www.keyboardvagabond.com/#webpage",
+        "url": "https://www.keyboardvagabond.com/",
+        "name": "Keyboard Vagabond | Digital Nomad Online Community & Social Media",
+        "description": "Keyboard Vagabond is an online community and social media hub for digital nomads and remote workers. Join Mastodon, Piefed, Pixelfed, and more—ad-free, community-run, and federated.",
+        "isPartOf": {
+            "@id": "https://www.keyboardvagabond.com/#website"
+        },
+        "about": {
+            "@id": "https://www.keyboardvagabond.com/#organization"
+        }
+    }
+]