mirror of
https://github.com/Noratrieb/website.git
synced 2026-01-14 08:55:01 +01:00
202 lines
6.4 KiB
HTML
202 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>noratrieb.dev</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<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>Noratrieb's website</h1>
|
|
<div class="columns-2">
|
|
<div>
|
|
<div>
|
|
<p>
|
|
hi, i'm nora 🏳️⚧️. 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 nora
|
|
</p>
|
|
<a href="https://github.com/Noratrieb">
|
|
<img class="social-logo" alt="GitHub" src="static/github.svg" />
|
|
</a>
|
|
<a href="https://hachyderm.io/@noratrieb">
|
|
<img class="social-logo" alt="Mastodon" src="static/mastodon.png" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<img
|
|
height="200"
|
|
src="static/Noratrieb.png"
|
|
alt="Two grey cartoon-cats on a pink background. The left cat is small and sits on a floating rocket, the right cat is big and has a red bow tie on the right ear."
|
|
style="margin-left: 15px"
|
|
/>
|
|
</div>
|
|
</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>slides to talks that i have given</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" onclick="onBackalleyClick()">b</span>ack alley
|
|
somewhere...
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>contact me</h2>
|
|
<p>if you want to contact me for something, use any of the following platforms</p>
|
|
<ul>
|
|
<li>
|
|
discord (preferred):
|
|
<pre style="display: inline">noratrieb</pre>
|
|
. if you're on a server where i'm too (like the Rust Discord) you can just DM me (make
|
|
sure to include the reason in the first message or i will ignore it)
|
|
</li>
|
|
<li>
|
|
mastodon:
|
|
<pre style="display: inline">@noratrieb@hachyderm.io</pre>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
if for some reason you really like being super secret then
|
|
<a href="https://age-encryption.org">age</a>-encrypt something with my current SSH key
|
|
found on <a href="https://github.com/Noratrieb.keys">GitHub</a>.
|
|
</p>
|
|
<p>i do not have a PGP key and do not intend on getting one.</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 > 0 && !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;
|
|
function activateBackalley() {
|
|
isBKeyDown = true;
|
|
blog.classList.add("blog-back-alley");
|
|
blog.href = "/" + "{{ back_alley_name }}";
|
|
blog.children[0].innerText = "blog?";
|
|
}
|
|
function deactivateBackalley() {
|
|
isBKeyDown = false;
|
|
blog.classList.remove("blog-back-alley");
|
|
blog.href = "/blog";
|
|
blog.children[0].innerText = "blog";
|
|
}
|
|
let backalleyClicks = 0;
|
|
function onBackalleyClick() {
|
|
backalleyClicks++;
|
|
if (backalleyClicks > 1) {
|
|
activateBackalley();
|
|
}
|
|
}
|
|
document.addEventListener("keydown", (ev) => {
|
|
const B = 66;
|
|
if (ev.keyCode === B) {
|
|
activateBackalley();
|
|
}
|
|
});
|
|
document.addEventListener("keyup", (ev) => {
|
|
const B = 66;
|
|
if (ev.keyCode === B) {
|
|
deactivateBackalley();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|