diff --git a/icons-notes-for-adding-new-icons.txt b/icons-notes-for-adding-new-icons.txt
new file mode 100644
index 0000000..4033c50
--- /dev/null
+++ b/icons-notes-for-adding-new-icons.txt
@@ -0,0 +1,5 @@
+ok so note for future me, scale the svg for the icon to 600x600, then resize the canvas to 1024x1024 and then downscale that to 176x176
+
+also the position is always -2px on either axis because of the border.
+
+ok baiiiiiiiiiiiiii :3
\ No newline at end of file
diff --git a/index.html b/index.html
index 1d642ef..54cd7bb 100644
--- a/index.html
+++ b/index.html
@@ -26,24 +26,22 @@
 				margin-top: 0;
 			}
 
-			.w-100 {
-				width: 100vw!important;
-			}
-
-			.text-black {
-				color: black!important;
-			}
-
 			.center-container {
 				display: flex;
-				width: 100%;
+				width: 75%;
 				height: 100%;
+				padding-left: 12.5%;
+				padding-right: 12.5%;
 			}
 
 			.center-anchor {
 				margin: auto;
 			}
 
+			.text-start {
+				text-align: left;
+			}
+
 			.text-center {
 				text-align: center;
 			}
@@ -63,13 +61,13 @@
 				text-align: center;
 				vertical-align: middle;
 				filter: invert(0);
-				transition: background-color .1s linear, filter .1s linear, border .1s linear;
 				margin-left: 0.5rem;
 				cursor: pointer;
 				background-image: url("/icons.webp");
 				background-size: auto 44px;
 				background-repeat: no-repeat;
 				background-position: -2px -2px;
+				transition: background-color .1s linear, filter .1s linear, border .1s linear;
 			}
 
 			.rounded-button[data-id="discord"] {
@@ -102,6 +100,29 @@
 				color: #535353;
 			}
 
+			.top-right {
+				position: fixed;
+				right: 0px;
+				top: 0px;
+				padding: 2rem;
+				color: #535353;
+			}
+
+			.nav * {
+				padding-left: .5rem;
+			}
+
+			.nav .link {
+				color: rgb(125, 125, 125);
+				cursor: pointer;
+				text-decoration: underline;
+			}
+			
+			.click {
+				cursor: pointer;
+				text-decoration: underline;
+			}
+
 			#btnDesc {
 				transition: opacity .25s linear;
 				opacity: 1;
@@ -116,25 +137,21 @@
 			.fade-in {
 				opacity: 1!important;
 			}
-
-			.hidden {
-				display: none;
-			}
 		</style>
 
 		<meta charset="UTF-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>Holly</title>
+		<title>home | holly.lgbt</title>
 	</head>
 	<body>
-		<div class="center-container">
+		<div id="home-panel" class="panel center-container">
 			<div class="center-anchor">
 				<div class="text-center w-100">
-					<h1>hey there i'm holly</h1>
-					<h4>here's some places I do things. <font style="font-family:sans-serif!important;">:)</font></h4>
+					<h1>hey there, i'm holly</h1>
+					<h4>here's some places I do things</h4>
 					<div id="buttonContainer">
-						<a class="rounded-button" data-id="discord" onclick="alert('because discord doesn\'t have functionality for invite to chat (at least I think it doesn\'t) you can contact me at: tgpholly')"></a>
+						<a class="rounded-button" data-id="discord" onclick="alert('because discord doesn\'t have functionality for invite to chat (at least I think it doesn\'t) my username is: tgpholly')"></a>
 						<a class="rounded-button" data-id="bsky" href="https://bsky.app/profile/holly.lgbt" target="_blank"></a>
 						<a class="rounded-button" data-id="forgejo" href="https://git.eusv.net/tgpholly" target="_blank"></a>
 					</div>
@@ -143,18 +160,82 @@
 				</div>
 			</div>
 		</div>
