From 22650865f285a5016ee2f3ab347211acde75e1b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Thu, 16 Nov 2023 14:49:00 +0100 Subject: [PATCH] chore: improve website --- index.html | 206 ++++++++++------------------------------------------- styles.css | 126 ++++++++++++++++++++++++++++++++ 2 files changed, 165 insertions(+), 167 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 3326c56..c59ae74 100644 --- a/index.html +++ b/index.html @@ -8,135 +8,9 @@ - + - +
@@ -145,12 +19,22 @@

- My names are Ben, Yule, and b12f and I often spend my time engineering software. + My names are Ben, Yule, and b12f and I often spend my time engineering software. My heart beats for anything rivacy and open source. +

+ +

+ My focus has often been on the frontend and devops side of things, though I'm increasingly involved in the organisational side of collaboration. +

+ +

+ I've spent time as a frontend engineer @ hosting.de, + frontend functional lead @ Convidera, + and as a software engineer and design systems advocate @ OpenProject,

I'm a founding member of the free software non-profit pub.solar. - We host a FOSS cloud with various products, all under one login. We also organize a small hackathon four times a year. + We host a single-sign-on cloud with various services. We also organize a small hackathon four times a year. Come visit us at hakken.irl!

@@ -167,16 +51,25 @@

Want to work with me?

- My focus has often been on the frontend and devops side of things, though I'm increasingly involved in the organisational side of collaboration. + I consider myself a generalist, though I'm most proficient in the development and operation of web applications, and the administration of linux-based cloud infrastructures.

-
- Some keywords +

+ My previous work includes software engineering, designing of user interfaces, devops, seminar moderation, tech writing, and barkeeping ;) +

+ +

+ You can see some of my code here and here. +

+ +
+ For recruiters, click here for some relevant keywords,
  • Design Systems
  • User Interfaces
  • Web multimedia
    • -
  • Developer Experience
    • +
  • Developer Experience / DX
    • +
  • Frontend
  • Server Side Rendering
  • APIs
  • Reproducibility
    • @@ -187,51 +80,30 @@
- Some technologies + and here for some relevant technologies.
  • TypeScript
    • -
  • Node.js & Deno
    • -
  • HTML & (S)CSS
    • -
  • Vue & React
    • -
  • Vite, Webpack, & Rollup
    • -
  • NPM
    • -
  • GraphQL
    • -
  • Nix
    • +
  • JavaScript
    • +
  • HTML
    • +
  • (S)CSS
    • +
  • Nix & NixOS
  • Docker
  • Linux
  • Golang
  • Rust
    • +
  • Ruby
    • +
  • Python
-

- Projects I work(ed) on that I find interesting include +

Contact me if you'd like to see a conventional CV.

- this - - [1] - , - this - - [1] - , - this, - this, - this - - [1] - , - this, - this, - this, and - this. -

+

Want to get in touch?

- You can write me an e-mail here,
- chat with me on Matrix here,
- follow me on Mastodon here
- and see some of my code here and here. + You can write me an e-mail @ hello@benjaminbaedorf.eu,
+ chat with me on Matrix @b12f:pub.solar,
+ follow me on Mastodon @b12f@pub.solar.

diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..877385b --- /dev/null +++ b/styles.css @@ -0,0 +1,126 @@ +html { + --col-accent: #ff0083; + --col-background: #fff; + --col-foreground: #111; + + font-family: 'Urbanist', sans-serif; + font-size: 18px; + line-height: 1.75; + color: var(--col-foreground); + font-weight: normal; +} + +@media screen and (min-width: 700px) { + html { + font-size: 24px; + } +} + +body { + margin: 0; + padding: 0.5rem; + background-color: var(--col-background); + display: flex; + flex-direction: column; +} + +@media screen and (min-width: 700px) { + body { + padding: 1rem; + } +} + +body > * { + width: 100%; + max-width: 760px; +} + +header { + display: flex; + align-items: center; +} + +img { + border-radius: 50%; + width: 3rem; + margin-right: 1rem; +} + +h1 { + font-size: 2rem; + font-weight: black; + line-height: 1.5; +} + +h2 { + font-size: 1.25rem; + font-weight: black; + line-height: 1.5; + margin-bottom: 0; +} + +p { + font-weight: normal; + margin: 0px; + padding: 0px; +} + +p, +details { + font-size: 1rem; + margin-top: 1rem; +} + + +a, +a:visited, +summary::marker { + color: var(--col-accent); +} + +summary, +a { + cursor: pointer; + text-decoration: none; + + transition-property: box-shadow; + transition-duration: 0.2s; + transition-timing-function: ease; + + box-shadow: 0 0 0 var(--col-accent); +} + +summary:hover, +a:hover { + box-shadow: 0 4px 0 var(--col-accent); +} + +.keywords { + margin: 0; + padding: 0; + padding-top: 8px; + display: flex; + flex-wrap: wrap; + line-height: 1.5; + font-size: 18px; + list-style: none; +} + +@media screen and (min-width: 700px) { + .keywords { + font-size: 20px; + } +} + +.keywords > * { + background: var(--col-accent); + color: var(--col-background); + padding: 0px 12px; + border-radius: 16px; + margin-bottom: 2px; + margin-right: 2px; +} + +.hidden { + display: none; +}