index.html

<!doctype html>
<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" />
		<link rel="icon" href="data/assets/avatar-16px.svg" />
		<title>Portfolio 404</title>
		<style>
			*,
			*::before,
			*::after {
				box-sizing: border-box;
			}

			* {
				margin: 0;
				padding: 0;
			}

			:root {
				font-family: monospace;
				font-size: 12px;

				line-height: 2rem;
				font-weight: 400;

				font-synthesis: none;
				text-rendering: optimizeLegibility;
				/*
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	*/
				-webkit-text-size-adjust: 100%;
				text-size-adjust: 100%;

				--clr-skyscraper: #d8dee6;
				--clr-darkest-grey: #090909;
				--clr-darker-grey: #101010;
				--clr-dark-grey: #242424;
			}

			html {
				color-scheme: dark;
				color: var(--clr-skyscraper);
				background-color: var(--clr-darker-grey);
			}

			img,
			picture,
			svg,
			video {
				display: block;
				max-width: 100%;
			}

			ul {
				list-style: none;
			}

			body {
				--nav-width: 4rem;
				/* map width + main_container scrollbar-width */
				--map-offset: calc(var(--nav-width) + 18px);

				/* 360px / 12px = 25 */
				min-width: 30rem;
				height: 100svh;
				overflow-y: hidden;

				display: grid;
				grid-template-columns: 1fr var(--nav-width);
			}

			@media screen and (min-width: 960px) {
				:root {
					font-size: 15px;
				}

				body {
					--nav-width: 3.2rem;
				}
			}

			#main__container {
				overflow-y: scroll;
			}

			main {
				width: min(100%, 960px);
				margin: 0 auto;
			}

			/* hide lines and map by default */
			.main__aside {
				display: none;
			}

			/* set/overwritten in presets.css */
			body > * {
				transition: opacity 300ms;
				opacity: 0;
			}

			.animated-loading {
				background-image: linear-gradient(
					-10deg,
					transparent 10%,
					var(--clr-dark-grey) 25%,
					transparent 40%
				);
				background-origin: border-box;
				background-size: 100% 200%;

				animation: loadingBg 2s infinite linear;
			}

			@media screen and (min-width: 640px) {
				body.animated-loading {
					animation: none;
				}
				body::before {
					content: 'Loading ...';
					position: absolute;
					top: 2rem;
					left: 1.5rem;
				}
			}

			@keyframes loadingBg {
				0% {
					background-position-y: 200%;
				}
				50% {
					background-position-y: 0%;
				}
				100% {
					background-position-y: 0%;
				}
			}
		</style>
	</head>

	<body class="animated-loading">
		<div id="main__container">
			<main>
				<div id="main__lines" class="main__aside" role="none"></div>
				<div id="main__content">
					<section id="home">
						<span class="clr-yellow">const</span> <span>properties</span>
						<span class="clr-orange">&equals;</span>
						<span class="clr-yellow">&lcub;</span>

						<div class="indent">
							<span class="clr-cyan">first</span><span>&colon;</span>
							<span class="clr-green">&apos;Jens&apos;</span
							><span>&comma;</span>
							<br />

							<span class="clr-cyan">last</span><span>&colon;</span>
							<span class="clr-green">&apos;Bachmayer&apos;</span
							><span>&comma;</span>
							<br />

							<span class="clr-cyan">alias</span><span>&colon;</span>
							<span class="clr-green">&apos;error‑four‑o‑four&apos;</span
							><span>&comma;</span>
							<br />

							<span class="clr-cyan">age</span><span>&colon;</span>
							<span class="clr-red">39</span><span>&comma;</span>
							<br />

							<span class="clr-cyan">links</span><span>&colon;</span>
							<span class="clr-magenta">&lbrack;</span>

							<div class="indent clr-green">
								<span>&apos;</span
								><a
									target="_blank"
									href="https://github.com/error-four-o-four"
									alt="Link to GitHub profile"
									rel="noopener nofollow"
									><span>GitHub</span></a
								><span>&apos;</span><span class="clr-default">&comma;</span
								><br />

								<span>&apos;</span
								><a
									target="_blank"
									href="https://www.npmjs.com/~http404"
									alt="Link to npm profile"
									rel="noopener nofollow"
									><span>npm</span></a
								><span>&apos;</span><span class="clr-default">&comma;</span
								><br />

								<span>&apos;</span
								><a
									target="_blank"
									href="https://discordapp.com/users/790552703058837514"
									alt="Link to Discord profile"
									rel="noopener nofollow"
									><span>Discord</span></a
								><span>&apos;</span><span class="clr-default">&comma;</span
								><br />

								<span>&apos;</span
								><a
									target="_blank"
									href="https://www.freecodecamp.org/errorfourofour"
									alt="Link to freeCodeCamp profile"
									rel="noopener nofollow"
									><span>freeCodeCamp</span></a
								><span>&apos;</span><span class="clr-default">&comma;</span
								><br />

								<span>&apos;</span
								><a
									target="_blank"
									href="https://openprocessing.org/user/201401?view=sketches&o=48"
									alt="Link to OpenProcessing profile"
									rel="noopener nofollow"
									><span>OpenProcessing</span></a
								><span>&apos;</span>
							</div>

							<span class="clr-magenta">&rbrack;</span><span>&comma;</span>
						</div>

						<span class="clr-yellow">&rcub;</span><span>&semi;</span>
						<br />
						<br />
						<br />

						<p class="comment">
							Hey there!<br />
							I&apos;m a self-taught Web Development Enthusiast.
						</p>
						<br />
						<p class="comment">
							I like to code things from scratch and&nbsp;<br
								class="display-gt560" />
							care about performance and responsive designs.
						</p>
					</section>
					<section id="projects"></section>
					<section id="skills"></section>
				</div>
				<div id="main__minimap" class="main__aside">
					<div id="minimap__indicator"></div>
				</div>
			</main>
		</div>

		<div id="nav__container" class="animated-loading">
			<nav>
				<div id="nav__items"></div>
				<div id="nav__links"></div>
			</nav>
		</div>
		<script src="src/main.ts" type="module"></script>
	</body>
</html>