feat: half the CV
continuous-integration/drone/push Build is passing Details

Benjamin Bädorf 2023-11-16 16:23:02 +01:00
parent 281d06ee86
commit 3b7b8b362b
No known key found for this signature in database
GPG Key ID: 1B7BF5B77A521346
23 changed files with 461 additions and 237 deletions

6
.envrc
View File

@ -1,2 +1,4 @@
watch_file shell.nix
use nix
# reload when these files change
export TRITON_DONT_SOURCE_PROFILE=1
watch_file flake.nix
use_flake

BIN
ben.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

BIN
cows.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB

28
cv/index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html class="cv">
<head>
<meta charset="utf-8" />
<title>Benjamin Bädorf CV</title>
<meta name="theme-color" content="#000000" id="theme-color" />
<meta id="viewport" name="viewport" content="initial-scale=1.0">
<meta name="description" content="The curriculum vitae of Benjamin Bädorf">
<meta name="Keywords" content="webdevelopment frontend javascript node freelance website why am i even doing this">
<link href="/fonts.css?1" rel="stylesheet">
<link href="/styles.css?1" rel="stylesheet">
<link href="/styles-cv.css?1" rel="stylesheet">
</head>
<body>
<header>
<img src="/yule-cropped.jpg" alt="Me, with the book Momo" />
<h1>Benjamin Bädorf</h1>
</header>
<p>
My names are Ben, Yule, and b12f and I often spend my time engineering software.
</p>
</body>
</html>

43
flake.lock Normal file
View File

@ -0,0 +1,43 @@
{
"nodes": {
"flake-utils": {
"locked": {
"lastModified": 1667395993,
"narHash": "sha256-nuEHfE/LcWyuSWnS8t12N1wc105Qtau+/OdUAjtQ0rA=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "5aed5285a952e0b949eb3ba02c12fa4fcfef535f",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1674641431,
"narHash": "sha256-qfo19qVZBP4qn5M5gXc/h1MDgAtPA5VxJm9s8RUAkVk=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "9b97ad7b4330aacda9b2343396eb3df8a853b4fc",
"type": "github"
},
"original": {
"owner": "nixos",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs"
}
}
},
"root": "root",
"version": 7
}

32
flake.nix Normal file
View File

@ -0,0 +1,32 @@
{
description = "CV";
inputs = {
nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
flake-utils.url = "github:numtide/flake-utils";
};
outputs = { self, flake-utils, nixpkgs }:
flake-utils.lib.simpleFlake {
inherit self nixpkgs;
name = "CV";
shell = { pkgs }:
let
google-font-downloader = pkgs.writeShellScriptBin "google-font-downloader" ''
echo "Attempting to fetch $1"
${pkgs.nodejs}/bin/npx google-font-downloader -- $1
rm ./fonts.css || true
echo "/* To regenerate this file, run $ google-font-downloader '$1' */" >> ./fonts.css
echo "" >> ./fonts.css
cat ./google-fonts-*.css >> ./fonts.css
rm ./google-fonts-*.css
'';
in
pkgs.mkShell {
packages = with pkgs; [
google-font-downloader
];
};
};
}

View File

