updated age

added imprint footer
added favicon
added local font and icons
restructured project

assets/css/style.css

@@ -0,0 +1,254 @@
+:root {
+    --height: 300px;
+    --width: 550px;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto"), url("font/roboto.ttf") format("truetype");
+    font-display: swap;
+}
+
+body {
+    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+    background-image: url("../img/background.svg");
+    background-color: black;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    margin: 0;
+    height: 100dvh;
+    width: 100vw;
+
+    min-height: var(--height);
+    min-width: var(--width);
+}
+
+.footer-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    font-size: 0.9em;
+
+    padding: 3px 10px;
+    opacity: 0.8;
+    background-color: darkgray;
+    box-shadow: -1px -1px 5px darkgray;
+}
+
+.card-container {
+    width: var(--width);
+    height: var(--height);
+    perspective: 1000px;
+}
+
+.card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 1s;
+    transform-style: preserve-3d;
+}
+
+.card-container:hover .card, #flip:target {
+    transform: rotateX(180deg);
+}
+
+.card .front, .card .back {
+    background-image: url("../img/noise.png");
+    background-repeat: repeat;
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+
+    border-radius: 10px;
+    background-color: white;
+}
+
+.card .front {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.card .front img {
+    border-radius: 50%;
+    max-height: 200px;
+}
+
+.card .front hr {
+    height: calc(var(--height) / 2);
+    width: 0px;
+
+    border-radius: 10px;
+    border: 2px dashed lightgray;
+
+    margin: 0 10px;
+}
+
+.card .front .name {
+    margin-left: 30px;
+}
+
+.card .front .name h1 {
+    text-align: left;
+    margin: 0 0 10px 0;
+    padding: 0;
+}
+
+.card .front .name ul {
+    padding: 0 0 0 20px;
+    margin: 0;
+    list-style: square;
+}
+
+.card .back {
+    transform: rotateX(180deg);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.card .back ul {
+    list-style: none;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+}
+
+.card .back ul li {
+    margin: 5px 0;
+}
+
+.card .back ul li i {
+    width: 20px;
+    margin-right: 7px;
+    text-align: center;
+    color: #404040;
+    font-size: 0.9em;
+    line-height: 1em;
+}
+
+.card .back .interests {
+    font-size: 1.4em;
+    letter-spacing: 0.3em;
+    line-height: 1.6em;
+    text-align: center;
+}
+
+.card .back .interests h2 {
+    font-size: 0.7em;
+    letter-spacing: 0;
+    line-height: 1em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 5px;
+    color: #404040;
+}
+
+.card .flip-button {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0 25px 15px 0;
+
+    font-size: 1em;
+    color: #808080;
+}
+
+.cap-visibleWhenCanHover {
+    visibility: visible;
+}
+
+.cap-visibleWhenPinned {
+    visibility: hidden;
+}
+
+.cap-visibleWhenUnPinned {
+    visibility: hidden;
+}
+
+a {
+    font-style: normal;
+    text-decoration: none;
+    color: black;
+    cursor: pointer;
+}
+
+li .spacer {
+    height: 1rem;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.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;
+    }
+    .card .front, .card .back {
+        flex-direction: column;
+    }
+    .card-container:hover .card, #flip:target {
+        transform: rotateY(180deg);
+    }
+    .card .back {
+        transform: rotateY(180deg);
+    }
+    .card .front hr {
+        width: calc(var(--width) / 2);
+        height: 0px;
+    
+        border-radius: 10px;
+        border: 2px dashed lightgray;
+    
+        margin: 0 10px;
+    }
+    .card .front .name {
+        margin-top: 30px;
+        margin-left: 0;
+    }
+}

assets/js/script.js

@@ -0,0 +1,23 @@
+var jsBlocks = document.getElementsByClassName("requires-js");
+Array.from(jsBlocks).forEach(block => block.style.display = "block");
+var isCopyTimout = false;
+
+function contact(element) {
+    var adress = atob("ZWxpYXM=") + atob("QGVsaWFzLW11ZWxsZXIuY29t");
+    var uri = atob("bWFpbHRv") + ":" + adress;
+    window.location.href = uri;
+
+    if(!navigator.clipboard) return;
+    navigator.clipboard.writeText(adress);
+
+    if(isCopyTimout) return;
+    var indicatorContent = "<i class=\"fa-solid fa-heart\"></i>E-Mail wurde kopiert!";
+    var previousContent = element.innerHTML;
+    element.innerHTML = indicatorContent;
+    isCopyTimout = true;
+
+    setTimeout(() => {
+        element.innerHTML = previousContent;
+        isCopyTimout = false;
+    }, 3000)
+}

index.html

@@ -1,203 +1,84 @@
 <!DOCTYPE html>
-<!--
-<?PHP
-    ach die gewohnheiten :)
--->
 <html lang="de">
     <head>
         <meta charset="utf-8">
         <title>Elias Müller</title>
