kris
/
Kvos.dev


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<html lang="en">

<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kvos.dev - Homepage</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
</head>

<body>
	<header>
		<h1>Kristian Vos</h1>
		<h2>kvos.dev</h2>
	</header>
	<main>
		<div class="block">
			<h2>Contact me</h2>
			<div class="contact-section">
				<p>
					<span class="mdi mdi-chat"></span>
					<span>Matrix </span>
					<a href="matrix:u/@kris:kvos.dev">@kris:kvos.dev</a>
				</p>
				<p>
					<span class="mdi mdi-email"></span>
					<span>Email </span>
					<button onclick="reveal()" id="reveal-button">Reveal</button>
				</p>
			</div>
		</div>
		<div class="block">
			<h2>Links</h2>
			<div class="links-section">
				<p>
					<span class="mdi mdi-git"></span>
					<span>Git </span>
					<a href="https://git.kvos.dev/kris">git.kvos.dev/kris</a>
				</p>
				<p>
					<span class="mdi mdi-github"></span>
					<span>GitHub </span>
					<a href="https://github.com/KrisVos130">github.com/KrisVos130</a>
				</p>
			</div>
		</div>
	</main>
	<script>
		const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@.+".split("");
		const encodedEmail = "YM926LY926MRS9";
		const shift = string => {
			return string
				.split("")
				.map(character => chars[
					(
						chars.indexOf(character) !== -1 &&
						chars.indexOf(character) + 1 < chars.length
					)
						? chars.indexOf(character) + 1
						: 0
				])
				.join("");
		}

		const reveal = () => {
			const revealButton = document.getElementById("reveal-button");
			const anchor = document.createElement("a");
			const span = document.createElement("span");

			let decodedEmail = encodedEmail;
			revealButton.insertAdjacentElement("afterEnd", span);
			revealButton.remove();

			let index = 0;
			const interval = setInterval(() => {
				index++;

				decodedEmail = shift(decodedEmail);
				span.textContent = decodedEmail;

				if (index === 25) {
					anchor.href = `mailto:${decodedEmail}`;
					anchor.text = decodedEmail;
					span.replaceWith(anchor);

					clearInterval(interval);
				}
			}, 5);
		}
	</script>
</body>

</html>