made expanded view scroll like mobile with sticky less button reset scroll on collapse

assets/css/style.css

@@ -1,11 +1,22 @@
 :root {
     --height: 300px;
     --width: 550px;
+    --width-expanded: min(780px, calc(100vw - 40px));
+    --height-expanded: min(640px, calc(100dvh - 40px));
+    --height-main-expanded: 360px;
+
+    --flip-axis: 1, 0, 0;
+    --ease-expand: cubic-bezier(0.2, 0.9, 0.3, 1);
+
+    --color-icon: #404040;
+    --color-muted: #606060;
+    --color-control: #808080;
 }
 
 @font-face {
     font-family: "Roboto";
-    src: local("Roboto"), url("font/roboto.ttf") format("truetype");
+    src: local("Roboto"), url("font/roboto.woff2") format("woff2");
+    font-weight: 100 900;
     font-display: swap;
 }
 
@@ -22,7 +33,6 @@ body {
     justify-content: center;
     align-items: center;
 
-    padding: 0;
     margin: 0;
     height: 100dvh;
     width: 100vw;
@@ -33,21 +43,55 @@ body {
 
 .footer-container {
     position: absolute;
-    bottom: 0;
+    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-    right: 0;
+    right: 12px;
 
-    font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
-    padding: 3px 10px;
+    font-size: 0.8em;
-    opacity: 0.8;
+    padding: 5px 14px;
-    background-color: darkgray;
+    border-radius: 999px;
-    box-shadow: -1px -1px 5px darkgray;
+    color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(6px);
+}
+
+.footer-container a {
+    color: inherit;
+    transition: color 0.15s;
+}
+
+.footer-container a:hover {
+    color: white;
+}
+
+.footer-container .separator {
+    opacity: 0.5;
+}
+
+.preload * {
+    transition: none !important;
 }
 
 .card-container {
     width: var(--width);
     height: var(--height);
     perspective: 1000px;
+    transition: width 0.3s var(--ease-expand), height 0.3s var(--ease-expand);
+}
+
+.anchor {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#details:target + .card-container {
+    width: var(--width-expanded);
+    height: var(--height-expanded);
 }
 
 .card {
@@ -56,15 +100,31 @@ body {
     height: 100%;
     transition: transform 1s;
     transform-style: preserve-3d;
+
+    animation: hint 0.9s ease-in-out 1.2s;
+    animation-composition: add;
 }
 
-.card-container:hover .card, #flip:target {
+@keyframes hint {
-    transform: rotateX(180deg);
+    35% { transform: rotate3d(var(--flip-axis), 25deg); }
+    70% { transform: rotate3d(var(--flip-axis), -6deg); }
+}
+
+#flip:target,
+#details:target + .card-container .card,
+.card-container:has(.back :focus-visible) .card,
+.card .back {
+    transform: rotate3d(var(--flip-axis), 180deg);
+}
+
+@media (hover: hover) {
+    .card-container:hover .card {
+        transform: rotate3d(var(--flip-axis), 180deg);
+    }
 }
 
 .card .front, .card .back {
     background-image: url("../img/noise.png");
-    background-repeat: repeat;
 
     position: absolute;
     width: 100%;
@@ -77,7 +137,6 @@ body {
 
 .card .front {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
@@ -87,7 +146,7 @@ body {
     max-height: 200px;
 }
 
-.card .front hr {
+.card .front hr, .card .back hr {
     height: calc(var(--height) / 2);
     width: 0px;
 
@@ -102,9 +161,7 @@ body {
 }
 
 .card .front .name h1 {
-    text-align: left;
     margin: 0 0 10px 0;
-    padding: 0;
 }
 
 .card .front .name ul {
@@ -113,18 +170,124 @@ body {
     list-style: square;
 }
 
+.card .front .name .slogan,
+.card .details h2,
+.card .back .interests .label {
+    font-size: 0.85em;
+    font-weight: 300;
+    color: var(--color-muted);
+}
+
+.card .front .name .slogan {
+    margin: 12px 0 0 0;
+}
+
 .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 var(--ease-expand), opacity 0.15s;
 
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
+}
+
+.card .details {
+    padding: 0 50px 10px 50px;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.15s, visibility 0s 0.15s;
+}
+
+#details:target + .card-container .back-main {
+    height: var(--height-main-expanded);
+}
+
+#details:target + .card-container .back {
+    overflow-y: auto;
+}
+
+#details:target + .card-container .details {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.2s 0.1s, visibility 0s;
+}
+
+.card .details h2 {
+    margin: 0 0 6px 0;
+}
+
+.card .details p {
+    margin: 0;
+    line-height: 1.4em;
+}
+
+.card .details p + p {
+    margin-top: 0.7em;
+}
+
+.card .flip-button, .card .details-button {
+    position: absolute;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    font-size: 0.85em;
+    color: var(--color-control);
+}
+
+.card .details-button {
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 0 15px 0;
+}
+
+.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;
+}
+
+#details:target + .card-container .details-close {
+    position: sticky;
+    order: 1;
+    left: auto;
+    transform: none;
+    flex: none;
+    justify-content: center;
+    margin-top: auto;
+    padding: 18px 0 15px 0;
+    background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
+}
+
+.card .back hr {
+    margin: 0 20px;
 }
 
 .card .back ul {
     list-style: none;
-    text-align: left;
     padding: 0;
     margin: 0;
 }
@@ -137,118 +300,212 @@ body {
     width: 20px;
     margin-right: 7px;
     text-align: center;
-    color: #404040;
+    color: var(--color-icon);
     font-size: 0.9em;
     line-height: 1em;
 }
 
 .card .back .interests {
-    font-size: 1.4em;
+    display: grid;
-    letter-spacing: 0.3em;
+    grid-template-columns: auto auto;
-    line-height: 1.6em;
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 6px;
+}
+
+.card .back .interests .label {
+    text-align: right;
+}
+
+.card .back .interests .icons {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    font-size: 1.25em;
+    color: var(--color-icon);
+}
+
+.card .back .interests .skill {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 1.25em;
+}
+
+.card .back .interests .skill > i, .card .flip-button i {
+    width: 1.25em;
     text-align: center;
 }
 
-.card .back .interests h2 {
+.card .back .interests .icon {
-    font-size: 0.7em;
+    width: 1.25em;
-    letter-spacing: 0;
+    height: 1em;
-    line-height: 1em;
+    fill: currentColor;
+}
+
+.card .back .interests .caption {
+    display: none;
+    margin-top: 4px;
+
+    font-size: 0.5em;
+    line-height: 1.2em;
+    color: var(--color-muted);
     text-align: center;
-    padding: 0;
+    hyphens: auto;
-    margin: 0;
+}
-    margin-bottom: 5px;
+
-    color: #404040;
+#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 {
-    position: absolute;
     right: 0;
-    bottom: 0;
     padding: 0 25px 15px 0;
-
-    font-size: 1em;
-    color: #808080;
 }
 
-.cap-visibleWhenCanHover {
+.card .front .flip-button {
-    visibility: visible;
+    top: 0;
+    left: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
 }
 
-.cap-visibleWhenPinned {
+.card .pin-remove, #flip:target .pin-add {
-    visibility: hidden;
+    display: none;
 }
 
-.cap-visibleWhenUnPinned {
+#flip:target .pin-remove {
-    visibility: hidden;
+    display: flex;
+}
+
+@media (hover: hover) {
+    .touch-only {
+        display: none !important;
+    }
+}
+
+@media not (hover: hover) {
+    .hover-only {
+        display: none !important;
+    }
 }
 
 a {
-    font-style: normal;
     text-decoration: none;
     color: black;
-    cursor: pointer;
-}
-
-li .spacer {
-    height: 1rem;
 }
 
 .clickable {
     cursor: pointer;
 }
 
-.requires-js {
+html:not(.js) .requires-js {
     display: none;
 }
 
-@media (hover: hover) {
+@media only screen and (max-width: 760px) {
-    .cap-visibleWhenCanHover {
+    #details:target + .card-container .back-main > ul,
-        visibility: hidden;
+    #details:target + .card-container .back-main > hr {
+        display: none;
     }
-
-    .cap-visibleWhenPinned {
-        visibility: hidden;
-    }
-    
-    .cap-visibleWhenUnPinned {
-        visibility: visible;
-    }
-    
-    #flip:target .cap-visibleWhenPinned {
-        visibility: visible;
-    }
-    
-    #flip:target .cap-visibleWhenUnPinned {
-        visibility: hidden;
-    }
-    
 }
 
 @media only screen and (max-width: 600px) {
     :root {
-        --height: 550px;
+        --max-height: calc(100dvh - 110px);
-        --width: 300px;
+        --width: min(300px, calc(100vw - 32px));
+        --height: min(550px, var(--max-height));
+        --width-expanded: min(440px, calc(100vw - 24px));
+        --height-expanded: var(--max-height);
+        --flip-axis: 0, 1, 0;
     }
-    .card .front, .card .back {
+    .footer-container {
+        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+        right: 6px;
+        gap: 6px;
+        font-size: 0.7em;
+        padding: 3px 10px;
+    }
+    .card .front, .card .back-main {
         flex-direction: column;
     }
-    .card-container:hover .card, #flip:target {
+    .card .front img {
-        transform: rotateY(180deg);
+        max-height: min(200px, 30dvh);
     }
-    .card .back {
+    .card .front hr, .card .back hr {
-        transform: rotateY(180deg);
-    }
-    .card .front hr {
         width: calc(var(--width) / 2);
         height: 0px;
-    
+        margin: 0;
-        border-radius: 10px;
-        border: 2px dashed lightgray;
-    
-        margin: 0 10px;
     }
     .card .front .name {
-        margin-top: 30px;
+        margin-top: 25px;
         margin-left: 0;
+        text-align: center;
+    }
+    .card .front .name ul {
+        padding: 0;
+        list-style: none;
+    }
+    .card .back-main {
+        gap: 28px;
+        padding-bottom: 30px;
+        box-sizing: border-box;
+    }
+    #details:target + .card-container .details {
+        padding: 20px 25px 5px 25px;
+    }
+    #details:target + .card-container .back-main {
+        flex: none;
+        height: auto;
+        overflow: visible;
+        justify-content: flex-start;
+        padding: 15px 25px 0 25px;
+    }
+    #details:target + .card-container .interests {
+        grid-template-columns: 1fr;
+        row-gap: 4px;
+        width: 100%;
+    }
+    #details:target + .card-container .interests .label {
+        text-align: left;
+        margin-top: 10px;
+    }
+    #details:target + .card-container .interests .icons {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px 4px;
+    }
+    #details:target + .card-container .interests .skill {
+        width: auto;
+        min-width: 0;
+    }
+    #details:target + .card-container .interests .caption {
+        -webkit-hyphens: auto;
+        overflow-wrap: break-word;
+        max-width: 100%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .card, .card-container, .card .back-main, .card .details {
+        transition: none;
+        animation: none;
     }
 }

