<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-3GLM22RF0C"></script>
    <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-3GLM22RF0C");
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="canonical" href="https://joostschuur.com/">
    <meta name="generator" content="Astro v1.6.11">

    <!-- General Meta Tags -->
    <title>Joost Schuur</title>
    <meta name="title" content="Joost Schuur">
    <meta name="description" content="Another JavaScript developer">
    <meta name="author" content="Joost Schuur">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Joost Schuur">
    <meta property="og:description" content="Another JavaScript developer">
    <meta property="og:url" content="https://joostschuur.com/">
    <meta property="og:image" content="https://joostschuur.com/default-og.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://joostschuur.com/">
    <meta property="twitter:title" content="Joost Schuur">
    <meta property="twitter:description" content="Another JavaScript developer">
    <meta property="twitter:image" content="https://joostschuur.com/default-og.png">

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Anybody:wght@400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="alternate" type="application/rss+xml" title="Joost Schuur" href="/feed.xml">

    <script>
      const primaryColorScheme = "none"; // "light" | "dark" | "none"

      const darkModeMediaQuery = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches;

      // Get theme data from local storage
      const currentTheme = localStorage.getItem("theme");

      let theme;

      // Set theme to 'theme-dark' if currentTheme is 'dark'
      if (currentTheme) {
        theme = currentTheme === "dark" ? "theme-dark" : "";
      } else {
        // If primary color scheme is dark
        // or primary color scheme is not set and prefers-color-scheme is dark
        // choose dark mode
        if (
          primaryColorScheme === "dark" ||
          (primaryColorScheme === "none" && darkModeMediaQuery)
        ) {
          theme = "theme-dark";
        }
        // If primary color scheme is light
        // choose light mode
        else if (primaryColorScheme === "light") {
          theme = "";
        }
        // fallback to prefers-color-scheme
        else {
          theme = darkModeMediaQuery ? "theme-dark" : "";
        }
      }

      // Put dark class on html tag to enable dark mode
      document.querySelector("html").className = theme;
    </script>
  <link rel="stylesheet" href="/assets/_slug_.646e74f0.css" />
