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

assets/css/style.css

@@ -2,12 +2,21 @@
     --height: 300px;
     --width: 550px;
     --width-expanded: min(780px, calc(100vw - 40px));
-    --height-expanded: min(615px, calc(100dvh - 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;
 }
 
@@ -24,7 +33,6 @@ body {
     justify-content: center;
     align-items: center;
 
-    padding: 0;
     margin: 0;
     height: 100dvh;
     width: 100vw;
@@ -64,11 +72,15 @@ body {
     opacity: 0.5;
 }
 
+.preload * {
+    transition: none !important;
+}
+
 .card-container {
     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);
+    transition: width 0.3s var(--ease-expand), height 0.3s var(--ease-expand);
 }
 
 .anchor {
@@ -82,31 +94,37 @@ body {
     height: var(--height-expanded);
 }
 
-#details:target + .card-container .card {
-    transform: rotateX(180deg);
-}
-
 .card {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 1s;
     transform-style: preserve-3d;
+
+    animation: hint 0.9s ease-in-out 1.2s;
+    animation-composition: add;
 }
 
-#flip:target, .card-container:has(.back :focus-visible) .card {
-    transform: rotateX(180deg);
+@keyframes hint {
+    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: rotateX(180deg);
+        transform: rotate3d(var(--flip-axis), 180deg);
     }
 }
 
 .card .front, .card .back {
     background-image: url("../img/noise.png");
-    background-repeat: repeat;
 
     position: absolute;
     width: 100%;
@@ -119,7 +137,6 @@ body {
 
 .card .front {
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
@@ -144,9 +161,7 @@ body {
 }
 
 .card .front .name h1 {
-    text-align: left;
     margin: 0 0 10px 0;
-    padding: 0;
 }
 
 .card .front .name ul {
@@ -155,16 +170,19 @@ body {
     list-style: square;
 }
 
-.card .front .name .slogan {
-    margin: 12px 0 0 0;
+.card .front .name .slogan,
+.card .details h2,
+.card .back .interests .label {
     font-size: 0.85em;
     font-weight: 300;
-    color: #606060;
+    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;
@@ -174,18 +192,15 @@ body {
     flex-shrink: 0;
     height: var(--height);
     overflow: hidden;
-    transition: height 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.15s;
+    transition: height 0.3s var(--ease-expand), opacity 0.15s;
 
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
 
 .card .details {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 50px 50px 50px;
+    padding: 0 50px 10px 50px;
 
     opacity: 0;
     visibility: hidden;
@@ -193,7 +208,11 @@ body {
 }
 
 #details:target + .card-container .back-main {
-    height: 360px;
+    height: var(--height-main-expanded);
+}
+
+#details:target + .card-container .back {
+    overflow-y: auto;
 }
 
 #details:target + .card-container .details {
@@ -202,6 +221,10 @@ body {
     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;
@@ -211,20 +234,23 @@ body {
     margin-top: 0.7em;
 }
 
-.card .details-button {
+.card .flip-button, .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;
+    color: var(--color-control);
+}
+
+.card .details-button {
+    z-index: 1;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 0 15px 0;
 }
 
 .card .details-button i {
@@ -244,18 +270,16 @@ body {
     visibility: visible;
 }
 
-.card .details-close-hover {
-    display: none;
-}
-
-@media (hover: hover) {
-    .card .details-close-touch {
-        display: none;
-    }
-
-    .card .details-close-hover {
-        display: flex;
-    }
+#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 {
@@ -264,7 +288,6 @@ body {
 
 .card .back ul {
     list-style: none;
-    text-align: left;
     padding: 0;
     margin: 0;
 }
@@ -277,7 +300,7 @@ body {
     width: 20px;
     margin-right: 7px;
     text-align: center;
-    color: #404040;
+    color: var(--color-icon);
     font-size: 0.9em;
     line-height: 1em;
 }
@@ -292,9 +315,6 @@ body {
 
 .card .back .interests .label {
     text-align: right;
-    font-size: 0.85em;
-    font-weight: 300;
-    color: #606060;
 }
 
 .card .back .interests .icons {
@@ -302,7 +322,7 @@ body {
     align-items: center;
     gap: 0.4em;
     font-size: 1.25em;
-    color: #404040;
+    color: var(--color-icon);
 }
 
 .card .back .interests .skill {
@@ -312,7 +332,7 @@ body {
     width: 1.25em;
 }
 
-.card .back .interests .skill > i {
+.card .back .interests .skill > i, .card .flip-button i {
     width: 1.25em;
     text-align: center;
 }
@@ -329,7 +349,7 @@ body {
 
     font-size: 0.5em;
     line-height: 1.2em;
-    color: #606060;
+    color: var(--color-muted);
     text-align: center;
     hyphens: auto;
 }
@@ -356,152 +376,136 @@ body {
 }
 
 .card .flip-button {
-    position: absolute;
     right: 0;
-    bottom: 0;
     padding: 0 25px 15px 0;
-
-    font-size: 1em;
-    color: #808080;
 }
 
-.card .flip-button i {
-    width: 1.25em;
-    text-align: center;
+.card .front .flip-button {
+    top: 0;
+    left: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
 }
 
-.cap-visibleWhenCanHover {
-    visibility: visible;
+.card .pin-remove, #flip:target .pin-add {
+    display: none;
 }
 
-.cap-visibleWhenPinned {
-    visibility: hidden;
+#flip:target .pin-remove {
+    display: flex;
 }
 
-.cap-visibleWhenUnPinned {
-    visibility: hidden;
+@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) {
-    .cap-visibleWhenCanHover {
-        visibility: hidden;
-    }
-
-    .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;
-        --width: 300px;
-        --width-expanded: var(--width);
-        --height-expanded: min(700px, calc(100dvh - 80px));
-    }
-    .card .front, .card .back-main {
-        flex-direction: column;
-    }
-    #flip:target, #details:target + .card-container .card, .card-container:has(.back :focus-visible) .card {
-        transform: rotateY(180deg);
-    }
-    .card .back {
-        transform: rotateY(180deg);
-    }
-    .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;
-    }
+@media only screen and (max-width: 760px) {
     #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;
+}
+
+@media only screen and (max-width: 600px) {
+    :root {
+        --max-height: calc(100dvh - 110px);
+        --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;
     }
-    #details:target + .card-container .interests .label {
-        text-align: left;
-        margin-top: 8px;
+    .footer-container {
+        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+        right: 6px;
+        gap: 6px;
+        font-size: 0.7em;
+        padding: 3px 10px;
     }
-    #details:target + .card-container .interests .icons {
-        flex-wrap: wrap;
-        gap: 6px 4px;
+    .card .front, .card .back-main {
+        flex-direction: column;
     }
-    #details:target + .card-container .interests .skill {
-        width: auto;
-        min-width: 3em;
+    .card .front img {
+        max-height: min(200px, 30dvh);
     }
     .card .front hr, .card .back hr {
         width: calc(var(--width) / 2);
         height: 0px;
-    
-        border-radius: 10px;
-        border: 2px dashed lightgray;
-    
-        margin: 0 10px;
+        margin: 0;
     }
     .card .front .name {
-        margin-top: 30px;
+        margin-top: 25px;
         margin-left: 0;
+        text-align: center;
     }
-}
-
-@media (hover: hover) and (max-width: 600px) {
-    .card-container:hover .card {
-        transform: rotateY(180deg);
+    .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,27 +1,29 @@
-var jsBlocks = document.getElementsByClassName("requires-js");
-Array.from(jsBlocks).forEach(block => block.style.display = "block");
-var isCopyTimout = false;
+var isCopyTimeout = false;
 
 function contact(element) {
-    var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
-    var uri = atob("bWFpbHRv") + ":" + adress;
-    window.location.href = uri;
+    var address = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
+    window.location.href = atob("bWFpbHRv") + ":" + address;
 
     if(!navigator.clipboard) return;
-    navigator.clipboard.writeText(adress);
+    navigator.clipboard.writeText(address);
 
-    if(isCopyTimout) return;
-    var indicatorContent = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
+    if(isCopyTimeout) return;
     var previousContent = element.innerHTML;
-    element.innerHTML = indicatorContent;
-    isCopyTimout = true;
+    element.innerHTML = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
+    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

@@ -11,6 +11,7 @@
         <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">
@@ -27,6 +28,45 @@
         <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>
@@ -43,12 +83,12 @@
                         </ul>
                         <p class="slogan">Von Elektronik über Infrastruktur<br>und Applikationen bis zum Nutzer</p>
                     </div>
-                    <a class="cap-visibleWhenCanHover flip-button" href="#flip" aria-label="Karte umdrehen"><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">
                     <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>
+                    <a class="details-button details-close touch-only" href="#flip">Weniger<i class="fa-solid fa-chevron-up"></i></a>
+                    <a class="details-button details-close hover-only" 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>
@@ -102,19 +142,20 @@
                         </div>
                     </div>
                     <div class="details">
+                        <h2>Über mich</h2>
                         <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.
+                            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="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>
+                    <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>