@ -1,36 +1,92 @@
/* To regenerate this file, run $ google-font-downloader 'https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,200;0,600;0,800;1,200;1,400&display=swap' */
/* latin-ext */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 400;
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(/fonts/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vH5mqe8Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: url(fonts/urbanist/v15/L0x4DF02iFML4hGCyMqgXSFsjlC0V7q7Ag.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(fonts/urbanist/v15/L0x4DF02iFML4hGCyMqgXS9sjlC0V7o.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Urbanist';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4vEZmq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
src: url(fonts/urbanist/v15/L0x4DF02iFML4hGCyMqgXSFsjlC0V7q7Ag.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Urbanist';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(fonts/urbanist/v15/L0x4DF02iFML4hGCyMqgXS9sjlC0V7o.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 900;
font-weight: 200;
font-display: swap;
src: url(/fonts/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDYhkvH5mqe8Q.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 900;
font-weight: 200;
font-display: swap;
src: url(/fonts/urbanist/v8/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDYhkvEZmq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Urbanist';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(fonts/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Binary file not shown.

View File

@ -8,239 +8,183 @@
<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>
<img src="/cows.jpg" alt="An image of three cows taken in the dark with a flashlight. I shot this over 15 years ago as a teenager and I don't think I have the original file. All that remains is this jpg that was processed a million times, but somehow it still captures the original vibe." />
<h1>Hi!</h1>
<img src="/yule-cropped.jpg" alt="Picture of me with the book Momo" />
<h1>Benjamin Bädorf</h1>
</header>
<p>
My names are Ben, Yule, and b12f and I often spend my time engineering software.
</p>
<main>
<section>
<p>
I am a highly motivated software engineer. 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>
</section>
<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.
Come visit us at <a href="https://pub.solar/hakken" target="_blank">hakken.irl</a>!
</p>
<section class="contact">
<address>
Web: benjaminbaedorf.eu<br>
Mail: hello@benjaminbaedorf.eu<br>
Tel: +49 15 778 959 877<br>
Mastodon: @b12f:pub.solar
</address>
<address>
Address:<br>
Benjamin Bädorf<br>
Florastrasse 68<br>
70733 Köln
</address>
</section>
<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 help you find solutions to a wide range of IT problems.
</p>
<h1>Work Experience</h1>
<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 create affordable spaces to work, make art, and collaborate in.
</p>
<section class="org-stop">
<h2 class="org-stop--name">Momo</h2>
<h2>Want to work with me?</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Since Sep. 2023</div>
<div>
<h3 class="org-stop--function-title">Founder & Engineer</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<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>
<section class="org-stop">
<h2 class="org-stop--name">OpenProject GmbH</h2>
<details open>
<summary>Some keywords</summary>
<ul class="keywords">
<li>Design Systems</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>CI/CD</li>
</ul>
</details>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2020 - Aug. 2023</div>
<div>
<h3 class="org-stop--function-title">Senior Software Engineer</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<details>
<summary>Some 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>Docker</li>
<li>Linux</li>
<li>Golang</li>
<li>Rust</li>
</ul>
</details>
<section class="org-stop">
<h2 class="org-stop--name">Convidera GmbH</h2>
<p>
Projects I work(ed) on that I find interesting include
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2019 - Sep. 2020</div>
<div>
<h3 class="org-stop--function-title">Functional Lead Frontend</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
<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>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2018 - Sep. 2019</div>
<div>
<h3 class="org-stop--function-title">Senior Frontend Engineer</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
<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>.
</p>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2017 - Sep. 2018</div>
<div>
<h3 class="org-stop--function-title">Frontend Engineer</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<details>
<summary>GPG Pubkey</summary>
<a
download
href="/public-pgp-benjamin-baedorf.asc"
>4332 E0D0 2B21 4D31 376C 366E 4406 E80E 13CD 656C</a>
</details>
<section class="org-stop">
<h2 class="org-stop--name">keenlogics GmbH (hosting.de)</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2017 - Sep. 2019</div>
<div>
<h3 class="org-stop--function-title">Frontend Engineer</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<section class="org-stop">
<h2 class="org-stop--name">FH Aachen</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Jul 2012 - Mai 2014</div>
<div>
<h3 class="org-stop--function-title">Studentischer Mitarbeiter</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<h1>Additional Experience</h1>
<section class="org-stop">
<h2 class="org-stop--name">pub.solar n.e.V.</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Since Jan. 2020</div>
<div>
<h3 class="org-stop--function-title">Founder & Admin</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<section class="org-stop">
<h2 class="org-stop--name">Vereniging K.A.V. Alcuinus</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2012 - Oct. 2015</div>
<div>
<h3 class="org-stop--function-title">Head of student association</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<section class="org-stop">
<h2 class="org-stop--name">Studeren in Aken</h2>
<div class="org-stop--function">
<div class="org-stop--function-date">Oct. 2012 - Oct. 2015</div>
<div>
<h3 class="org-stop--function-title">Project lead</h3>
<p class="org-stop--function-description"></p>
</div>
</div>
</section>
<h1>Skills</h1>
<section class="skills">
<div>
<h4>Languages</h4>
<p>
English: fluent<br>
German: fluent<br>
Dutch: fluent<br>
</p>
</div>
<div>
<h4>IT stuff I've dabbled in</h4>
<p>
JavaScript, TypeScript, HTML, (S)CSS, Vue, React, Angular, Nix, NixOS, Linux, DNS, Email, SQL, Ruby, Python, php, Rust, Golang, Docker, KVM, WebRTC, WebSockets
</p>
</div>
</section>
<h1>Personal interests</h1>
<section>
<p>
Programming, (board-)games, cooking, cycling, literature, (geo-)politics, critical theory, squash, lockpicking.
</p>
</section>
</main>
</body>
</html>

View File

@ -1,6 +0,0 @@
with (import (fetchTarball https://github.com/nixos/nixpkgs/archive/nixpkgs-unstable.tar.gz) {});
mkShell {
buildInputs = [
nodejs
];
}

125
styles.css Normal file
View File

@ -0,0 +1,125 @@
html {
--col-accent: #ff0083;
--col-background: #fff;
--col-foreground: #111;
font-family: 'Urbanist', sans-serif;
font-size: 24px;
line-height: 1.75;
color: var(--col-foreground);
font-weight: 400;
}
body {
margin: 0;
padding: 20mm;
background-color: var(--col-background);
display: flex;
flex-direction: column;
}
body > * {
width: 100%;
max-width: 1024px;
}
header {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
header h1 {
font-size: 2rem;
}
img {
border-radius: 50%;
width: 5rem;
margin-right: 1rem;
}
h1 {
font-size: 1.5rem;
}
h1, h2, h3 {
font-weight: 800;
line-height: 1.5;
}
main {
display: flex;
flex-direction: column;
}
.contact {
display: flex;
justify-items: space-between;
font-size: 0.8rem;
font-style: italic;
margin-top: 1rem;
}
.contact > * {
width: 47.5%;
}
p {
font-weight: normal;
margin: 0px;
padding: 0px;
}
.org-stop {
display: flex;
flex-direction: column;
margin: 0;
margin-bottom: 1rem;
}
.org-stop--name {
font-size: 1rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
}
.org-stop--name::after {
display: block;
content: '';
height: 0px;
border-bottom: 1px solid #ccc;
margin-left: 2rem;
flex-grow: 1;
}
.org-stop--function {
display: flex;
flex-direction: row;
}
.org-stop--function-title {
margin: 0;
display: flex;
font-weight: 800;
color: var(--col-accent);
}
.org-stop--function-date {
font-size: 0.8rem;
font-style: italic;
width: 20%;
text-align: right;
padding-right: 1rem;
line-height: 2rem;
}
.skills {
display: flex;
}
.skills > :first-child {
width: 40%;
}

BIN
yule-cropped.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 900 KiB

BIN
yule.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB