index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Timothy D Beach</title>
  <meta name="description" content="Software engineer, recording artist, GNU/Linux enthusiast. Writing, music, and notes from a working bench." />
  <!-- Canonical host: www.timbeach.com also resolves here; without this Google
       treats the two hosts as competing duplicates. -->
  <link rel="canonical" href="https://timbeach.com/" />

  <!-- Open Graph / Social Media Preview -->
  <meta property="og:title" content="Timothy D Beach" />
  <meta property="og:description" content="Software engineer, recording artist, GNU/Linux enthusiast." />
  <meta property="og:image" content="https://timbeach.com/pix/zenshin-suru.jpg" />
  <meta property="og:image:width" content="1600" />
  <meta property="og:image:height" content="1200" />
  <meta property="og:url" content="https://timbeach.com" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Timothy D Beach" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Timothy D Beach" />
  <meta name="twitter:description" content="Software engineer, recording artist, GNU/Linux enthusiast." />
  <meta name="twitter:image" content="https://timbeach.com/pix/zenshin-suru.jpg" />

  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="manifest" href="site.webmanifest" />

  <!-- RSS autodiscovery (feed.xml is generated at deploy time) -->
  <link rel="alternate" type="application/rss+xml" title="Timothy D Beach" href="/feed.xml" />

  <!-- FOUC prevention: apply explicit theme before stylesheets load -->
  <script>
    (function () {
      try {
        var t = localStorage.getItem('theme');
        if (t === 'light' || t === 'dark') {
          document.documentElement.setAttribute('data-theme', t);
        }
      } catch (e) { /* ignore: localStorage may be disabled */ }
    })();
  </script>

  <!-- Fonts: Charis SIL (Charter family, free) for body + headlines, system
       sans for UI/meta, JetBrains Mono for code. -->
  <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=Charis+SIL:wght@400;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="css/site.css" />
</head>
<body>
  <div class="page">
    <header class="masthead">
      <a href="#/" class="brand">Timothy D Beach</a>
      <nav class="nav" aria-label="Primary">
        <a href="#/" data-nav="home">Writing</a>
        <a href="#/music" data-nav="music">Music</a>
        <a href="#/about" data-nav="about">About</a>
        <button class="theme-toggle" type="button" aria-label="Toggle light/dark mode" title="Toggle theme">☾</button>
      </nav>
    </header>

    <main id="app" role="main">
      <p class="meta">Loading…</p>
    </main>

    <footer class="site-footer">
      © <span id="footer-year">2026</span> Timothy D Beach
      &middot; <a href="/feed.xml">RSS</a>
      &middot; <a href="https://github.com/timbeach" target="_blank" rel="noopener">GitHub</a>
      &middot; <a href="mailto:beachtimothyd@gmail.com">Email</a>
      <span id="site-counter" class="site-counter" hidden></span>
    </footer>
  </div>

  <script type="module">
    import { bootstrap } from './js/app.js';
    bootstrap();
    document.getElementById('footer-year').textContent = new Date().getFullYear();
  </script>
</body>
</html>