Browse Source

refactor: Added name, links, Matrix, improved styling

Kristian Vos 2 years ago
parent
commit
a31ed03579
2 changed files with 188 additions and 79 deletions
  1. 97 59
      index.html
  2. 91 20
      style.css

+ 97 - 59
index.html

@@ -1,60 +1,98 @@
-<html lang="en">
-	<head>
-		<title>Kvos.dev - Homepage</title>
-		<link rel="stylesheet" href="style.css" type="text/css"/>
-	</head>
-	<body>
-		<div>
-			<h1>Kvos.dev</h1<br/>
-			<h3>Work in progress</h3>
-			<a href="https://git.kvos.dev">Git projects</a>
-			<p>
-				<span>Contact me:</span>
-				<button onclick="reveal()" id="reveal-button">Reveal</button>
-			</p>
-		</div>
-		<script>
-		const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@.+".split("");
-		const secret = "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 paragraph = document.createElement("p");
-			
-			let decrypted = secret;
-			revealButton.insertAdjacentElement("afterEnd", paragraph);
-			revealButton.remove();
-			
-			let index = 0;
-			const interval = setInterval(() => {
-				index++;
-				
-				decrypted = shift(decrypted);
-				paragraph.textContent = decrypted;
-				
-				if (index === 25) {
-					anchor.href = `mailto:${decrypted}`;
-					anchor.text = decrypted;
-					paragraph.replaceWith(anchor);
-				
-					clearInterval(interval);
-				}
-			}, 5);		
-		}
-		</script>
-	</body>
+<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>

+ 91 - 20
style.css

@@ -1,20 +1,91 @@
-h1, h3, a {
-	font-family: Sans-Serif;
-	font-weight: 400;
-	text-align: center;
-	display: block;
-}
-
-a {
-	text-decoration: none;
-}
-
-p > * {
-	display: inline;
-}
-
-body {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+h1, h2, h3, h4, h5, h6, p {
+	margin: 0;
+}
+
+a {
+	text-decoration: none;
+}
+
+button, input {
+	box-shadow: none;
+	outline: none;
+	border: 1px solid #aaa;
+	border-radius: 4px;
+	color: #555;
+	background-color: white;
+}
+
+button {
+	cursor: pointer;
+	padding: 1px 4px;
+}
+
+input {
+	padding: 4px 8px;
+}
+
+button:hover, button:active {
+	background-color: #fafafa;
+}
+
+* {
+	font-family: Sans-Serif;
+	font-weight: 400;
+}
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	margin: 0;
+}
+
+header {
+	background: linear-gradient(90deg, green, lightblue, blue);
+	width:100%;
+	color: white;
+	text-align: center;
+	height: 100px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+main {
+	display: flex;
+	padding: 16px;
+	row-gap: 16px;
+	column-gap: 16px;
+	flex-direction: column;
+	min-width: 300px;
+	max-width: 500px;
+	width: 50%;
+}
+
+main .block {
+	background-color: #fafafa;
+	color: #555;
+	padding: 12px;
+	border: 1px solid #aaa;
+	display: flex;
+	flex-direction: column;
+	row-gap: 12px;
+}
+
+.block h2 {
+	text-align: center;
+}
+
+.contact-section, .links-section, .portfolio-section {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	row-gap: 8px;
+}
+
+.portfolio-section {
+	row-gap: 4px;
+}