feat: improve keyword styling

index.html

@@ -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>
+      <ul class="keywords">
-        <li>User Interfaces</li>
         <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 & React</li>
-        <li>Vue</li>
+        <li>Vite, Webpack, & Rollup</li>
-        <li>Docker</li>
+        <li>NPM</li>
-        <li>Golang</li>
+        <li>GraphQL</li>
-        <li>GNU/Linux</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>,
+      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>,
+      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>
+      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>