Add prjectpage for mawacode.de

This commit is contained in:
malik 2024-02-09 19:37:44 +01:00
parent ef9c3577ff
commit 308925a5f9
26 changed files with 471 additions and 27 deletions

View file

@ -100,6 +100,7 @@
</div>
<script src="js/lang.js"></script>
<script src="js/menu.js"></script>
</body>

View file

@ -62,6 +62,7 @@
</div>
<script src="../js/lang.js"></script>
<script src="../js/menu.js"></script>
</body>

View file

@ -97,6 +97,7 @@
</div>
<script src="../js/lang.js"></script>
<script src="../js/menu.js"></script>
</body>

View file

@ -72,6 +72,7 @@
</div>
<script src="../js/lang.js"></script>
<script src="../js/menu.js"></script>
</body>

View file

@ -86,6 +86,7 @@
<script src="js/lang.js"></script>
<script src="js/popups.js"></script>
<script src="js/menu.js"></script>
</body>

26
css/projects.css Normal file
View file

@ -0,0 +1,26 @@
/*CSS for personalwebsite.html*/
.websitepics{
width: 100%;
display:flex;
align-items: flex-end;
}
.desktoptext{
width: 70%;
margin-left: 1%;
}
.desktoppic{
width: 100%;
box-shadow: 10px 10px 10px;
color:black;
border-radius: 12px;
}
.mobilepic{
width: 30%;
box-shadow: 10px 10px 10px;
color:black;
border-radius: 12px;
}

View file

