b12f/benjaminbaedorf.eu
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: improve keyword styling
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Benjamin Bädorf 2023-07-27 11:28:33 +02:00
parent 08d8be1c66
commit 33a98352e2
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
1 changed files with 61 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
index.html
View file

@ -62,12 +62,44 @@
p, details {
margin-top: 1rem;
}
a,
a:visited {
a:visited,
summary::marker {
color: #ff0083;
}
summary,
a {
cursor: pointer;
text-decoration: none;
}
summary:hover,
a:hover {
text-decoration: underline;
}
.keywords {
margin: 0;
padding: 0;
padding-top: 8px;
display: flex;
flex-wrap: wrap;
}
.keywords > * {
padding: 0px 12px;
background: #ff0083;
color: white;
list-style: none;
border-radius: 16px;
font-size: 0.8rem;
margin-bottom: 2px;
margin-right: 2px;
}
.hidden {
display: none;
}
@ -80,54 +112,62 @@
</header>
<p>
My name is Ben <span id="aka">AKA <span>b12f</span><span class="hidden">Yule</span><span class="hidden">Benjamin Bädorf</span></span> and I often spend my time engineering software.
My name is Ben AKA b12f and I often spend my time engineering software.
</p>
<p>
I'm a founding member of the free software non-profit <a href="https://pub.solar/" target="_blank">pub.solar</a>.
We host a FOSS cloud with various free software solutions. We also organize a small hackathon four times a year.
We host a FOSS cloud with various products, all under one login. We also organize a small hackathon four times a year.
Come visit us at <a href="https://pub.solar/hakken" target="_blank">hakken.irl</a>!
</p>
<p>
I'm also a founding member of the tech collective <a href="https://momo.koeln/" target="_blank">Momo</a>.
We're professionals with experience in various parts of IT. We offer solutions to IT problems.
We're professionals with experience in various parts of IT. We help you find solutions to a wide range of IT problems.
</p>
<p>
Last but very much not least, I'm a founding member of the Cologne based creative collective <a href="https://miom.space/" target="_blank">MiOM</a>.
We offer affordable room to work, make art, and collaborate in.
We create affordable spaces to work, make art, and collaborate in.
</p>
<h2>Want to work with me?</h2>
<p>
My focus so far has been on the frontend and devops side of things, though I'm increasingly involved with the organisational side of collaboration.
My focus has often been on the frontend and devops side of things, though I'm increasingly involved in the organisational side of collaboration.
</p>
<details>
<details open>
<summary>Some keywords</summary>
<ul>
<li>User Interfaces</li>
<ul class="keywords">
<li>Design Systems</li>
<li>Developer Experience & APIs</li>
<li>User Interfaces</li>
<li>Web multimedia</li>
<li>Developer Experience</li>
<li>Server Side Rendering</li>
<li>APIs</li>
<li>Reproducibility</li>
<li>Containerization</li>
<li>Automation</li>
<li>Reproducibility</li>
<li>CI/CD</li>
</ul>
</details>
<details>
<summary>Some technologies</summary>
<ul>
<ul class="keywords">
<li>TypeScript</li>
<li>Node.js & Deno</li>
<li>HTML & (S)CSS</li>
<li>TypeScript & Node.js</li>
<li>Vue</li>
<li>Docker</li>
<li>Golang</li>
<li>GNU/Linux</li>
<li>Vue & React</li>
<li>Vite, Webpack, & Rollup</li>
<li>NPM</li>
<li>GraphQL</li>
<li>Nix</li>
<li>Docker</li>
<li>Linux</li>
<li>Golang</li>
<li>Rust</li>
</ul>
</details>
@ -152,7 +192,6 @@
<a href="https://secure.hosting.de/" target="_blank" title="hosting.de management interface">this</a>,
<a href="https://flexbox.online/" target="_blank" title="FLEXBOX digital toolbox homepage">this</a>,
<a href="https://dashboard.flexbox.online/" target="_blank" title="FLEXBOX digital toolbox dashboard">this</a>,
<a href="https://brix.design/" target="_blank" title="Brix Design System">this</a>,
<a href="https://openproject.com/" target="_blank" title="OpenProject GmbH">this</a>
<sup>
<a href="https://github.com/opf/openproject" target="_blank" title="OpenProject source code">[1]</a>
@ -164,36 +203,19 @@
</p>
<p>
You can write me a mail <a href="mailto:hello@benjaminbaedorf.eu?Subject=Hi" title="Send me a mail!">here</a>,
chat with me on Matrix <a href="https://matrix.to/#/@b12f:pub.solar" title="My Matrix @">here</a>,
follow me on Mastodon <a rel="me" href="https://mastodon.pub.solar/@b12f" title="My Mastodon @">here</a>
You can write me an e-mail <a href="mailto:hello@benjaminbaedorf.eu?Subject=Hi" title="Send me a mail!">here</a>,<br>
chat with me on Matrix <a href="https://matrix.to/#/@b12f:pub.solar" title="My Matrix @">here</a>,<br>
follow me on Mastodon <a rel="me" href="https://mastodon.pub.solar/@b12f" title="My Mastodon @">here</a><br>
and see some of my code <a href="http://git.pub.solar/b12f" target="_blank" title="Private Gitea. The better stuff is here.">here</a> and <a href="https://github.com/b12f" target="_blank" title="My GitHub profile">here</a>.
</p>
<details>
<summary>GPG</summary>
<summary>GPG Pubkey</summary>
<a
download
href="/public-pgp-benjamin-baedorf.asc"
>4332 E0D0 2B21 4D31 376C 366E 4406 E80E 13CD 656C</a>
</details>
<script>
var aka = document.getElementById('aka');
var akas = aka.children;
var current = 0;
setInterval(function() {
akas[current].setAttribute('class', 'hidden');
current++;
if (current >= akas.length) {
current = 0;
}
akas[current].setAttribute('class', '');
}, 2000);
console.log('Kissinger should die in prison for crimes against humanity.');
</script>
</body>
</html>