<!DOCTYPE html>
<html lang="en">
<head>
    <title>brainwagon (reborn)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="/css/style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Tagesschrift&display=swap" rel="stylesheet">

    <!-- it will be helpful to have some icons, but am not sure which set will be most 
         compatible with my goals. -->

    <!-- favicons, probably overkill -->
    <link rel="icon" type="image/x-icon" href="/images/favicons/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/images/favicons/android-chrome-512x512.png">

  <!-- setup to use pagefind for search -->
  <!-- don't bother using default styling <link href="/pagefind/pagefind-ui.css" rel="stylesheet"> -->
  <script src="/pagefind/pagefind-ui.js">Javascript is not available, so no search</script>
  <script data-goatcounter="https://brainwagon.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

  <!-- boxicons first? -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

  <script>
    // Apply theme early to prevent FOUC
    (function() {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark-theme');
        // We add it to documentElement so it's available as early as possible
      }
    })();
  </script>

</head>

<body id="_index">

<header>
<nav>
<section>
    <span class="home">
        <a href="/"><i class="bx bxs-invader"></i>Home</a>
        <a href="/blog/"><i class="bx bx-pencil"></i>Blog</a>
        <!-- the original code had a separate "news" section, which 
             I didn't really think I needed.  But in case I need to 
             add it back, I'll leave this here commented out. -->
        <!-- <a href="/news/">News</a> -->
	<!-- <a href="/howto/"><i class="bx bxs-wrench"></i>Howto</a> -->
        <a href="/github/"><i class="bx bxl-github"></i>Github</a>
        <a href="/podcasts/"><i class="bx bxs-radio"></i>Podcasts</a>

	<a href="/contact/"><i class="bx bxs-contact"></i>Contact</a>
	<a href="/about/"><i class="bx bxs-info-circle"></i>About</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; margin-right: 10px;">
        <i class="bx bx-moon" id="theme-toggle-icon"></i>
    </button>
	<div id="search" style="margin-bottom: 10px;"></div>
	<script>
	    window.addEventListener('DOMContentLoaded', (event) => 
		{ new PagefindUI({ element: "#search", showSubResults: true, showImages: false }); }) ;
	</script>
    </span>
</section>
</nav>
</header>

<!-- container wraps both -->
<div class="container">

<!-- main content goes here -->

<main>
<h1>brainwagon (reborn)</h1>
<img src="/images/caricature-small.jpg" 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.</b> Or use <a class="rss" href="/blog/rss.xml">RSS</a> to stay up to date.</p>
<p>
This site is generated using a modified version of Sunaina Pai's 
<a href="https://github.com/sunainapai/makesite">makesite.py</a> Python script.  My modified
version generates this blog from Markdown source using under 1000 lines of very comfortable Python.  
Her script is just 250 lines, and could be a good start for someone wanting to ditch large systems for blogging.
</p>

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

</main>

</div>

<br clear="both"/>

<footer>
<section>
    <p>&copy; 2026 Mark VandeWettering</p>
    <p>I've been blogging for 8,645 days.</p>
    <p>Last updated March 22, 2026</p>
<p>Based upon <a href="https://github.com/sunainapai/makesite">Sunaina Pai's excellent makesite.py script</a></p>
<p>
    <a href="https://mastodon.social/@brainwagon"><i class="bx bxl-mastodon"></i></a>
    <a href="https://github.com/brainwagon"><i class="bx bxl-github"></i></a>
    <a href="https://www.linkedin.com/in/markvandewettering/"><i class="bx bxl-linkedin"></i></a>
    <a href="https://mvandewettering.com/">Resume</a>
</p>
</section>
</footer>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    // Theme toggle logic
    document.addEventListener('DOMContentLoaded', () => {
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-toggle-icon');
        const body = document.body;
        const html = document.documentElement;

        // Sync body class with html class (from early script)
        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>

</body>
</html>
