Bug fixes and a shit ton of new content!

2024-05-04 17:48:04 +02:00
parent ee75f1590e
commit cf4678a6df
54 changed files with 1445 additions and 11 deletions
--- a/blog.html
+++ b/blog.html
@@ -22,10 +22,11 @@
    <div class="content-blog">
 <p><a href="https://purplebored.pl/">Return to main site.</a></br>===My Blog===<p>
 So for now this is a simple HTML blog. If i start caring about this i migth do this the "prooper" way.
+So far there aint a search feature. So to search just use F3.
 <p><a href="/blogs/1.html/">Welcome to my blog.</a>
    </div>
    <footer>
-        <a class="clean">Purplebored &copy; 2023-2024 | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
-    </footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
    </body>
 </html>
--- a/index.html
+++ b/index.html
@@ -27,21 +27,33 @@
       </div>

       <div class="content1">
-        <p>===About Me===<p>
+===About Me===
+
 Hi welcome to my crappy website (the code behind the website looks even worse turst me). I am Niko aka Purplebored I love to troll and spread missinformation online (but not here no missinfomation here!!).
 I mostly just shitpost sometimes i try to learn programing but it never works out the most i know is just a lil bit of HTML JS and CSS and some C# and C++ (VERY basic C++ and C# lmfao). </br>(I am also Polish so my English skill aint too good! If you see a typo you can just let me know about it or make the change yourself on Github or Codeberg)
 Wanna go to my Old site? (No idea why this is a lot better!) In that case just go <a href="/old/" target="_blank">Here!</a>
 I am planning to add some random content to this website like some small reviews or some software recomandations nothing special really just yet another personal website.
-</br>
-<p>===Shit i self host=== </br>btw this cool dark purple is a hyperlink ^^</p>
+
+===Shit i self host=== </br>btw this cool dark purple is a hyperlink ^^
 <a href="https://bin.purplebored.pl/" target="_blank">My Private Pastebin instance (Very cool!)</a>
 <a href="https://oldpb.purplebored.pl/" target="_blank">My Private Zerobin instance (Privte Bin but older)</a>
 <a href="https://speed.purplebored.pl/" target="_blank">A LibreSpeed instance using a Polish server located in Warsaw.</a>