<link rel="stylesheet" href="/assets/index.8961a497.css" /><script type="module">const l=document.querySelector("#theme-btn"),t=document.querySelector("html")?.classList;l?.addEventListener("click",function(){t?.contains("theme-dark")?(localStorage.setItem("theme","light"),t?.remove("theme-dark")):(localStorage.setItem("theme","dark"),t?.add("theme-dark"))});const c=document.querySelector(".hamburger-menu"),o=document.querySelector("nav")?.classList,e=document.querySelector(".icon-container")?.classList,n=document.querySelector("#first-line")?.classList,s=document.querySelector("#second-line ")?.classList,a=document.querySelector("#third-line")?.classList;c.addEventListener("click",function(){o?.contains("display-none")?(o?.remove("display-none"),e?.remove("flex"),e?.add("relative"),n?.add("rotate-45","absolute","bottom-1/2"),a?.add("display-none"),s?.add("!w-full","-rotate-45","absolute","bottom-1/2")):(o?.add("display-none"),e?.add("flex"),e?.remove("relative"),n?.remove("rotate-45","absolute","bottom-1/2"),a?.remove("display-none"),s?.remove("!w-full","-rotate-45","absolute","bottom-1/2"))});
</script>
<script>!(function(w,p,f,c){c=w[p]=Object.assign(w[p]||{},{"lib":"/~partytown/","debug":false});c[f]=(c[f]||[]).concat(["dataLayer.push"])})(window,'partytown','forward');/* Partytown 0.7.2 - MIT builder.io */
!function(t,e,n,i,r,o,a,d,s,c,p,l){function u(){l||(l=1,"/"==(a=(o.lib||"/~partytown/")+(o.debug?"debug/":""))[0]&&(s=e.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(w,1e4),e.addEventListener("pt0",f),r?h(1):n.serviceWorker?n.serviceWorker.register(a+(o.swPath||"partytown-sw.js"),{scope:a}).then((function(t){t.active?h():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&h()}))}),console.error):w())))}function h(t){c=e.createElement(t?"script":"iframe"),t||(c.setAttribute("style","display:block;width:0;height:0;border:0;visibility:hidden"),c.setAttribute("aria-hidden",!0)),c.src=a+"partytown-"+(t?"atomics.js?v=0.7.2":"sandbox-sw.html?"+Date.now()),e.body.appendChild(c)}function w(t,n){for(f(),t=0;t<s.length;t++)(n=e.createElement("script")).innerHTML=s[t].innerHTML,e.head.appendChild(n);c&&c.parentNode.removeChild(c)}function f(){clearTimeout(d)}o=t.partytown||{},i==t&&(o.forward||[]).map((function(e){p=t,e.split(".").map((function(e,n,i){p=p[i[n]]=n+1<i.length?"push"==i[n+1]?[]:p[i[n]]||{}:function(){(t._ptf=t._ptf||[]).push(i,arguments)}}))})),"complete"==e.readyState?u():(t.addEventListener("DOMContentLoaded",u),t.addEventListener("load",u))}(window,document,navigator,top,window.crossOriginIsolated);</script></head>
  <body>
    <header class="astro-LJR4WOAA">
  <a id="skip-to-content" href="#main-content" class="astro-LJR4WOAA">Skip to content</a>
  <div class="nav-container astro-LJR4WOAA">
    <div class="top-nav-wrap astro-LJR4WOAA">
      <a href="/" class="logo astro-LJR4WOAA">
        Joost Schuur
      </a>
      <button class="hamburger-menu astro-LJR4WOAA" aria-label="menu">
        <div class="icon-container flex astro-LJR4WOAA">
          <div id="first-line" class="astro-LJR4WOAA"></div>
          <div id="second-line" class="astro-LJR4WOAA"></div>
          <div id="third-line" class="astro-LJR4WOAA"></div>
        </div>
      </button>
    </div>
    <nav class="display-none sm:flex astro-LJR4WOAA">
      <ul class="astro-LJR4WOAA">
        <li class="astro-LJR4WOAA">
          <a href="/blog" class=" astro-LJR4WOAA">Blog</a>
        </li>
        <li class="astro-LJR4WOAA">
          <a href="/projects" class=" astro-LJR4WOAA">Projects</a>
        </li>
      </ul>
      <div class="button-wrapper astro-LJR4WOAA">
        <button id="theme-btn" class="focus-outline astro-LJR4WOAA" aria-label="switch theme">
              <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg" class="astro-LJR4WOAA">
                <path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" class="astro-LJR4WOAA"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" id="sun-svg" class="astro-LJR4WOAA">
                <path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" class="astro-LJR4WOAA"></path>
              </svg>
            </button>
      </div>
    </nav>
  </div>
</header>



<main id="main-content" class="astro-AGOKUETP">
    <section id="hero" class="astro-AGOKUETP">
      <h1 class="astro-AGOKUETP">Hi, I'm Joost</h1>

      <p class="astro-AGOKUETP">
        I'm a JavaScript developer and <a href="https://playmob.com" class="astro-AGOKUETP">Playmob</a>'s Technical Integration Manager, based in London. Passionate about
        content curation, technical workflow tooling and dashboards/admin
        panels.
      </p>
      <p class="astro-AGOKUETP">
        Current side projects include ways to <a href="https://streamers.dev" class="astro-AGOKUETP">discover dev streamers</a> and <a href="https://learnbyvideo.dev" class="astro-AGOKUETP">YouTube programming channels</a>.
      </p><div class="social-wrapper astro-AGOKUETP">
        <div class="social-links astro-AGOKUETP">Active Socials:</div>
        <div class="social-icons  astro-QFVOVS4Q">
  <a type="button" href="https://twitter.com/joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Twitter">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
    </svg>
</a>

