Basic redesign
This commit is contained in:
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 |
235
index.html
235
index.html
@@ -1,202 +1,59 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<!--
|
|
||||||
<?PHP
|
|
||||||
ach die gewohnheiten :)
|
|
||||||
-->
|
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Elias Müller</title>
|
<title>Elias Müller</title>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
|
||||||
|
<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>
|
||||||
<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>
|
</head>
|
||||||
<body>
|
<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="tux.png" alt="tux penguin profile image">
|
||||||
<dl>
|
<div class="name">
|
||||||
<dt>Name</dt>
|
<h1>Elias Müller</h1>
|
||||||
<dd>Elias Müller</dd>
|
<ul>
|
||||||
|
<li>Softwareentwickler</li>
|
||||||
<dt>Geboren am</dt>
|
<li>Systemadministrator</li>
|
||||||
<dd>18.08.2003</dd>
|
</ul>
|
||||||
|
</div>
|
||||||
<dt>Wohnort</dt>
|
<a class="mobile-visible flip-button" href="#flip"><i class="fa-solid fa-right-long"></i></a>
|
||||||
<dd>Petersberg</dd>
|
</div>
|
||||||
</dl>
|
<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><i class="fa-solid fa-envelope"></i>elias@elias-mueller.com</li>
|
||||||
|
<br>
|
||||||
|
<li><i class="fa-solid fa-globe"></i><a href="https://mhsl.eu">mhsl.eu</a></li>
|
||||||
|
<li><i class="fa-brands fa-git-alt"></i><a href="https://mhsl.eu/gitea/">Gitea</a></li>
|
||||||
|
<li><i class="fa-brands fa-github"></i><a href="https://github.com/muelleel">GitHub</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="interests">
|
||||||
|
<i class="fa-brands fa-osi"></i>
|
||||||
|
<br>
|
||||||
|
<i class="fa-brands fa-java"></i>
|
||||||
|
<i class="fa-brands fa-dart-lang"></i>
|
||||||
|
<i class="fa-brands fa-php"></i>
|
||||||
|
<i class="fa-brands fa-js"></i>
|
||||||
|
<br>
|
||||||
|
<i class="fa-brands fa-flutter"></i>
|
||||||
|
<i class="fa-brands fa-react"></i>
|
||||||
|
<i class="fa-brands fa-laravel"></i>
|
||||||
|
<br>
|
||||||
|
<i class="fa-brands fa-linux"></i>
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<i class="fa-brands fa-apple"></i>
|
||||||
|
</div>
|
||||||
|
<a class="mobile-visible flip-button" href="#"><i class="fa-solid fa-left-long"></i></a>
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
153
style.css
Normal file
153
style.css
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .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: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .back .interests {
|
||||||
|
font-size: 1.5em;
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
line-height: 1.6em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .flip-button {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 0 20px 10px 0;
|
||||||
|
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user