kris
/
Kvos.dev


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<html lang="en">

<head>
	<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">git.kvos.dev</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>
		<div class="block">
			<h2>Portfolio</h2>
			<div class="portfolio-section">
				<input type="text" placeholder="Portfolio code" id="portfolio-code" />
				<button>Enter</button>
			</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>