Updated the navbar, andded a project page

assets/css/style.css

@@ -6,45 +6,38 @@
 */
 
 @font-face {
-  font-family: "Clockopia";
+	font-family: "Clockopia";
-  src: url("../fonts/Clockopia.ttf") format("truetype");
+	src: url("../fonts/Clockopia.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "LuxiSans";
+	font-family: "LuxiSans";
-  src: url("../fonts/luxisr.ttf") format("truetype");
+	src: url("../fonts/luxisr.ttf") format("truetype");
 }
 
 body {
-  margin: 0;
+	margin: 0;
-  padding: 0;
+	padding: 0;
-  display: -webkit-box;
+	display: flex;
-  display: -ms-flexbox;
+	flex-direction: column;
-  display: flex;
+	min-height: 100vh;
-  height: 100vh;
+	background-color: #0e0016;
-  overflow: hidden;
+	color: white;
-  background-color: #0e0016;
+	font-family: "system-ui", sans-serif;
-  color: white;
+	overflow-x: hidden;
-  font-family: "system-ui", sans-serif;
 }
 
 /* === NAVBAR ON THE RIGHT === */
 .navbar {
 	width: 140px;
-	background-color: #3c1a4d;
+	background: rgba(60, 26, 77, 0.55);
-	display: -webkit-box;
+	backdrop-filter: blur(10px);
-	display: -ms-flexbox;
+	-webkit-backdrop-filter: blur(10px);
+	border-left: 1px solid rgba(255, 255, 255, 0.05);
 	display: flex;
-	-webkit-box-orient: vertical;
+	flex-direction: column;
-	-webkit-box-direction: normal;
+	justify-content: flex-start;
-	    -ms-flex-direction: column;
+	align-items: center;
-	        flex-direction: column;
-	-webkit-box-pack: start;
-	    -ms-flex-pack: start;
-	        justify-content: flex-start;
-	-webkit-box-align: center;
-	    -ms-flex-align: center;
-	        align-items: center;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
 	position: fixed;
@@ -52,8 +45,8 @@ body {
 	top: 0;
 	bottom: 0;
 	z-index: 20;
+	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
 }
-
 .navbar ul {
 	list-style: none;
 	margin: 0;
@@ -73,12 +66,9 @@ body {
 	text-align: center;
 	padding: 0.75rem 0;
 	position: relative;
-	-webkit-transition: background 0.2s ease, color 0.2s ease;
-	-o-transition: background 0.2s ease, color 0.2s ease;
 	transition: background 0.2s ease, color 0.2s ease;
 }
 
-/* === Full-width divider lines === */
 .navbar a::before,
 .navbar a::after {
 	content: "";
@@ -88,8 +78,6 @@ body {
 	width: 100%;
 	height: 1px;
 	background-color: rgba(255, 255, 255, 0.25);
-	-webkit-transition: background-color 0.2s ease;
-	-o-transition: background-color 0.2s ease;
 	transition: background-color 0.2s ease;
 }
 
@@ -111,144 +99,156 @@ body {
 	background-color: #fff5a8;
 }
 
+.navbar-top-icons {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	margin-bottom: 1.5rem;
+}
+
+.icon-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+}
+
+.icon-item img {
+	width: 32px;
+	height: 32px;
+	object-fit: contain;
+	transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.icon-item img:hover {
+	transform: scale(1.1);
+	opacity: 0.85;
+}
+
+.icon-label {
+	font-family: "Clockopia", sans-serif;
+	font-size: 0.8rem;
+	margin-top: 4px;
+}
+
+.tor-label {
+	color: #6e2b9e;
+}
+
+.ygg-label {
+	color: #92ffb3;
+}
+
 .footer {
-	position: fixed;
+	position: relative;
-	bottom: 0;
-	left: 0;
 	width: 100%;
 	padding: 1rem 0;
 	text-align: center;
 	font-family: IBMWeb, "Liberation Mono", monospace;
 	color: #fff;
 	background: transparent;
-	z-index: 100;
+	margin-top: auto;
+	z-index: 10;
 }
 
+/* === LINKS === */
 a {
-    text-decoration: none;
+	text-decoration: none;
-    color: #447fc6;
+	color: #447fc6;
 }
 
 ::-moz-selection {
 	color: #000000;
-	background: #a57ae9
+	background: #a57ae9;
 }
 
 ::selection {
 	color: #000000;
-	background: #a57ae9
+	background: #a57ae9;
 }
 
 a::-moz-selection {
 	color: #000;
-	background: #447fc6
+	background: #447fc6;
 }
 
 a::selection {
 	color: #000;
-	background: #447fc6
+	background: #447fc6;
-}
-	
-a:not(:has(img)):hover {
-	text-decoration: underline
 }
 
+a:not(:has(img)):hover {
+	text-decoration: underline;
+}
 
 /* === MAIN CONTENT === */
 .content {
-  display: -webkit-box;
+	display: flex;
-  display: -ms-flexbox;
+	align-items: center;
-  display: flex;
+	justify-content: center;
-  -webkit-box-align: center;
+	flex: 1;
-      -ms-flex-align: center;
+	padding: 4rem 10%;
-          align-items: center;
+	gap: 5%;
-  -webkit-box-pack: center;
+	z-index: 10;
-      -ms-flex-pack: center;
+	position: relative;
-          justify-content: center;
+	box-sizing: border-box;
-  -webkit-box-flex: 1;
+	flex-wrap: wrap;
-      -ms-flex: 1;
-          flex: 1;
-  padding: 0 10% 0 10%;
-  gap: 5%;
-  z-index: 10;
-  position: relative;
 }
 
-/* === LEFT SIDE (UZI IMAGE) === */
 .left {
-  -webkit-box-flex: 1;
+	flex: 1;
-      -ms-flex: 1;
+	display: flex;
-          flex: 1;
+	justify-content: center;
-  display: -webkit-box;
+	align-items: center;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
 }
 
 .uzi {
-  width: 90%;
+	width: 90%;
-  max-width: 650px;
+	max-width: 650px;
-  height: auto;
+	height: auto;
-  pointer-events: none;
+	pointer-events: none;
 }
 
-/* === MIDDLE SECTION (TEXT + BADGES) === */
 .middle {
-  -webkit-box-flex: 1;
+	flex: 1;
-      -ms-flex: 1;
+	display: flex;
-          flex: 1;
+	flex-direction: column;
-  display: -webkit-box;
+	justify-content: center;
-  display: -ms-flexbox;
+	text-align: left;
-  display: flex;
+	z-index: 10;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  text-align: left;
-  z-index: 10;
 }
 
 .middle h1 {
-  font-family: "Clockopia", sans-serif;
+	font-family: "Clockopia", sans-serif;
-  font-size: 3.5rem;
+	font-size: 3.5rem;
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
-  color: #fff5a8;
+	color: #fff5a8;
 }
 
 .middle p {
-  font-size: 1.1rem;
+	font-size: 1.1rem;
-  line-height: 1.7;
+	line-height: 1.7;
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
-  max-width: 550px;
+	max-width: 550px;
 }
 
 .buttons {
-  display: -webkit-box;
+	display: flex;
-  display: -ms-flexbox;
+	flex-wrap: wrap;
-  display: flex;
+	gap: 6px;
-  -ms-flex-wrap: wrap;
+	margin-top: 1.5rem;
-      flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 1.5rem;
 }
 
 .buttons img {
-  width: 88px;
+	width: 88px;
-  height: 31px;
+	height: 31px;
-  border: none;
+	border: none;
-  -ms-interpolation-mode: nearest-neighbor;
+	image-rendering: -webkit-optimize-contrast;
-      image-rendering: -webkit-optimize-contrast;
+	image-rendering: -moz-crisp-edges;
-      image-rendering: -moz-crisp-edges;
+	image-rendering: -o-pixelated;
-      image-rendering: -o-pixelated;
+	image-rendering: pixelated;
-      image-rendering: pixelated;
 }
 
 /* === BACKGROUND CANVAS === */
@@ -278,49 +278,112 @@ a:not(:has(img)):hover {
 	height: auto;
 	display: block;
 	opacity: 0.5;
-	-webkit-filter: blur(1px);
+	filter: blur(1px);
-	        filter: blur(1px);
 }
 
+/* === PROJECT PAGE === */
+.project-page {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: left;
+	padding: 5rem 2rem 8rem 2rem;
+	color: #fff;
+	flex: 1;
+}
+
+.project-page h1,
+.project-page h2,
+.project-page h3 {
+	font-family: "Clockopia", sans-serif;
+	color: #fff5a8;
+	margin-bottom: 1rem;
+}
+
+.project-page a {
+	color: #fff5a8;
+	text-decoration: none;
+}
+
+.project-page a:hover {
+	text-decoration: underline;
+}
+
+.project-page ul {
+	list-style: disc;
+	margin-left: 2rem;
+	margin-bottom: 1.5rem;
+	color: #ccc;
+	line-height: 1.7;
+}
+
+.project-page p {
+	max-width: 700px;
+	line-height: 1.8;
+	margin-bottom: 1rem;
+}
+
+/* === RESPONSIVE FIXES === */
 @media (max-width: 900px) {
-  body {
+	body {
-    -webkit-box-orient: vertical;
+		flex-direction: column;
-    -webkit-box-direction: normal;
+	}
-        -ms-flex-direction: column;
-            flex-direction: column;
-  }
 
-  .navbar {
+	.navbar {
-    position: relative;
+		position: relative;
-    width: 100%;
+		width: 100%;
-    height: auto;
+		height: auto;
-    -webkit-box-orient: horizontal;
+		flex-direction: row;
-    -webkit-box-direction: normal;
+		justify-content: center;
-        -ms-flex-direction: row;
+		padding: 0.5rem 0;
-            flex-direction: row;
+	}
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    padding: 0.5rem 0;
-  }
 
-  .navbar ul {
+	.navbar ul {
-    display: -webkit-box;
+		display: flex;
-    display: -ms-flexbox;
+		gap: 1rem;
-    display: flex;
+	}
-    gap: 1rem;
-  }
 
-  .content {
+	.content {
-    -webkit-box-orient: vertical;
+		flex-direction: column;
-    -webkit-box-direction: normal;
+		padding: 2rem;
-        -ms-flex-direction: column;
+		text-align: center;
-            flex-direction: column;
+	}
-    padding: 2rem;
+
-    text-align: center;
+	.middle {
-  }
+		text-align: center;
+		align-items: center;
+	}
+
+	.uzi {
+		width: 70%;
+		margin-bottom: 2rem;
+	}
+
+	.footer {
+		padding-bottom: 2rem;
+	}
+	
+	.navbar-top-icons {
+	margin-bottom: 0.5rem;
+	}
+
+	.navbar-top-icons img {
+	width: 22px;
+	height: 22px;
+	}
+	
+	.navbar-top-icons {
+	gap: 10px;
+	margin-bottom: 0.5rem;
+	}
+
+	.icon-item img {
+	width: 24px;
+	height: 24px;
+	}
+
+	.icon-label {
+	font-size: 0.7rem;
+	}
 
-  .uzi {
-    width: 70%;
-  }
 }

index.html

@@ -85,8 +85,23 @@
 	</div>
 	
 	<nav class="navbar">
+	<div class="navbar-top-icons">
+		<div class="icon-item">
+			<a href="http://your-tor-address.onion" target="_blank" rel="noopener noreferrer">
+				<img src="assets/images/icons/tor.png" alt="Tor Mirror">
+				<span class="icon-label tor-label">Tor</span>
+			</a>
+		</div>
+		<div class="icon-item">
+			<a href="http://your-ygg-address.ygg" target="_blank" rel="noopener noreferrer">
+				<img src="assets/images/icons/ygg.png" alt="Ygg Mirror">
+				<span class="icon-label ygg-label">Ygg</span>
+			</a>
+		</div>
+	</div>
+		
     	<ul>
-			<li><a href="index.html">Home</a></li>
+			<li><a href="/index.html">Home</a></li>
 			<li><a href="#">About me:</a></li>
 			<li><a href="#">Projects:</a></li>
 			<li><a href="#">Contact</a></li>

pages/projects.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="color-scheme" content="dark">
+	<meta name="theme-color" content="#0e0016">
+
+	<title>Projects</title>
+
+	<meta name="description" content="Purplebored's projects :D">
+	<meta name="keywords" content="purplebored, irc, discord, bridge, userbot, open source, purplebored.pl">
+	<meta property="og:url" content="https://purplebored.pl/projects/projects.html">
+	<meta property="og:title" content="Projects | Purplebored.pl">
+	<meta property="og:description" content="Purplebored's projects :D">
+	<meta property="og:image" content="https://purplebored.pl/assets/images/pfp.png">
+
+	<link rel="icon" href="/favicon.png" type="image/png">
+	<link rel="stylesheet" href="/assets/css/style.css">
+</head>
+
+<body>
+	<nav class="navbar">
+	<div class="navbar-top-icons">
+		<div class="icon-item">
+			<a href="http://your-tor-address.onion" target="_blank" rel="noopener noreferrer">
+				<img src="/assets/images/icons/tor.png" alt="Tor Mirror">
+				<span class="icon-label tor-label">Tor</span>
+			</a>
+		</div>
+		<div class="icon-item">
+			<a href="http://your-ygg-address.ygg" target="_blank" rel="noopener noreferrer">
+				<img src="/assets/images/icons/ygg.png" alt="Ygg Mirror">
+				<span class="icon-label ygg-label">Ygg</span>
+			</a>
+		</div>
+	</div>
+		
+    	<ul>
+			<li><a href="/index.html">Home</a></li>
+			<li><a href="#">About me:</a></li>
+			<li><a href="#">Projects:</a></li>
+			<li><a href="#">Contact</a></li>
+		</ul>
+	</nav>
+
+	<!-- MAIN CONTENT -->
+	<div class="content project-page">
+	<div class="middle">
+		<h1>My Projects:</h1>
+		<p>
+			Hi and welcome to my projects page! For now I only have one project, but I am planning on making more of them. You can read about my only project bellow :D
+		</p>
+		
+		<h2>= IRC to Discord Bridge =</h2>
+		<p>
+			A simple and modern IRC ↔ Discord userbot bridge written in Node.js, used to bridge Discord channels and group chats with IRC rooms.
+		</p>
+		<p> (Also worth explaining: a userbot &nbsp;sometimes called a selfbot &nbsp;is a bot that runs on a user account.) </p>
+		<p>
+			<a href="https://foundry.fsky.io/purplebored/Discord-userbot-to-irc" target="_blank">
+				Source code and setup instructions →
+			</a>
+		</p>
+
+		<h3>Features</h3>
+		<ul>
+			<li>Multi-Bridge Support — bridge multiple channels and rooms with one config.</li>
+			<li>Reactions Bridging — sends a message when a message is reacted to.</li>
+			<li>Attachments Bridging — automatically forwards images and files to IRC.</li>
+			<li>TLS/Non-TLS IRC Support — works with both secure and standard IRC ports.</li>
+			<li>Group Chat Bridges — supports Discord group chats via selfbot.</li>
+			<li>YAML Configuration — simple and human readable config file.</li>
+		</ul>
+
+		<h3>Why a Userbot Bridge?</h3>
+		<p> I wanted to stop using Discord, but still chat in a group chat — no other bridge supported that, so I decided to build my own.
+		  It started as a small private project, but after making it stable enough and usefull enough for more people, I open sourced it for anyone who needs something similar. (Which I guess it's not a lot of people :P)</p>
+		<h3>Project Info</h3>
+		<ul>
+			<li>License: <a href="https://foundry.fsky.io/purplebored/Discord-userbot-to-irc/raw/branch/main/LICENSE" target="_blank">Apache 2.0</a></li>
+			<li>Language: Node.js</li>
+			<li>Developer: Just me (updates might be slow!)</li>
+			<li>Note: Using a userbot on Discord is against the ToS — though no bans have been reported so far, but still use at your own risk.</li>
+		</ul>
+
+		<p>
+			<a href="/">← Back to home page</a>
+		</p>
+	</div>
+	</div>
+
+	<div class="footer">
+		Purplebored &copy; 2023-2025 |
+		<a href="https://git.purplebored.pl/purplebored/purplebored.pl">Source code</a> |
+		<a href="/pages/contact.html">Contact Me</a> |
+		<a href="https://status.purplebored.pl"> Uptime / Status</a> |
+	</div>
+
+	<div class="clouds">
+		<img src="/assets/images/clouds.png" alt="Clouds">
+	</div>
+
+	<canvas id="night"></canvas>
+	<script src="/assets/js/script.js" defer></script>
+</body>
+</html>

sitemap.xml

@@ -1 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<url><loc>https://purplebored.pl/</loc><priority>1.0</priority></url>
+<url><loc>https://purplebored.pl/projects/irc-discord-bridge.html</loc><priority>0.7</priority></url>
+</urlset>