Compare commits
3 Commits
9f23b1be19
...
233775b560
| Author | SHA1 | Date | |
|---|---|---|---|
| 233775b560 | |||
| 7ea755a8ac | |||
| 89278a6013 |
1
background.svg
Normal file
1
background.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
248
index.html
248
index.html
@@ -1,202 +1,74 @@
|
||||
<!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="style.css">
|
||||
|
||||
<script src="https://kit.fontawesome.com/7c86d20fb1.js" crossorigin="anonymous"></script>
|
||||
<script src="script.js" defer></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<style media="screen">
|
||||
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="top">
|
||||
<img src="https://mhsl.eu/provide/muelleel/tux.png" alt="tux penguin profile image">
|
||||
<div class="attributes">
|
||||
<dl>
|
||||
<dt>Name</dt>
|
||||
<dd>Elias Müller</dd>
|
||||
|
||||
<dt>Geboren am</dt>
|
||||
<dd>18.08.2003</dd>
|
||||
|
||||
<dt>Wohnort</dt>
|
||||
<dd>Petersberg</dd>
|
||||
</dl>
|
||||
<div class="card-container">
|
||||
<div class="card" id="flip">
|
||||
<div class="front">
|
||||
<img src="tux.png" alt="tux penguin profile image">
|
||||
<hr>
|
||||
<div class="name">
|
||||
<h1>Elias Müller</h1>
|
||||
<ul>
|
||||
<li>Softwareentwickler</li>
|
||||
<li>Systemadministrator</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="mobile-visible flip-button" href="#flip"><i class="fa-solid fa-right-long"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="chapter">
|
||||
<h1>Über mich</h1>
|
||||
<p class="inset">
|
||||
Als angehender Softwareentwickler lebe ich sehr nahe an der Welt aller Computern.
|
||||
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>
|
||||
<div class="back">
|
||||
<ul>
|
||||
<li><i class="fa-solid fa-person"></i>21 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>
|
||||
<br>
|
||||
<li class="requires-js"><a onclick="contact(this)"><i class="fa-solid fa-at"></i>Kontaktiere mich!</a></li>
|
||||
<noscript><li><i class="fa-solid fa-link-slash"></i>Aktiviere JavaScript</li></noscript>
|
||||
<br>
|
||||
<li><a href="https://mhsl.eu/"><i class="fa-solid fa-globe"></i>mhsl.eu</a></li>
|
||||
<li><a href="https://mhsl.eu/gitea/"><i class="fa-brands fa-git-alt"></i>Gitea</a></li>
|
||||
<li><a href="https://github.com/muelleel/"><i class="fa-brands fa-github"></i>GitHub</a></li>
|
||||
<li><a href="https://mhsl.eu/teamspeak"><i class="fa-brands fa-teamspeak"></i>TeamSpeak</a></li>
|
||||
</ul>
|
||||
|
||||
<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 class="interests">
|
||||
<h2>Erfahrungen mit</h2>
|
||||
<i class="fa-brands fa-osi" title="Open Source!"></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="mobile-visible flip-button" href="#"><i class="fa-solid fa-left-long"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
23
script.js
Normal file
23
script.js
Normal file
@@ -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)
|
||||
}
|
||||
202
style.css
Normal file
202
style.css
Normal file
@@ -0,0 +1,202 @@
|
||||
:root {
|
||||
--height: 300px;
|
||||
--width: 550px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto";
|
||||
|
||||
background-image: url("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: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
min-height: var(--height);
|
||||
min-width: var(--width);
|
||||
}
|
||||
|
||||
.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("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 20px 10px 0;
|
||||
|
||||
font-size: 1.5em;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
.mobile-visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
a {
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.requires-js {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.mobile-visible {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user