<?php
declare(strict_types=1);
date_default_timezone_set('Europe/Berlin');
$localTime = date('H:i');
$utcOffset = date('P');
$year = date('Y');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home · vextoly</title>
<meta name="description" content="Personal homepage of Niklas, also known as vextoly.">
<meta property="og:type" content="profile">
<meta property="og:site_name" content="vextoly">
<meta property="og:title" content="vextoly · Niklas">
<meta property="og:description" content="Personal homepage of Niklas, also known as vextoly.">
<meta property="og:url" content="https://vextoly.lgbt.sh/">
<meta name="twitter:card" content="summary">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Niklas",
"alternateName": "vextoly",
"email": "mailto:[email protected]",
"url": "https://vextoly.lgbt.sh/",
"sameAs": [
"https://git.disroot.org/Vextoly",
"https://www.youtube.com/@Vextoly",
"https://twitch.tv/vextoly",
"https://tiktok.com/@vextoly",
]
}
</script>
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#000000">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='32'%20r='29'%20fill='%23000'%20stroke='%23fff'%20stroke-width='6'/%3E%3Ccircle%20cx='32'%20cy='19'%20r='5'%20fill='%23fff'/%3E%3Crect%20x='27'%20y='29'%20width='10'%20height='26'%20rx='5'%20fill='%23fff'/%3E%3C/svg%3E">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div class="pride" aria-hidden="true"></div>
<header class="site-header">
<div class="wrap">
<a class="wordmark" href="/">vextoly</a>
</div>
</header>
<main class="wrap">
<h1>Niklas</h1>
<p class="meta">/ˈnɪk.las/ · it/its</p>
<p class="lede">Be kind pls, the world is loud enough already.</p>
<!-- <p class="about">suff</p> -->
<p class="time">It's <button type="button" class="clock" aria-pressed="false"><?php echo $localTime; ?></button> where I am (UTC<?php echo $utcOffset; ?>).</p>
<h2>Elsewhere</h2>
<nav class="chips" aria-label="Elsewhere">
<a href="https://git.disroot.org/Vextoly"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M13.09 23.549a1.54 1.54 0 0 1-2.18 0L.451 13.089a1.54 1.54 0 0 1 0-2.179l7.191-7.19 2.733 2.733a1.85 1.85 0 0 0 .964 2.326v6.66a1.849 1.849 0 1 0 1.54 0V8.957l2.508 2.508a1.85 1.85 0 1 0 1.09-1.09l-2.634-2.634a1.85 1.85 0 0 0-2.378-2.377L8.73 2.63 10.91.451a1.54 1.54 0 0 1 2.179 0l10.459 10.46a1.54 1.54 0 0 1 0 2.179z"/></svg>Projects</a>
<a href="https://vextoly.lgbt.sh/cryn/"><svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0"/></svg>The Cryn Language</a>
<a href="mailto:[email protected]"><svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg>[email protected]</a>
<a href="https://www.youtube.com/@Vextoly"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>YouTube</a>
<a href="https://twitch.tv/vextoly"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>Twitch</a>
<a href="https://tiktok.com/@vextoly"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>TikTok</a>
</nav>
</main>
<footer class="colophon">
<div class="wrap footer-inner">
<p>© <?php echo $year; ?> vextoly</p>
<p><a href="/privacy.php">privacy</a></p>
</div>
</footer>
<script>
(function () {
var clock = document.querySelector('.clock');
if (!clock || !window.Intl) return;
var use12 = false;
var fmt24 = new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
var fmt12 = new Intl.DateTimeFormat('en-US', { timeZone: 'Europe/Berlin', hour: '2-digit', minute: '2-digit', hour12: true });
function render() {
clock.textContent = (use12 ? fmt12 : fmt24).format(new Date());
}
clock.addEventListener('click', function () {
use12 = !use12;
clock.setAttribute('aria-pressed', String(use12));
render();
});
render();
setInterval(render, 1000);
})();
</script>
</body>
</html>