chore: improve website
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
281d06ee86
commit
22650865f2
2 changed files with 165 additions and 167 deletions
206
index.html
206
index.html
|
|
@ -8,135 +8,9 @@
|
|||
|
||||
<meta id="viewport" name="viewport" content="initial-scale=1.0">
|
||||
<meta name="description" content="Benjamin Bädorf writes code. I do some freelance stuff every once in a while.">
|
||||
<meta name="Keywords" content="webdevelopment frontend javascript node freelance website why am i even doing this">
|
||||
<meta name="Keywords" content="webdevelopment frontend javascript node freelance nix devops vue docker">
|
||||
<link href="/fonts.css?1" rel="stylesheet">
|
||||
<style>
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<link href="/styles.css?1" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -145,12 +19,22 @@
|
|||
</header>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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>
|
||||
|
||||
<p>
|
||||
I've spent time as a frontend engineer @ <a href="https://hosting.de" target="_blank">hosting.de</a>,
|
||||
frontend functional lead @ <a href="https://convidera.com" target="_blank">Convidera</a>,
|
||||
and as a software engineer and design systems advocate @ <a href="https://openproject.com" target="_blank">OpenProject</a>,
|
||||
</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 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 <a href="https://pub.solar/hakken" target="_blank">hakken.irl</a>!
|
||||
</p>
|
||||
|
||||
|
|
@ -167,16 +51,25 @@
|
|||
<h2>Want to work with me?</h2>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<details open>
|
||||
<summary>Some keywords</summary>
|
||||
<p>
|
||||
My previous work includes software engineering, designing of user interfaces, devops, seminar moderation, tech writing, and barkeeping ;)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can 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>For recruiters, click here for some relevant keywords,</summary>
|
||||
<ul class="keywords">
|
||||
<li>Design Systems</li>
|
||||
<li>User Interfaces</li>
|
||||
<li>Web multimedia</li>
|
||||
<li>Developer Experience</li>
|
||||
<li>Developer Experience / DX</li>
|
||||
<li>Frontend</li>
|
||||
<li>Server Side Rendering</li>
|
||||
<li>APIs</li>
|
||||
<li>Reproducibility</li>
|
||||
|
|
@ -187,51 +80,30 @@
|
|||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Some technologies</summary>
|
||||
<summary>and here for some relevant technologies.</summary>
|
||||
<ul class="keywords">
|
||||
<li>TypeScript</li>
|
||||
<li>Node.js & Deno</li>
|
||||
<li>HTML & (S)CSS</li>
|
||||
<li>Vue & React</li>
|
||||
<li>Vite, Webpack, & Rollup</li>
|
||||
<li>NPM</li>
|
||||
<li>GraphQL</li>
|
||||
<li>Nix</li>
|
||||
<li>JavaScript</li>
|
||||
<li>HTML</li>
|
||||
<li>(S)CSS</li>
|
||||
<li>Nix & NixOS</li>
|
||||
<li>Docker</li>
|
||||
<li>Linux</li>
|
||||
<li>Golang</li>
|
||||
<li>Rust</li>
|
||||
<li>Ruby</li>
|
||||
<li>Python</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<p>
|
||||
Projects I work(ed) on that I find interesting include
|
||||
<p>Contact me if you'd like to see a conventional CV.</p>
|
||||
|
||||
<a href="https://miom.space/" target="_blank" title="MiOM">this</a>
|
||||
<sup>
|
||||
<a href="https://git.pub.solar/MiOM/miom.space" target="_blank" title="Source code">[1]</a>
|
||||
</sup>,
|
||||
<a href="https://pub.solar/" target="_blank" title="pub.solar homepage">this</a>
|
||||
<sup>
|
||||
<a href="https://git.pub.solar/pub-solar/pub.solar" target="_blank" title="Source code">[1]</a>
|
||||
</sup>,
|
||||
<a href="https://git.pub.solar/pub-solar/os" target="_blank" title="PubSolarOS">this</a>,
|
||||
<a href="https://hosting.de/" target="_blank" title="hosting.de homepage">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>
|
||||
</sup>,
|
||||
<a href="https://abkommen60jahre.de/" target="_blank" title="Abkommen 60 Jahre homepage">this</a>,
|
||||
<a href="https://git.pub.solar/b12f/wlstreamer" target="_blank" title="wlstreamer">this</a>,
|
||||
<a href="https://git.pub.solar/b12f/unitfile-parser" target="_blank" title="unitfile parser">this</a>, and
|
||||
<a href="https://git.pub.solar/b12f/schlechtenburg" target="_blank" title="Schlechtenburg">this</a>.
|
||||
</p>
|
||||
<h2>Want to get in touch?</h2>
|
||||
|
||||
<p>
|
||||
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>.
|
||||
You can write me an e-mail @ <a href="mailto:hello@benjaminbaedorf.eu?Subject=Hi" title="Send me a mail!">hello@benjaminbaedorf.eu</a>,<br>
|
||||
chat with me on Matrix <a href="https://matrix.to/#/@b12f:pub.solar" title="My Matrix @">@b12f:pub.solar</a>,<br>
|
||||
follow me on Mastodon <a rel="me" href="https://mastodon.pub.solar/@b12f" title="My Mastodon @">@b12f@pub.solar</a>.<br>
|
||||
</p>
|
||||
|
||||
<details>
|
||||
|
|
|
|||
126
styles.css
Normal file
126
styles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue