index.html

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

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135030873-1"></script>
  <script async type="module"
    src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-135030873-1');
  </script>
  <title>Max Bo</title>
  <meta name="author" content="Max Bo, max@maxbo.me">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="The personal website and portfolio of Max Bo" />
  <meta name="robots" content="index, follow">
  <link href="new.css" rel="stylesheet">
  <meta name="theme-color" content="#FF00FF">
  <link rel="icon" type="image/png" href="favicon.ico">
  <link href="atom.xml" type="application/atom+xml" rel="alternate" title="Sitewide Atom feed" />

  <meta name="og:title" content="Max Bo" />
  <meta name="og:description" content="The personal website and portfolio of Max Bo" />
  <meta name="og:image" content="https://maxbo.me/favicon.ico" />
  <meta name="og:url" content="https://maxbo.me" />
  <meta name="og:site_name" content="Max Bo" />
  <meta name="og:type" content="website" />

  <meta name="twitter:title" content="Max Bo" />
  <meta name="twitter:description" content="The personal website and portfolio of Max Bo" />
  <meta name="twitter:image" content="https://maxbo.me/favicon.ico" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@_max_bo_" />
  <meta name="twitter:creator" content="@_max_bo_" />
  <meta name="twitter:domain" content="maxbo.me" />
  <meta name="twitter:url" content="https://maxbo.me" />

  <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Person",
      "@id": "https://maxbo.me/#MaxBo",
      "url": "https://maxbo.me",
      "name": "Maxwell Bo",
      "givenName": "Maxwell",
      "familyName": "Bo",
      "email": "max@maxbo.me",
      "telephone": "+61 447 724 462",
      "description": "Max Bo is an Australian software engineer currently working as a Senior Software Engineer at Canva.",
      "affiliation": [
        {
          "@type": "Organization",
          "@id": "https://www.wikidata.org/wiki/Q23498528",
          "url": "https://www.canva.com/about/",
          "name": "Canva"
        },
        {
          "@type": "Organization",
          "@id": "https://www.wikidata.org/wiki/Q95",
          "url": "https://about.google/",
          "name": "Google"
        },
        {
          "@type": "Organization",
          "@id": "https://www.wikidata.org/wiki/Q757307",
          "url": "https://www.atlassian.com/",
          "name": "Atlassian"
        },
        {
          "@type": "Organization",
          "url": "https://skedulo.com/",
          "name": "Skedulo"
        }
      ],
      "sameAs": [
        "https://github.com/MaxwellBo",
        "https://www.linkedin.com/in/max-bo/",
        "https://twitter.com/_max_bo_",
        "https://observablehq.com/@mjbo",
        "https://www.instagram.com/maximally_boring",
        "https://rateyourmusic.com/~mbo",
        "https://letterboxd.com/mbo_/",
        "https://www.fragrantica.com/member/1619664",
        "https://untappd.com/user/max_bo"
      ],
      "knowsAbout": [
        {
          "@type": "Thing",
          "@id": "https://www.wikidata.org/wiki/Q193076",
          "name": "Functional programming"
        },
        {
          "@type": "Thing",
          "@id": "https://www.wikidata.org/wiki/Q6504956",
          "name": "Data visualization"
        },
        {
          "@type": "Thing",
          "@id": "https://www.wikidata.org/wiki/Q2670534",
          "name": "Programming language theory"
        },
        {
          "@type": "Thing",
          "@id": "https://www.wikidata.org/wiki/Q70357595",
          "name": "Computational notebooks"
        }
      ],
      "nationality": [
        {
          "@type": "Country",
          "@id": "https://www.wikidata.org/wiki/Q408",
          "name": "Australia"
        }
      ],
      "alumniOf": [
        {
          "@type": "CollegeOrUniversity",
          "@id": "https://www.wikidata.org/wiki/Q866012",
          "name": "University of Queensland",
          "url": "https://www.uq.edu.au/",
          "award": "Bachelor of Science (Computer Science Extended Major)"
        }
      ],
      "worksFor": {
        "@type": "Organization",
        "@id": "https://www.wikidata.org/wiki/Q23498528",
        "name": "Canva",
        "url": "https://www.canva.com/about/"
      },
      "knowsLanguage": [
        {
          "@type": "Language",
          "@id": "https://maxbo.me/#Person_knowsLanguage_Language1",
          "name": "English"
        }
      ],
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://maxbo.me",
        "url": "https://maxbo.me",
        "name": "Maxwell Bo's Portfolio",
        "description": "The personal website and portfolio of Max Bo"
      }
    }
  </script>
</head>

