multi-page

contact.md

@@ -0,0 +1,25 @@
+---
+title: Milan // PetaByteDev
+page-contact: true
+---
+
+# Contact
+
+If you are interested in one of my projects or want to talk to me for any other reason, you may contact me on any of the following platforms:
+
+- ## Matrix
+  [\@milan:petabyte.dev](https://matrix.to/#/@milan:petabyte.dev)
+- ## Email
+  [github@petabyte.dev](mailto:github@pbb.lc)
+- ## IRC
+  pbb on Freenode
+- ## Fediverse
+  [pbb@pleroma.pbb.lc](https://pleroma.pbb.lc/users/pbb)
+- ## XMPP
+  [petabyteboy@petabyteboy.de](xmpp:petabyteboy@petabyteboy.de)
+- ## Telegram
+  [\@petabyteboy](https://t.me/petabyteboy)
+
+If you wish to encrypt your messages using PGP, use the key with the following fingerprint 🔒:
+<br>
+[Milan Pässler (C088 7703 7FF4 6099 2DAB 03EF A6DC 6A7C B0B9 7859)](https://keys.openpgp.org/vks/v1/by-fingerprint/C08877037FF460992DAB03EFA6DC6A7CB0B97859)

index.md

@@ -1,35 +1,16 @@
 ---
 title: Milan // PetaByteDev
+page-about: true
 ---
 
 ![Picture of Milan with blue hair](./avi.jpg)
 
 # Hi there, I'm Milan ✨
 
-**Many of my projects are hosted over at [git.petabyte.dev](https://git.petabyte.dev/petabyteboy/).
-If something you are looking for isn't on GitHub, I have probably moved it there.**
-
 I'm non-binary. My pronouns are **they/them/…**.
-In general I prefer gender neutral pronouns, but if your language doesn't support them, ~~you may use female or male pronouns~~ you should really consider recompiling your language with extended support for pronouns.
-
-I'm mostly a networking person.
-Many of my projects are related to network visualisation, such as [HopGlass](https://github.com/hopglass/), a tool widely used by wireless mesh networking projects across Germany.
-But I'm also a [NixOS](https://nixos.org/) user, enthusiast and contributor.
-Declarative infrastructure deployment is the future. 🚀
-
-For work I build train-wayside communication systems at [nyantec](https://nyantec.com/) 🚈💨, in my spare time I establish independent infrastructure, like the experimental autonomous network [AS207921](https://bgpview.io/asn/207921).
-
----
-
-If you are interested in any of my networking projects or want to talk to me for any other reason, you may contact me on any of the following platforms:
-
-- Matrix: [\@milan:petabyte.dev](https://matrix.to/#/@milan:petabyte.dev)
-- Email: [github@petabyte.dev](mailto:github@pbb.lc)
-- IRC: pbb on Freenode
-- Fediverse: [pbb@pleroma.pbb.lc](https://pleroma.pbb.lc/users/pbb)
-- XMPP: [petabyteboy@petabyteboy.de](xmpp:petabyteboy@petabyteboy.de)
-- Telegram: [\@petabyteboy](https://t.me/petabyteboy)
+In general I prefer gender neutral pronouns, but if your language doesn't support them,
+~~you may use female or male pronouns~~
+you should really consider recompiling your language with extended support for pronouns.
 
-If you wish to encrypt your messages using PGP, use the key with the following fingerprint 🔒:
-<br>
-[Milan Pässler (C088 7703 7FF4 6099 2DAB 03EF A6DC 6A7C B0B9 7859)](https://keys.openpgp.org/vks/v1/by-fingerprint/C08877037FF460992DAB03EFA6DC6A7CB0B97859)
+I'm mostly a networking person. Many of my projects are related to network visualisation.
+For work I build train-wayside communication systems at [nyantec](https://nyantec.com/) 🚈💨, in my spare time I establish independent infrastructure.

projects.md

@@ -0,0 +1,32 @@
+---
+title: Milan // PetaByteDev
+page-projects: true
+---
+
+# Projects
+
+In the last years I have been involved in the creation of some projects that you might know.
+
+- ## [corenix](https://git.petabyte.dev/petabyteboy/corenix/)
+  A Nix expression to configure and build coreboot using NixOS-style modules
+- ## [Rusty LG](https://git.petabyte.dev/petabyteboy/rusty-lg/)
+  A fast [looking-glass](https://en.wikipedia.org/wiki/Looking_Glass_server), deployed at [lg.frickelnog.net](https://lg.frickelnog.net/rusty/)
+- ## [AS207921](https://bgpview.io/asn/207921/)
+  The experimental autonomous network AS207921
+- ## [FrickelNOG](https://t.me/frickelnog)
+  A loose association of amateur (Internet) network operators
+- ## [HopGlass](https://github.com/hopglass/)
+  A tool widely used by wireless mesh networking projects across Germany
+- ## [rs-index](https://git.petabyte.dev/petabyteboy/rs-index/)
+  An index-generator service 
+- ## [x330backlight](https://git.petabyte.dev/petabyteboy/x330backlight/)
+  A C++ program to change the backlight brightness of some ThinkPad X230 Full HD mods
+
+And there are some other FOSS projects I have worked on.
+
+- ## [NixOS](https://nixos.org/)
+  A fully-functional Linux distribution
+- ## [qaul](https://qaul.org/)
+  A software for internet-independent wireless mesh communication
+
+**Many of my projects are hosted over at [git.petabyte.dev](https://git.petabyte.dev/petabyteboy/). If something you are looking for isn't on GitHub, I have probably moved it there.**

style.css

@@ -1,60 +1,148 @@
+/* layout */
+
 body {
 	margin: 0;
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-
 	background-color: #eee;
 	color: rgba(0, 0, 0, .9);
 	font-family: monospace;
 	font-size: 17px;
 }
-
-body>* {
+main {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	flex-grow: 1;
+}
+main>* {
 	width: calc(98vw - 1em);
 	max-width: 1000px;
 	overflow: hidden;
 	text-align: justify;
 }
-body h1 {
-	text-align: center;
-	justify-self: center;
+main>:first-child {
+	margin-top: 1em;
+}
+main>:last-child {
+	margin-bottom: 6em;
+}
+a {
+	color: black;
+}
+
+/* vertically center on big screens */
+
+@media (min-width: 1100px) {
+	main {
+		justify-content: center;
+	}
+}
+
+/* avatar */
+
+main>figure:first-child {
+	margin-top: 2em;
 }
 body figure,
 body img {
 	border-radius: 100%;
-	height: 20vmax;
-	width: 20vmax;
-	max-height: 400px;
-	max-width: 400px;
+	height: calc(20vmax + 20vmin);
+	width: calc(20vmax + 20vmin);
+	max-height: 20rem;
+	max-width: 20rem;
 }
-figcapture {
+figcaption {
 	display: none;
 }
-body>:first-child {
-	margin-top: 2em;
+
+@media (min-height: 500px) {
+	main>figure:first-child {
+		margin-top: 2em;
+	}
 }
-body>:last-child {
-	margin-bottom: 2em;
+
+/* navigation */
+
+nav {
+	overflow: hidden;
+	width: 100vw;
+	display: flex;
+	justify-content: center;
+	background-color: rgba(200, 200, 200, .9);
+	position: sticky;
+	top: 0;
+}
+nav a {
+	margin: 0 .2em;
+	border-bottom: 5px solid rgba(0, 0, 0, .2);
+	padding: 1.2em 1.5em 1em 1.5em;
+	text-decoration: none;
+}
+nav a:hover {
+	background-color: rgba(255, 255, 255, .2);
+}
+nav .active {
+	background-color: rgba(0, 0, 0, .1);
+	border-bottom: 5px solid rgba(0, 0, 0, .8);
 }
 
-a {
-	color: black;
+@media (min-width: 600px) {
+	nav a {
+		margin: 0 1em;
+	}
 }
 
-@media (min-width: 1100px) {
-	body {
-		justify-content: center;
+/* heading */
+
+body h1 {
+	text-align: center;
+	justify-self: center;
+}
+
+/* lists */
+
+body ul h2 {
+	margin: .3em 0;
+}
+body ul {
+	list-style: none;
+	display: flex;
+	text-align: center;
+	padding: 0;
+	flex-wrap: wrap;
+}
+body li {
+	margin: 2%;
+	width: 96%;
+}
+@media (min-width: 600px) {
+	body li {
+		width: 28%;
 	}
 }
 
+/* dark theme */
+
 @media (prefers-color-scheme: dark) {
+	nav {
+		background-color: rgba(10, 13, 27, .9);
+	}
+	nav a {
+		border-bottom: 5px solid rgba(255, 255, 255, .2);
+	}
+	nav .active {
+		background-color: rgba(255, 255, 255, .1);
+		border-bottom: 5px solid rgba(255, 255, 255, .8);
+	}
+	nav a:hover {
+		background-color: rgba(255, 255, 255, .2);
+	}
 	body {
 		background-color: #131831;
 		color: rgba(255, 255, 255, .9);
 	}
-
 	a {
 		color: white;
 	}

template.html

@@ -7,6 +7,13 @@
 		<title>$title$</title>
 	</head>
 	<body>
-		$body$
+		<nav>
+			<a href="./" $if(page-about)$ class="active" $endif$>About</a>
+			<a href="./projects.html" $if(page-projects)$ class="active" $endif$>Projects</a>
+			<a href="./contact.html" $if(page-contact)$ class="active" $endif$>Contact</a>
+		</nav>
+		<main>
+			$body$
+		</main>
 	</body>
 </html>