automated age added slogan redesigned back with skill categories and expandable details fixed card flip on touch devices and accessibility improvements
This commit is contained in:
MineTec committed
1 parent
e62a87d284
commit
80b371664e
3 files changed
+328
-60
No files matched your search
+252
-17
@@ -1,6 +1,8 @@
|
||||
:root {
|
||||
--height: 300px;
|
||||
--width: 550px;
|
||||
--width-expanded: min(780px, calc(100vw - 40px));
|
||||
--height-expanded: min(615px, calc(100dvh - 40px));
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -66,6 +68,22 @@ body {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
perspective: 1000px;
|
||||
transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
|
||||
}
|
||||
|
||||
.anchor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#details:target + .card-container {
|
||||
width: var(--width-expanded);
|
||||
height: var(--height-expanded);
|
||||
}
|
||||
|
||||
#details:target + .card-container .card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -76,10 +94,16 @@ body {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-container:hover .card, #flip:target {
|
||||
#flip:target, .card-container:has(.back :focus-visible) .card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.card-container:hover .card {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card .front, .card .back {
|
||||
background-image: url("../img/noise.png");
|
||||
background-repeat: repeat;
|
||||
@@ -105,7 +129,7 @@ body {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.card .front hr {
|
||||
.card .front hr, .card .back hr {
|
||||
height: calc(var(--height) / 2);
|
||||
width: 0px;
|
||||
|
||||
@@ -131,13 +155,111 @@ body {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
.card .front .name .slogan {
|
||||
margin: 12px 0 0 0;
|
||||
font-size: 0.85em;
|
||||
font-weight: 300;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.card .back {
|
||||
transform: rotateX(180deg);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card .back-main {
|
||||
flex-shrink: 0;
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card .details {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 50px 50px 50px;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s, visibility 0s 0.15s;
|
||||
}
|
||||
|
||||
#details:target + .card-container .back-main {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
#details:target + .card-container .details {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity 0.2s 0.1s, visibility 0s;
|
||||
}
|
||||
|
||||
.card .details p {
|
||||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.card .details p + p {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.card .details-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
padding: 0 0 15px 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
font-size: 0.85em;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.card .details-button i {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.card .details-close {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#details:target + .card-container .details-open,
|
||||
#details:target + .card-container .flip-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#details:target + .card-container .details-close {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.card .details-close-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.card .details-close-touch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card .details-close-hover {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.card .back hr {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.card .back ul {
|
||||
@@ -161,21 +283,76 @@ body {
|
||||
}
|
||||
|
||||
.card .back .interests {
|
||||
font-size: 1.4em;
|
||||
letter-spacing: 0.3em;
|
||||
line-height: 1.6em;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
row-gap: 6px;
|
||||
}
|
||||
|
||||
.card .back .interests .label {
|
||||
text-align: right;
|
||||
font-size: 0.85em;
|
||||
font-weight: 300;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.card .back .interests .icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
font-size: 1.25em;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.card .back .interests .skill {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.card .back .interests .skill > i {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card .back .interests h2 {
|
||||
font-size: 0.7em;
|
||||
letter-spacing: 0;
|
||||
line-height: 1em;
|
||||
.card .back .interests .icon {
|
||||
width: 1.25em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.card .back .interests .caption {
|
||||
display: none;
|
||||
margin-top: 4px;
|
||||
|
||||
font-size: 0.5em;
|
||||
line-height: 1.2em;
|
||||
color: #606060;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
color: #404040;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
#details:target + .card-container .interests {
|
||||
row-gap: 14px;
|
||||
}
|
||||
|
||||
#details:target + .card-container .interests .label {
|
||||
align-self: start;
|
||||
padding-top: 0.1em;
|
||||
}
|
||||
|
||||
#details:target + .card-container .interests .icons {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#details:target + .card-container .interests .skill {
|
||||
width: 4.8em;
|
||||
}
|
||||
|
||||
#details:target + .card-container .interests .caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card .flip-button {
|
||||
@@ -188,6 +365,11 @@ body {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.card .flip-button i {
|
||||
width: 1.25em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cap-visibleWhenCanHover {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -246,17 +428,58 @@ li .spacer {
|
||||
:root {
|
||||
--height: 550px;
|
||||
--width: 300px;
|
||||
--width-expanded: var(--width);
|
||||
--height-expanded: min(700px, calc(100dvh - 80px));
|
||||
}
|
||||
.card .front, .card .back {
|
||||
.card .front, .card .back-main {
|
||||
flex-direction: column;
|
||||
}
|
||||
.card-container:hover .card, #flip:target {
|
||||
#flip:target, #details:target + .card-container .card, .card-container:has(.back :focus-visible) .card {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card .back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.card .front hr {
|
||||
.card .back-main {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.card .details {
|
||||
padding: 0 25px 25px 25px;
|
||||
}
|
||||
#details:target + .card-container .details {
|
||||
order: -1;
|
||||
flex: none;
|
||||
padding: 25px 20px 10px 20px;
|
||||
}
|
||||
#details:target + .card-container .back-main {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
padding: 10px 20px 15px 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#details:target + .card-container .back-main > ul,
|
||||
#details:target + .card-container .back-main > hr {
|
||||
display: none;
|
||||
}
|
||||
#details:target + .card-container .interests {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 4px;
|
||||
}
|
||||
#details:target + .card-container .interests .label {
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#details:target + .card-container .interests .icons {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 4px;
|
||||
}
|
||||
#details:target + .card-container .interests .skill {
|
||||
width: auto;
|
||||
min-width: 3em;
|
||||
}
|
||||
.card .front hr, .card .back hr {
|
||||
width: calc(var(--width) / 2);
|
||||
height: 0px;
|
||||
|
||||
@@ -270,3 +493,15 @@ li .spacer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) and (max-width: 600px) {
|
||||
.card-container:hover .card {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card, .card-container, .card .back-main, .card .details {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
+5
-1
@@ -20,4 +20,8 @@ function contact(element) {
|
||||
element.innerHTML = previousContent;
|
||||
isCopyTimout = false;
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
var now = new Date();
|
||||
document.getElementById("age").textContent = now.getFullYear() - 2003 - (now.getMonth() < 8 ? 1 : 0);
|
||||
document.getElementById("linux-years").textContent = now.getFullYear() - 2017;
|
||||
+71
-42
@@ -29,6 +29,7 @@
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
</head>
|
||||
<body>
|
||||
<span id="details" class="anchor"></span>
|
||||
<div class="card-container">
|
||||
<div class="card" id="flip">
|
||||
<div class="front">
|
||||
@@ -40,52 +41,80 @@
|
||||
<li>Softwareentwickler</li>
|
||||
<li>Systemadministrator</li>
|
||||
</ul>
|
||||
<p class="slogan">Von Elektronik über Infrastruktur<br>und Applikationen bis zum Nutzer</p>
|
||||
</div>
|
||||
<a class="cap-visibleWhenCanHover flip-button" href="#flip"><i class="fa-solid fa-angles-right"></i></a>
|
||||
<a class="cap-visibleWhenCanHover flip-button" href="#flip" aria-label="Karte umdrehen"><i class="fa-solid fa-angles-right"></i></a>
|
||||
</div>
|
||||
<div class="back">
|
||||
<ul>
|
||||
<li><i class="fa-solid fa-person"></i>22 Jahre</li>
|
||||
<li><i class="fa-solid fa-location-dot"></i>Fulda</li>
|
||||
<li><i class="fa-solid fa-graduation-cap"></i>Fachinformatiker [AE]</li>
|
||||
<li class="spacer"></li>
|
||||
<li class="requires-js"><p class="clickable" onclick="contact(this)"><i class="fa-solid fa-at"></i>Kontaktiere mich!</p></li>
|
||||
<noscript><li><i class="fa-solid fa-link-slash"></i>Aktiviere JavaScript</li></noscript>
|
||||
<li class="spacer"></li>
|
||||
<li><a target="_blank" href="https://mhsl.eu/"><i class="fa-solid fa-globe"></i>mhsl.eu</a></li>
|
||||
<li><a target="_blank" href="https://mhsl.eu/gitea/"><i class="fa-brands fa-git-alt"></i>Gitea</a></li>
|
||||
<li><a target="_blank" href="https://github.com/muelleel/"><i class="fa-brands fa-github"></i>GitHub</a></li>
|
||||
<li><a target="_blank" href="https://mhsl.eu/teamspeak"><i class="fa-brands fa-teamspeak"></i>TeamSpeak</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="interests">
|
||||
<h2>Erfahrungen mit</h2>
|
||||
<i class="fa-brands fa-osi" title="Open Source Initiative"></i>
|
||||
<br>
|
||||
<i class="fa-brands fa-flutter" title="Flutter"></i>
|
||||
<i class="fa-brands fa-react" title="React"></i>
|
||||
<i class="fa-brands fa-vuejs" title="Vue"></i>
|
||||
<i class="fa-brands fa-laravel" title="Laravel"></i>
|
||||
<br>
|
||||
<i class="fa-brands fa-java" title="Java"></i>
|
||||
<i class="fa-brands fa-dart-lang" title="Dart"></i>
|
||||
<i class="fa-brands fa-php" title="PHP"></i>
|
||||
<i class="fa-brands fa-js" title="JavaScript"></i>
|
||||
<i class="fa-brands fa-html5" title="HTML"></i>
|
||||
<i class="fa-brands fa-css3-alt" title="CSS"></i>
|
||||
<br>
|
||||
<i class="fa-brands fa-linux" title="Linux"></i>
|
||||
<i class="fa-brands fa-windows" title="Windows"></i>
|
||||
<i class="fa-brands fa-android" title="Android"></i>
|
||||
<i class="fa-brands fa-apple" title="iOS & MacOS"></i>
|
||||
<i class="fa-brands fa-raspberry-pi" title="Raspberry Pi & Raspberry Pi OS"></i>
|
||||
<br>
|
||||
<i class="fa-brands fa-google-play" title="Google Play Store"></i>
|
||||
<i class="fa-brands fa-app-store-ios" title="Apple App Store"></i>
|
||||
<a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
|
||||
<a class="details-button details-close details-close-touch" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
|
||||
<a class="details-button details-close details-close-hover" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
|
||||
<div class="back-main">
|
||||
<ul>
|
||||
<li class="requires-js"><i class="fa-solid fa-person"></i><span id="age">?</span> Jahre</li>
|
||||
<li><i class="fa-solid fa-location-dot"></i>Fulda</li>
|
||||
<li title="Fachinformatiker für Anwendungsentwicklung"><i class="fa-solid fa-graduation-cap"></i>Fachinformatiker</li>
|
||||
<li class="spacer"></li>
|
||||
<li class="requires-js"><p class="clickable" role="button" tabindex="0" onclick="contact(this)" onkeydown="if (event.key === 'Enter') contact(this)"><i class="fa-solid fa-at"></i>Kontaktiere mich!</p></li>
|
||||
<noscript><li><i class="fa-solid fa-link-slash"></i>Aktiviere JavaScript</li></noscript>
|
||||
<li class="spacer"></li>
|
||||
<li><a target="_blank" href="https://mhsl.eu/gitea/explore/repos"><i class="fa-brands fa-git-alt"></i>Öffentliche Projekte</a></li>
|
||||
<li><a target="_blank" href="https://mhsl.eu/teamspeak"><i class="fa-brands fa-teamspeak"></i>TeamSpeak</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="interests">
|
||||
<span class="label">Web</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><svg class="icon" role="img" viewBox="0 0 24 24"><title>Svelte</title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"/></svg><span class="caption">Svelte</span></span>
|
||||
<span class="skill"><svg class="icon" role="img" viewBox="0 0 24 24"><title>TypeScript/JavaScript</title><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"/></svg><span class="caption">TypeScript</span></span>
|
||||
</span>
|
||||
<span class="label">Apps</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><i class="fa-brands fa-flutter" title="Flutter & Dart"></i><span class="caption">Flutter</span></span>
|
||||
<span class="skill"><i class="fa-brands fa-android" title="Android"></i><span class="caption">Android</span></span>
|
||||
<span class="skill"><i class="fa-brands fa-apple" title="iOS"></i><span class="caption">iOS</span></span>
|
||||
</span>
|
||||
<span class="label">Backend</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><i class="fa-brands fa-java" title="Java"></i><span class="caption">Java</span></span>
|
||||
<span class="skill"><i class="fa-solid fa-database" title="SQL & Datenbanken"></i><span class="caption">SQL</span></span>
|
||||
</span>
|
||||
<span class="label">Infrastruktur</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><i class="fa-brands fa-linux" title="Linux"></i><span class="caption">Linux</span></span>
|
||||
<span class="skill"><i class="fa-brands fa-docker" title="Docker"></i><span class="caption">Docker</span></span>
|
||||
<span class="skill"><svg class="icon" role="img" viewBox="0 0 24 24"><title>Proxmox VE & Backup Server (LXC, QEMU)</title><path d="M4.928 1.825c-1.09.553-1.09.64-.07 1.78 5.655 6.295 7.004 7.782 7.107 7.782.139.017 7.971-8.542 8.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115 2.455-.899 1.003-1.66 1.833-1.66 1.833-.017 0-.76-.813-1.642-1.798S8.473 2.1 8.127 1.91c-.796-.45-2.421-.484-3.2-.086zM1.297 4.367C.45 4.695 0 5.007 0 5.248c0 .121 1.331 1.678 2.94 3.459 1.625 1.78 2.939 3.268 2.939 3.302 0 .035-1.331 1.522-2.94 3.303C1.314 17.11.017 18.683.035 18.822c.086.467 1.504 1.055 2.541 1.055 1.678-.018 2.058-.312 5.603-4.202 1.78-1.954 3.233-3.614 3.233-3.666 0-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764 1.505-3.943 3.891-1.763 1.937-3.199 3.562-3.199 3.631 0 .07 1.453 1.712 3.234 3.666 3.544 3.89 3.925 4.184 5.602 4.202 1.038 0 2.455-.588 2.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32 0-.034 1.332-1.539 2.94-3.32C22.72 6.91 24.017 5.352 24 5.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954 16.973c-2.144 2.369-3.908 4.374-3.943 4.46-.034.07.208.312.52.537.414.311.864.432 1.711.467 1.574.103 2.161-.26 4.15-2.508.864-.968 1.608-1.78 1.625-1.78s.761.812 1.643 1.798c2.023 2.248 2.559 2.576 4.132 2.49.848-.035 1.297-.156 1.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069 0-1.867 1.954-4.011 4.34z"/></svg><span class="caption">Proxmox</span></span>
|
||||
<span class="skill"><i class="fa-solid fa-wifi" title="Netzwerk & Serverhardware"></i><span class="caption">Netzwerk</span></span>
|
||||
</span>
|
||||
<span class="label">Hardware</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><i class="fa-solid fa-microchip" title="Mikrocontroller"></i><span class="caption">Mikrocontroller</span></span>
|
||||
<span class="skill"><svg class="icon" role="img" viewBox="0 0 24 24"><title>C++</title><path d="M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076 1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012 15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112 19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z"/></svg><span class="caption">C++</span></span>
|
||||
<span class="skill"><i class="fa-brands fa-raspberry-pi" title="Raspberry Pi"></i><span class="caption">Raspberry Pi</span></span>
|
||||
<span class="skill"><svg class="icon" role="img" viewBox="0 0 24 24"><title>Elektronik & Digitaltechnik (ICs, Logikgatter)</title><path fill-rule="evenodd" d="M1.5 3h8.5a9 9 0 0 1 0 18H1.5Z M4.5 6h5.5a6 6 0 0 1 0 12H4.5Z M20.5 9a3 3 0 1 1 0 6a3 3 0 1 1 0-6Z M20.5 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2Z"/></svg><span class="caption">Elektronik</span></span>
|
||||
</span>
|
||||
<span class="label">Prozesse</span>
|
||||
<span class="icons">
|
||||
<span class="skill"><i class="fa-solid fa-diagram-project" title="Anforderungsanalyse, Prozessvereinfachung & Digitalisierung"></i><span class="caption">Prozessvereinfachung</span></span>
|
||||
<span class="skill"><i class="fa-solid fa-gears" title="Automatisierung"></i><span class="caption">Automatisierung</span></span>
|
||||
<span class="skill"><i class="fa-solid fa-headset" title="Support & Projektbetreuung"></i><span class="caption">Projektbetreuung</span></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="cap-visibleWhenCanHover flip-button" href="#unflip"><i class="fa-solid fa-angles-left"></i></a>
|
||||
<a class="cap-visibleWhenUnPinned flip-button" href="#flip"><i class="fa-solid fa-thumbtack"></i></a>
|
||||
<a class="cap-visibleWhenPinned flip-button" href="#unflip"><i class="fa-solid fa-thumbtack-slash"></i></a>
|
||||
<div class="details">
|
||||
<p>
|
||||
Ich bin Elias und komme aus der Nähe von Fulda in Hessen.
|
||||
Angefangen habe ich mit Webentwicklung, heute liegt mein Schwerpunkt im Backend, bei Bedarf ergänzt durch plattformübergreifende Apps mit Flutter.
|
||||
Nebenher begleitet mich Linux seit <span id="linux-years">vielen</span> Jahren: Eigene Server mit Proxmox, Hardware und Mikrocontroller gehören für mich dazu.
|
||||
</p>
|
||||
<p>
|
||||
Beruflich bin ich Fachinformatiker für Anwendungsentwicklung und arbeite als IT-Administrator im Bildungsbereich, wo ich unter anderem Prozesse vereinfache und digitalisiere.
|
||||
Am meisten Spaß macht es mir, Dinge von Grund auf zu bauen: vom ersten Gespräch über die Anforderungen bis zur fertigen Lösung.
|
||||
</p>
|
||||
</div>
|
||||
<a class="cap-visibleWhenCanHover flip-button" href="#unflip" aria-label="Karte zurückdrehen"><i class="fa-solid fa-angles-left"></i></a>
|
||||
<a class="cap-visibleWhenUnPinned flip-button" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
|
||||
<a class="cap-visibleWhenPinned flip-button" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user