MineTec/aboutme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added email protection and more interests

Browse Source
This commit is contained in:
Elias Müller
2024-12-09 22:49:07 +01:00
parent 89278a6013
commit 7ea755a8ac
3 changed files with 107 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@@ -7,12 +7,22 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/7c86d20fb1.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/7c86d20fb1.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<noscript>
<style>
.card {
visibility: visible;
}
</style>
</noscript>
</head> </head>
<body> <body>
<div class="card-container"> <div class="card-container">
<div class="card" id="flip"> <div class="card" id="flip">
<div class="front"> <div class="front">
<img src="tux.png" alt="tux penguin profile image"> <img src="tux.png" alt="tux penguin profile image">
<hr>
<div class="name"> <div class="name">
<h1>Elias Müller</h1> <h1>Elias Müller</h1>
<ul> <ul>
@@ -28,29 +38,37 @@
<li><i class="fa-solid fa-location-dot"></i>Fulda</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><i class="fa-solid fa-graduation-cap"></i>Fachinformatiker [AE]</li>
<br> <br>
<li><i class="fa-solid fa-envelope"></i>elias@elias-mueller.com</li> <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> <br>
<li><i class="fa-solid fa-globe"></i><a href="https://mhsl.eu">mhsl.eu</a></li> <li><a href="https://mhsl.eu/"><i class="fa-solid fa-globe"></i>mhsl.eu</a></li>
<li><i class="fa-brands fa-git-alt"></i><a href="https://mhsl.eu/gitea/">Gitea</a></li> <li><a href="https://mhsl.eu/gitea/"><i class="fa-brands fa-git-alt"></i>Gitea</a></li>
<li><i class="fa-brands fa-github"></i><a href="https://github.com/muelleel">GitHub</a></li> <li><a href="https://github.com/muelleel/"><i class="fa-brands fa-github"></i>GitHub</a></li>
<li><a href="ts3server://mhsl.eu?port=9987"><i class="fa-brands fa-teamspeak"></i>TeamSpeak</a></li>
</ul> </ul>
<div class="interests"> <div class="interests">
<i class="fa-brands fa-osi"></i> <h2>Erfahrungen</h2>
<i class="fa-brands fa-osi" title="Open Source!"></i>
<br> <br>
<i class="fa-brands fa-java"></i> <i class="fa-brands fa-flutter" title="Flutter"></i>
<i class="fa-brands fa-dart-lang"></i> <i class="fa-brands fa-react" title="React"></i>
<i class="fa-brands fa-php"></i> <i class="fa-brands fa-laravel" title="Laravel"></i>
<i class="fa-brands fa-js"></i>
<br> <br>
<i class="fa-brands fa-flutter"></i> <i class="fa-brands fa-java" title="Java"></i>
<i class="fa-brands fa-react"></i> <i class="fa-brands fa-dart-lang" title="Dart"></i>
<i class="fa-brands fa-laravel"></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> <br>
<i class="fa-brands fa-linux"></i> <i class="fa-brands fa-linux" title="Linux"></i>
<i class="fa-brands fa-windows"></i> <i class="fa-brands fa-windows" title="Windows"></i>
<i class="fa-brands fa-apple"></i> <i class="fa-brands fa-android" title="Android"></i>
<i class="fa-brands fa-apple" title="iOS & MacOS"></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> </div>
<a class="mobile-visible flip-button" href="#"><i class="fa-solid fa-left-long"></i></a> <a class="mobile-visible flip-button" href="#"><i class="fa-solid fa-left-long"></i></a>
</div> </div>

23
script.js Normal file
View 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)
}

52
style.css
View File

@@ -65,6 +65,20 @@ body {
max-height: 200px; 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 { .card .front .name h1 {
text-align: left; text-align: left;
margin: 0 0 10px 0; margin: 0 0 10px 0;
@@ -99,17 +113,31 @@ body {
.card .back ul li i { .card .back ul li i {
width: 20px; width: 20px;
margin-right: 10px; margin-right: 7px;
text-align: center; text-align: center;
color: #404040;
font-size: 0.9em;
line-height: 1em;
} }
.card .back .interests { .card .back .interests {
font-size: 1.5em; font-size: 1.4em;
letter-spacing: 0.3em; letter-spacing: 0.3em;
line-height: 1.6em; line-height: 1.6em;
text-align: center; 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 { .card .flip-button {
position: absolute; position: absolute;
right: 0; right: 0;
@@ -117,7 +145,7 @@ body {
padding: 0 20px 10px 0; padding: 0 20px 10px 0;
font-size: 1.5em; font-size: 1.5em;
color: gray; color: #404040;
} }
.mobile-visible { .mobile-visible {
@@ -128,6 +156,11 @@ a {
font-style: normal; font-style: normal;
text-decoration: none; text-decoration: none;
color: black; color: black;
cursor: pointer;
}
.requires-js {
display: none;
} }
@media (hover: hover) { @media (hover: hover) {
@@ -150,4 +183,17 @@ a {
.card .back { .card .back {
transform: rotateY(180deg); 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;
}
} }