Browse Source

multi-page

main
Milan 1 month ago
parent
commit
0ea7fbf560
Signed by: petabyteboy GPG Key ID: A6DC6A7CB0B97859
5 changed files with 181 additions and 48 deletions
  1. +25
    -0
      contact.md
  2. +6
    -25
      index.md
  3. +32
    -0
      projects.md
  4. +110
    -22
      style.css
  5. +8
    -1
      template.html

+ 25
- 0
contact.md View File

@ -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)

+ 6
- 25
index.md View File

@ -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.

+ 32
- 0
projects.md View File

@ -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.**

+ 110
- 22
style.css View File

@ -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;
}


+ 8
- 1
template.html View File

@ -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>

Loading…
Cancel
Save