-<p>===Content=== </br>(That's the reviews and recomandations and shit i use)</p>
+
+===Content=== </br>(That's the reviews and recomandations and shit i use)
 <a href="things.html" target="_blank">Software and things i use</a>
 <a href="blog.html" target="_blank">My Blog (Nothing on it yet)</a>
-<p>===My Projects===</p> </br>I am not cooking rn so nothing here!
-    </div>
+
+===My Projects=== </br>I am not cooking rn so nothing here!
+
+===My OLD Projects=== </br>So i had some VERY basic old projects before. I am not putting them under "My Projects" cause i am not mantaining them anymore and they are really bad lol.
+
+neko.purplebored.pl - Well this was a very simple project which took me like 30 minutes. I did it mostly to learn some more about APIs. You can check it out <a href="/oldprojects/neko/index.html" target="_blank">here.</a> You can read about why and how i made it <a href="/oldprojects/neko/info.html" target="_blank">here.</a>
+purplebored.pl (OG) - Well this was my very first website. The code is so messy on there that it's insane. I still like it tough. I think it looks really good for a first time with AI help. You can check it <a href="/oldprojects/first_website/index.html" target="_blank">here.</a> You can also read about why and how i made it <a href="/oldprojects/first_website/info.html" target="_blank">here.</a>
+old.purplebored.pl - As the name may suggest this is NOT my "old" site. It's just a 90s themed website i did for fun. It even had a working guest book! (Which was abused to make it redirect to pornhub). You can visit it <a href="/oldprojects/90s-site/index.html" target="_blank">here.</a> And to learn more just go <a href="/oldprojects/90s-site/info.html" target="_blank">here.</a>
+pass.purplebored.pl - Thank god not a password manager but a simple password generator. I did this site for fun and as a simple learning project. You can check it out <a href="/oldprojects/pass/index.html" target="_blank">here.</a> You can also read about why and how i made it <a href="/oldprojects/pass/info.html" target="_blank">here.</a>
+cat.purplebored.pl - Just a simple cat site which grabs random cat pics. You can check it out <a href="/oldprojects/cat/index.html" target="_blank">here.</a> You can also read about why and how i made it <a href="/oldprojects/cat/info.html" target="_blank">here.</a>
+
+</div>

       <div class="time-widget">
        <div id="location"> My Timezone: Europe/Warsaw</div>
--- a/oldprojects/90s-site/1998/skel.gif
+++ b/oldprojects/90s-site/1998/skel.gif
--- a/oldprojects/90s-site/1998/skeleton1.gif
+++ b/oldprojects/90s-site/1998/skeleton1.gif
--- a/oldprojects/90s-site/1998/skeleton2.gif
+++ b/oldprojects/90s-site/1998/skeleton2.gif
--- a/oldprojects/90s-site/1998/skeleton3.gif
+++ b/oldprojects/90s-site/1998/skeleton3.gif
--- a/oldprojects/90s-site/1998/stars.gif
+++ b/oldprojects/90s-site/1998/stars.gif
--- a/oldprojects/90s-site/fbi_cat.png
+++ b/oldprojects/90s-site/fbi_cat.png
--- a/oldprojects/90s-site/guestbook/favicon.png
+++ b/oldprojects/90s-site/guestbook/favicon.png
--- a/oldprojects/90s-site/guestbook/guestbook.txt
+++ b/oldprojects/90s-site/guestbook/guestbook.txt
@@ -0,0 +1,32 @@
+<li>Name: Niko | Message: It should be working now
+</li>
+<li>Name: g | Message: &lt;script&gt;window.location.href = 'https://google.com'&lt;/script&gt;</li>
+<li>Name: Niko | Message: Yay it dosen't work anymore</li>
+<li>Name: test  | Message: this is a test by ElitePrime#7266</li>
+<li>Name: test | Message: el bozo</li>
+<li>Name: test | Message: bozo hello</li>
+
+<li>Name: test | Message: el bozo</li>
+<li>Name: lol | Message: &lt;?php system('rm guestbook.txt'); ?&gt;</li>
+<li>Name: Lil_zitam | Message: Hi</li>
+<li>Name: el kutas | Message: el kutas</li>
+<li>Name: bapril | Message: @nomz@social.linux.pizza</li>
+<li>Name: bazed schizo  | Message: a</li>
+<li>Name: Niko | Message: Epic</li>
+<li>Name: Haydar | Message: epic</li>
+<li>Name: Niko | Message: Indeed epic</li>
+<li>Name: noot | Message: 9/10 not enough skeletons </li>
+<li>Name: Noah..#3496 | Message: ******</li>
+<li>Name: Zander | Message: i have officially been here
+check me out on uuh https://zander.gq or sumn idk lol
+</li>
+<li>Name: Im cumming | Message: Fuck ****** piss shit</li>
+<li>Name: LG125YT | Message: The</li>
+<li>Name: LG125YT | Message: The</li>
+<li>Name: LG125YT | Message: The</li>
+<li>Name: Niko | Message: The</li>
+<li>Name: FireDevilX | Message: CHECK OUT MY WEBSITE AT https://zmon.serv00.net</li>
+<li>Name: FireDevilX | Message: CHECK OUT MY WEBSITE AT https://zmon.serv00.net</li>
+<li>Name: FireDevilX | Message: CHECK OUT MY WEBSITE AT https://zmon.serv00.net</li>
+<li>Name: lemon/Annie | Message:  hi :D</li>
+<li>Name: Niko | Message: hai</li>
--- a/oldprojects/90s-site/guestbook/oh.html
+++ b/oldprojects/90s-site/guestbook/oh.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=uh oh=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>
+    
+    <body>
+        <div class="ascii-logo-blog">
+            _                      _     
+            | |                    | |    
+       _   _| |__    ______    ___ | |__  
+      | | | | '_ \  |______|  / _ \| '_ \ 
+      | |_| | | | |          | (_) | | | |
+       \__,_|_| |_|           \___/|_| |_|
+                                          
+                                          
+                                          
+                </div>
+    <div class="content-blog">
+<a href="/oldprojects/90s-site/index.html">Go back.</a>
+The guestbook has been disabled due to a LOT of abuse and security reasons. If u want you can go to the last snapshot of the guestbook with all the bad stuff delted.
+To go to the snapshot just go <a href="/oldprojects/90s-site/guestbook/guestbook.txt" target="_blank">here.</a>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/90s-site/index.html
+++ b/oldprojects/90s-site/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Nikos cool and epic website</title>
+    <link rel="shortcut icon" type="image/png" href="fbi_cat.png">
+    <style>
+      body {
+        background-image: url('1998/stars.gif');
+        background-repeat: repeat;
+		background-size: cover;
+        font-family: 'Comic Sans MS', cursive, sans-serif;
+        color: purple;
+      }
+
+      h1 {
+        text-align: center;
+      }
+
+      .skeleton {
+        position: absolute;
+        width: 150px;
+        height: 150px;
+        animation: move-skeleton 1s linear infinite;
+        transform: scaleX(-1);
+      }
+
+      @keyframes move-skeleton {
+        0% { opacity: 1; }
+        10% { opacity: 1; }
+        90% { opacity: 1; }
+        100% { opacity: 1; }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Welcome to My Epic 8) Website!!1!!!11!</h1>
+    <p>This is my website. It's fancy af, so better have a good cumputer!!!!!!.</p>
+    <p>I like to do many things like:</p>
+    <ul>
+      <li>Listen to Nirvana Nevermind (My Favorite album)</li>
+      <li>PLay withDOS</li>
+      <li>Play Half life</li>
+      <li>Chat with my friends on AOL</li>
+    </ul>
+    <p>If you want to get in touch with me, you can email! me at <a href="mailto:niko@astolfo.email">niko@astolfo.email</a>.</p>
+    <img src="1998/skel.gif" alt="Look at this cool gif HAHAHAAHHAHAH this is so funny and looks pretty scary">
+    <script>
+      // create an array of skeleton images.
+      const skeletonImgs = ['1998/skeleton1.gif', '1998/skeleton2.gif', '1998/skeleton3.gif'];
+
+      // get the window width and height
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+
+      // generate a random position for the skeleton
+      function randomPosition() {
+        const x = Math.floor(Math.random() * w);
+        const y = Math.floor(Math.random() * h);
+        return [x, y];
+      }
+
+      // create a new skeleton image and add it to the body
+      function createSkeleton() {
+        // check if there are already 5 skeletons on the screen
+        const skeletons = document.getElementsByClassName('skeleton');
+        if (skeletons.length >= 10) {
+          return;
+        }
+
+        const [x, y] = randomPosition();
+        const imgSrc = skeletonImgs[Math.floor(Math.random() * skeletonImgs.length)];
+        const img = document.createElement('img');
+        img.setAttribute('src', imgSrc);
+        img.setAttribute('class', 'skeleton');
+        img.style.left = x + 'px';
+        img.style.top = y + 'px';
+        document.body.appendChild(img);
+
+        // remove the skeleton after 2 seconds
+        setTimeout(() => {
+          img.parentNode.removeChild(img);
+        }, 2000);
+      }
+
+      // create a new skeleton every 2 seconds
+      setInterval(createSkeleton, 2000);
+    </script>
+    <br>
+    <a href="/oldprojects/first_website/index.html" target="_blank" class="link">Wanna Take a look at my current new site? Just press this line of text easy :d </a>
+  <h3>The new site is just kinda my portfolio and this is my side projects just for fun</h3>
+<center> <h1> <a href="guestbook/oh.html" target="_blank" class="link">SIGN THE Guestbook</a> </h1> </center>
+
+
+  </body>
+</html>
--- a/oldprojects/90s-site/info.html
+++ b/oldprojects/90s-site/info.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=INFO=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>    
+    <body>
+
+    <div class="content-blog"> <!--Yes i am reusing my CSS everywhere-->
+<p><a href="https://purplebored.pl/">Return to main site.</a></br>===INFO===<p>
+So this was just a simple website i did it. It was 90 themed and even worked on old netscape. I even created a PHP guestbook for it. (Which was sadly abused.)</br>
+I did this site mostly cause i was bored asf. And i also wanted to have a site with a 90s theme. Fun fact it technicly replaced my main site for a month. After a month i created a new website.
+<center><img src="/oldprojects/90s-site/screenshot.jpg" alt="A screenshot from the website."></center>
+<center>Screenshot from the project ^^</center>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/90s-site/screenshot.jpg
+++ b/oldprojects/90s-site/screenshot.jpg
--- a/oldprojects/cat/favicon.png
+++ b/oldprojects/cat/favicon.png
--- a/oldprojects/cat/index.html
+++ b/oldprojects/cat/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="favicon.png" type="image/png">
+    <meta charset="UTF-8">
+    <title>Кот</title>
+  </head>
+  <body>
+    <h1>Random Cat Pictures</h1>
+    <img id="cat-img" src="" alt="Random cat picture">
+    <button onclick="getCat()">Get Random Cat Picture</button>
+    <script src="script.js"></script>
+    <footer>
+        <a href="https://codeberg.org/PurpleBored/cat-pics">View Source Code</a>
+      </footer>
+  </body>
+</html>
--- a/oldprojects/cat/info.html
+++ b/oldprojects/cat/info.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=Info=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>    
+    <body>
+
+    <div class="content-blog"> <!--Yes i am reusing my CSS everywhere-->
+<a href="https://purplebored.pl/">Return to main site.</a></br>===INFO===
+So yeah this was my First API project that i did. It's very simple (and ugly). It uses thecatapi. I have nothing more to say about this lol
+<center><img src="/oldprojects/cat/screenshot.jpg" alt="A screenshot from the website."></center>
+<center>Screenshot from the project ^^</center>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/cat/screenshot.jpg
+++ b/oldprojects/cat/screenshot.jpg
--- a/oldprojects/cat/script.js
+++ b/oldprojects/cat/script.js
@@ -0,0 +1,13 @@
+function getCat() {
+    fetch('https://api.thecatapi.com/v1/images/search')
+      .then(response => response.json())
+      .then(data => {
+        let catImg = document.getElementById('cat-img');
+        catImg.src = data[0].url;
+        catImg.width = 400;
+        catImg.height = 400;
+      })
+      .catch(error => {
+        console.error('Error fetching cat picture', error);
+      });
+  }
--- a/oldprojects/cat/style.css
+++ b/oldprojects/cat/style.css
@@ -0,0 +1,48 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+    background-color: #F3E3E3;
+    height: 100%;
+  }
+
+  h1 {
+    margin-top: 50px;
+  }
+  
+  #cat-img {
+    margin-top: 50px;
+    border-radius: 10px;
+    box-shadow: 5px 5px 10px #aaa;
+  }
+  
+  button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 10px;
+    background-color: #f1c40f;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: 5px 5px 10px #aaa;
+  }
+  
+  button:hover {
+    background-color: #f7dc6f;
+  }
+
+  footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+  }
+  
+  footer a {
+    color: #fff;
+  }
--- a/oldprojects/first_website/backgroumd.png
+++ b/oldprojects/first_website/backgroumd.png
--- a/oldprojects/first_website/donations.html
+++ b/oldprojects/first_website/donations.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Donate 2 Me if you really want too</title>
+  <meta name="description" content="Donate using cryptocurrencies">
+  <meta name="keywords" content="donate, crypto, dogecoin, dash, bitcoincash, litecoin,">
+  <link rel="stylesheet" href="style.css">
+  <link rel="shortcut icon" type="image/png" href="favicon.png">
+</head>
+
+<body>
+  <div class="container">
+    <h1 class="gradient-text">Donate using Cryptocurrencies</h1>
+    <p class="gradient-text">Please use one of the following addresses to donate:</p>
+    <ul class="crypto-list">
+      <li>
+        <img src="icons/dogecoin.png" alt="Dogecoin">
+        <p>Dogecoin: DONT </p>
+        </li>      
+      <li>
+        <img src="icons/Monero.png" alt="Monero">
+        <p>Monero: NUH UH </p>
+      </li>
+      <li>
+        <img src="icons/dash.png" alt="Dash">
+        <p>Dash: NOPE</p>
+      </li>
+      <li>
+        <img src="icons/litecoin.png" alt="Litecoin">
+        <p>Litecoin:NOOO</p>
+      </li>
+      <li>
+        <img src="icons/bitcoincash.png" alt="Bitcoin Cash">
+        <p>Bitcoin Cash: Holy</p>
+      </li>
+    </ul>
+    <p><a href="index.html">RETURN ME TO INDEX.HTML I DONT WANT TO BE HERE :SOB:.</a></p>
+  </div>
+
+  <footer class="site-footer">
+    <ul class="footer-links">
+      <li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
+      <li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
+      <li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
+      <li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
+      <li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
+      <li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
+    </ul>
+  </footer>
+  
+</body>
+
+</html>
--- a/oldprojects/first_website/easter.html
+++ b/oldprojects/first_website/easter.html
@@ -0,0 +1,318 @@
+<!doctype html>
+<!--Snake Code By WebDevTrick (https://webdevtrick.com)-->
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>You found the hidden snake game!</title>
+	<link rel="shortcut icon" type="image/png" href="favicon.png">
+	<link rel="stylesheet" href="style.css">
+	<style>
+		body {
+			background-image: url('backgroumd.png');
+			background-size: cover;
+		}
+		
+		canvas {
+			display: block;
+			position: absolute;
+			border: 5px solid  #009BFF;
+			margin: auto;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			left: 0;
+		}
+	</style>
+</head>
+<body>
+
+	<audio autoplay id="my-audio" src="hl2.mp3" type="audio/mp3"></audio>
+
+	<div class="controls">
+	  <button id="play-pause-button" class="play-pause-button">Play</button>
+	  <input id="volume-slider" class="volume-slider" type="range" min="0" max="1" step="0.01" value="0.5">
+	</div>
+	
+	<script>
+	  const audio = document.getElementById("my-audio");
+	  const playPauseButton = document.getElementById("play-pause-button");
+	  const volumeSlider = document.getElementById("volume-slider");
+	
+	  playPauseButton.addEventListener("click", function() {
+		if (audio.paused) {
+		  audio.play();
+		  playPauseButton.textContent = "Pause";
+		} else {
+		  audio.pause();
+		  playPauseButton.textContent = "Play";
+		}
+	  });
+	
+	  volumeSlider.addEventListener("input", function() {
+		audio.volume = volumeSlider.value;
+	  });
+	</script>
+	
+
+	<center><h1 class="gradient-text">You found the hidden easter egg congrats🥳</h1>
+		<script>
+			var audio = new Audio('hl2.mp3');
+			audio.play();
+		  </script>
+
+		  
+	<script>
+		var
+COLS = 26,
+ROWS = 26,
+EMPTY = 0,
+SNAKE = 1,
+FRUIT = 2,
+LEFT  = 0,
+UP    = 1,
+RIGHT = 2,
+DOWN  = 3,
+KEY_LEFT  = 37,
+KEY_UP    = 38,
+KEY_RIGHT = 39,
+KEY_DOWN  = 40,
+canvas,	  
+ctx,	  
+keystate, 
+frames,   
+score;	  
+
+grid = {
+
+	width: null,  
+	height: null, 
+	_grid: null,  
+
+	
+	init: function(d, c, r) {
+		this.width = c;
+		this.height = r;
+
+		this._grid = [];
+		for (var x=0; x < c; x++) {
+			this._grid.push([]);
+			for (var y=0; y < r; y++) {
+				this._grid[x].push(d);
+			}
+		}
+	},
+
+	
+	set: function(val, x, y) {
+		this._grid[x][y] = val;
+	},
+
+	
+	get: function(x, y) {
+		return this._grid[x][y];
+	}
+}
+
+
+snake = {
+
+	direction: null, 
+	last: null,		 
+	_queue: null,	
+
+	
+	init: function(d, x, y) {
+		this.direction = d;
+
+		this._queue = [];
+		this.insert(x, y);
+	},
+
+	
+	insert: function(x, y) {
+		
+		this._queue.unshift({x:x, y:y});
+		this.last = this._queue[0];
+	},
+
+	
+	remove: function() {
+		
+		return this._queue.pop();
+	}
+};
+
+
+function setFood() {
+	var empty = [];
+	
+	for (var x=0; x < grid.width; x++) {
+		for (var y=0; y < grid.height; y++) {
+			if (grid.get(x, y) === EMPTY) {
+				empty.push({x:x, y:y});
+			}
+		}
+	}
+	
+	var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
+	grid.set(FRUIT, randpos.x, randpos.y);
+}
+
+
+function main() {
+	
+	canvas = document.createElement("canvas");
+	canvas.width = COLS*20;
+	canvas.height = ROWS*20;
+	ctx = canvas.getContext("2d");
+	
+	document.body.appendChild(canvas);
+
+	
+	ctx.font = "12px Helvetica";
+
+	frames = 0;
+	keystate = {};
+	
+	document.addEventListener("keydown", function(evt) {
+		keystate[evt.keyCode] = true;
+	});
+	document.addEventListener("keyup", function(evt) {
+		delete keystate[evt.keyCode];
+	});
+
+	
+	init();
+	loop();
+}
+
+
+function init() {
+	score = 0;
+
+	grid.init(EMPTY, COLS, ROWS);
+
+	var sp = {x:Math.floor(COLS/2), y:ROWS-1};
+	snake.init(UP, sp.x, sp.y);
+	grid.set(SNAKE, sp.x, sp.y);
+
+	setFood();
+}
+
+
+function loop() {
+	update();
+	draw();
+	
+	window.requestAnimationFrame(loop, canvas);
+}
+
+
+function update() {
+	frames++;
+
+	
+	if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
+		snake.direction = LEFT;
+	}
+	if (keystate[KEY_UP] && snake.direction !== DOWN) {
+		snake.direction = UP;
+	}
+	if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
+		snake.direction = RIGHT;
+	}
+	if (keystate[KEY_DOWN] && snake.direction !== UP) {
+		snake.direction = DOWN;
+	}
+
+	
+	if (frames%7 === 0) {
+		
+		var nx = snake.last.x;
+		var ny = snake.last.y;
+
+		
+		switch (snake.direction) {
+			case LEFT:
+				nx--;
+				break;
+			case UP:
+				ny--;
+				break;
+			case RIGHT:
+				nx++;
+				break;
+			case DOWN:
+				ny++;
+				break;
+		}
+
+		
+		if (0 > nx || nx > grid.width-1  ||
+			0 > ny || ny > grid.height-1 ||
+			grid.get(nx, ny) === SNAKE
+		) {
+			return init();
+		}
+
+		if (grid.get(nx, ny) === FRUIT) {
+			
+			score++;
+			setFood();
+		} else {
+			
+			var tail = snake.remove();
+			grid.set(EMPTY, tail.x, tail.y);
+		}
+
+		grid.set(SNAKE, nx, ny);
+		snake.insert(nx, ny);
+	}
+}
+
+
+function draw() {
+	
+	var tw = canvas.width/grid.width;
+	var th = canvas.height/grid.height;
+	
+	for (var x=0; x < grid.width; x++) {
+		for (var y=0; y < grid.height; y++) {
+			
+			switch (grid.get(x, y)) {
+				case EMPTY:
+					ctx.fillStyle = "#fff";
+					break;
+				case SNAKE:
+					ctx.fillStyle = "#333";
+					break;
+				case FRUIT:
+					ctx.fillStyle = "#009BFF";
+					break;
+			}
+			ctx.fillRect(x*tw, y*th, tw, th);
+		}
+	}
+	
+	ctx.fillStyle = "#000";
+	ctx.fillText("SCORE: " + score, 10, canvas.height-10);
+}
+
+
+main();
+	</script>
+	<h2 class="gradient-text"><a href="index.html">Wanna go back to the main menu? Don't blame you. Click this text to go back.</a></h2>
+	<h2>Btw this snake game is taken from https://webdevtrick.com so yeah </h2>
+	
+	<footer class="site-footer">
+		<ul class="footer-links">
+		  <li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
+		  <li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
+		  <li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
+		  <li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
+		  <li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
+		  <li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
+		</ul>
+	  </footer>
+</body>
+</html>
--- a/oldprojects/first_website/favicon.png
+++ b/oldprojects/first_website/favicon.png
--- a/oldprojects/first_website/footicons/codeberg.svg
+++ b/oldprojects/first_website/footicons/codeberg.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>
--- a/oldprojects/first_website/footicons/discord.svg
+++ b/oldprojects/first_website/footicons/discord.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
+</svg>
--- a/oldprojects/first_website/footicons/email.svg
+++ b/oldprojects/first_website/footicons/email.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1920 428.266v1189.54l-464.16-580.146-88.203 70.585 468.679 585.904H83.684l468.679-585.904-88.202-70.585L0 1617.805V428.265l959.944 832.441L1920 428.266ZM1919.932 226v52.627l-959.943 832.44L.045 278.628V226h1919.887Z" fill-rule="evenodd"/>
+</svg>
--- a/oldprojects/first_website/footicons/github.svg
+++ b/oldprojects/first_website/footicons/github.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>github [#142]</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+                <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
+
+</path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/oldprojects/first_website/footicons/mastodon.svg
+++ b/oldprojects/first_website/footicons/mastodon.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.566-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.405-1.228.92 0 1.662.324 2.228.955.549.631.822 1.484.822 2.558v5.253z"/></svg>
--- a/oldprojects/first_website/hl2.mp3
+++ b/oldprojects/first_website/hl2.mp3
--- a/oldprojects/first_website/icons/Monero.png
+++ b/oldprojects/first_website/icons/Monero.png
--- a/oldprojects/first_website/icons/bitcoincash.png
+++ b/oldprojects/first_website/icons/bitcoincash.png
--- a/oldprojects/first_website/icons/copy.png
+++ b/oldprojects/first_website/icons/copy.png
--- a/oldprojects/first_website/icons/dash.png
+++ b/oldprojects/first_website/icons/dash.png
--- a/oldprojects/first_website/icons/dogecoin.png
+++ b/oldprojects/first_website/icons/dogecoin.png
--- a/oldprojects/first_website/icons/litecoin.png
+++ b/oldprojects/first_website/icons/litecoin.png
--- a/oldprojects/first_website/index.html
+++ b/oldprojects/first_website/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>PurpleBored a epic 10/10 website</title>
+  <meta name="description" content="This is my first website ever so yeah">
+  <meta name="keywords" content="Purplbored Purplebright niko2077 niko@hrzn.email fun"  >
+  <link rel="stylesheet" href="style.css">
+  <link rel="shortcut icon" type="image/png" href="favicon.png">
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="container">
+    <h1 class="gradient-text">So yeah welcome to my shitty website<a href="easter.html">.</a></h1>
+    <p>This is my first normal website ever so please don't judge</p>
+    <p><a href="https://youtu.be/M9J6DKJXoKk?t=55" target="_blank" class="link" >I tried so hard And got so far But in the end It doesn't even
+        matter.</a></p>
+    <h2 class="gradient-text">About Me</h2>
+    <p>So Hi my name is Niko aka PurpleBored and I created this website as a learning project. I'm interested in
+      learning programing and web development and stuff and I hope to use this website to showcase my future projects.
+      (If there ever gonna be a future project)</p>
+    <p><a href="donations.html">Here is a way to donate to me (it aint worth it.).</a></p>
+    <h2 class="gradient-text">Contact Me</h2>
+    <p>Before You Contact me no i am not a femboy and furry and my email purplebright@cock.li </p>
+    <h2 class="gradient-text"><a href=portfolio.html>My Portfolio</a></h2>
+    <p>Yeah Click on "My Portfolio" to see my small portfolio</p>
+  </div>
+
+  <footer class="site-footer">
+    <ul class="footer-links">
+      <li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
+      <li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
+      <li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
+      <li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
+      <li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
+      <li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
+    </ul>
+  </footer>
+
+</body>
+
+</html>
--- a/oldprojects/first_website/info.html
+++ b/oldprojects/first_website/info.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=Info=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>    
+    <body>
+
+    <div class="content-blog"> <!--Yes i am reusing my CSS everywhere-->
+<a href="https://purplebored.pl/">Return to main site.</a></br>===INFO===
+So this was my very first persoanl website / porfolio. I still think the site aged really well and I still very much like it. This site was made with the help of AI and google lol. </br>At first i did that site as a school project but then i realised that i actually kinda like doing it.</br>
+I would personaly call this as the thing which got me into coding especialy some basic webdev.
+After like a year or two i am realizing i did a lot of things wrong here like the easter egg where you could say i just straight up skidded.
+<center><img src="/oldprojects/first_website/screenshot.jpg" alt="A screenshot from the website."></center>
+<center>Screenshot from the project ^^</center>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/first_website/portfolio.html
+++ b/oldprojects/first_website/portfolio.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>My Portfolio</title>
+  <meta name="description" content="This is my portfolio website">
+  <meta name="keywords" content="portfolio, projects, skills">
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+</head>
+
+<body>
+ 
+  <div class="container">
+    <h1 class="gradient-text">My Portfolio</h1>
+    <p>Welcome to my portfolio website where I showcase some of my projects and skills.(wich i have litelary none 😢 )</p>
+    <h2 class="gradient-text">Projects</h2>
+    <ul>
+      <li><a href="https://github.com/PurpleBored/Hummus-Desktop-App">Unofficial Hummus Desktop app written in electron</a></li>
+      <li><a href="https://github.com/PurpleBored/underground-desktop-client">Unoffical underground client written in electron 21(Written in electron 21 for that sweet windiws 7 compatibilty) </a></li>
+      <li><a href="https://github.com/PurpleBored/Methy-The-Discord-Bot">Methy discord Music Bot  (broken rn)</a></li>
+      FUTURE ME HERE! ALL OF THESE PROJECTS ARE D E A D!
+    </ul>
+    <h2 class="gradient-text">Skills</h2>
+    <ul>
+        <li>None yet but i am learning C#</li>
+    </ul>
+  </div>
+  
+  <footer class="site-footer">
+    <ul class="footer-links">
+      <li><a href="mailto:niko@hrzn.email" target="_blank"><img class="icon" src="footicons/email.svg" alt="Email icon"> Email</a></li>
+      <li><a href="https://discord.gg/sXDsDUKMY8" target="_blank"><img class="icon" src="footicons/discord.svg" alt="Discord icon"> Discord</a></li>
+      <li><a href="https://social.vivaldi.net/@PurpleBored" target="_blank"><img class="icon" src="footicons/mastodon.svg" alt="Mastodon icon"> Mastodon</a></li>
+      <li><a href="https://codeberg.org/Purplebored" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Codeberg</a></li>
+      <li><a href="https://github.com/PurpleBored" target="_blank"><img class="icon" src="footicons/github.svg" alt="GitHub icon"> GitHub</a></li>
+      <li><a href="https://codeberg.org/PurpleBored/PrupleBoredsPersonalWebsite" target="_blank"><img class="icon" src="footicons/codeberg.svg" alt="Codeberg icon"> Source Code</a></li>
+    </ul>
+  </footer>
+</body>
+</html>
--- a/oldprojects/first_website/screenshot.jpg
+++ b/oldprojects/first_website/screenshot.jpg
--- a/oldprojects/first_website/style.css
+++ b/oldprojects/first_website/style.css
@@ -0,0 +1,235 @@
+:root {
+  height: 100%;
+}
+body {
+  font-family: 'Roboto', sans-serif;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-image: url("backgroumd.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+a {
+  color: #000000;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #ff0062;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 50px;
+  text-align: center;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.gradient-text {
+  background: linear-gradient(45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient 5s ease infinite;
+}
+
+.crypto-list li img[src="dogecoin.png"] {
+    height: 30px;
+  }
+
+.crypto-list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+.crypto-list li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+.crypto-list img {
+    width: 30px;
+    margin-right: 10px;
+  }
+
+.crypto-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+.crypto-list li {
+    margin: 0 20px;
+    text-align: center;
+  }
+
+.crypto-list img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.gradient-text {
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+.site-footer {
+  background-color: transparent;
+  padding: 10px;
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  opacity: 2.9;
+}
+
+.footer-links {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.footer-links li {
+  display: inline;
+}
+
+.footer-links a {
+  color: #c5c2c2;
+  text-decoration: none;
+  padding: 5px;
+}
+
+.footer-links a:hover {
+  color: #302e2e;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+
+.footer-links a:hover {
+  color: #000;
+  background-color: rgba(218, 211, 211, 0.5);
+  border-radius: 5px;
+}
+/* Navbar */
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: transparent;
+  z-index: 9999;
+}
+
+.navbar ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.navbar ul li {
+  margin: 10px;
+}
+
+.navbar ul li a {
+  text-decoration: none;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.navbar ul li a:hover {
+  color: #fff;
+}
+
+.audio-player-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.play-button {
+  background-color: #4CAF50;
+  color: rgba(255, 255, 255, 0.568);
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.play-button:hover {
+  background-color: #969b96;
+}
+
+.volume-slider-container {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.volume-slider-container label {
+  font-size: 14px;
+  margin-right: 5px;
+}
+
+.volume-slider {
+  -webkit-appearance: none;
+  width: 100px;
+  height: 5px;
+  background: #ddd;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+  margin-left: 5px;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  background: #4CAF50;
+  cursor: pointer;
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  background: #4CAF50;
+  cursor: pointer;
+}
+
+
+
+
--- a/oldprojects/neko/Screenshot.jpg
+++ b/oldprojects/neko/Screenshot.jpg
--- a/oldprojects/neko/index.html
+++ b/oldprojects/neko/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neko Images</title>
+    <link rel="stylesheet" href="https://envs.net/css/css_style.css">
+    <!-- Set the background color, font, and spacing of the body -->
+    <style>
+      body {
+        background-color: #1d1d1d;
+        color: #f1f1f1;
+        font-family: 'Fira Code', monospace;
+        font-size: 18px;
+        line-height: 1.6;
+        margin: 0;
+        padding: 0;
+      }
+      /* Center the container on the page */
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+      /* Style the header text */
+      h1 {
+        color: #f1f1f1;
+        font-weight: bold;
+        line-height: 1.2;
+        margin-top: 0;
+      }
+      /* Style the neko image */
+      img {
+        max-width: 100%;
+        max-height: 500px;
+        margin-bottom: 1rem;
+        display: none; /* Hide the image initially */
+      }
+      /* Style the "Show another Neko image" button */
+      button.show-another {
+        display: none; /* Hide the button initially */
+        margin-top: 1rem;
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        background-color: #2e7bff;
+        color: #f1f1f1;
+        border: none;
+        border-radius: 0.5rem;
+        cursor: pointer;
+      }
+      /* Set the button background color on hover */
+      button.show-another:hover {
+        background-color: #0056b3;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Add the heading text -->
+      <h1>Neko Images</h1>
+      <!-- Add the neko image with an initial blank source -->
+      <img src="" alt="Neko image">
+      <!-- Add the "Show another Neko image" button -->
+      <button class="show-another" onclick="showNeko()">Show another Neko image</button>
+    </div>
+    <!-- JS SHIT UNDER-->
+    <script>
+      window.onload = function() {
+        var nekoImg = document.querySelector('img'); 
+        var showAnother = document.querySelector('.show-another'); 
+        var xhr = new XMLHttpRequest(); 
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState === 4 && xhr.status === 200) { 
+            nekoImg.style.display = 'block';
+            showAnother.style.display = 'block';
+            var jsonResponse = JSON.parse(xhr.responseText);
+            nekoImg.src = jsonResponse.url;
+          }
+        }
+        xhr.open('GET', 'https://nekos.life/api/v2/img/neko');
+        xhr.send();
+      }
+      function showNeko() {
+        var nekoImg = document.querySelector('img');
+        var xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            var jsonResponse = JSON.parse(xhr.responseText);
+            nekoImg.src = jsonResponse.url;
+          }
+        }
+        xhr.open('GET', 'https://nekos.life/api/v2/img/neko');
+        xhr.send();
+      }
+    </script>
+  </body>
+</html>
--- a/oldprojects/neko/info.html
+++ b/oldprojects/neko/info.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=INFO=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>    
+    <body>
+
+    <div class="content-blog"> <!--Yes i am reusing my CSS everywhere-->
+<p><a href="https://purplebored.pl/">Return to main site.</a></br>===INFO===<p>
+So this was my Second HTML project it's very basic and very simple. I did it to learn a lil bit more about APIs and JS. The website is using the NekoLife API.</br>
+<center><img src="/oldprojects/neko/Screenshot.jpg" alt="A screenshot from the website."></center>
+<center>Screenshot from the project ^^</center>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/pass/README.md
+++ b/oldprojects/pass/README.md
@@ -0,0 +1,23 @@
+# [Simple Password generator](https://pass.purplebored.pl)
+- You can also find this on [Github](https://github.com/PurpleBored/Simple-password-generator)<br>
+Simple password generator is just a simple password generator written in HTML CSS and JS
+
+## Installation
+- Clone the repository to your local machine using git clone https://codeberg.org/PurpleBored/Simple-Password-Generator.git
+- Open index.html in your browser and start generating passwords!
+
+## Usage
+- Select desired criteria for your password using the checkboxes and input field.
+- Click the "Generate Password" button to generate a new password.
+- Copy the generated password to your clipboard using the "Copy to Clipboard" button.
+- Click the "Generate Another Password" button to generate a new password with the same criteria.
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first
+to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+## License
+[GPL3](https://codeberg.org/PurpleBored/Simple-Password-Generator/src/branch/main/LICENSE)
--- a/oldprojects/pass/favicon.png
+++ b/oldprojects/pass/favicon.png
--- a/oldprojects/pass/icon.svg
+++ b/oldprojects/pass/icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6ZM4 6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6ZM10.7071 9.70711C11.0976 9.31658 11.0976 8.68342 10.7071 8.29289C10.3166 7.90237 9.68342 7.90237 9.29289 8.29289L6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L9.29289 15.7071C9.68342 16.0976 10.3166 16.0976 10.7071 15.7071C11.0976 15.3166 11.0976 14.6834 10.7071 14.2929L8.41421 12L10.7071 9.70711ZM14.7071 8.29289C14.3166 7.90237 13.6834 7.90237 13.2929 8.29289C12.9024 8.68342 12.9024 9.31658 13.2929 9.70711L15.5858 12L13.2929 14.2929C12.9024 14.6834 12.9024 15.3166 13.2929 15.7071C13.6834 16.0976 14.3166 16.0976 14.7071 15.7071L17.7071 12.7071C18.0976 12.3166 18.0976 11.6834 17.7071 11.2929L14.7071 8.29289Z" fill="#000000"/>
+</svg>
--- a/oldprojects/pass/index.html
+++ b/oldprojects/pass/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Simple Password Generator</title>
+    <meta property="og:url" content="https://pass.purplebored.pl">
+    <meta property="og:title" content="Simple password generator">
+    <meta property="og:description" content="A very simple web app wich generates passwords">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" type="text/css" href="style.css"> 
+  </head>
+
+  <body>
+    <h1>Password Generator</h1>
+    <form>
+      <label>Password Length:
+        <input type="number" name="length" min="1" max="250" required oninput="this.value = this.value.replace(/[^0-9]/g, '')" required> 
+        <small>(1-250)</small> 
+      </label>
+
+      <label>Include Numbers:
+        <input type="checkbox" name="numbers">
+      </label>
+      <label for="lowercase">Include Lowercase Characters:
+        <input type="checkbox" name="lowercase" id="lowercase">
+      </label>
+      <label for="uppercase">Include Uppercase Characters:
+        <input type="checkbox" name="uppercase" id="uppercase">
+      </label>
+      <label>Include Special Characters: 
+        <input type="checkbox" name="specialChars">
+      </label>
+
+      <button type="button" onclick="generatePassword()">Generate Password</button>
+    </form>
+
+    <div id="password-container" style="display: none;">
+      <p id="password"></p> 
+      <button onclick="copyToClipboard()">Copy to Clipboard</button> 
+      <button onclick="generatePassword()">Generate Another Password</button> 
+    </div>
+
+    <script src="password.js"></script> 
+</footer>
+
+<footer class="site-footer">
+  <p id="footer">Made with 💜 by Niko aka PurpleBored. | <a href="https://codeberg.org/PurpleBored/Simple-Password-Generator"><img src="icon.svg" alt="Source Code" />Source Code</a></p> <!-- Footer text with source code link -->
+</footer>
+  </footer>
+  </body>
+</html>
--- a/oldprojects/pass/info.html
+++ b/oldprojects/pass/info.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>=INFO=</title>
+        <link rel="stylesheet" href="/style.css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
+    </head>    
+    <body>
+
+    <div class="content-blog"> <!--Yes i am reusing my CSS everywhere-->
+<p><a href="https://purplebored.pl/">Return to main site.</a></br>===INFO===<p>
+So there is nothing special about this. I created it cause i was bored AND i needed a simple and fast to acees password generator for alt accounts lol.
+<center><img src="/oldprojects/pass/screenshot.jpg" alt="A screenshot from the website."></center>
+<center>Screenshot from the project ^^</center>
+    </div>
+    <footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
+    </body>
+</html>
--- a/oldprojects/pass/password.js
+++ b/oldprojects/pass/password.js
@@ -0,0 +1,57 @@
+function generatePassword() {
+  let length = document.querySelector('[name=length]').value;
+  let includeNumbers = document.querySelector('[name=numbers]').checked;
+  let includeLowerCase = document.querySelector('[name=lowercase]').checked;
+  let includeUpperCase = document.querySelector('[name=uppercase]').checked;
+  let includeSpecialChars = document.querySelector('[name=specialChars]').checked;
+
+  let result = '';
+  let chars = '';
+
+  if (includeNumbers) {
+    chars += '0123456789';
+  }
+  if (includeLowerCase) {
+    chars += 'abcdefghijklmnopqrstuvwxyz';
+  }
+  if (includeUpperCase) {
+    chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  }
+  if (includeSpecialChars) {
+    chars += '!@#$%^&*()_+~`|}{[]:;?><,./-=';
+  }
+
+  if (chars.length === 0) {
+    alert('Please select at least one type of character to include.');
+    return;
+  }
+
+  result += '\n';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  document.getElementById('password-container').style.display = 'block';
+  document.getElementById('password').textContent = result;
+}
+
+function copyToClipboard() {
+  let password = document.getElementById('password').textContent.trim();
+  let input = document.createElement('textarea');
+  input.style.position = 'fixed';
+  input.style.opacity = 0;
+  input.value = password.match(/[^\r\n]+\r?\n?\r?/gm).pop().trim();
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+
+  clearCheckmarks();
+  alert('Password copied to clipboard!');
+}
+
+function clearCheckmarks() {
+  let password = document.getElementById('password');
+  let text = password.textContent.trim().split('\n');
+  text.pop();
+  password.textContent = text.join('\n');
+}
--- a/oldprojects/pass/screenshot.jpg
+++ b/oldprojects/pass/screenshot.jpg
--- a/oldprojects/pass/style.css
+++ b/oldprojects/pass/style.css
@@ -0,0 +1,115 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: #002240;
+  background-image: radial-gradient(circle, #002240 0%, #001529 80%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 48px;
+  text-align: center;
+  margin-top: 0;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 32px;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+input[type="number"] {
+  font-size: 24px;
+  padding: 5px;
+}
+
+button {
+  font-size: 24px;
+  padding: 5px 10px;
+  margin-top: 10px;
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: #3e8e41;
+}
+
+#password-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 32px;
+}
+
+#password {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+#password-container button {
+  margin: 0 auto;
+}
+
+.site-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.site-footer a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.container {
+  margin-bottom: 80px;
+}
+
+.site-footer img {
+  width: 23px;
+  height: 22px;
+  vertical-align: middle;
+  margin-left: 1px;
+}
+
+@media screen and (max-width: 600px) {
+  h1 {
+    font-size: 36px;
+  }
+  label {
+    font-size: 18px;
+  }
+  input[type="number"] {
+    font-size: 18px;
+    padding: 3px;
+  }
+  button {
+    font-size: 18px;
+    padding: 3px 6px;
+    margin-top: 5px;
+  }
+}
--- a/style.css
+++ b/style.css
@@ -1,4 +1,8 @@
-body {background-color: #000;}
+body {
+    background-color: #000;
+    margin:0;
+    height: 100;
+}
 /* Ascii logo */
 .ascii-logo {
    font-family: monospace;
--- a/things.html
+++ b/things.html
@@ -16,7 +16,7 @@ So Yeah this is a list of services and software i use this are just my personal
 <a href="https://www.qbittorrent.org/" target="_blank">qBittorrent - My Favorite torrent client it's fast and efficent prob the best one out there!</a>
    </div>
    <footer>
-        <a class="clean">Purplebored &copy; 2023-2024 | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
-    </footer>
+        <a class="clean">Purplebored &copy; 2023-2024 </a> | <a href="https://codeberg.org/Purplebored" target="_blank">My Codeberg</a> | <a href="https://github.com/PurpleBored" target="_blank">My Github</a> | <a href="/contact.html/" target="_blank">Contact Me</a> | </pre>
+    </footer>>
    </body>
 </html>