diff --git a/assets/css/style.css b/assets/css/style.css index 616a303..f4dffb7 100644 --- a/assets/css/style.css +++ b/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; - 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; + } +} diff --git a/assets/js/script.js b/assets/js/script.js index 8842a8e..3456ffd 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -20,4 +20,8 @@ function contact(element) { element.innerHTML = previousContent; isCopyTimout = false; }, 3000) -} \ No newline at end of file +} + +var now = new Date(); +document.getElementById("age").textContent = now.getFullYear() - 2003 - (now.getMonth() < 8 ? 1 : 0); +document.getElementById("linux-years").textContent = now.getFullYear() - 2017; diff --git a/index.html b/index.html index ead82b5..3ad0354 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ +
@@ -40,52 +41,80 @@
  • Softwareentwickler
  • Systemadministrator
    • +

    Von Elektronik über Infrastruktur
    und Applikationen bis zum Nutzer

    - +
    - - -
    -

    Erfahrungen mit

    - -
    - - - - -
    - - - - - - -
    - - - - - -
    - - + Mehr + Weniger + Weniger +
    + +
    +
    + Web + + SvelteSvelte + TypeScript/JavaScriptTypeScript + + Apps + + Flutter + Android + iOS + + Backend + + Java + SQL + + Infrastruktur + + Linux + Docker + Proxmox VE & Backup Server (LXC, QEMU)Proxmox + Netzwerk + + Hardware + + Mikrocontroller + C++C++ + Raspberry Pi + Elektronik & Digitaltechnik (ICs, Logikgatter)Elektronik + + Prozesse + + Prozessvereinfachung + Automatisierung + Projektbetreuung + +
    - - - +
    +

    + 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 vielen Jahren: Eigene Server mit Proxmox, Hardware und Mikrocontroller gehören für mich dazu. +

    +

    + 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. +

    +
    + + +