384 lines
12 KiB
PHP
384 lines
12 KiB
PHP
<!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> </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>
|
|
</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> </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> </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> </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> </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> </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> </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> </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> </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> </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>
|