automated age added slogan redesigned back with skill categories and expandable details fixed card flip on touch devices and accessibility improvements

assets/css/style.css

@@ -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;
+    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;
+    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 {
+.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: #606060;
     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 {
@@ -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;
+    }
+}

assets/js/script.js

@@ -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;

index.html

@@ -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>
+                    <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 details-close-touch" 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 details-close-hover" 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>
+                        <p>
-                    <a class="cap-visibleWhenPinned flip-button" href="#unflip"><i class="fa-solid fa-thumbtack-slash"></i></a>
+                            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>