 <script>
     let type = 'tech';
     let switchPortfolio = () => {
         type = (
             type === 'tech' ?
             'arts' : 'tech'
         );
     };
 </script> 
  <div width="100%" height="100%">
      <div id='center'>
        <button on:click={switchPortfolio}>switch to {type === 'tech' ? 'arts' : 'tech'} portfolio</button>
      <ul>
          {#if type === 'tech'}
          <li><h1><a href="https://github.com/janeptrv">github</a></h1></li>
          <li><h1><a href="https://gitlab.com/janeptrv">gitlab</a></h1></li>
          <li><h1><a href="https://gitdab.com/jane">gitdab</a></h1></li>
          <br/>
          <li><h1><a href='https://gitdab.com/jane/pinbot'>democratic discord pins bot</a></h1></li>
          <br/>
          <li><h1><a href='https://gitdab.com/jane/leds'>ws2812b pi controller</a></h1></li>
          <li><h1><a href='https://gitdab.com/jane/led-bot'>ws2812b discord bot interface</a></h1></li>
          <br/>
          <li><h1><a href='https://gitdab.com/jane/lastfm-wrapped'>last.fm statistics scraper</a></h1></li>
          <br/>
          <li><h1><a href='https://gitdab.com/makise'>public miscellaneous projects</a></h1></li>
          {/if}
          {#if type === 'arts'}
          <li><h1>tbd</h1></li>
          {/if}
      </ul>
    </div>
  </div>
  
  <style>
    h1 {
        font-size: 1.5em;
        color: #75004a;
    }
    a {
      color: #75004a;
    }
    li::marker {
      color: #753dad;
    }
    #center {
        position: absolute; 
        top: 50%; 
        left: 50%; 
        margin-top: -300px; 
        margin-left: -200px;
        width: 400px;
        height: 200px;
    }
    li {
        text-align: center;
        width: auto;
    }
    button {
        background-color: #201020;
        border: none;
        text-align: center;
        color: #fff;
        width: inherit;
    }
  </style>
  