<!--
 _______   ________  __    __  __    __   ______
/       \ /        |/  \  /  |/  \  /  | /      \
$$$$$$$  |$$$$$$$$/ $$  \ $$ |$$  \ $$ |/$$$$$$  |
$$ |__$$ |$$ |__    $$$  \$$ |$$$  \$$ |$$ |  $$ |
$$    $$< $$    |   $$$$  $$ |$$$$  $$ |$$ |  $$ |
$$$$$$$  |$$$$$/    $$ $$ $$ |$$ $$ $$ |$$ |  $$ |
$$ |__$$ |$$ |_____ $$ |$$$$ |$$ |$$$$ |$$ \__$$ |
$$    $$/ $$       |$$ | $$$ |$$ | $$$ |$$    $$/
$$$$$$$/  $$$$$$$$/ $$/   $$/ $$/   $$/  $$$$$$/
 ________  ______  ________  __        ________  __    __
/        |/      |/        |/  |      /        |/  \  /  |
$$$$$$$$/ $$$$$$/ $$$$$$$$/ $$ |      $$$$$$$$/ $$  \ $$ |
   $$ |     $$ |  $$ |__    $$ |      $$ |__    $$$  \$$ |
   $$ |     $$ |  $$    |   $$ |      $$    |   $$$$  $$ |
   $$ |     $$ |  $$$$$/    $$ |      $$$$$/    $$ $$ $$ |
   $$ |    _$$ |_ $$ |_____ $$ |_____ $$ |_____ $$ |$$$$ |
   $$ |   / $$   |$$       |$$       |$$       |$$ | $$$ |
   $$/    $$$$$$/ $$$$$$$$/ $$$$$$$$/ $$$$$$$$/ $$/   $$/


 ________  __    __  __        __           ______   ________  ______    ______   __    __
/        |/  |  /  |/  |      /  |         /      \ /        |/      \  /      \ /  |  /  |
$$$$$$$$/ $$ |  $$ |$$ |      $$ |        /$$$$$$  |$$$$$$$$//$$$$$$  |/$$$$$$  |$$ | /$$/
$$ |__    $$ |  $$ |$$ |      $$ | ______ $$ \__$$/    $$ |  $$ |__$$ |$$ |  $$/ $$ |/$$/
$$    |   $$ |  $$ |$$ |      $$ |/      |$$      \    $$ |  $$    $$ |$$ |      $$  $$<
$$$$$/    $$ |  $$ |$$ |      $$ |$$$$$$/  $$$$$$  |   $$ |  $$$$$$$$ |$$ |   __ $$$$$  \
$$ |      $$ \__$$ |$$ |_____ $$ |_____   /  \__$$ |   $$ |  $$ |  $$ |$$ \__/  |$$ |$$  \
$$ |      $$    $$/ $$       |$$       |  $$    $$/    $$ |  $$ |  $$ |$$    $$/ $$ | $$  |
$$/        $$$$$$/  $$$$$$$$/ $$$$$$$$/    $$$$$$/     $$/   $$/   $$/  $$$$$$/  $$/   $$/
 __       __  ________  _______
/  |  _  /  |/        |/       \
$$ | / \ $$ |$$$$$$$$/ $$$$$$$  |
$$ |/$  \$$ |$$ |__    $$ |__$$ |
$$ /$$$  $$ |$$    |   $$    $$<
$$ $$/$$ $$ |$$$$$/    $$$$$$$  |
$$$$/  $$$$ |$$ |_____ $$ |__$$ |
$$$/    $$$ |$$       |$$    $$/
$$/      $$/ $$$$$$$$/ $$$$$$$/
 _______   ________  __     __  ________  __         ______   _______   ________  _______
