mirror of
https://github.com/Noratrieb/website.git
synced 2026-01-14 08:55:01 +01:00
149 lines
4.3 KiB
HTML
149 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>nilstrieb.dev</title>
|
|
<link rel="stylesheet" href="static/theme.css" />
|
|
<style>
|
|
.hint {
|
|
color: #5b4561;
|
|
}
|
|
|
|
.secret {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.social-logo {
|
|
height: 50px;
|
|
}
|
|
|
|
.ferrisuwu {
|
|
display: none;
|
|
z-index: 1;
|
|
position: absolute;
|
|
right: -100px;
|
|
bottom: 0;
|
|
}
|
|
|
|
.ferrisuwu-animate {
|
|
display: block;
|
|
animation-iteration-count: 1;
|
|
animation-name: ferrisuwu-enter;
|
|
animation-duration: 3s;
|
|
}
|
|
|
|
@keyframes ferrisuwu-enter {
|
|
from {
|
|
right: -100px;
|
|
}
|
|
50% {
|
|
right: 50px;
|
|
}
|
|
to {
|
|
right: -100px;
|
|
}
|
|
}
|
|
|
|
.blog-back-alley {
|
|
background-color: #6a1b7e;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="overflow-hidden">
|
|
<div class="main-content">
|
|
<div class="main-content-inner">
|
|
<h1>Nilstrieb's website</h1>
|
|
<div>
|
|
<p>
|
|
this is my website. you'll find lots of interesting and not very interesting stuff here,
|
|
depending on where you look.
|
|
</p>
|
|
<p>
|
|
there may be many
|
|
<span onclick="onSecretClick()" class="secret hint" role="button">secrets</span>
|
|
depending on where you look....
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>socials</h2>
|
|
<p>
|
|
these two are not everything, but you may find more there, like a choose your own
|
|
adventure story: choose your own nils
|
|
</p>
|
|
<a href="https://github.com/Nilstrieb"
|
|
><img class="social-logo" alt="GitHub" src="static/github.svg"
|
|
/></a>
|
|
<a href="https://hachyderm.io/@nilstrieb"
|
|
><img class="social-logo" alt="Mastodon" src="static/mastodon.png"
|
|
/></a>
|
|
</div>
|
|
<div>
|
|
<h2>my blog</h2>
|
|
<p>i have a blog, it might be interesting, maybe.</p>
|
|
<a href="/blog" id="blog-link" class="call-to-action" aria-live="polite">
|
|
<span>blog</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h2>slides</h2>
|
|
<p>i have given one talk, here are its slides, isnt this amazing</p>
|
|
<a href="/slides/index.html" class="call-to-action">
|
|
<span>slides from talks</span>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h2>random projects</h2>
|
|
<p>
|
|
in addition to all the other stuff mentioned above, i also have some random projects
|
|
hosted on my server. they are pretty bad and i won't promote them this openly, but you
|
|
will be able to find them if you really want to. some people have been saying
|
|
that there might be a secret <span role="button" class="hint">b</span>ack alley somewhere...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-hidden">
|
|
<img id="ferrisuwu" class="ferrisuwu" src="static/ferrisuwu.webp" />
|
|
</div>
|
|
|
|
<script>
|
|
let clickCount = 0;
|
|
let ferrisuwuAnimating = false;
|
|
const ferrisuwu = document.getElementById("ferrisuwu");
|
|
function onSecretClick() {
|
|
clickCount++;
|
|
if (clickCount > 3 && !ferrisuwuAnimating) {
|
|
ferrisuwu.classList.add("ferrisuwu-animate");
|
|
ferrisuwuAnimating = true;
|
|
setTimeout(() => {
|
|
ferrisuwu.classList.remove("ferrisuwu-animate");
|
|
ferrisuwuAnimating = false;
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
const blog = document.getElementById("blog-link");
|
|
let isBKeyDown = false;
|
|
document.addEventListener("keydown", (ev) => {
|
|
const B = 66;
|
|
if (ev.keyCode === B) {
|
|
isBKeyDown = true;
|
|
blog.classList.add("blog-back-alley");
|
|
blog.href = "/back-alley.html";
|
|
blog.children[0].innerText = "blog?";
|
|
}
|
|
});
|
|
document.addEventListener("keyup", (ev) => {
|
|
const B = 66;
|
|
if (ev.keyCode === B) {
|
|
isBKeyDown = false;
|
|
blog.classList.remove("blog-back-alley");
|
|
blog.href = "/blog";
|
|
blog.children[0].innerText = "blog";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|