+		<div id="about-panel" class="panel center-container">
+			<div class="center-anchor">
+				<div class="text-center w-100">
+					<h1>about me</h1>
+					<div class="text-start">
+						<p>hey there, i'm holly. my pronouns are <b>she/her</b> :3</p>
+						<p>i'm a silly girl that works mostly in ts/js doing wacky stuff with browsers like porting entire pc games to raw js by hand or do <a target="_blank" href="https://multiprobe.eusv.net">cursed userscript stuff to allow people to browse a site together</a></p>
+						<p>i can write code compitently in:</p>
+						<ul>
+							<li>typescript</li>
+							<li>javascript</li>
+							<li>c#</li>
+							<li>lua</li>
+							<li>gdscript</li>
+							<li>java</li>
+						</ul>
+						<p>and a lot more if needs be</p>
+						<p>i'm also making a game in <a href="https://godotengine.org/">godot</a>, it's a pretty cool engine!</p>
+
+						<p>these are (some) my current projects:</p>
+						<ul>
+							<li><a target="_blank" href="https://git.eusv.net/tgpholly/mc-beta-server">mc-beta-server</a> | an implementation of minecraft beta 1.7.3's server in typescript</li>
+							<li><a target="_blank" href="https://git.eusv.net/tgpholly/t00-multiuser">MultiProbe</a> &nbsp;&nbsp;&nbsp;&nbsp;| a userscript for exploring <a target="_blank" href="https://angusnicneven.com">angusnicneven.com</a> together</li>
+							<li><a target="_blank" href="https://git.eusv.net/tgpholly/Binato">Binato</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| an implementation of <a target="_blank" href="https://osu.ppy.sh">osu!</a>'s bancho server</li>
+						</ul>
+
+						<br>
+						<p>
+							if you'd like to contact me i can be reached on <a target="_blank" href="https://bsky.app/profile/holly.lgbt">bluesky</a> or <a class="click" onclick="document.querySelector(`.rounded-button[data-id='discord']`).click()">discord</a>
+							<br>
+							or you can send and email to <b><a id="email"></a></b>
+						</p>
+					</div>
+
+					<h3 id="btnDesc">&nbsp;</h3>
+				</div>
+			</div>
+		</div>
 
 		<div class="top-left">
-			<b>Last Updated:</b> 21/03/2023 <font style="font-size:10pt">11:21PM</font>
+			<b>last updated:</b> 2024/10/21 <font style="font-size:10pt">2:24am (utc+1 bst)</font>
+		</div>
+
+		<div class="top-right nav">
+			<a data-id="#home-panel">home</a>
+			<a data-id="#about-panel" class="link">about me</a>
 		</div>
 
 		<script>
-			const btnDesc = document.getElementById("btnDesc");
-			const hoverEvent = (id) => {
+			const email = document.querySelector("#email");
+			const decodedEmail = atob("aG9sbHlAZXVzdi5uZXQ");
+			email.href = `mailto:${decodedEmail}`;
+			email.innerText = decodedEmail;
+
+			const panels = document.querySelectorAll(".panel");
+			const navLinks = document.querySelectorAll(".nav a");
+			navLinks.forEach(navItem => {
+				navItem.addEventListener("click", _ => {
+					panels.forEach(panel => {
+						panel.style.display = "none";
+					});
+					navLinks.forEach(navLink => {
+						navLink.classList.add("link");
+					});
+
+					document.querySelector(navItem.dataset.id).style.display = "";
+					navItem.classList.remove("link");
+				});
+			});
+
+			const btnDesc = document.querySelector("#btnDesc");
+			function hoverEvent(id) {
 				switch (id) {
-					case "discord": btnDesc.innerHTML = "Discord - This is where I'm most active."; break;
-					case "twitter": btnDesc.innerHTML = "Twitter - I don't like social media, inactive."; break;
-					case "github": btnDesc.innerHTML = "GitHub - Come check out some of my stuff!"; break;
+					case "discord": btnDesc.innerHTML = "discord"; break;
+					case "bsky": btnDesc.innerHTML = "bluesky"; break;
+					case "forgejo": btnDesc.innerHTML = 'eus git'; break;
 				}
 
 				btnDesc.classList.remove("fade-out");
@@ -166,11 +247,10 @@
 				btnDesc.classList.add("fade-out");
 			};
 
-			const buttons = document.getElementById("buttonContainer");
-			for (let child of buttons.children) {
-				child.onmouseenter = () => hoverEvent(child.dataset.id);
-				child.onmouseleave = hoverLeaveEvent;
-			}
+			const buttons = document.querySelectorAll(".rounded-button").forEach(button => {
+				button.onmouseenter = () => hoverEvent(button.dataset.id);
+				button.onmouseleave = hoverLeaveEvent;
+			});
 		</script>
 	</body>
 </html>