/       \ /        |/  |   /  |/        |/  |       /      \ /       \ /        |/       \
$$$$$$$  |$$$$$$$$/ $$ |   $$ |$$$$$$$$/ $$ |      /$$$$$$  |$$$$$$$  |$$$$$$$$/ $$$$$$$  |
$$ |  $$ |$$ |__    $$ |   $$ |$$ |__    $$ |      $$ |  $$ |$$ |__$$ |$$ |__    $$ |__$$ |
$$ |  $$ |$$    |   $$  \ /$$/ $$    |   $$ |      $$ |  $$ |$$    $$/ $$    |   $$    $$<
$$ |  $$ |$$$$$/     $$  /$$/  $$$$$/    $$ |      $$ |  $$ |$$$$$$$/  $$$$$/    $$$$$$$  |
$$ |__$$ |$$ |_____   $$ $$/   $$ |_____ $$ |_____ $$ \__$$ |$$ |      $$ |_____ $$ |  $$ |
$$    $$/ $$       |   $$$/    $$       |$$       |$$    $$/ $$ |      $$       |$$ |  $$ |
$$$$$$$/  $$$$$$$$/     $/     $$$$$$$$/ $$$$$$$$/  $$$$$$/  $$/       $$$$$$$$/ $$/   $$/


                     /\     /\
                    {  `---'  }
                    {  O   O  }
                    ~~>  V  <~~
                     \  \|/  /
                      `-----'____
                      /     \    \_
                     {       }\  )_\_   _
                     |  \_/  |/ /  \_\_/ )
                      \__/  /(_/     \__/
                        (__/


    _____  __    __   ______   ________
   /     |/  |  /  | /      \ /        |
   $$$$$ |$$ |  $$ |/$$$$$$  |$$$$$$$$/
      $$ |$$ |  $$ |$$ \__$$/    $$ |
 __   $$ |$$ |  $$ |$$      \    $$ |
/  |  $$ |$$ |  $$ | $$$$$$  |   $$ |
$$ \__$$ |$$ \__$$ |/  \__$$ |   $$ |
$$    $$/ $$    $$/ $$    $$/    $$ |
 $$$$$$/   $$$$$$/   $$$$$$/     $$/
  ______    ______   __    __  ________  ______    ______   ________
 /      \  /      \ /  \  /  |/        |/      \  /      \ /        |
/$$$$$$  |/$$$$$$  |$$  \ $$ |$$$$$$$$//$$$$$$  |/$$$$$$  |$$$$$$$$/
$$ |  $$/ $$ |  $$ |$$$  \$$ |   $$ |  $$ |__$$ |$$ |  $$/    $$ |
$$ |      $$ |  $$ |$$$$  $$ |   $$ |  $$    $$ |$$ |         $$ |
$$ |   __ $$ |  $$ |$$ $$ $$ |   $$ |  $$$$$$$$ |$$ |   __    $$ |
$$ \__/  |$$ \__$$ |$$ |$$$$ |   $$ |  $$ |  $$ |$$ \__/  |   $$ |
$$    $$/ $$    $$/ $$ | $$$ |   $$ |  $$ |  $$ |$$    $$/    $$ |
 $$$$$$/   $$$$$$/  $$/   $$/    $$/   $$/   $$/  $$$$$$/     $$/
 __       __  ________
/  \     /  |/        |
$$  \   /$$ |$$$$$$$$/
$$$  \ /$$$ |$$ |__
$$$$  /$$$$ |$$    |
$$ $$ $$/$$ |$$$$$/
$$ |$$$/ $$ |$$ |_____
$$ | $/  $$ |$$       |
$$/      $$/ $$$$$$$$/


      .*"*. .*"*.
      *    *    *
      `*.     .*'
         *. .*
           *


    Benno@tielen.nl


-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Benno Tielen: Full-stack web developer</title>
    <link rel="stylesheet" href="https://use.typekit.net/agz5waj.css">
    <link id="style-sheet" rel="stylesheet" href="style.css">

    <script type="application/javascript">


      /*  °º¤ø,¸¸,ø¤º°`°º¤ø¸ LOVE OLD SCHOOL JAVASCRIPT ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ */
        // Toggle style sheet
        const styleSheet = document.getElementById("style-sheet");
        function toggle_stylesheet() {
          styleSheet.disabled = !styleSheet.disabled;

          if(styleSheet.disabled) {
            document.head.removeChild(styleSheet);
          } else {
            document.head.appendChild(styleSheet);
          }
        }

      /*
     You know, this old school javascript, without the use of
     extensive frameworks or binary webassembly brings back
     memories. Early '00 I wrote one of my first websites, it
     contained horrible animated gifs, that were supposed to be
     cool, and also a button labeled with "Don't click here".
     When you pressed that button it would
     fire off hundreds of alerts. The only escape was clicking
     hundreds of times OK or use CTRL+ALT+DEL. Some systems
     would even crash.
     */
    </script>
</head>
<body>
<div>
    <div class="emoji-menu-container">
        <div class="emoji-menu">
            🤓 ❤️ ⌨️<!-- I think it's so cool that UTF-8 contains emoji's these days -->
        </div>
    </div>
    <div class="pitch-text">
        <span class="dark-grey">Hi!</span>
        I'm a <span class="grey">full-stack</span> developer,
        <span class="xl-underline">passionate</span> about
        the <span class="contrasting">web</span>
        since <span class="contrasting clickable" onclick="toggle_stylesheet()">2000</span>, who
        prefers coffee to virtual meetings
        <span class="dark-grey">.</span>
    </div>
</div>

<a href="https://www.github.com/btielen" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
</body>
</html>