-        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
+
+        <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">        
+
+        <script src="assets/js/script.js" defer></script>
+   
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+        
-        <style media="screen">
+        <meta name="description" content="Elias Müller - 21 Jahre, Fachinformatiker für Anwendungsentwicklung aus Fulda. Erfahrung mit Linux, Java, Webentwicklung, Android, iOS & mehr!">
-            body {
-                font-family: "Roboto";
-
-                background-image: url("https://mhsl.eu/provide/muelleel/skyline.svg");
-                background-repeat: no-repeat;
-                background-position: center center;
-                background-attachment: fixed;
-                background-size: cover;
-            }
-            a {
-                color: black;
-                margin: 10px;
-            }
-
-            dt {
-                font-weight: bold;
-                font-size: 15px;
-            }
-            dd {
-                margin-bottom: 30px;
-                font-size: 1rem;
-            }
-            dt::after {
-                content: ": ";
-            }
-            .attributes dd {
-                margin-bottom: 30px;
-                font-size: 20px;
-            }
-
-            h1 {
-                color: #3f3f3f;
-                font-size: 20px;
-                text-transform: uppercase;
-            }
-            h1::before {
-                content: "# ";
-            }
-
-            ul {
-                list-style: none;
-            }
-            li::before {
-                content: "-> ";
-            }
-
-            hr {
-                margin: 30px 0;
-                border: 2px dashed gray;
-            }
-
-            .card {
-                margin: 50px 20%;
-                padding: 20px 50px;
-                background: #ffffffe0;
-
-                border-radius: 10px;
-            }
-            .card .top {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-            }
-            .card .top img {
-                border-radius: 50%;
-                max-height: 300px;
-                margin: 10px 15% 10px 10px;
-                border: 2px dashed gray;
-            }
-
-            .chapter {
-                padding: 0 30px;
-            }
-
-            .inset {
-                margin-left: 30px;
-            }
-
-            .footer {
-                text-align: center;
-            }
-            .footer a::before {
-                content: ">";
-            }
-            .footer a::after {
-                content: "<";
-            }
-
-            @media only screen and (max-width: 1100px) {
-                .card {
-                    margin: 30px 5%;
-                    padding: 10px;
-                }
-                .card .top {
-                    flex-direction: column;
-                }
-                .card .top img {
-                    max-height: 200px;
-                    margin: 10px;
-                }
-                .chapter {
-                    padding: 0 10px;
-                }
-                .inset {
-                    margin-left: 15px;
-                }
-            }
-
-        </style>
     </head>
     <body>
-        <div class="card">
+        <div class="card-container">
-            <div class="top">
+            <div class="card" id="flip">
-                <img src="https://mhsl.eu/provide/muelleel/tux.png" alt="tux penguin profile image">
+                <div class="front">
-                <div class="attributes">
+                    <img src="assets/img/tux.webp" alt="'Tux' penguin profile image">
-                    <dl>
+                    <hr>
-                        <dt>Name</dt>
+                    <div class="name">
-                        <dd>Elias Müller</dd>
+                        <h1>Elias Müller</h1>
-
+                        <ul>
-                        <dt>Geboren am</dt>
+                            <li>Softwareentwickler</li>
-                        <dd>18.08.2003</dd>
+                            <li>Systemadministrator</li>
-
+                        </ul>
-                        <dt>Wohnort</dt>
+                    </div>
-                        <dd>Petersberg</dd>
+                    <a class="cap-visibleWhenCanHover flip-button" href="#flip"><i class="fa-solid fa-angles-right"></i></a>
-                    </dl>
+                </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>
+                    </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>
             </div>
-            <hr>
+        </div>
-            <div class="chapter">
+        <div class="footer-container">
-                <h1>Über mich</h1>
+            <a href="https://mhsl.eu/id.html">Impressum</a>
-                <p class="inset">
+            |
-                    Als angehender Softwareentwickler lebe ich sehr nahe an der Welt aller Computern.
+            <a href="https://mhsl.eu/datenschutz.html">Datenschutz</a>
-                    Das Hosting von Dienstleistungen mit <b>Proxmox</b> auf meinem Home-Server ist neben der Softwareentwicklung ein weiteres gepflegtes Hobby, welches ich mit großer Leidenschaft verfolge.
-                    Dabei ist der Umgang mit Linux täglich gefragt, zumal auch mein Desktop darunter läuft.
-                    </p>
-            </div>
-            <hr>
-            <div class="chapter">
-                <h1>Interessen</h1>
-                <ul>
-                    <li>Open Source</li>
-                    <li>Linux Foundation</li>
-                    <li>RaspberryPi Foundation</li>
-                    <li>Pine64</li>
-                    <li>Pinguine und Igel</li>
-                </ul>
-            </div>
-            <hr>
-            <div class="chapter">
-                <h1>Bildung</h1>
-
-                <dl class="inset">
-                    <dt>2010-2014</dt>
-                    <dd>Grundschule: Johannes-Hack-Schule Petersberg</dd>
-
-                    <dt>2014-2020</dt>
-                    <dd>Mittelstufe: Marianum, Realschule und gymnasiale Oberstufe Fulda</dd>
-
-                    <dt>2020-2022</dt>
-                    <dd>Fachoberschule: Konrad-Zuse-Schule Hünfeld</dd>
-                
-        		    <dt>2022-Heute</dt>
-        		    <dd>Ausbildung bei Computer L.A.N. GmbH und der Ferdinand Braun Schule in Fulda</dd>
-		        </dl>
-            </div>
-            <hr>
-            <div class="chapter">
-                <h1>Referenzen</h1>
-                <ul>
-                    <li><a target="_blank" href="https://mhsl.eu">website</a></li>
-                    <li><a target="_blank" href="https://github.com/muelleel">github</a></li>
-                </ul>
-            </div>
-            <hr>
-            <div class="chapter">
-                <h1>Kontakt</h1>
-                <p class="inset">
-                    Zur Spamvermeidung bitte die Daten im folgendem Format ersetzen (umlaute durch entsprechende Langform ersetzen ü -> ue): <a>vorname@vorname-nachname.com</a>
-                </p>
-            </div>
-
-            <hr>
-            <div class="footer">
-                <a target="_blank" href="https://mhsl.eu/id.html">Impressum</a>
-                <a target="_blank" href="https://de.vecteezy.com/gratis-vektor/vektor">Hintergrund</a>
-            </div>
         </div>
     </body>
 </html>