<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="/assets/logo.ico" type="image/x-icon">
    
    <script src="https://kit.fontawesome.com/d335d28046.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta property="og:title" content="SiskelDev's Linktree">
    <meta property="og:description" content="See what i do, on what platform.">
    <meta property="og:image" content="https://siskel.dev/assets/img/profile-pic-transparent.png">
    <meta property="og:url" content="https://siskel.dev/">
    <meta property="og:site_name" content="Siskel.Dev">
    <meta property="og:type" content="website" />

    <!-- Twitter Meta Data -->
    <meta name="twitter:title" content="SiskelDev's Linktree">
    <meta name="twitter:description" content="See what i do, on what platform.">
    <meta name="twitter:image" content="https://siskel.dev/assets/img/profile-pic-transparent.png">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@siskeldev">
    <meta name="twitter:creator" content="@siskeldev" />

    <!-- Discord Meta Data -->
    <meta name="theme-color" content="#4c566a">

    <title>SiskelDev's Linktree</title>

    <meta name="robots" content="index, nofollow">

    <meta name="description" content="See what i do, on what platform.">
    <meta name="keywords" content="SiskelDev siskel">
    <meta name="author" content="© SiskelDev 2023">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

        *,
        *::before,
        ::after {
            padding: 0;
            margin: 0;
        }

        * {
            transition: 0.2s;
        }

        html {
            font-size: 100%;
            box-sizing: border-box;
            scroll-behavior: smooth;
            /*background: linear-gradient(-150deg, rgb(118, 205, 231) 0%, rgb(112, 112, 240) 100%);*/
        }

        body {
            font-size: 0.94rem;
            font-family: Poppins, Noto Sans, sans-serif;
            text-align: center;
            line-height: 1.5;
            background: #2e3440;
            color: lightgrey;
        }

        main {
            padding: 12vh 0;
        }

        img[alt="Linktree photo"] {
        --scale: 190px;
            width: var(--scale);
            height: var(--scale);
            border-radius: 24px;
        }

        img[alt="Linktree photo"] + h3 {
            margin: 16px 0 0px;
        }

        .linktree-nav {
            margin: 40px auto 0;
            width: 95%;
            max-width: 700px;
        }

        .linktree-nav ul {
            display: grid;
            gap: 1rem;
            list-style: none;
        }

        #notmine {
            display: grid;
            gap: 1rem;
            list-style: none;
            grid-template-columns: repeat(1, 1fr) !important;
        }

        .linktree-nav a {
            text-decoration: none;
            color: inherit;
        }

        .linktree-nav li:hover {
            box-shadow: 0px 0px 10px #606a81;
        }

        .linktree-nav li:hover .icon-box {
            font-size: 2rem;
        }

        .linktree-nav li {
            border-radius: 8px;
        }

        .linktree-box {
            display: flex;
            align-items: center;
            text-align: start;
            padding: 12px 12px;
            /*border: 1px solid #ebebeb;*/
            border-radius: 8px;
            background: #4c566a;
        }

        .linktree-box .icon-box {
            --scale: 56px;
            width: var(--scale);
            height: var(--scale);
            font-size: 1.75rem;
            background: hsl(var(--color), 30%);
            color: hsl(var(--color));
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin-right: 16px;
        }

        .linktree-box .icon-box:hover {
          font-size: 2rem;
        }

        header {
            color: lightgrey;
        }

        @media (min-width: 600px) {
            .linktree-nav ul {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
<main>
  <header>
    <img src="/assets/img/profile-pic-transparent.png"" alt="Linktree photo" />
    <h3>SiskelDev</h3>
    <span>Virtual Content Creator and Back-/Frontend Developer</span>
  </header>
  <nav class="linktree-nav">
    <ul id="notmine">
      <li>
        <a href="https://shop.siskel.dev">
          <div class="linktree-box" style="--color: 128, 100%, 70%">
            <div class="icon-box"><i class="fa-solid fa-basket-shopping"></i></div>
            <div>
              <h5>Merch-Shop</h5>
              <span>Buy my Merch</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <br>
    <ul>
      <li>
        <a href="https://twitch.tv/siskeldev">
          <div class="linktree-box" style="--color: 269, 100%, 70%">
            <div class="icon-box"><i class="fa-brands fa-twitch"></i></div>
            <div>
              <h5>Twitch</h5>
              <span>See me Live<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://twitter.com/siskeldev">
          <div class="linktree-box">
            <div class="icon-box" style="--color: 0, 100%, 70%"><i class="fa-brands fa-twitter"></i></div>
            <div>
              <h5>Twitter</h5>
              <span>Connect with me<br>&nbsp;
              </span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://siskel.dev/discord">
          <div class="linktree-box">
            <div class="icon-box" style="--color: 594, 100%, 70%"><i class="fa-brands fa-discord"></i></div>
            <div>
              <h5>Discord</h5>
              <span>Get on my Discord-Server (German)</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://soundcloud.com/siskeldev">
          <div class="linktree-box">
            <div class="icon-box" style="--color: 35, 100%, 70%"><i class="fa-brands fa-soundcloud"></i></div>
            <div>
              <h5>Soundcloud</h5>
              <span>See my silly Music.<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://bsky.app/profile/siskel.dev">
          <div class="linktree-box">
            <div class="icon-box" style="--color: 200, 100%, 70%"><i class="fa-solid fa-cloud"></i></div>
            <div>
              <h5>Bluesky</h5>
              <span>See what I do<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://siskeldev.gumroad.com">
          <div class="linktree-box" style="--color: 378, 100%, 70%">
            <div class="icon-box"><i class="fa-solid fa-g"></i></div>
            <div>
              <h5>Gumroad</h5>
              <span>See or Buy my Creations<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://ko-fi.com/siskeldev">
          <div class="linktree-box" style="--color: 110, 100%, 70%">
            <div class="icon-box"><i class="fa-solid fa-mug-hot"></i></div>
            <div>
              <h5>KoFi</h5>
              <span>Buy me a Coffee<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://www.patreon.com/SiskelDev">
          <div class="linktree-box" style="--color: 350, 100%, 70%">
            <div class="icon-box"><i class="fa-brands fa-patreon"></i></div>
            <div>
              <h5>Patreon</h5>
              <span>Support my Work (if i have any)<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://vrchat.com/home/user/usr_2e4f4b25-e01f-44e9-9399-79b9d6f3c24c">
          <div class="linktree-box" style="--color: 186, 0%, 70%">
            <div class="icon-box"><i class="fa-solid fa-vr-cardboard"></i></div>
            <div>
              <h5>VRChat</h5>
              <span>Find me Online in VR<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://tiktok.com/@siskeldev">
          <div class="linktree-box" style="--color: 200, 100%, 70%">
            <div class="icon-box"><i class="fa-brands fa-tiktok"></i></div>
            <div>
              <h5>TikTok</h5>
              <span>See my TikTok's<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <br>
    <!--ul id="notmine">
      <li>
        <a href="https://vrchat.com/home/user/usr_2e4f4b25-e01f-44e9-9399-79b9d6f3c24c">
          <div class="linktree-box" style="--color: 186, 0%, 70%">
            <div class="icon-box"><i class="fa-solid fa-vr-cardboard"></i></div>
            <div>
              <h5>VRChat</h5>
              <span>Find me Online in VR<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
    </ul-->
    <br>
    <br>
    <ul>
      <li>
        <a href="https://www.youtube.com/channel/UC096YSkDSUClsl4kDaPIvNw">
          <div class="linktree-box" style="--color: 0, 100%, 70%">
            <div class="icon-box"><i class="fa-brands fa-youtube"></i></div>
            <div>
              <h5>Youtube Main Channel</h5>
              <span>Here is nothing... So here is my Clips Channel</span>
            </div>
          </div>
        </a>
      </li>
      <li>
        <a href="https://www.youtube.com/@SiskelDev-VODs">
          <div class="linktree-box" style="--color: 0, 100%, 70%">
            <div class="icon-box"><i class="fa-solid fa-clock-rotate-left"></i></div>
            <div>
              <h5>Youtube-VODs</h5>
              <span>See my VODs here<br>&nbsp;</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <br>
    <ul id="notmine">
      <li>
        <a href="https://www.youtube.com/@SiskelDev-Clips">
          <div class="linktree-box" style="--color: 0, 100%, 70%">
            <div class="icon-box"><i class="fa-solid fa-clapperboard"></i></div>
            <div>
              <h5>Youtube-Clips</h5>
              <span>See my Twitch-Clips here</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <br>
    <br>
    <ul id="notmine">
      <li>
        <a href="https://furatalog.xyz">
          <div class="linktree-box" style="--color: 186, 100%, 100%">
            <div class="icon-box"><i class="fa-solid fa-basket-shopping"></i></div>
            <div>
              <h5>Furatalog</h5>
              <span>See my VR-Asset catalog</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <br>
    <br>
    <ul id="notmine">
      <li>
        <a href="https://discord.gg/9AvCC8wksJ">
          <div class="linktree-box" style="--color: 594, 100%, 70%">
            <div class="icon-box"><i class="fa-brands fa-discord"></i></div>
            <div>
              <h5>Furry Fur Fur - Discord Server</h5>
              <span>Join my NEW Community - (English only)</span>
            </div>
          </div>
        </a>
      </li>
      <li style="height: 500px;">
        <iframe style="border-radius: 8px;" src="https://discord.com/widget?id=1364894253024546816&theme=dark" width="100%" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
      </li>
    </ul>
  </nav>
</main>
</body>
</html>
