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,
- Some technologies + and here for some relevant technologies.
-

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