diff --git a/personal/webboot/font/Connection-3zA2z.ttf b/personal/webboot/font/Connection-3zA2z.ttf
new file mode 100644
index 0000000..a9ac0d8
Binary files /dev/null and b/personal/webboot/font/Connection-3zA2z.ttf differ
diff --git a/personal/webboot/font/LcdSolid-VPzB.ttf b/personal/webboot/font/LcdSolid-VPzB.ttf
new file mode 100644
index 0000000..808f3ee
Binary files /dev/null and b/personal/webboot/font/LcdSolid-VPzB.ttf differ
diff --git a/personal/webboot/images/ditto.jpg b/personal/webboot/images/ditto.jpg
new file mode 100644
index 0000000..0109588
Binary files /dev/null and b/personal/webboot/images/ditto.jpg differ
diff --git a/personal/webboot/images/ditto.png b/personal/webboot/images/ditto.png
new file mode 100644
index 0000000..7210af4
Binary files /dev/null and b/personal/webboot/images/ditto.png differ
diff --git a/personal/webboot/images/goomy.png b/personal/webboot/images/goomy.png
new file mode 100644
index 0000000..2b5e89d
Binary files /dev/null and b/personal/webboot/images/goomy.png differ
diff --git a/personal/webboot/images/icons.aseprite b/personal/webboot/images/icons.aseprite
new file mode 100644
index 0000000..f762ced
Binary files /dev/null and b/personal/webboot/images/icons.aseprite differ
diff --git a/personal/webboot/images/icons1.png b/personal/webboot/images/icons1.png
new file mode 100644
index 0000000..6bb030d
Binary files /dev/null and b/personal/webboot/images/icons1.png differ
diff --git a/personal/webboot/images/icons2.png b/personal/webboot/images/icons2.png
new file mode 100644
index 0000000..f2cfd15
Binary files /dev/null and b/personal/webboot/images/icons2.png differ
diff --git a/personal/webboot/images/icons3.png b/personal/webboot/images/icons3.png
new file mode 100644
index 0000000..1cb89c0
Binary files /dev/null and b/personal/webboot/images/icons3.png differ
diff --git a/personal/webboot/images/icons4.png b/personal/webboot/images/icons4.png
new file mode 100644
index 0000000..ac3673b
Binary files /dev/null and b/personal/webboot/images/icons4.png differ
diff --git a/personal/webboot/images/icons5.png b/personal/webboot/images/icons5.png
new file mode 100644
index 0000000..766be59
Binary files /dev/null and b/personal/webboot/images/icons5.png differ
diff --git a/personal/webboot/images/icons6.png b/personal/webboot/images/icons6.png
new file mode 100644
index 0000000..4cc8e23
Binary files /dev/null and b/personal/webboot/images/icons6.png differ
diff --git a/personal/webboot/images/poketch.png b/personal/webboot/images/poketch.png
new file mode 100644
index 0000000..c934105
Binary files /dev/null and b/personal/webboot/images/poketch.png differ
diff --git a/personal/webboot/index.css b/personal/webboot/index.css
new file mode 100644
index 0000000..5689d56
--- /dev/null
+++ b/personal/webboot/index.css
@@ -0,0 +1,104 @@
+@font-face {
+	font-family: LCDNUM;
+	src: url("font/Connection-3zA2z.ttf");
+}
+
+@font-face {
+	font-family: LCD;
+	src: url("font/LcdSolid-VPzB.ttf");
+}
+
+
+html {
+	background: url("images/ditto.png");
+	image-rendering: pixelated;
+	font-family: LCD;
+	overflow: clip;
+}
+#swatchClock { font-family: LCDNUM; }
+
+#main {
+	position: fixed;
+	width: 90vw;
+	top: 20vh; left: 5vw;
+
+	max-height: 80vh;
+	text-align: center;
+	background-color: white;
+}
+
+#links {
+	position: absolute;
+	top: 15%; left: 6%;
+	width: 75%; height: 65%;
+	margin: auto;
+	text-align: center;
+
+	display: flex;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+	gap: 10px; padding: 10px;
+}
+#links>* {
+	background-color: #70b070;
+	border: 5px #385030 solid;
+}
+				
+.border {
+	border-image-slice: 34% 34% 34% 34%;
+	border-image-width: 20px;
+	border-image-repeat: stretch;
+	border-style: solid;
+	border-image-source: url("https://neoskitties.org/graphics/borders/tile003.png");
+
+	margin: 10vh auto;
+	padding: 15px;
+}
+
+
+#poketch {
+	margin: auto;
+	position: fixed;
+	height: 60vh; width: 40vw;
+	bottom: -5vw;
+	left: 32vw;
+
+	overflow: scroll;
+}
+#poketch>img { width: 100%; }
+#poketch a { color: inherit; text-decoration: none; }
+
+#swatchClock {
+	position: absolute;
+	top: 40%; width: 83%;
+	text-align: center;
+	font-size: 6rem;
+	margin: auto;
+	color: #385030;
+}
+
+#goomy {
+	position: fixed;
+	left: 0; bottom: 0;
+	width: 20vw;
+}
+
+#litclock {
+	position: fixed;
+	width: 90vw; margin: auto;
+	left: 5vw;
+
+	background-color: white;
+	padding: 25px;
+	padding-top: 40px; top: -45px;
+	text-align: center;
+}
+
+#litclock-pre {
+	margin-top: 5;
+}
+
+#litclock-time {
+	font-family: LCDNUM;
+	font-size: 3rem;
+}
diff --git a/personal/webboot/index.html b/personal/webboot/index.html
new file mode 100644
index 0000000..443c962
--- /dev/null
+++ b/personal/webboot/index.html
@@ -0,0 +1,99 @@
+---
+layout: null
+---
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>welcome to the internet</title>
+		<link rel="stylesheet" href="index.css">
+	</head>
+
+	<body>
+		<script src="/assets/js/swatch.js"></script>
+
+		<div id="litclock" class="border">
+			<p>literature clock:</p>
+			<span id="litclock-pre"></span>
+			<span id="litclock-time"></span>
+			<span id="litclock-post"></span>
+		</div>
+
+		<div id="main" class="border">
+			<p>welcome to the pokenav</p>
+			<p>this goomy will stare at you</p>
+		</div>
+
+		<map name="map">
+			<area coords="550,70,650,220" shape="rect" onclick="dispTime()"></area>
+			<area coords="550,231,650,380" shape="rect" onclick="dispLink()"></area>
+		</map>
+
+		<div id="poketch" class="border">
+			<img src="images/poketch.png" usemap="#map">
+			<p id="swatchClock"></p>
+			<div id="links">
+				<a href="https://bsky.app">
+					<img src="images/icons1.png">
+					<p>bluesky</p>
+				</a>
+				<a href="https://tumblr.com">
+					<img src="images/icons2.png">
+					<p>tumblr</p>
+				</a>
+				<a href="https://forum.melonland.net/index.php">
+					<img src="images/icons3.png">
+					<p>melonforum</p>
+				</a>
+				<a href="https://neocities.org">
+					<img src="images/icons4.png">
+					<p>neocities</p>
+				</a>
+				<a href="https://minesweeper.online">
+					<img src="images/icons5.png">
+					<p>mines</p>
+				</a>
+				<a href="/personal/pokeblog">
+					<img src="images/icons6.png">
+					<p>my pokeblog</p>
+				</a>
+			</div>
+		</div>
+
+		<img src="images/goomy.png" id="goomy">
+
+
+		<script>
+			
+			function dispTime() {
+				document.getElementById("swatchClock").style.display = "block";
+				document.getElementById("links").style.display = "none";
+			}
+			function dispLink() {
+				document.getElementById("swatchClock").style.display = "none";
+				document.getElementById("links").style.display = "flex";
+			}
+
+			function npad(num) {
+				if (num < 10) { num = "0" + num; }
+				return num;
+			}
+
+			async function updateFancyTime() {
+
+				let cdate = new Date();
+				let res = await fetch(`https://raw.githubusercontent.com/lbngoc/literature-clock/master/docs/times/${npad(cdate.getHours())}:${npad(cdate.getMinutes())}.json`);
+
+				let quotedex = await res.json();
+				let quotesel = quotedex[0];
+				document.getElementById("litclock-pre").innerHTML = quotesel.quote_first;
+				document.getElementById("litclock-time").innerHTML = quotesel.time;
+				document.getElementById("litclock-post").innerHTML = quotesel.quote_last;
+
+				return quotesel;
+			}
+
+			dispTime();
+			setInterval(updateFancyTime, 1000);
+		</script>
+	</body>