<body>
  <img id="draggable-postit" src="me.webp"
    style="position: absolute; top: 5px; left: 20px; width: 80px; cursor: grab; z-index: 1000;" />
  <script>
    const postit = document.getElementById('draggable-postit');
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    // Prevent default drag behavior
    postit.addEventListener('dragstart', (e) => {
      e.preventDefault();
    });

    postit.addEventListener('mousedown', dragStart);
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', dragEnd);

    function dragStart(e) {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;

      if (e.target === postit) {
        isDragging = true;
      }
      postit.style.cursor = 'grabbing';
    }

    function drag(e) {
      if (isDragging) {
        e.preventDefault();
        currentX = e.clientX - initialX;
        currentY = e.clientY - initialY;
        xOffset = currentX;
        yOffset = currentY;
        postit.style.transform = `translate(${currentX}px, ${currentY}px)`;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;
      isDragging = false;
      postit.style.cursor = 'grab';
    }
  </script>
  <p id="watermark">Max Bo</p>
  <header>
    <p style="position: absolute; font-family: 'Fake Receipt', sans-serif; padding-left: 120px; font-size: smaller;">
      ... JOB: SWE ... AGE: 28 ... LOC: SYD ... LANG: EN-AU ... BLOOD: O+ ...</p>

    </p>
    <marquee>
      <h1 id="wordmark" style="display: inline-block;">
        ← Max Bo
      </h1>
    </marquee>
    <script type="module">
      import * as htl from 'https://esm.run/htl@0.3.1';

      async function renderRss(feedUrl, elementId, transformTitle = (title) => title) {
        const response = await fetch(feedUrl);
        const text = await response.text();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(text, 'application/xml');

        const items = Array.from(xmlDoc.getElementsByTagName("item"));
        const feed = document.getElementById(elementId);

        for (const item of items) {
          const title = transformTitle(item.getElementsByTagName("title")[0].textContent);
          const link = item.getElementsByTagName("link")[0].textContent;
          const date = new Date(item.getElementsByTagName("pubDate")[0].textContent)
            .toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });

          feed.append(htl.html`<a href=${link} class="item-title">${title}</a> <small>${date}</small>`);
          feed.append(document.createTextNode(' ■ '));
        }
      }

      window.renderRss = renderRss;

      async function renderAtom(feedUrl, elementId) {
        fetch(feedUrl)
          .then(response => response.text())
          .then(data => {
            const parser = new DOMParser();
            const xmlDoc = parser.parseFromString(data, 'text/xml');
            const items = xmlDoc.getElementsByTagName('entry');

            const ticker = document.getElementById(elementId);
            Array.from(items).forEach(item => {
              const title = item.getElementsByTagName('title')[0].textContent;
              const link = item.getElementsByTagName('link')[0].getAttribute('href');
              const updated = new Date(item.getElementsByTagName('updated')[0].textContent);
              const summary = item.getElementsByTagName('summary')[0].textContent;
              const shortDate = updated.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });

              const a = document.createElement('a');
              a.href = link;
              a.textContent = `[${shortDate}] ${title}`;;
              const small = document.createElement('small');
              small.textContent = ` ${summary}`;
              a.appendChild(small);
              ticker.appendChild(a);
              ticker.appendChild(document.createTextNode(' ⚛ '));
            });
          });
      }

      window.renderAtom = renderAtom;
    </script>
    <marquee id="ticker" class="dindong" scrollamount="7">
      <img src="img/butterfly.gif" style="width: 16px; display: inline-block;" />
      <a href="atom.xml">⚛ atom.xml</a>
      󱠡
    </marquee>
    <script type="module">
      renderAtom('atom.xml', 'ticker');
    </script>
  </header>
  <nav>
    <ul>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://walky.space&size=64" />
        <a href="https://walky.space/mb-guestbook">Guestbook</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://are.na&size=64" />
        <a href="https://www.are.na/max-bo">Are.na</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.instagram.com&size=64" />
        <a href="https://www.instagram.com/maximally_boring">Dataviz Insta</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.twitter.com&size=64" />
        <a href="https://twitter.com/_max_bo_">Twitter</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://mail.google.com&size=64" />
        <a href="mailto:maxwell.j.bo+website@gmail.com">Email</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.linkedin.com&size=64" />
        <a href="https://www.linkedin.com/in/max-bo/">LinkedIn</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://github.com&size=64" />
        <a href="https://github.com/MaxwellBo">GitHub</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://observablehq.com&size=64" />
        <a href="https://observablehq.com/@mjbo">Observable</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.rateyourmusic.com&size=64" />
        <a href="https://rateyourmusic.com/~mbo">RYM</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.letterboxd.com&size=64" />
        <a href="https://letterboxd.com/mbo_/">Letterboxd</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.fragrantica.com&size=64" />
        <a href="https://www.fragrantica.com/member/1619664">Fragrantica</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.untappd.com&size=64" />
        <a href="https://untappd.com/user/max_bo">Untappd</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://notion.so&size=64" />
        <a href="https://mjbo.notion.site/Max-Bo-s-Notion-b33bd022b3604920afcef9870738b741">Wiki</a>
      </li>
      <li class="button">
        <img class="favicon" src="favicon.ico" />
        <a href="blogroll.html">Blogroll</a>
      </li>
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.spotify.com&size=64" />
        <a href="https://open.spotify.com/user/aquahair_">Spotify</a>
      </li>
      <!-- <li class="button"> -->
      <!--   <a href="https://mastodon.social/@mb@urbanists.social">Mastodon</a> -->
      <!-- </li> -->
      <li class="button">
        <img class="favicon"
          src="https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.boardgamegeek.com&size=64" />
        <a href="https://boardgamegeek.com/collection/user/mbo_">BGG</a>
      </li>
      <!-- <li class="button">
        <a href="https://maxbo.neocities.org/">Neocities</a>
      </li> -->
      <!--<li class="button">
                  <a href="http://zalgo-responsibly.tumblr.com/">Tumblr</a>
              </li>-->
      <!--<li class="button">
                  <a href="https://github.com/MaxwellBo/Resume/raw/master/Maxwell_Bo_Resume.pdf">&darr; Resume</a>
              </li>-->
    </ul>
  </nav>
  <main>
    <section>
      <h2>
        <a id="articles" href="#articles">#</a>Articles
      </h2>
      <div class="cards">
        <article class="listing">
          <a href="i-am-load-shedding.html">
            <div style="aspect-ratio: 4/3; font-size: 1rem; background-color: brown; color: whitesmoke; display: flex; justify-content: center; align-items: center;">
              <div style="padding: 3px">
                I AM LOAD SHEDDING
              </div>
            </div>
            <p class="title">I am load shedding</p>
          </a>
          <small class="time">April 2025</small>
        </article>

        <article class="listing">
          <a href="a-html-file-is-all-you-need.html">
            <img src="img/document.png" />
            <p class="title">Reactive HTML notebooks</p>
          </a>
          <small class="time">September 2024</small>
        </article>
        <article class="listing">
          <a href="https://hello-notebook-http-mode.fly.dev/">
            <img src="img/hnhm.png" />
            <p class="title">Hello, <code>notebook-http</code> mode</p>
          </a>
          <small class="time">September 2024</small>
        </article>
        <article class="listing" style="font-family: 'SimSun', 'MS Mincho', 'Hiragino Mincho ProN', serif;">
          <a href="subordinate-latin.html">
            <img src="img/sub.png" />
            <p class="title">Subordinate Latin</p>
          </a>
          <p class="description">+ a typeface inspector</p>
          <small class="time">September 2024</small>
        </article>
        <article class="listing">
          <a href="factorio.html">
            <img src="factorio/og.png" />
            <p class="title">Is sending Factorio to your competitors' engineers a cost-effective means of sabotage?</p>
          </a>
          <small class="time">January 2025</small>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/determining-the-accuracy-of-mystical-rodent-prophecies">
            <img
              src="https://static.observableusercontent.com/thumbnail/391c3d4a714a1bdac74b2af8d64add0d88094a167008558f0f50cea870894b1f.jpg" />
            <p class="title">Which groundhog is the best prognosticator?</p>
          </a>
          <small class="time">March 2023</small>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/how-to-tell-someones-age-when-all-you-know-is-her-name">
            <img
              src="https://static.observableusercontent.com/thumbnail/401632affbbe6b54179ead19ee53dcb78f643a45f66287914b638a7d26aa0e93.jpg" />
            <p class="title">How to tell someone's age when all you know is their name</p>
          </a>
            <small class="time">March 2023</small>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/plotting-a-black-hole">
            <img
              src="https://static.observableusercontent.com/thumbnail/edf7022d90f454c779da55f3f4a6e6bd178614ae88033b2b585c5b2b77033091.jpg" />
            <p class="title">Plotting a black hole</p>
          </a>
          <small class="time">February 2023</small>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/sydney-qms-panel-public-telephone-pairings">
            <img
              src="https://static.observableusercontent.com/thumbnail/87edbb3b0bdba52d702d742dbf078f571acd6c6eb9f84edc542c5cdc53024842.jpg" />
            <p class="title">How many QMS advertising panels in Sydney are near a Telstra public telephone?</p>
          </a>
          <small class="time">December 2022</small>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/perceptually-uniform-color-models">
            <img
              src="https://static.observableusercontent.com/thumbnail/2ab66fe81ddedbee178a96a4568fcadc03bc600eccba5991a3e8bbbf5c19e043.jpg" />
            <p class="title">Perceptually uniform color models</p>
          </a>
          <small class="time">December 2021</small>
        </article>
        <article id="weather" class="art">
          <p>I am currently living in Sydney, Australia.</p>
          <p>It is:</p>
          <p id="time"></p>
          <p><span id="conditionsEmoji"></span> <span id="conditions"></span></p>
          <p id="currentTemp"></p>
          <small id="low"></small>
          <small id="high"></small>

          <script type="module">
            import * as Plot from 'https://esm.run/@observablehq/plot'

            const me = document.getElementById('weather');
            const time = document.getElementById('time');
            const conditions = document.getElementById('conditions');
            const conditionsEmoji = document.getElementById('conditionsEmoji');
            const currentTemp = document.getElementById('currentTemp');
            const low = document.getElementById('low');
            const high = document.getElementById('high');

            const setTime = () => {
              const time = new Date().toLocaleTimeString('en-AU', {
                timeZone: 'Australia/Sydney',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                hour12: true
              });
              document.getElementById('time').textContent = time;
            };

            setTime();
            setInterval(setTime, 1000);

            const lat = -33.8688;
            const lon = 151.2093;


            const url = 'https://api.open-meteo.com/v1/forecast?'
              + `latitude=${lat}&longitude=${lon}`
              + '&daily=temperature_2m_max,temperature_2m_min'
              + '&current=temperature_2m,is_day,weather_code'
              + '&timezone=Australia%2FSydney';

            fetch(url)
              .then(response => response.json())
              .then(data => {
                currentTemp.textContent = data.current.temperature_2m.toFixed(1) + '°C';
                high.textContent = "H: " + data.daily.temperature_2m_max[0].toFixed(1) + '°C';
                low.textContent = "L: " + data.daily.temperature_2m_min[0].toFixed(1) + '°C';

                // weather_code interpretation table as per https://open-meteo.com/en/docs
                // 0	Clear sky
                // 1, 2, 3	Mainly clear, partly cloudy, and overcast
                // 45, 48	Fog and depositing rime fog
                // 51, 53, 55	Drizzle: Light, moderate, and dense intensity
                // 56, 57	Freezing Drizzle: Light and dense intensity
                // 61, 63, 65	Rain: Slight, moderate and heavy intensity
                // 66, 67	Freezing Rain: Light and heavy intensity
                // 71, 73, 75	Snow fall: Slight, moderate, and heavy intensity
                // 77	Snow grains
                // 80, 81, 82	Rain showers: Slight, moderate, and violent
                // 85, 86	Snow showers slight and heavy
                // 95 *	Thunderstorm: Slight or moderate
                // 96, 99 *	Thunderstorm with slight and heavy hail
                switch (data.current.weather_code) {
                  case 0: // Clear sky
                    conditions.textContent = 'Clear sky';
                    me.style.background = 'linear-gradient(90deg, #87CEEB, #FFD700)';
                    conditionsEmoji.textContent = '☀️';
                    break;
                  case 1: // Mainly clear
                    conditions.textContent = 'Mainly clear';
                    me.style.background = 'linear-gradient(90deg, #B0E2FF, #FFFACD)';
                    conditionsEmoji.textContent = '🌤️';
                    break;
                  case 2: // Partly cloudy
                    conditions.textContent = 'Partly cloudy';
                    me.style.background = 'linear-gradient(90deg, #CCCCFF, #F0E68C)';
                    conditionsEmoji.textContent = '⛅';
                    break;
                  case 3: // Overcast
                    conditions.textContent = 'Overcast';
                    me.style.background = 'linear-gradient(90deg, #A9A9A9, #778899)';
                    conditionsEmoji.textContent = '☁️';
                    break;
                  case 45: // Fog
                    conditions.textContent = 'Fog';
                    me.style.background = 'linear-gradient(90deg, #696969, #C0C0C0)';
                    conditionsEmoji.textContent = '🌫️';
                    break;
                  case 48: // Depositing rime fog
                    conditions.textContent = 'Depositing rime fog';
                    me.style.background = 'linear-gradient(90deg, #A8A8A8, #D3D3D3)';
                    conditionsEmoji.textContent = '🌫️❄️';
                    break;
                  case 51: // Light drizzle
                    conditions.textContent = 'Light drizzle';
                    me.style.background = 'linear-gradient(90deg, #B0E0E6, #778899)';
                    conditionsEmoji.textContent = '🌦️';
                    break;
                  case 53: // Moderate drizzle
                    conditions.textContent = 'Moderate drizzle';
                    me.style.background = 'linear-gradient(90deg, #ADD8E6, #708090)';
                    conditionsEmoji.textContent = '🌦️';
                    break;
                  case 55: // Dense drizzle
                    conditions.textContent = 'Dense drizzle';
                    me.style.background = 'linear-gradient(90deg, #87CEFA, #4682B4)';
                    conditionsEmoji.textContent = '🌧️';
                    break;
                  case 56: // Light freezing drizzle
                    conditions.textContent = 'Light freezing drizzle';
                    me.style.background = 'linear-gradient(90deg, #E0FFFF, #5F9EA0)';
                    conditionsEmoji.textContent = '🌨️';
                    break;
                  case 57: // Dense freezing drizzle
                    conditions.textContent = 'Dense freezing drizzle';
                    me.style.background = 'linear-gradient(90deg, #AFEEEE, #5F9EA0)';
                    conditionsEmoji.textContent = '🌨️';
                    break;
                  case 61: // Slight rain
                    conditions.textContent = 'Slight rain';
                    me.style.background = 'linear-gradient(90deg, #4682B4, #B0C4DE)';
                    conditionsEmoji.textContent = '🌧️';
                    break;
                  case 63: // Moderate rain
                    conditions.textContent = 'Moderate rain';
                    me.style.background = 'linear-gradient(90deg, #4169E1, #B0C4DE)';
                    conditionsEmoji.textContent = '🌧️🌧️';
                    break;
                  case 65: // Heavy rain
                    conditions.textContent = 'Heavy rain';
                    me.style.background = 'linear-gradient(90deg, #0000FF, #1E90FF)';
                    conditionsEmoji.textContent = '🌧️🌧️🌧️';
                    break;
                  case 66: // Light freezing rain
                    conditions.textContent = 'Light freezing rain';
                    me.style.background = 'linear-gradient(90deg, #6495ED, #4682B4)';
                    conditionsEmoji.textContent = '🌧️❄️';
                    break;
                  case 67: // Heavy freezing rain
                    conditions.textContent = 'Heavy freezing rain';
                    me.style.background = 'linear-gradient(90deg, #5F9EA0, #4682B4)';
                    conditionsEmoji.textContent = '🌧️❄️❄️';
                    break;
                  case 71: // Slight snowfall
                    conditions.textContent = 'Slight snowfall';
                    me.style.background = 'linear-gradient(90deg, #FFFAFA, #B0E0E6)';
                    conditionsEmoji.textContent = '❄️';
                    break;
                  case 73: // Moderate snowfall
                    conditions.textContent = 'Moderate snowfall';
                    me.style.background = 'linear-gradient(90deg, #E0FFFF, #AFEEEE)';
                    conditionsEmoji.textContent = '❄️❄️';
                    break;
                  case 75: // Heavy snowfall
                    conditions.textContent = 'Heavy snowfall';
                    me.style.background = 'linear-gradient(90deg, #F0FFF0, #AFEEEE)';
                    conditionsEmoji.textContent = '❄️❄️❄️';
                    break;
                  case 77: // Snow grains
                    conditions.textContent = 'Snow grains';
                    me.style.background = 'linear-gradient(90deg, #B0E0E6, #AFEEEE)';
                    conditionsEmoji.textContent = '🌨️';
                    break;
                  case 80: // Slight rain showers
                    conditions.textContent = 'Slight rain showers';
                    me.style.background = 'linear-gradient(90deg, #B0E0E6, #87CEFA)';
                    conditionsEmoji.textContent = '🌦️';
                    break;
                  case 81: // Moderate rain showers
                    conditions.textContent = 'Moderate rain showers';
                    me.style.background = 'linear-gradient(90deg, #87CEFA, #4682B4)';
                    conditionsEmoji.textContent = '🌦️🌦️';
                    break;
                  case 82: // Violent rain showers
                    conditions.textContent = 'Violent rain showers';
                    me.style.background = 'linear-gradient(90deg, #4682B4, #0000FF)';
                    conditionsEmoji.textContent = '⛈️';
                    break;
                  case 85: // Slight snow showers
                    conditions.textContent = 'Slight snow showers';
                    me.style.background = 'linear-gradient(90deg, #F0FFFF, #B0E0E6)';
                    conditionsEmoji.textContent = '🌨️';
                    break;
                  case 86: // Heavy snow showers
                    conditions.textContent = 'Heavy snow showers';
                    me.style.background = 'linear-gradient(90deg, #E0FFFF, #AFEEEE)';
                    conditionsEmoji.textContent = '🌨️🌨️';
                    break;
                  case 95: // Thunderstorm: Slight or moderate
                    conditions.textContent = 'Thunderstorm: Slight or moderate';
                    me.style.background = 'linear-gradient(90deg, #FFD700, #FFA500)';
                    conditionsEmoji.textContent = '🌩️';
                    break;
                  case 96: // Thunderstorm with slight hail
                    conditions.textContent = 'Thunderstorm with slight hail';
                    me.style.background = 'linear-gradient(90deg, #FFA500, #FF4500)';
                    conditionsEmoji.textContent = '⛈️🌨️';
                    break;
                  case 99: // Thunderstorm with heavy hail
                    conditions.textContent = 'Thunderstorm with heavy hail';
                    me.style.background = 'linear-gradient(90deg, #FF4500, #B22222)';
                    conditionsEmoji.textContent = '⛈️❄️❄️';
                    break;
                  default: // Unknown weather code
                    conditions.textContent = 'Unknown weather code';
                    me.style.background = 'linear-gradient(90deg, #696969, #8B8B8B)';
                    conditionsEmoji.textContent = '❔';
                    break;
                }


                const daily = data.daily.time.map((time, i) => ({
                  time,
                  max: data.daily.temperature_2m_max[i],
                  min: data.daily.temperature_2m_min[i]
                }));

                const plot = Plot.plot({
                  marks: [
                    // Bar for temperature ranges
                    Plot.barX(daily, {
                      y: "time",
                      x1: "min",
                      x2: "max",
                    }),
                    // Dot for current temperature
                    Plot.dot([data.current], {
                      x: "temperature_2m",
                      y: (d) => daily[0].time,
                      fill: "white",
                      title: (d) => `Current Temp: ${d.temperature_2m}°C`
                    }),
                    Plot.text(daily, {
                      x: "max",
                      y: "time",
                      text: d => `${d.max.toFixed(0)}`,
                      dx: -6, // Position adjustment on x-axis
                      fill: "white",
                    }),
                    // Text for min temperatures
                    Plot.text(daily, {
                      x: "min",
                      y: "time",
                      text: d => `${d.min.toFixed(0)}`,
                      dx: 6, // Position adjustment on x-axis
                      fill: "white"
                    })
                  ],
                  y: {
                    label: null,
                    tickSize: 0,
                    tickFormat: (d) => Plot.formatWeekday("en-AU", "narrow")(new Date(d).getDay()),
                    type: "band",
                  },
                  x: {
                    // label: "",
                    // include celius in tick mark
                    tickFormat: (d) => `${d}°C`,
                    grid: true
                  },
                  width: 175,
                  height: 125,
                  marginTop: 5,
                  marginLeft: 20,
                  marginBottom: 20,
                });

                // Render the plot
                document.getElementById('weather').appendChild(plot);
              });
          </script>
        </article>
      </div>
    </section>
    <section>
      <h2>
        <a id="projects" href="#projects">#</a>Projects
      </h2>
      <div class="cards">
        <article class="listing">
          <a href="https://maxbo.me/celine">
            <img src="https://maxbo.me/celine/static/og.png" />
            <p class="title">@celine/celine</p>
          </a>
          <p class="title">A library for building reactive HTML notebooks</p>
        </article>
        <article class="listing">
          <a href="https://maxbo.me/celine/bibhtml">
            <img src="https://maxbo.me/celine/bibhtml/static/og.png" />
            <p class="title">@celine/bibhtml</p>
          </a>
          <p class="title">A Web Components-based referencing system for HTML documents</p>
        </article>
        <article class="listing">
          <a href="https://muncoordinated.io">
            <img src="https://raw.githubusercontent.com/MaxwellBo/Muncoordinated-2/master/public/promo.png" />
            <p class="title">Muncoordinated</p>
          </a>
          <p class="description">Model UN committee management service</p>
        </article>
        <article class="listing big">
          <model-viewer id='model' alt="Roman" src="dolls/Roman.glb" interaction-prompt="" progress-bar=""
            loading="auto" auto-rotate-delay="0" rotation-per-second="20deg" camera-controls auto-rotate
            touch-action="pan-y"></model-viewer>

          <a href="https://poppenhu.is">

            <p class="title">poppenhuis</p>
          </a>
          <p class="description">Digital dollhouse</p>
        </article>
        <article class="listing">
          <a href="https://maxbo.me/html-in-hyde/">
            <img src="img/html-in-hyde.png" />
            <p class="title">HTML in Hyde</p>
          </a>
          <p class="description">Meetup</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/genre-map-explorer-for-spotify">
            <img
              src="https://static.observableusercontent.com/thumbnail/2873694a29cbf9439dcb286c502cc4bf65f7469f39c0cf836243a6e9be00a87f.jpg" />
            <p class="title">Genre map explorer for
              Spotify</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://favicon.garden">
            <img src="img/fg.jpg" />
            <p class="title">favicon.garden</p>
          </a>
          <p class="description">Favicon API and cache</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/royal-game-of-ur-calculator">
            <img
              src="https://static.observableusercontent.com/thumbnail/e1b12e8630324b70e4c30301d54be5cdfe33273413ce056bfadfed034c57641e.jpg" />
            <p class="title"><i>Royal Game of Ur</i> positional risk calculator</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/2019-australian-federal-election-swings">
            <img
              src="https://static.observableusercontent.com/thumbnail/b6ffc114b7b44899a8e88e8f938c4d2dda8b2ecd2f3c64e084f82a0ccbce55a1.jpg" />
            <p class="title">2019/2022 <i>House of Reps</i> booth swings</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/informal-voting-in-the-2019-australian-federal-election">
            <img
              src="https://static.observableusercontent.com/thumbnail/71f8557d139405a96e0c1495196f51d17fdd6c15778c6e87849a7630ff02f42d.jpg" />
            <p class="title">Informal voting in the 2019/2022 federal elections</p>
          </a>
        </article>
        <article class="art">
          <!-- https://x.com/natalie_thenerd/status/1831035235926155384?s=46&t=EdAVFnBtXHgoommIJOTYjw -->
          <img src="img/gc.png" />
        </article>
        <article class="listing">
          <a href="https://yimbymelbourne.observablehq.cloud/data-portal/distance">
            <img src="img/walkability.png" />
            <p class="title">Maximum distance to desired amenities</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://yimbymelbourne.observablehq.cloud/data-portal/rent-vs-mortgage">
            <img src="img/rvm.png" />
            <p class="title">Rent vs Mortgage</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/color-schemes-under-color-vision-deficiency">
            <img
              src="https://static.observableusercontent.com/thumbnail/786eb43f1e252765e8ce64fca7b851fa076c2db4cc23f92db77a6b8165cdc484.jpg" />
            <p class="title">Color schemes under color vision deficiency</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/imc-prosperity-2-visualizer">
            <img
              src="https://static.observableusercontent.com/thumbnail/4afa3d032233e4a18b30f7f5c36119c972dba342c4e85c7efb1f971f8f7e61fb.jpg" />
            <p class="title">IMC Prosperity 2 visualizer</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@55th/foundation-shades">
            <img
              src="https://static.observableusercontent.com/thumbnail/abb98ad26880210a2a2a89811d0c14237daea59eebee3debcd783bc8883c4696.jpg" />
            <p class="title">Foundation shades</p>
          </a>
        </article>
        <article class="art">
          <img style="width:100%; image-rendering: pixelated;"
            src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://maxbo.me" />
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@55th/every-fragrance-at-once">
            <img
              src="https://static.observableusercontent.com/thumbnail/da3636798724003b7cc7a298fd859df5c8d004c35140bd2b7210c08cf7cc3a4e.jpg" />
            <p class="title">Every Fragrance at Once</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/css-gradient-generator">
            <img
              src="https://static.observableusercontent.com/thumbnail/9e7137d8185ba90e2dbfc65197541a1c9fc21cce2548ac840f8238023762abde.jpg" />
            <p class="title">CSS gradient generator</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/oklab-named-color-wheel">
            <img
              src="https://static.observableusercontent.com/thumbnail/c2b042ca91cc9414fae799a84b7a6bfda999f19b7a0bff5b7d197858c4c86f64.jpg" />
            <p class="title">Named color "wheel"</p>
          </a>
        </article>
        <article class="listing" style="position: relative;">
          <a href="sanrio-character-rankings.html">
            <img class="spin" src="new.svg" style="position: absolute; width: 100px; top: -20px; left: -20px;" />
            <img src="sanrio-character-rankings/og.png" />
            <p class="title">Sanrio character rankings</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/better-intersections-sydney-traffic-light-timings">
            <img
              src="https://static.observableusercontent.com/thumbnail/775baaed9a3d006d224cc37138c20be4bc8706204e102294c7953252887b84dc.jpg" />
            <p class="title">Sydney traffic light timings</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/trorca">
            <img
              src="https://static.observableusercontent.com/thumbnail/18e915c072fe621b1f5d30c0dadd9c81a91f3271377e63ce6e9a6b59e1fb5316.jpg" />
            <p class="title">Trorca</p>
          </a>
          <p class="description">Generative music framework</p>
        </article>
        <!--                 <article class="listing">
                    <a href="https://observablehq.com/@mjbo/lavalava-pattern-visualiser">
                        <img
                            src="https://static.observableusercontent.com/thumbnail/17fc3a047b8bd593f87b98bd20384b6fc133b1518331fa0705da12da3d5febab.jpg" />
                        <p class="title">Lavalava pattern visualiser</p>
                    </a>
                </article> -->
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hct-oklab-deltas">
            <img
              src="https://static.observableusercontent.com/thumbnail/d214b37cb7e141e379aef9924f06bf9d8fae494421efd1dbde1f5a7189e07780.jpg" />
            <p class="title">HCT/Oklab deltas</p>
          </a>
          <p class="description">Investigatory data visualisation</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/richard-burns-rally-telemetry-visualizer">
            <img
              src="https://static.observableusercontent.com/thumbnail/69c9951a76f2b92023558388c4adab2b1b90e9e49ecfac15943f79e356002d16.jpg" />
            <p class="title">Richard Burns Rally telemetry visualizer</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/dirt-rally-pacenotes-reader">
            <img
              src="https://static.observableusercontent.com/thumbnail/3cba80f31b8bc6ca270ac2af7e1cedb7f54529a1d006fe0d39d7da2be7cbea04.jpg" />
            <p class="title">DiRT Rally [2.0] pacenotes reader</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/wordle-solver">
            <img
              src="https://static.observableusercontent.com/thumbnail/0afc81ab7663ed70b9ecad078f232bb95b56b9b041e27457e046c62f3462386a.jpg" />
            <p class="title">Wordle solver</p>
          </a>
        </article>
        <article class="listing">
          <a href="friendship2.html">
            <img src="img/friendship2.png" />
            <p class="title">friendship2</p>
          </a>
          <p class="description">Digital friendship bracelet maker</p>
        </article>
        <article class="listing">
          <a href="https://mbo-neocities_hit_counter.web.val.run/">
            <img src="https://mbo-neocities_hit_counter.web.val.run/maxbo.me" />
            <p class="title">mbo-neocities_hit_counter</p>
          </a>
        </article>
        <article class="listing brat">
          <a href="https://maxbo.me/meterland">
            <img src="img/meterland.png" />
            <p class="title">meterland</p>
          </a>
          <p class="description">an ode to my favorite HTML element</p>
        </article>
        <article class="listing">
          <a href="RECEIPT_PARTY.html">
            <img src="img/receipt-party.png" />
            <p class="title fake-receipt">RECEIPT PARTY</p>
          </a>
        </article>
        <article class="listing">
          <a href="slicer.html">
            <img src="img/slicer.png" />
            <p class="title">slicer</p>
          </a>
          <p class="description">Photo finish maker</p>
        </article>
        <article class="listing">
          <a href="https://housingdiversity.au/">
            <img src="housing-diversity.png" />
            <p class="title">the coalition for housing diversity.</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://lucylivin.github.io">
            <img src="img/lsf.png" />
            <p class="title">Lucy's skincare favorites</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/2022-house-of-reps-cartograms">
            <img
              src="https://static.observableusercontent.com/thumbnail/af27b52c6c54d5fa5b44232930b1e143e85294e9fbb2674a24b81009888af052.jpg" />
            <p class="title">Australian <i>House of Reps</i> division cartograms</p>
          </a>
          <p class="description">Utility wrapper</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/bank-failures-as-a-stacked-bar-chart">
            <img
              src="https://static.observableusercontent.com/thumbnail/4f60091542efa191086364d7e9fac996dcd1bafd7579df953da42f9276231a82.jpg" />
            <p class="title">Bank failures</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/regional-nsw-station-patronage">
            <img
              src="https://static.observableusercontent.com/thumbnail/dd7f314aba0b35fccc0c74d0cee9fdadb2d374d280341cca90b5e1cd4286dd5b.jpg" />
            <p class="title">Regional NSW station patronage</p>
          </a>
        </article>
      </div>
    </section>
    <section>
      <h2>
        <a id="demos" href="#demos">#</a>Demos
      </h2>
      <div class="cards">
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hello-mixbox">
            <img
              src="https://static.observableusercontent.com/thumbnail/c8265a870271c6f31b925a12fd2888c1295a54ceb37d227a710a60841e884e8b.jpg" />
            <p class="title">Hello, Mixbox</p>
          </a>
          <p class="description">Interactive visualisation of paint mixing</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hello-spectral-js">
            <img
              src="https://static.observableusercontent.com/thumbnail/6a653826495b770c398b385fa6f0ffaf0ff2f45694388697f7dea3cdb00d5232.jpg" />
            <p class="title">Hello, Spectral.js</p>
          </a>
          <p class="description">Another interactive visualisation of paint mixing</p>
        </article>
        <article class="art">
          <canvas id="gameOfLife" width="256" height="256"
            style="width: 100%; image-rendering: pixelated; cursor: pointer;"></canvas>
          <script src="game-of-life.js"></script>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/sqljs-httpvfs">
            <img
              src="https://static.observableusercontent.com/thumbnail/43c507cf0bfc65e67c9a9b1bbcdfe3b2005b50a426ead9522e56195ca906de43.jpg" />
            <p class="title">Hello, sql.js-httpvfs</p>
          </a>
          <p class="description">Utility wrapper for a SQLite.js VFS client</p>
        </article>
        <!-- <article class="art" id="dindong">
          TEUR..ICE
        </article> -->
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hello-sparks">
            <img
              src="https://static.observableusercontent.com/thumbnail/149ecbb22294ba42fc3f57882883559c628d011875226fda3b987aca6438c0d3.jpg" />
            <p class="title">Hello, Sparks</p>
          </a>
          <p class="description">Utility wrapper for a typeface for creating sparklines in text</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@huw/prql">
            <img
              src="https://static.observableusercontent.com/thumbnail/2ccdff40c8b518c4e07f31994ed8ef160465c76f68cb59efaa217bf87a67cec6.jpg" />
            <p class="title">Hello, PRQL</p>
          </a>
          <p class="description">Utility wrapper for an alternative SQL syntax</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hello-lnjs">
            <img
              src="https://static.observableusercontent.com/thumbnail/d5d4f0e2bbae0ad732097e527a8a32d6725456a5d40aa3af14d2da50f2211364.jpg" />
            <p class="title">Hello, ln.js</p>
          </a>
          <p class="description">Vector-based 3D renderer</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/hello-protobufjs">
            <img
              src="https://static.observableusercontent.com/thumbnail/ce388edacb37e12758548dcd21f7f7000445529bd171c36fdb64595b12a45644.jpg" />
            <p class="title">Hello, protobuf.js</p>
          </a>
        </article>
      </div>
    </section>
    <section>
      <h2>
        <a id="talks" href="#talks">#</a>Talks
      </h2>
      <div class="cards">
        <article class="listing">
          <a href="https://www.youtube.com/watch?v=oMUt0PnKuyc">
            <img src="img/reactive.webp" />
            <p class="title">Reactive HTML notebooks</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://www.youtube.com/watch?v=bvjBgAGq3E8">
            <img src="img/itpc.png" />
            <p class="title">Intro to Parser Combinators</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://www.youtube.com/watch?v=2xgTu4lsbMo">
            <img src="img/id.png" />
            <p class="title">Intermediate Data Visualisation</p>
          </a>
          <p class="description">Talk &amp; interactive notebooks</p>
        </article>
        <article class="listing">
          <a href="https://www.youtube.com/watch?v=MKLLOxb2nmI">
            <img src="img/itpbt.png" />
            <p class="title">Intro to Property Based Testing</p>
          </a>
        </article>
        <article id="cycle" class="art">

        </article>
        <article class="listing">
          <a href="https://github.com/MaxwellBo/A-tour-of-Scala">
            <img src="img/tos.png" />
            <p class="title">A tour of Scala</p>
          </a>
          <p class="description">Lecture series &amp; teaching aide</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/some-js-features">
            <img
              src="https://static.observableusercontent.com/thumbnail/49d3c63f478efc84266ffd38c3e94d9cfd4c02c9c8e8ec05ca67dd0979ea8fa7.jpg" />
            <p class="title">Some JavaScript features</p>
          </a>
          <p class="description">Talk &amp; interactive notebook</p>
        </article>
      </div>
    </section>
    <section>
      <h2>
        <a id="art" href="#art">#</a>Art
      </h2>
      <div class="cards">
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/cccbd">
            <img
              src="https://static.observableusercontent.com/thumbnail/4afd658cfa055177db6663eb11b4600e1903715c8586f30c2e61f202d80ff1e6.jpg" />
            <p class="title">cccbd</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/whale-choir">
            <img
              src="https://static.observableusercontent.com/thumbnail/5be31758f141ee74112f9cc6129e5b109d46b02f70186ee039cf2af9cb33562b.jpg" />
            <p class="title">whale choir</p>
          </a>
        </article>
        <article class="art" style="padding: 2px">
          <center>My food intolerances</center>
          <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px;">
            <img src="img/banana.PNG" alt="Banana" style="width: 48px; display: block;" />
            <img src="img/soy.PNG" alt="Soy" style="width: 48px; display: block;" />
            <img src="img/fullcream.PNG" alt="Full Cream" style="width: 48px; display: block;" />
            <img src="img/chilli.PNG" alt="Chilli" style="width: 48px; display: block;" />
            <img src="img/greentea.WEBP" alt="Green Tea" style="width: 48px; display: block;" />
          </div>
        </article>
        </article>
        <article class="listing">
          <a href="https://maxbo.me/cursors">
            <img src="https://raw.githubusercontent.com/MaxwellBo/cursors/master/preview.png" />
            <p class="title">cursors</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/chocolate-matter">
            <img
              src="https://static.observableusercontent.com/thumbnail/d6014a8bb32ce4d35c559a946855a191e341ea54ab4c604dbc20273d02921513.jpg" />
            <p class="title">chocolate matter</p>
          </a>
        </article>
        <article id="clouds" class="art">
        </article>
      </div>
    </section>
    <section>
      <h2>
        <a id="abandoned-projects" href="#abandoned-projects">#</a>Abandoned projects
      </h2>
      <div class="cards">
        <article class="listing">
          <img src="img/oc.png" />
          <p class="title"><s>opencosmetics.org</s></p>
          <p class="description">Cosmetic alternatives recommendation engine</p>
        </article>
        <article class="listing">
          <img src="img/pollock.png" />
          <p class="title"><s>pollock.ai</s></p>
          <p class="description">AI t-shirt generator</p>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/2022-australian-federal-election-booth-maps">
            <img
              src="https://static.observableusercontent.com/thumbnail/eb64abe38e2a29065e53b219646aa18c97177476d784392c3dc13d93183b9f53.jpg" />
            <p class="title">Polling booth voronois</p>
          </a>
        </article>
        <article class="listing">
          <a href="https://observablehq.com/@mjbo/wals-online-language-map">
            <img
              src="https://static.observableusercontent.com/thumbnail/20b4b8a3ad0892f56d607ac0d0e1bd7268678423432888c905a206f82c4fc803.jpg" />
            <p class="title">WALS Online language map</p>
          </a>
          <p class="description">Mapper of language linguistic features</p>
        </article>
        <article class="listing">
          <a href="https://master--rankyourmusic.netlify.app/">
            <img src="img/rankyourmusic.png" />
            <p class="title">Rank Your Music</p>
          </a>
          <p class="description">Resorter of existing Rate Your Music ratings</p>
        </article>
        <article class="art">
          <a href="https://tamanotchi.world/14470c">
            <img style="margin-left: auto; margin-right: auto;" src="https://tamanotchi.world/i2/14470"
              alt="it's tamaNOTchi! click to feed!">
          </a>
        </article>

        <article class="listing">
          <a href="https://github.com/MaxwellBo/neoreader">
            <img src="img/neoreader.png" />
            <p class="title">neoreader</p>
          </a>
          <p class="description">Screenreader extension for Neovim</p>
        </article>
        <article class="listing">
          <a href="https://github.com/MaxwellBo/suq">
            <img src="https://github.com/MaxwellBo/suq/raw/master/docs/app_layout.jpg" />
            <p class="title">SyncUQ</p>
          </a>
          <p class="description">UQ-exclusive schedule sharing app</p>
        </article>
        <article class="art wide bottom-align">
          <div id="silhouette">
          </div>
        </article>

        <script type="module">
          import * as Plot from 'https://esm.run/@observablehq/plot';

          const silhouetteData = [
            10.5, 12.5, 13, 14, 14, 12, 10, 11, 12, 13, 13, 13, 13, 12, 12, 11, 11, 10,
            9, 8, 7, 7, 7, 7, 7, 7, 10, 15, 14
          ].map((x) => x - 4);

          const plot = Plot.plot({
            height: 150,
            x: {
              label: "length"
            },
            y: {
              label: "height"
            },
            marks: [
              Plot.barY(silhouetteData, {
                x: (y, i) => i,
                y: (y, i) => y,
                fill: "darkred",
                tip: true,
                rx: 4 // rounded corners
              })
            ]
          });

          document.getElementById('silhouette').appendChild(plot);
        </script>
      </div>
    </section>
    <div class="annex">
      <section>
        <h2>
          <a id="assorted-links" href="#assorted-links">#</a>Assorted links
        </h2>
        <ul>
          <li><a href="https://factorio.com/galaxy/Bioflux%20I:%20Iota7-6.C6Z3/planets">Factorio Galaxy of Fame</a></li>
          <li><a href="papers-i-like.html">Papers I like</a></li>
          <li><a href="feeds.html">RSS/Atom feeds I follow</a></li>
          <li><a href="free-ideas.html">Free ideas</a></li>
          <li><a href="COME_AND_TAKE_IT.html">COME AND TAKE IT</a></li>
          <li><a href="lighthouses3.html">Lighthouses in New South Wales</a></li>
          <li><a href="https://mjbo.notion.site/Hackathon-Stacks-9b5a21b488d04dc192f85561aa7ec849">Hackathon
              stacks</a></li>
          <li><a href="https://mjbo.notion.site/Safety-In-Types-2bb474021c8347a993b0a35f2971f8c7">Safety in
              types</a></li>
          <li><a href="https://mjbo.notion.site/Everything-as-Hooks-41cb02608bbd45fc9d854e42831fa8a3">Everything
              as hooks</a></li>
          <li><a href="https://mjbo.notion.site/Building-a-decent-tech-talk-9e045364c3a5444ca705221adda7b68b">Building
              a decent tech talk</a></li>
          <li><a href="https://gist.github.com/MaxwellBo/9ef5704b325e09afaffee050a91d9c91">Haskell operators</a>
            <!-- <li><a
                        href="https://mjbo.notion.site/Non-Overwhelming-Guide-to-Frontend-2ef469c093574e57876237a8453ea7f5">Non-overwhelming
                        guide to frontend</a></li> -->
          <li><a href="https://mjbo.notion.site/The-Story-of-Muncoordinated-f1dc0a187dc444f895f1f2700659c845">The
              story of Muncoordinated</a></li>
          <li><a
              href="https://mjbo.notion.site/Universal-Function-Call-Syntax-in-Scala-ad44a0451b6f48109692527dc1449f0f">Universal
              Function Call Syntax in Scala</a></li>
          <li><a href="https://mjbo.notion.site/Elaborate-Shitposts-2c7f2674a4144d8c839ad998e6ee39da">Elaborate
              shitposts</a></li>
        </ul>
      </section>
      <section>
        <h2>
          <a id="interests" href="#interests">#</a>Interests
        </h2>
        <ul>
          <li>Functional programming</li>
          <li>Computational notebooks &amp; literate programming</li>
          <li><a href="https://en.wikipedia.org/wiki/Programming_language_theory">PLT</a></li>
          <li><a href="https://en.wikipedia.org/wiki/Interface_description_language">IDL</a>s &amp; wire protocols</li>
          <li><a href="https://www.gwern.net/docs/technology/2004-03-30-shirky-situatedsoftware.html">Situated
              software</a> / <a href="https://malleable.systems/catalog">malleable systems</a> / <a
              href="https://www.inkandswitch.com/end-user-programming/">end-user programming </a> / <a
              href="https://thehtml.review/about">HTML</a> / <a
              href="https://arbesman.net/computationaldelights/"><i>Old
                Web</i></a></li>
          <li>CS pedagogy</li>
          <li>Color theory</li>
          <li>Urban planning &amp; economics</li>
          <li>Classical guitar</li>
          <li>Badminton</li>
          <li>Board games</li>
          <li>Sim racing / rally</li>
        </ul>
      </section>
      <section>
        <h2>
          <a id="employment" href="#employment">#</a>Employment
        </h2>
        <dl>
          <dt>
            <img class="favicon" src="img/canva.ico" />
            <a href="https://www.canva.com/about/">Canva</a>
          </dt>
          <dd class="title">Senior Software Engineer</dd>
          <dd class="time">March 2024 - Present</dd>
          <dd class="title">Software Engineer</dd>
          <dd class="time">March 2022 - February 2024</dd>
          <dt>
            <img class="favicon" src="img/google.ico" />
            <a href="https://about.google/">Google</a>
          </dt>
          <dd class="title">Software Engineer</dd>
          <dd class="time">January 2020 - February 2022</dd>
          <dt>
            <img class="favicon" src="img/atlassian.ico" />
            <a href="https://www.atlassian.com/company">Atlassian</a>
          </dt>
          <dd class="title">Intern Software Engineer</dd>
          <dd class="time">November 2018 - December 2019</dd>
          <dt>
            <img class="favicon" src="img/skedulo.ico" />
            <a href="https://www.skedulo.com/about-us/">Skedulo</a>
          </dt>
          <dd class="title">Intern Software Engineer</dd>
          <dd class="time">January 2017 - November 2018</dd>
        </dl>
      </section>
      <section>
        <h2>
          <a id="education" href="#education">#</a>Education
        </h2>
        <dl>
          <dt>
            <img class="favicon" src="img/uq.ico" />
            <a href="https://about.uq.edu.au/university-profile">University of Queensland</a>
          </dt>
          <dd class="title">BSc Computer Science Extended Major</dd>
          <dd class="time">July 2015 - July 2019</dd>
        </dl>
      </section>
    </div>
    <!-- <p style="padding: 2px">
      Fonts from <a href="https://typotheque.genderfluid.space/">Typothèque Bye Bye Binary</a>. Inspiration from <a
        href="https://s-i-l-o.fr/">SILO</a> & <a href="https://solar.lowtechmagazine.com/">LOW←TECH MAGAZINE</a>. Some
      graphics are <a href="https://observablehq.com/plot/">Observable Plot</a>. Weather data from <a
        href="https://open-meteo.com/">Open-Meteo</a>.
    </p> -->
    <section>
      <marquee id="feed" scrollamount="9">
        <a href="https://letterboxd.com/mbo_/rss/">⚛</a> <a href="https://letterboxd.com/mbo_">letterboxd.com/mbo_</a>
        ඞ
      </marquee>
      <script type="module">
        renderRss('https://mbo-letterboxdrss.web.val.run', 'feed', (title) => {
          const [name, stars] = title.split(" - ");
          return stars + " - " + name;
        });

      </script>
    </section>

    <section>
      <marquee id="arenaFeed" scrollamount="7">
        <a href="https://www.are.na/max-bo/feed/rss">⚛</a> <a href="https://www.are.na/max-bo">are.na/max-bo</a>
        ඞ
      </marquee>
      <script type="module">
        renderRss('https://mbo-arenarss.web.val.run', 'arenaFeed',
          (title) => title || "Untitled"
        );
      </script>
    </section>

    <section>
      <marquee id="rymFeed" scrollamount="8">
        <a href="https://rateyourmusic.com/~mbo/data/rss">⚛</a> <a
          href="https://rateyourmusic.com/~mbo">rateyourmusic.com/~mbo</a>
        ඞ
      </marquee>
      <script type="module">
        renderRss('rym.xml', 'rymFeed');
      </script>
    </section>
  </main>
  <footer>
    <a href="old.html">← old site</a> © 2024

    <div id="battery" style="min-width: 50px;"></div>
    <svg id="mouseWidget" viewBox="0 0 100 100" style="max-height: 50px; border: 1px solid black;">
      <rect id="screen" x="0" y="0" width="100" height="100" fill="white" stroke="black" />
      <circle id="cursor" cx="50" cy="50" r="4" fill="#FF00FF" />
    </svg>
    <img src="img/graphic-recycle.svg" />
    <img src="img/graphic-checker.svg" />
    <img src="img/ati.png" style="max-height: 32px;" />
    <!-- <span id="userAgent"></span> -->
    DO NOT EXPOSE TO WATER

    <div class="ticker-outer">
      <div class="ticker-inner">
        <span>PLEASE</span>
        <span>PLEASE</span>
      </div>
    </div>

    <div><span id="size"></span> transferred</div>


    <script>
      window.addEventListener('load', () => {
        // const resources = performance.getEntriesByType('resource');
        const resources = performance.getEntries();
        let totalSize = 0;

        resources.forEach(resource => {
          totalSize += resource.transferSize || 0;
        });

        const size = document.getElementById('size');
        size.innerText = `${formatBytes(totalSize)}`;
      });

      function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
      }

    </script>

    <span id="language"></span>
    <!-- <div>
      <p><span id="mousex"></span></p>
      <p><span id="mousey"></span></p>
    </div> -->
    <script>
      function updateWidget() {
        const svg = document.getElementById('mouseWidget');
        const rect = document.getElementById('screen');
        const aspectRatio = window.innerWidth / window.innerHeight;
        svg.setAttribute('viewBox', `0 0 ${100 * aspectRatio} 100`);
        rect.setAttribute('width', 100 * aspectRatio);
        rect.setAttribute('height', 100);
      }

      function updateDotPosition(event) {
        const dot = document.getElementById('cursor');
        const x = (event.clientX / window.innerWidth) * 100;
        const y = (event.clientY / window.innerHeight) * 100;
        dot.setAttribute('cx', x * window.innerWidth / window.innerHeight);
        dot.setAttribute('cy', y);
      }

      function updateMousePosition(event) {
        document.getElementById('mousex').textContent = "x: " + event.clientX;
        document.getElementById('mousey').textContent = "y:" + event.clientY;
      }

      window.addEventListener('resize', updateWidget);
      document.addEventListener('mousemove', updateDotPosition);
      // document.addEventListener('mousemove', updateMousePosition);

      updateWidget();
    </script>


    <script type="module">
      import * as Plot from 'https://esm.run/@observablehq/plot'

      navigator.getBattery().then((battery) => {
        function updateBatteryInfo() {
          const level = battery.level;
          const charging = battery.charging;

          const plot = Plot.plot({
            marks: [
              Plot.frame(),
              Plot.barX([{ level }], {
                fill: (d) => (d.level < 0.2 ? "red" : charging ? "green" : "black"),
                x: "level"
              }),
              Plot.text([{ text: charging ? "→" : "←", level }], {
                text: "text",
                x: "level",
                dx: -6,
                fontSize: 10,
                fill: "white"
              }),
              Plot.text([{ text: `${Math.round(level * 100)}` }], {
                text: "text",
                x: 0,
                dx: 8,
                fontSize: 10,
                fill: "white"
              }),
            ],
            width: 75,
            height: 25,

            x: {
              axis: null,
              domain: [0, 1]
            },
            y: {
              axis: null
            }
          })

          document.getElementById('battery').replaceChildren(plot);
        }

        battery.addEventListener('chargingchange', updateBatteryInfo);
        battery.addEventListener('levelchange', updateBatteryInfo);
        // battery.addEventListener('chargingtimechange', updateBatteryInfo);
        // battery.addEventListener('dischargingtimechange', updateBatteryInfo);

        updateBatteryInfo();
      });
    </script>

    <script>
      // document.getElementById('userAgent').textContent = navigator.userAgent;
      // document.getElementById('language').textContent = navigator.language;

      // document.getElementById('onLine').textContent = navigator.onLine ? 'Online' : 'Offline';
      // document.getElementById('hardwareConcurrency').textContent = navigator.hardwareConcurrency;
      // document.getElementById('deviceMemory').textContent = navigator.deviceMemory;
      // navigator.storage.estimate().then(function (estimate) {
      //   document.getElementById('storageEstimate').textContent = estimate.usage + ' / ' + estimate.quota;
      // });
      // document.getElementById('maxTouchPoints').textContent = navigator.maxTouchPoints;
      // document.getElementById('cookieEnabled').textContent = navigator.cookieEnabled;
      // document.getElementById('doNotTrack').textContent = navigator.doNotTrack;
      // document.getElementById('webDriver').textContent = navigator.webdriver;
    </script>
  </footer>
  <script>
    document.querySelectorAll('a').forEach(a => {
      a.addEventListener('mouseover', (e) => {
        const href = e.target.href || e.target.parentElement.href

        if (!href) {
          return;
        }

        const a = document.createElement('a');
        a.href = href
        a.textContent = href;
        a.id = 'hover-a';
        document.body.appendChild(a);
      });

      a.addEventListener('mouseout', () => {
        const a = document.getElementById('hover-a');
        if (a) {
          a.remove();
        }
      });
    })

    document.querySelectorAll('img').forEach(img => {
      // ignore the draggable-postit
      if (img.id === 'draggable-postit') {
        return;
      }

      img.addEventListener('mouseover', (e) => {
        const img = document.createElement('img');
        img.src = e.target.src;
        img.id = 'hover-img';
        document.body.appendChild(img);
      });

      img.addEventListener('mouseout', () => {
        const img = document.getElementById('hover-img');
        if (img) {
          img.remove();
        }
      });
    });
  </script>

  <link rel="stylesheet" href="scrollbuddy/style.css">
  <div id="scrollBuddy">
    <div class="head"></div>
    <div class="body"></div>
    <div class="left-arm" style="transform: rotate(90deg);"></div>
    <div class="left-arm-lower" style="transform: translate(6.12323e-16px, 10px) rotate(92.8284deg);"></div>
    <div class="right-arm" style="transform: rotate(90deg);"></div>
    <div class="right-arm-lower" style="transform: translate(6.12323e-16px, 10px) rotate(87.1716deg);"></div>
    <div class="left-leg-upper" style="transform: rotate(90deg);"></div>
    <div class="left-leg-lower" style="transform: translate(7.34788e-16px, 12px) rotate(75.8579deg);"></div>
    <div class="left-foot" style="transform: translate(2.44328px, 21.6969px) rotate(180deg);"></div>
    <div class="right-leg-upper" style="transform: rotate(90deg);"></div>
    <div class="right-leg-lower" style="transform: translate(7.34788e-16px, 12px) rotate(104.142deg);"></div>
    <div class="right-foot" style="transform: translate(-2.44328px, 21.6969px) rotate(180deg);"></div>
  </div>
  <script src="scrollbuddy/script.js"></script>


</body>

</html>