<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brainwagon (reborn)</title>
    <link rel="stylesheet" href="/style.css?v=3">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Tagesschrift&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <script>
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark-theme');
      }
    </script>
</head>
<body>
    <nav>
        <section>
            <a href="/">Home</a>
            <a href='/blog/'>Blog</a>
            <a href="/github/">Github</a>
            <a href="/podcasts/">Radio</a>
            <a href="/contact/">Contact</a>

            <div style="float: right; display: flex; align-items: center;">
                <div class="search-container" style="display: inline-block; position: relative; margin-right: 1em;">
                    <input type="text" id="search-input" placeholder="Search..." autocomplete="off">
                    <div id="search-results" class="search-results" style="display: none;"></div>
                </div>
                <a href="/about/">About</a>
                <a href="/blog/rss.xml" class="rss">RSS</a>
                <button id="theme-toggle" title="Toggle dark mode" style="background: none; border: none; cursor: pointer; color: var(--nav-link-color); font-size: 1.2em; vertical-align: middle;">
                    <i class="bx bx-moon" id="theme-toggle-icon"></i>
                </button>
            </div>
        </section>
    </nav>
    <main>
        <section>
            
<h1>brainwagon (reborn)</h1>
<img src="/images/caricature-small.png" alt="Caricature courtesy of Domee Shi" style="float: right; margin-left: 20px;"/>
<p>Welcome to the site of Mark VandeWettering.</p>
<p>Want to catch up with my blog? <a href='/blog/'><strong>Click here</strong></a> and get all the latest. Or use <a class="rss" href="/blog/rss.xml">RSS</a> to stay up to date.</p>

<p>The blog is now generated by a script which I wrote using Google's Antigravity CLI, and which is taking advantage of Google's <a href="https://github.com/google/open-knowledge-format">Open Knowledge Format</a> to store posts.</p>

<p>
In any case, if you are reading this and have any comments or questions,
feel free to send me an email and I'll try to respond. My goal
is to eventually write up a more complete HOWTO on how I created this.
</p>

        </section>
    </main>
    <footer>
        <section>
            <p>&copy; 2002-2026, Mark VandeWettering</p>
        </section>
    </footer>
    <script>
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-toggle-icon');
        const html = document.documentElement;
        const body = document.body;

        if (html.classList.contains('dark-theme')) {
            body.classList.add('dark-theme');
            themeIcon.classList.replace('bx-moon', 'bx-sun');
        }

        themeToggle.addEventListener('click', () => {
            const isDark = body.classList.toggle('dark-theme');
            html.classList.toggle('dark-theme', isDark);
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            
            if (isDark) {
                themeIcon.classList.replace('bx-moon', 'bx-sun');
            } else {
                themeIcon.classList.replace('bx-sun', 'bx-moon');
            }
        });
    </script>
    <script src="/search.js"></script>
</body>
</html>