<a type="button" href="https://mastodon.social/@joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Mastodon">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      viewBox="-10 -5 1034 1034"
    >
      <path fill="currentColor"
    d="M499 112q-93 1 -166 11q-81 11 -128 33l-14 8q-16 10 -32 25q-22 21 -38 47q-21 33 -32 73q-14 47 -14 103v37q0 77 1 119q3 113 18 188q19 95 62 154q50 67 134 89q109 29 210 24q46 -3 88 -12q30 -7 55 -17l19 -8l-4 -75l-22 6q-28 6 -57 10q-41 6 -78 4q-53 -1 -80 -7
    q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
    q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z" />
    </svg>
    
</a>

<a type="button" href="https://github.com/jschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Github">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon-tabler"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path
      d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
    ></path>
  </svg>
</a>

<a type="button" href="https://insatgram.com/joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Instagram">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon-tabler"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <rect x="4" y="4" width="16" height="16" rx="4"></rect>
    <circle cx="12" cy="12" r="3"></circle>
    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
  </svg>
</a>

<a type="button" href="mailto:jschuur@jschuur.com" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Mail">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <rect x="3" y="5" width="18" height="14" rx="2"></rect>
      <polyline points="3 7 12 13 21 7"></polyline>
    </svg>
</a>


</div>


      </div>
    </section>

    <section id="recent-posts" class="astro-AGOKUETP">
      <h2 class="astro-AGOKUETP">Occasional Blog Posts</h2>
      <ul class="astro-AGOKUETP">
        <li class="my-6"><a href="/elsewhere-on-social-media" class="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block"><h3 class="font-medium text-lg decoration-dashed hover:underline">Elsewhere on social media</h3></a><div class="opacity-80 flex items-center space-x-2 undefined"><svg xmlns="http://www.w3.org/2000/svg" class="scale-90 w-6 h-6 inline-block fill-skin-base"><path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path><path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path></svg><span class="italic text-sm">November 18, 2022 | 07:41 PM</span></div><p></p></li>
      </ul>
    </section>
  </main><footer class="mt-auto astro-KPNGQBAK">
  <div class="footer-wrapper astro-KPNGQBAK">
    <div class="social-icons flex astro-QFVOVS4Q">
  <a type="button" href="https://twitter.com/joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Twitter">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
    </svg>
</a>

<a type="button" href="https://mastodon.social/@joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Mastodon">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      viewBox="-10 -5 1034 1034"
    >
      <path fill="currentColor"
    d="M499 112q-93 1 -166 11q-81 11 -128 33l-14 8q-16 10 -32 25q-22 21 -38 47q-21 33 -32 73q-14 47 -14 103v37q0 77 1 119q3 113 18 188q19 95 62 154q50 67 134 89q109 29 210 24q46 -3 88 -12q30 -7 55 -17l19 -8l-4 -75l-22 6q-28 6 -57 10q-41 6 -78 4q-53 -1 -80 -7
    q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
    q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z" />
    </svg>
    
</a>

<a type="button" href="https://github.com/jschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Github">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon-tabler"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <path
      d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
    ></path>
  </svg>
</a>

<a type="button" href="https://insatgram.com/joostschuur" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Instagram">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon-tabler"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
    <rect x="4" y="4" width="16" height="16" rx="4"></rect>
    <circle cx="12" cy="12" r="3"></circle>
    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
  </svg>
</a>

<a type="button" href="mailto:jschuur@jschuur.com" class="group link-button astro-QFVOVS4Q astro-QCEBUJFW" title="Mail">
  <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon-tabler"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <rect x="3" y="5" width="18" height="14" rx="2"></rect>
      <polyline points="3 7 12 13 21 7"></polyline>
    </svg>
</a>


</div>


    <div class="builtwith-wrapper astro-KPNGQBAK">
      <span class="astro-KPNGQBAK">Built with <a href="https://astro.build" class="astro-KPNGQBAK">Astro</a> and <a href="https://astro-paper.pages.dev/" class="astro-KPNGQBAK">Astro Paper</a></span>
    </div>
  </div>
</footer>


  </body></html>