@ -133,6 +133,11 @@ p{
font-size: 100%;
}
ul li{
color: #bbadbe;
margin-left: 1em;
}
.row{
display: flex;
justify-content: space-between;
@ -294,6 +299,7 @@ p{
#aboutmelinks li a:hover{
color: #af83b9;
cursor: pointer;
background-color: rgba(50, 50, 50, 0.75);
}
#catpics img{
@ -360,6 +366,30 @@ table tr td{
border-radius: 12px;
}
.projectsbox a{
border-radius: 0 12px 0 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
padding: 2%;
text-align: center;
backdrop-filter: blur(10px) saturate(100%);
-webkit-backdrop-filter: blur(10px) saturate(100%);
background-color: rgba(30, 30, 30, 0.75);
}
.projectsbox a{
color: #bbadbe;
font-size: 200%;
text-decoration: none;
}
.projectsbox a:hover{
cursor: pointer;
color: #af83b9;
background-color: rgba(50, 50, 50, 0.75);
}
@media only screen and (max-width:900px){
.navbar{

View file

@ -57,6 +57,7 @@
<script src="js/lang.js"></script>
<script src="js/popups.js"></script>
<script src="js/menu.js"></script>
</body>

View file

@ -63,6 +63,7 @@
</div>
<script src="js/lang.js"></script>
<script src="js/menu.js"></script>
</body>

View file

@ -34,8 +34,8 @@ var language = {
amtd10: "Schlager music",
amtd11: "Talking & chatting",
//projects.html
projectstitle: "Coming Soon!",
projects: "Nothing here yet. :)",
projectstitle: "My Projects:",
project1: "mawacode.de",
//contactme.html
contacttitle: "Contact",
contact: "Email: contact[at]mawacode.de",
@ -113,8 +113,8 @@ var language = {
amtd10: "Schlagermusik",
amtd11: "Labern & Chatten",
//projects.html
projectstitle: "Kommt bald!",
projects: "Noch ist hier nichts :)",
projectstitle: "Meine Projekte:",
project1: "mawacode.de",
//contactme.html
contacttitle: "Kontakt",
contact: "Email: contact[at]mawacode.de",
@ -201,9 +201,9 @@ if(isEnglish===false) {
amtd11.textContent = language.ger.amtd11;
}
//projects.html
else if(window.location.href.indexOf("projects") > -1) {
else if(window.location.href.indexOf("projects.html") > -1) {
projectstitle.textContent = language.ger.projectstitle;
projects.textContent = language.ger.projects;
project1.textContent = language.ger.project1;
}
//contactme.html
else if(window.location.href.indexOf("contactme") > -1) {
@ -294,9 +294,9 @@ else{
amtd11.textContent = language.eng.amtd11;
}
//projects.html
else if(window.location.href.indexOf("projects") > -1) {
else if(window.location.href.indexOf("projects.html") > -1) {
projectstitle.textContent = language.eng.projectstitle;
projects.textContent = language.eng.projects;
project1.textContent = language.eng.project1;
}
//contactme.html
else if(window.location.href.indexOf("contactme") > -1) {
@ -360,20 +360,3 @@ function langChange() {
}
//menu Script
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "200px";
}
else
{
menuList.style.maxHeight = "0px";
}
}

17
js/menu.js Normal file
View file

@ -0,0 +1,17 @@
//menu Script
var menuList = document.getElementById("menuList");
menuList.style.maxHeight = "0px";
function togglemenu(){
if(menuList.style.maxHeight == "0px")
{
menuList.style.maxHeight = "200px";
}
else
{
menuList.style.maxHeight = "0px";
}
}

100
js/projectslang.js Normal file
View file

@ -0,0 +1,100 @@
var language = {
//All english strings:
eng: {
personalwebsitetitle: "My Personal Website",
personalwebsite1: "Project Start: 2024-01-21 | Project status: Still going",
personalwebsitebutton1: "Detailed Changelog",
personalwebsitetitle2: "Biggest changes over time:",
personalwebsite2: "Oldest Screenshot: (2024-01-21)",
personalwebsite3: "This is the oldest screenshot that I still have from my Website. This was before I used Git.",
personalwebsite4: "First ever git commit: (2024-01-22)",
personalwebsite5: "This was the first ever commit of my Website. Back then, it was still unusable on Mobile.",
personalwebsite6: "Working mobile version: (2024-01-23)",
personalwebsite7: "In this update, I got the responsive design to work on mobile.",
personalwebsite8: "Translated website: (2024-01-27)",
personalwebsite9: "First implementation of the translation feature.",
personalwebsite10: "Redesgin of the navbar and CAT! (2024-02-03)",
personalwebsite11: "In this update, I redesigned the entire nav bar to look more modern. I also removed the text from the language change button and used an Icon instead. And the best part: I added my cat on the front page.",
personalwebsite12: "Complete redesign (2024-02-08)",
personalwebsite13: "In this update, I redesigned the entire page once again. I changed the colors and added blur effects. I also made most of the text smaller into a more normal size."
},
//All german strings:
ger: {
personalwebsitetitle: "Meine Persönliche Webseite",
personalwebsite1: "Projekt Start: 2024-01-21 | Projekt Status: Läuft noch",
personalwebsitebutton1: "Detaillierter Changelog",
personalwebsitetitle2: "Größte Veränderungen im Laufe der Zeit:",
personalwebsite2: "Ältester Screenshot: (2024-01-21)",
personalwebsite3: "Dies ist der älteste Screenshot, den ich noch von meiner Website habe. Das war, bevor ich Git verwendet habe.",
personalwebsite4: "Erster git commit: (2024-01-22)",
personalwebsite5: "Dies war der allererste Commit meiner Website. Damals war sie auf dem Handy noch unbenutzbar.",
personalwebsite6: "Funktionierende mobile Version: (2024-01-23)",
personalwebsite7: "In diesem Update habe ich das Responsive Design auf dem Handy zum Laufen gebracht.",
personalwebsite8: "Übersetzte Website: (2024-01-27)",
personalwebsite9: "Erste Implementierung der Übersetzungsfunktion.",
personalwebsite10: "Überarbeitung der Navigationsleiste und KATZE!(2024-02-03)",
personalwebsite11: "In diesem Update habe ich die gesamte Navigationsleiste neu gestaltet, damit sie moderner aussieht. Außerdem habe ich den Text aus der Schaltfläche zum Wechseln der Sprache entfernt und stattdessen ein Icon verwendet. Und das Beste: Ich habe meine Katze auf der Startseite hinzugefügt.",
personalwebsite12: "Komplette Neugestaltung (2024-02-08)",
personalwebsite13: "In diesem Update habe ich die gesamte Seite noch einmal umgestaltet. Ich habe die Farben geändert und Unschärfeeffekte hinzugefügt. Außerdem habe ich den Großteil des Textes auf eine normalere Größe verkleinert."
}
};
//get isEnglish state from localStorage
var isEnglish = localStorage.getItem("isEnglish") === "true";
//inserting the german strings:
if(isEnglish===false) {
//personalwebsite.html
if (window.location.pathname == '/' || window.location.href.indexOf("personalwebsite") > -1) {
personalwebsitetitle.textContent = language.ger.personalwebsitetitle;
personalwebsite1.textContent = language.ger.personalwebsite1;
personalwebsitebutton1.textContent = language.ger.personalwebsitebutton1;
personalwebsitetitle2.textContent = language.ger.personalwebsitetitle2;
personalwebsite2.textContent = language.ger.personalwebsite2;
personalwebsite3.textContent = language.ger.personalwebsite3;
personalwebsite4.textContent = language.ger.personalwebsite4;
personalwebsite5.textContent = language.ger.personalwebsite5;
personalwebsite6.textContent = language.ger.personalwebsite6;
personalwebsite7.textContent = language.ger.personalwebsite7;
personalwebsite8.textContent = language.ger.personalwebsite8;
personalwebsite9.textContent = language.ger.personalwebsite9;
personalwebsite10.textContent = language.ger.personalwebsite10;
personalwebsite11.textContent = language.ger.personalwebsite11;
personalwebsite12.textContent = language.ger.personalwebsite12;
personalwebsite13.textContent = language.ger.personalwebsite13;
}
}
//inserting the english strings:
else{
//personalwebsite.html
if (window.location.pathname == '/' || window.location.href.indexOf("personalwebsite") > -1) {
personalwebsitetitle.textContent = language.eng.personalwebsitetitle;
personalwebsite1.textContent = language.eng.personalwebsite1;
personalwebsitebutton1.textContent = language.eng.personalwebsitebutton1;
personalwebsitetitle2.textContent = language.eng.personalwebsitetitle2;
personalwebsite2.textContent = language.eng.personalwebsite2;
personalwebsite3.textContent = language.eng.personalwebsite3;
personalwebsite4.textContent = language.eng.personalwebsite4;
personalwebsite5.textContent = language.eng.personalwebsite5;
personalwebsite6.textContent = language.eng.personalwebsite6;
personalwebsite7.textContent = language.eng.personalwebsite7;
personalwebsite8.textContent = language.eng.personalwebsite8;
personalwebsite9.textContent = language.eng.personalwebsite9;
personalwebsite10.textContent = language.eng.personalwebsite10;
personalwebsite11.textContent = language.eng.personalwebsite11;
personalwebsite12.textContent = language.eng.personalwebsite12;
personalwebsite13.textContent = language.eng.personalwebsite13;
}
}
//invert isEnglish bool on click of language button
function langChange() {
isEnglish = !isEnglish;
localStorage.setItem("isEnglish", isEnglish);
console.log(isEnglish);
window.location.reload();
}

BIN
pics/desktop-tanslation.GIF Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

BIN
pics/firstcommit-mobile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

BIN
pics/mobile-translation.GIF Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 KiB

View file

@ -5,6 +5,7 @@
<meta charset="utf-8">
<title>mawacode.de</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/projects.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="webicons/logo.png">
</head>
@ -44,8 +45,10 @@
<div class="row">
<div class="col-1">
<h1 id="projectstitle"></h1>
<br>
<p id="projects"></p>
<br><br>
<div class="projectsbox" >
<a href="projects/personalwebsite.html" id="project1"></a>
</div>
</div>
<div class="col-2">
@ -61,6 +64,7 @@
</div>
<script src="js/lang.js"></script>
<script src="js/menu.js"></script>
</body>

View file

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mawacode.de</title>
<link href="../css/style.css" rel="stylesheet" />
<link href="../css/projects.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../webicons/logo.png">
</head>
<body>
<div class="container">
<noscript>
<div id="no-script">
<h1>Warning!</h1>
<p>You have JavaScript deactivated, silly ;) This site doesn't work properly without JavaScript.<br>All my code is Open-Source, check it out if you want to know what script my site uses.</p>
<br>
<a href="https://github.com/malikwachter/mawacode.de/tree/main/js">Link to the source code</a>
</div>
</noscript>
<div class="navbar">
<img src="../webicons/logo.png" class="logo">
<nav>
<ul id="menuList">
<li><a href="../index.html" id="homenav"></a></li>
<li><a href="../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../projects.html" id="projectsnav" class="activeTab"></a></li>
<li><a href="../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul>
</nav>
<div class="menu-icon">
<a onclick="langChange()" id="lang2"></a>
<img src="../webicons/menu.png" onclick="togglemenu()">
</div>
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1 id="personalwebsitetitle"></h1>
<br>
<p id="personalwebsite1"></p><br>
<ul id="aboutmelinks">
<li><a href="personalwebsite/changelog.html" id="personalwebsitebutton1"></a></li>
<li><a href="https://github.com/malikwachter/mawacode.de">GitHub</a></li>
</ul>
<br>
<h1 id="personalwebsitetitle2"></h1>
<br>
<h2 id="personalwebsite2"></h2>
<div class="websitepics">
<div class="desktoptext">
<br>
<p id="personalwebsite3"></p>
<br>
<img class="desktoppic" src="../pics/oldestscreenshot-desktop.png">
</div>
</div>
<br>
<h2 id="personalwebsite4"></h2>
<div class="websitepics">
<img class="mobilepic" src="../pics/firstcommit-mobile.png">
<div class="desktoptext">
<br>
<p id="personalwebsite5"></p>
<br>
<img class="desktoppic" src="../pics/firstcommit-desktop.png">
</div>
</div>
<br>
<h2 id="personalwebsite6"></h2>
<div class="websitepics">
<img class="mobilepic" src="../pics/firstworkingmobilescreen.png">
<div class="desktoptext">
<br>
<p id="personalwebsite7"></p>
<br>
<img class="desktoppic" src="../pics/firstworkingmobilescreen-desktop.png">
</div>
</div>
<br>
<h2 id="personalwebsite8"></h2>
<div class="websitepics">
<img class="mobilepic" src="../pics/mobile-translation.GIF">
<div class="desktoptext">
<br>
<p id="personalwebsite9"></p>
<br>
<img class="desktoppic" src="../pics/desktop-tanslation.GIF">
</div>
</div>
<br>
<h2 id="personalwebsite10"></h2>
<div class="websitepics">
<img class="mobilepic" src="../pics/firstrestyle-mobile.png">
<div class="desktoptext">
<br>
<p id="personalwebsite11"></p>
<br>
<img class="desktoppic" src="../pics/firstrestyle-desktop.png">
</div>
</div>
<br>
<h2 id="personalwebsite12"></h2>
<div class="websitepics">
<img class="mobilepic" src="../pics/secondrestyle-mobile.png">
<div class="desktoptext">
<br>
<p id="personalwebsite13"></p>
<br>
<img class="desktoppic" src="../pics/secondrestyle-desktop.png">
</div>
</div>
</div>
<div class="col-2">
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../webicons/GitHub.png"></a>
</div>
</div>
</div>
<script src="../js/lang.js"></script>
<script src="../js/projectslang.js"></script>
<script src="../js/menu.js"></script>
</body>
</html>

View file

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mawacode.de</title>
<link href="../../css/style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../webicons/logo.png">
</head>
<body>
<div class="container">
<noscript>
<div id="no-script">
<h1>Warning!</h1>
<p>You have JavaScript deactivated, silly ;) This site doesn't work properly without JavaScript.<br>All my code is Open-Source, check it out if you want to know what script my site uses.</p>
<br>
<a href="https://github.com/malikwachter/mawacode.de/tree/main/js">Link to the source code</a>
</div>
</noscript>
<div class="navbar">
<img src="../../webicons/logo.png" class="logo">
<nav>
<ul id="menuList">
<li><a href="../../index.html" id="homenav"></a></li>
<li><a href="../../aboutme.html" id="aboutmenav"></a></li>
<li><a href="../../projects.html" id="projectsnav" class="activeTab"></a></li>
<li><a href="../../contactme.html" id="contactnav"></a></li>
<li><a onclick="langChange()" id="lang"></a></li>
</ul>
</nav>
<div class="menu-icon">
<a onclick="langChange()" id="lang2"></a>
<img src="../../webicons/menu.png" onclick="togglemenu()">
</div>
</div>
<div class="content">
<div class="row">
<div class="col-1">
<h1>Changelog of my personal website</h1>
<p>(Only available on english/Nur auf Englisch verfügbar)</p>
<br>
<h2>2024-02-09 - NoScript</h2>
<ul>
<li>Redesigned error message if JavaScript is deactivated</li>
<li>Add projectpage for this website</li>
<li>Add changelog page for this website</li>
</ul>
<br>
<h2>2024-02-08 - Complete redesgin</h2>
<ul>
<li>Change all colors</li>
<li>Replace logo</li>
<li>Add blur effect</li>
<li>Add wallpaper</li>
</ul>
<br>
<h2>2024-02-05 - Info Update</h2>
<ul>
<li>Update info on linux about me page</li>
</ul>
<br>
<h2>2024-02-04 - Encryption</h2>
<ul>
<li>Add PGP Key to contact page</li>
</ul>
<br>
<h2>2024-02-03 - Cat on frontpage</h2>
<ul>
<li>Add cat on frontpage</li>
<li>Add table of stuff I like in about me page</li>
<li>Replace text from language change button with icon</li>
<li>Change contact E-Mail</li>
<li>Remove unused placeholder picture from projects page</li>
<li>Switch default language to german</li>
</ul>
<br>
<h2>2024-02-02 - New nav</h2>
<ul>
<li>Change nav style</li>
<li>Add logo</li>
<li>Chnage text</li>
</ul>
<br>
<h2>2024-01-27 - Translation feature</h2>
<ul>
<li>Add button to translate the entire page</li>
<li>Add error text if JavaScript is deactivated</li>
<li>Fix typos</li>
</ul>
<br>
<h2>2024-01-24 - Source</h2>
<ul>
<li>Add missing source of xkcd comic on contact page</li>
</ul>
<br>
<h2>2024-01-23 - Resposive Design</h2>
<ul>
<li>Add resposive design</li>
<li>Stick social media links to bottom of page</li>
<li>Scale down cat picture quality</li>
<li>Fix broken cat pictures in chrome</li>
<li>Fix burgermenu color</li>
<li>Fix typos</li>
</ul>
<br>
<h2>2024-01-22 - First git commit</h2>
<ul>
<li>The entire website is new ;)</li>
</ul>
</div>
<div class="col-2">
</div>
</div>
<div class="socialmedia">
<a href="https://feddit.de/u/mawacode"><img src="../../webicons/lemmy.png"></a>
<a rel="me" href="https://hessen.social/@mawacode"><img src="../../webicons/mastodon.png"></a>
<a href="https://github.com/malikwachter"><img src="../../webicons/GitHub.png"></a>
</div>
</div>
</div>
<script src="../../js/lang.js"></script>
<script src="../../js/menu.js"></script>
</body>
</html>