|
@ -35,12 +35,13 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="aboutmetitle"></h1>
|
<h1 id="aboutmetitle"></h1>
|
||||||
<h2 id="aboutme1"></h2>
|
|
||||||
<br>
|
<br>
|
||||||
<h2 id="aboutme2"></h2>
|
<p id="aboutme1"></p>
|
||||||
|
<br>
|
||||||
|
<p id="aboutme2"></p>
|
||||||
|
<br>
|
||||||
|
<p id="aboutme3"></p>
|
||||||
<br>
|
<br>
|
||||||
<h2 id="aboutme3"></h2>
|
|
||||||
|
|
||||||
<ul id="aboutmelinks">
|
<ul id="aboutmelinks">
|
||||||
<li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
|
<li><a href="aboutme/cats.html" id="aboutmebutton1"></a></li>
|
||||||
<li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
|
<li><a href="aboutme/linux.html" id="aboutmebutton2"></a></li>
|
||||||
|
|
|
@ -34,7 +34,8 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="catstitle"></h1>
|
<h1 id="catstitle"></h1>
|
||||||
<h2 id="cats"></h2>
|
<br>
|
||||||
|
<p id="cats"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-2" id="catpics">
|
<div class="col-2" id="catpics">
|
||||||
|
|
|
@ -35,6 +35,8 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="linuxtitle"></h1>
|
<h1 id="linuxtitle"></h1>
|
||||||
|
<br>
|
||||||
|
|
||||||
<h2 id="linux1"></h2>
|
<h2 id="linux1"></h2>
|
||||||
|
|
||||||
<ul class="technolist">
|
<ul class="technolist">
|
||||||
|
@ -64,6 +66,7 @@
|
||||||
<li id="linuxli10"></li>
|
<li id="linuxli10"></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<br>
|
||||||
<h2 id="linux4"></h2>
|
<h2 id="linux4"></h2>
|
||||||
|
|
||||||
<ul class="technolist">
|
<ul class="technolist">
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="technotitle"></h1>
|
<h1 id="technotitle"></h1>
|
||||||
<h2 id="techno"></h2>
|
<p id="techno"></p>
|
||||||
|
|
||||||
<ul class="technolist">
|
<ul class="technolist">
|
||||||
<li id="technoli1"></li>
|
<li id="technoli1"></li>
|
||||||
|
|
|
@ -32,16 +32,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="row">
|
|
||||||
<div class="col-1">
|
|
||||||
<h1 id="contacttitle"></h1>
|
|
||||||
<h2 id="contact"></h2>
|
|
||||||
<a id="popupButton">PGP Key</a>
|
|
||||||
|
|
||||||
<div id="myPopup" class="Popup">
|
<div id="myPopup" class="Popup">
|
||||||
<div class="popupContent">
|
<div class="popupContent">
|
||||||
<span class="close">×</span>
|
<span class="close">×</span>
|
||||||
<h1>PGP Key</h1>
|
<h1>PGP Key</h1>
|
||||||
|
<br>
|
||||||
<p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
|
<p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
|
||||||
xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br>
|
xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br>
|
||||||
f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
|
f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
|
||||||
|
@ -57,6 +52,15 @@
|
||||||
-----END PGP PUBLIC KEY BLOCK-----</p>
|
-----END PGP PUBLIC KEY BLOCK-----</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-1">
|
||||||
|
<h1 id="contacttitle"></h1>
|
||||||
|
<br>
|
||||||
|
<p id="contact"></p>
|
||||||
|
<br>
|
||||||
|
<a id="popupButton">PGP Key</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
<a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
|
||||||
|
|
144
css/style.css
|
@ -1,7 +1,7 @@
|
||||||
*{
|
*{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: sans-serif;
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container{
|
.container{
|
||||||
|
@ -9,8 +9,12 @@
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: rgb(56,56,56);
|
background-color: #111927;
|
||||||
background: linear-gradient(117deg, rgba(56,56,56,1) 0%, rgba(130,130,130,1) 100%);
|
background-image: radial-gradient(at 30% 30%, hsl(70, 100%, 20%) 0, transparent 59%), radial-gradient(at 70% 70%, hsl(230, 100%, 20%) 0, transparent 55%);
|
||||||
|
background: url(../pics/background.jpg) no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@ -19,20 +23,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #e2de84;
|
|
||||||
box-shadow: 5px 5px 5px;
|
box-shadow: 5px 5px 5px;
|
||||||
padding: 40px 0;
|
padding: 30px 0;
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 180px;
|
width: 190px;
|
||||||
margin-top: 3em;
|
margin-top: 3.5em;
|
||||||
margin-left: 8%;
|
margin-left: 8%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: rotate(-5deg);
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon{
|
.menu-icon{
|
||||||
|
@ -51,15 +63,16 @@ nav ul li{
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a{
|
nav ul li a{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a:hover{
|
nav ul li a:hover{
|
||||||
color: #ecfeaa;
|
color: #af83b9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,15 +93,16 @@ nav ul li a:hover{
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2{
|
||||||
color: #222222;
|
color: #bbadbe;
|
||||||
}
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
color: #222222;
|
color: #bbadbe;
|
||||||
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row{
|
.row{
|
||||||
|
@ -101,10 +115,16 @@ p{
|
||||||
.col-1{
|
.col-1{
|
||||||
flex-basis: 80%;
|
flex-basis: 80%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #e2de84;
|
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
box-shadow: 10px 10px 10px;
|
box-shadow: 10px 10px 10px;
|
||||||
z-index: 2;
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-2{
|
.col-2{
|
||||||
|
@ -135,23 +155,29 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
#popupButton {
|
#popupButton {
|
||||||
color: black;
|
color: white;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
background-color: #e0d94c;
|
||||||
box-shadow: 5px 5px 5px black;
|
box-shadow: 5px 5px 5px black;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
#popupButton:hover{
|
#popupButton:hover{
|
||||||
color: #ecfeaa;
|
color: #af83b9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Popup {
|
.Popup {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 3;
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -162,23 +188,27 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
.popupContent {
|
.popupContent {
|
||||||
background-color: #e2de84;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border: 1px solid #000000;
|
|
||||||
width: 80%;
|
width: 80%;
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
color: #aaaaaa;
|
color: #bbadbe;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close:hover, .close:focus {
|
.close:hover, .close:focus {
|
||||||
color: #000;
|
color: #af83b9;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -187,9 +217,14 @@ p{
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #e2de84;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-shadow: 5px 5px 5px;
|
box-shadow: 5px 5px 5px;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.socialmedia{
|
.socialmedia{
|
||||||
|
@ -215,16 +250,21 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutmelinks li a{
|
#aboutmelinks li a{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
box-shadow: 5px 5px 5px black;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutmelinks li a:hover{
|
#aboutmelinks li a:hover{
|
||||||
color: #ecfeaa;
|
color: #af83b9;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -235,35 +275,53 @@ p{
|
||||||
}
|
}
|
||||||
|
|
||||||
.technolist li{
|
.technolist li{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #e0d94c;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
box-shadow: 5px 5px 5px black;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(50, 50, 50, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
table{
|
table{
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
box-shadow: 5px 5px 5px black;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr th{
|
table tr th{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: #e0d94c;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 12px 0 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr td{
|
table tr td{
|
||||||
color: black;
|
color: #bbadbe;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: #e2de84;
|
|
||||||
box-shadow: 5px 5px 5px black;
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.neofetch{
|
.neofetch{
|
||||||
|
@ -285,11 +343,16 @@ table tr td{
|
||||||
nav ul{
|
nav ul{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100px;
|
top: 90px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: #e2de84;
|
|
||||||
box-shadow: 10px 10px 10px;
|
box-shadow: 10px 10px 10px;
|
||||||
|
|
||||||
|
backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
-webkit-backdrop-filter: blur(10px) saturate(100%);
|
||||||
|
background-color: rgba(30, 30, 30, 0.75);
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li{
|
nav ul li{
|
||||||
|
@ -329,14 +392,13 @@ table tr td{
|
||||||
|
|
||||||
.logo{
|
.logo{
|
||||||
margin-left: 4%;
|
margin-left: 4%;
|
||||||
width: 150px;
|
width: 190px;
|
||||||
margin-top: 1em;
|
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row{
|
.row{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 50px 0
|
margin: 50px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-2{
|
.col-2{
|
||||||
|
@ -356,6 +418,8 @@ table tr td{
|
||||||
|
|
||||||
.col-1{
|
.col-1{
|
||||||
flex-basis: 100%;
|
flex-basis: 100%;
|
||||||
|
margin-top: 2em;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutmelinks li{
|
#aboutmelinks li{
|
||||||
|
|
|
@ -35,9 +35,10 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
|
<h1 id="welcometitle">Looks like you have JavaScript deactivated. Please activate JavaScript. My entire JavaScript is Open-Source btw. https://github.com/malikwachter/mawacode.de/blob/main/js/lang.js</h1>
|
||||||
<h2 id="welcome1"></h2>
|
|
||||||
<br>
|
<br>
|
||||||
<h2 id="welcome2"></h2>
|
<p id="welcome1"></p>
|
||||||
|
<br>
|
||||||
|
<p id="welcome2"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<img src="pics/cat_frontpage.png" class="catFront">
|
<img src="pics/cat_frontpage.png" class="catFront">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
|
//Full res picture site
|
||||||
var fullpic = document.getElementById("fullpic")
|
var fullpic = document.getElementById("fullpic")
|
||||||
|
|
||||||
if(window.location.href.indexOf("desktop") > -1){
|
if(window.location.href.indexOf("desktop") > -1){
|
||||||
|
|
BIN
pics/background.jpg
Normal file
After Width: | Height: | Size: 535 KiB |
BIN
pics/background.png
Normal file
After Width: | Height: | Size: 154 KiB |
BIN
pics/background2.jpg
Normal file
After Width: | Height: | Size: 960 KiB |
|
@ -35,7 +35,8 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<h1 id="projectstitle"></h1>
|
<h1 id="projectstitle"></h1>
|
||||||
<h2 id="projects"></h2>
|
<br>
|
||||||
|
<p id="projects"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
|
|
Before Width: | Height: | Size: 235 KiB After Width: | Height: | Size: 370 KiB |
BIN
webicons/logo.xcf
Normal file
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 8.9 KiB |