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

Compare commits

base: MineTec:233775b5607dc152e9d49709b148dbc28421583f
Branches Tags
MineTec:master
..
compare: MineTec:master
Branches Tags
MineTec:master

5 Commits
233775b560 ... master

Author SHA1 Message Date
Elias Müller
f401d7995d updated age 2025-09-07 16:05:40 +02:00
Elias Müller
42278891b7 fixed footer position on mobile devices 2025-04-10 11:24:57 +02:00
Elias Müller
cbde081beb added pin 
added imprint footer
added favicon
added local font and icons
restructured project
 2025-04-08 11:32:33 +02:00
Elias Müller
aa373d2f37 seo and pagespeed improvements 2025-04-06 16:59:47 +02:00
Elias Müller
8ed8a906b8 open links in new tab 2025-01-17 10:43:07 +01:00
18 changed files with 96 additions and 26 deletions
Expand all files Collapse all files

BIN
assets/css/font/roboto.ttf Normal file
View File

Binary file not shown.

70
style.css → assets/css/style.css
View File

@@ -3,10 +3,16 @@
--width: 550px;
}
body {
@font-face {
font-family: "Roboto";
src: local("Roboto"), url("font/roboto.ttf") format("truetype");
font-display: swap;
}
background-image: url("background.svg");
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;
@@ -18,13 +24,26 @@ body {
padding: 0;
margin: 0;
height: 100vh;
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);
@@ -44,7 +63,7 @@ body {
}
.card .front, .card .back {
background-image: url("noise.png");
background-image: url("../img/noise.png");
background-repeat: repeat;
position: absolute;
@@ -145,16 +164,24 @@ body {
position: absolute;
right: 0;
bottom: 0;
padding: 0 20px 10px 0;
padding: 0 25px 15px 0;
font-size: 1.5em;
color: #404040;
font-size: 1em;
color: #808080;
}
.mobile-visible {
.cap-visibleWhenCanHover {
visibility: visible;
}
.cap-visibleWhenPinned {
visibility: hidden;
}
.cap-visibleWhenUnPinned {
visibility: hidden;
}
a {
font-style: normal;
text-decoration: none;
@@ -162,14 +189,39 @@ a {
cursor: pointer;
}
li .spacer {
height: 1rem;
}
.clickable {
cursor: pointer;
}
.requires-js {
display: none;
}
@media (hover: hover) {
.mobile-visible {
.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) {

9
assets/fa/css/all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/fa/webfonts/fa-brands-400.ttf Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-brands-400.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-regular-400.ttf Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-regular-400.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-solid-900.ttf Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-v4compatibility.ttf Normal file
View File

Binary file not shown.

BIN
assets/fa/webfonts/fa-v4compatibility.woff2 Normal file
View File

Binary file not shown.

0
background.svg → assets/img/background.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

0
noise.png → assets/img/noise.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
assets/img/tux.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

0
script.js → assets/js/script.js
View File

43
index.html
View File

@@ -4,19 +4,21 @@
<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>
<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">
<meta name="description" content="Elias Müller - 21 Jahre, Fachinformatiker für Anwendungsentwicklung aus Fulda. Erfahrung mit Linux, Java, Webentwicklung, Android, iOS & mehr!">
</head>
<body>
<div class="card-container">
<div class="card" id="flip">
<div class="front">
<img src="tux.png" alt="tux penguin profile image">
<img src="assets/img/tux.webp" alt="'Tux' penguin profile image">
<hr>
<div class="name">
<h1>Elias Müller</h1>
@@ -25,26 +27,26 @@
<li>Systemadministrator</li>
</ul>
</div>
<a class="mobile-visible flip-button" href="#flip"><i class="fa-solid fa-right-long"></i></a>
<a class="cap-visibleWhenCanHover flip-button" href="#flip"><i class="fa-solid fa-angles-right"></i></a>
</div>
<div class="back">
<ul>
<li><i class="fa-solid fa-person"></i>21 Jahre</li>
<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>
<br>
<li class="requires-js"><a onclick="contact(this)"><i class="fa-solid fa-at"></i>Kontaktiere mich!</a></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>
<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>
<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!"></i>
<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>
@@ -67,9 +69,16 @@
<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>
<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>
</div>
<div class="footer-container">
<a href="https://mhsl.eu/id.html">Impressum</a>
|
<a href="https://mhsl.eu/datenschutz.html">Datenschutz</a>
</div>
</body>
</html>

BIN
tux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 144 KiB