assets/js/script.js

@@ -1,23 +1,29 @@
-var jsBlocks = document.getElementsByClassName("requires-js");
+var isCopyTimeout = false;
-Array.from(jsBlocks).forEach(block => block.style.display = "block");
-var isCopyTimout = false;
 
 function contact(element) {
-    var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
+    var address = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
-    var uri = atob("bWFpbHRv") + ":" + adress;
+    window.location.href = atob("bWFpbHRv") + ":" + address;
-    window.location.href = uri;
 
     if(!navigator.clipboard) return;
-    navigator.clipboard.writeText(adress);
+    navigator.clipboard.writeText(address);
 
-    if(isCopyTimout) return;
+    if(isCopyTimeout) return;
-    var indicatorContent = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
     var previousContent = element.innerHTML;
-    element.innerHTML = indicatorContent;
+    element.innerHTML = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
-    isCopyTimout = true;
+    isCopyTimeout = true;
 
     setTimeout(() => {
         element.innerHTML = previousContent;
-        isCopyTimout = false;
+        isCopyTimeout = 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;
+
+window.addEventListener("hashchange", () => {
+    if(location.hash !== "#details") document.querySelector(".card .back").scrollTop = 0;
+});
+
+requestAnimationFrame(() => requestAnimationFrame(() => document.documentElement.classList.remove("preload")));

index.html

@@ -6,15 +6,70 @@
 
         <link rel="stylesheet" href="assets/css/style.css">
         <link rel="stylesheet" href="assets/fa/css/all.min.css" >
-        <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">        
+        <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon.png">
+        <link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicon-192.png">
+        <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
+        <link rel="canonical" href="https://www.elias-mueller.com/aboutme/">        
 
+        <script>document.documentElement.classList.add("js", "preload");</script>
         <script src="assets/js/script.js" defer></script>
    
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
-        <meta name="description" content="Elias Müller - 21 Jahre, Fachinformatiker für Anwendungsentwicklung aus Fulda. Erfahrung mit Linux, Java, Webentwicklung, Android, iOS & mehr!">
+        <meta name="description" content="Elias Müller, Fachinformatiker aus Fulda: Backend, Web und Apps, Linux-Infrastruktur, Elektronik und die Digitalisierung von Prozessen.">
+
+        <meta property="og:type" content="profile">
+        <meta property="og:url" content="https://www.elias-mueller.com/aboutme/">
+        <meta property="og:title" content="Elias Müller">
+        <meta property="og:description" content="Elias Müller, Fachinformatiker aus Fulda: Backend, Web und Apps, Linux-Infrastruktur, Elektronik und die Digitalisierung von Prozessen.">
+        <meta property="og:image" content="https://www.elias-mueller.com/aboutme/assets/img/preview.jpg">
+        <meta property="og:image:width" content="1200">
+        <meta property="og:image:height" content="630">
+        <meta property="og:image:alt" content="Visitenkarte von Elias Müller">
+        <meta property="og:locale" content="de_DE">
+        <meta name="twitter:card" content="summary_large_image">
+
+        <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "Person",
+            "name": "Elias Müller",
+            "url": "https://www.elias-mueller.com/aboutme/",
+            "jobTitle": "Fachinformatiker für Anwendungsentwicklung",
+            "homeLocation": {
+                "@type": "Place",
+                "address": {
+                    "@type": "PostalAddress",
+                    "addressLocality": "Fulda",
+                    "addressRegion": "Hessen",
+                    "addressCountry": "DE"
+                }
+            },
+            "knowsAbout": [
+                "Backend-Entwicklung",
+                "Webentwicklung",
+                "App-Entwicklung",
+                "Java",
+                "TypeScript",
+                "Svelte",
+                "Flutter",
+                "Linux",
+                "Docker",
+                "Proxmox",
+                "Netzwerktechnik",
+                "Mikrocontroller",
+                "Elektronik",
+                "Prozessdigitalisierung"
+            ],
+            "sameAs": [
+                "https://mhsl.eu/gitea/MineTec",
+                "https://github.com/muelleel"
+            ]
+        }
+        </script>
     </head>
     <body>
+        <span id="details" class="anchor"></span>
         <div class="card-container">
             <div class="card" id="flip">
                 <div class="front">
@@ -26,58 +81,87 @@
                             <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="flip-button flip-front" href="#flip">Umdrehen<i class="fa-solid fa-angles-right"></i></a>
                 </div>
                 <div class="back">
-                    <ul>
+                    <a class="details-button details-open" href="#details">Mehr<i class="fa-solid fa-chevron-down"></i></a>
-                        <li><i class="fa-solid fa-person"></i>22 Jahre</li>
+                    <a class="details-button details-close touch-only" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
-                        <li><i class="fa-solid fa-location-dot"></i>Fulda</li>
+                    <a class="details-button details-close hover-only" href="#unflip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
-                        <li><i class="fa-solid fa-graduation-cap"></i>Fachinformatiker [AE]</li>
+                    <div class="back-main">
-                        <li class="spacer"></li>
+                        <ul>
-                        <li class="requires-js"><p class="clickable" onclick="contact(this)"><i class="fa-solid fa-at"></i>Kontaktiere mich!</p></li>
+                            <li class="requires-js"><i class="fa-solid fa-person"></i><span id="age">?</span> Jahre</li>
-                        <noscript><li><i class="fa-solid fa-link-slash"></i>Aktiviere JavaScript</li></noscript>
+                            <li><i class="fa-solid fa-location-dot"></i>Fulda</li>
-                        <li class="spacer"></li>
+                            <li title="Fachinformatiker für Anwendungsentwicklung"><i class="fa-solid fa-graduation-cap"></i>Fachinformatiker</li>
-                        <li><a target="_blank" href="https://mhsl.eu/"><i class="fa-solid fa-globe"></i>mhsl.eu</a></li>
+                            <li class="spacer"></li>
-                        <li><a target="_blank" href="https://mhsl.eu/gitea/"><i class="fa-brands fa-git-alt"></i>Gitea</a></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>
-                        <li><a target="_blank" href="https://github.com/muelleel/"><i class="fa-brands fa-github"></i>GitHub</a></li>
+                            <noscript><li><i class="fa-solid fa-link-slash"></i>Aktiviere JavaScript</li></noscript>
-                        <li><a target="_blank" href="https://mhsl.eu/teamspeak"><i class="fa-brands fa-teamspeak"></i>TeamSpeak</a></li>
+                            <li class="spacer"></li>
-                    </ul>
+                            <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>
-                    <div class="interests">
+                        </ul>
-                        <h2>Erfahrungen mit</h2>
+                        <hr>
-                        <i class="fa-brands fa-osi" title="Open Source Initiative"></i>
+                        <div class="interests">
-                        <br>
+                            <span class="label">Web</span>
-                        <i class="fa-brands fa-flutter" title="Flutter"></i>
+                            <span class="icons">
-                        <i class="fa-brands fa-react" title="React"></i>
+                                <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>
-                        <i class="fa-brands fa-vuejs" title="Vue"></i>
+                                <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>
-                        <i class="fa-brands fa-laravel" title="Laravel"></i>
+                            </span>
-                        <br>
+                            <span class="label">Apps</span>
-                        <i class="fa-brands fa-java" title="Java"></i>
+                            <span class="icons">
-                        <i class="fa-brands fa-dart-lang" title="Dart"></i>
+                                <span class="skill"><i class="fa-brands fa-flutter" title="Flutter & Dart"></i><span class="caption">Flutter</span></span>
-                        <i class="fa-brands fa-php" title="PHP"></i>
+                                <span class="skill"><i class="fa-brands fa-android" title="Android"></i><span class="caption">Android</span></span>
-                        <i class="fa-brands fa-js" title="JavaScript"></i>
+                                <span class="skill"><i class="fa-brands fa-apple" title="iOS"></i><span class="caption">iOS</span></span>
-                        <i class="fa-brands fa-html5" title="HTML"></i>
+                            </span>
-                        <i class="fa-brands fa-css3-alt" title="CSS"></i>
+                            <span class="label">Backend</span>
-                        <br>
+                            <span class="icons">
-                        <i class="fa-brands fa-linux" title="Linux"></i>
+                                <span class="skill"><i class="fa-brands fa-java" title="Java"></i><span class="caption">Java</span></span>
-                        <i class="fa-brands fa-windows" title="Windows"></i>
+                                <span class="skill"><i class="fa-solid fa-database" title="SQL & Datenbanken"></i><span class="caption">SQL</span></span>
-                        <i class="fa-brands fa-android" title="Android"></i>
+                            </span>
-                        <i class="fa-brands fa-apple" title="iOS & MacOS"></i>
+                            <span class="label">Infrastruktur</span>
-                        <i class="fa-brands fa-raspberry-pi" title="Raspberry Pi & Raspberry Pi OS"></i>
+                            <span class="icons">
-                        <br>
+                                <span class="skill"><i class="fa-brands fa-linux" title="Linux"></i><span class="caption">Linux</span></span>
-                        <i class="fa-brands fa-google-play" title="Google Play Store"></i>
+                                <span class="skill"><i class="fa-brands fa-docker" title="Docker"></i><span class="caption">Docker</span></span>
-                        <i class="fa-brands fa-app-store-ios" title="Apple App Store"></i>
+                                <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>
+                    <div class="details">
-                    <a class="cap-visibleWhenUnPinned flip-button" href="#flip"><i class="fa-solid fa-thumbtack"></i></a>
+                        <h2>Über mich</h2>
-                    <a class="cap-visibleWhenPinned flip-button" href="#unflip"><i class="fa-solid fa-thumbtack-slash"></i></a>
+                        <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. Dort entwickle ich unter anderem eine eigene Plattform, mit der wir Prozesse vereinfachen und digitalisieren.
+                            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="flip-button touch-only" href="#unflip"><i class="fa-solid fa-angles-left"></i>Zurück</a>
+                    <a class="flip-button hover-only pin-add" href="#flip" aria-label="Rückseite anpinnen" title="Anpinnen"><i class="fa-solid fa-thumbtack"></i></a>
+                    <a class="flip-button hover-only pin-remove" href="#unflip" aria-label="Rückseite lösen" title="Lösen"><i class="fa-solid fa-thumbtack-slash"></i></a>
                 </div>
             </div>
         </div>
         <div class="footer-container">
             <a href="https://mhsl.eu/id.html">Impressum</a>
-            |
+            <span class="separator">|</span>
             <a href="https://mhsl.eu/datenschutz.html">Datenschutz</a>
         </div>
     </body>