first ever revision of the site

author: ~willow <willow@tilde.club> 2026-05-11 06:40:42 +0000
committer: ~willow <willow@tilde.club> 2026-05-11 06:40:42 +0000
commit: c2d4bb2602dc51a22f87b114606fe94f8d79e10e (patch)
tree: 87976c512eb0a5c4a5054ebe56c99e50296183d1
parent: ea6ef4759f0ec714050fcd369fc3c7f365881ee1 (diff)
7 files changed, 500 insertions, 88 deletions
diff --git a/404.html b/404.html
index 11769de..57ed882 100644
--- a/404.html
+++ b/404.html
@@ -1,52 +1,45 @@
-<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>404 • tilde.club</title>
-    <link rel="stylesheet" href="https://tilde.club/style.css">
-    <style>
-      pre {text-align:center; line-height:1.2; margin-top:2rem;}
-      .links{text-align:center; margin:2rem 0;}
-    </style>
-  </head>
-  <body>
-    <pre>
-~~~  _  _      ___     _  _   ~~~
-~~~ | || |    / _ \   | || |  ~~~
-~~~ | || |_  | | | |  | || |_ ~~~
-~~~ |__   _| | | | |  |__   _|~~~
-~~~    | |   | |_| |     | |  ~~~
-~~~    |_|    \___/      |_|  ~~~
-    </pre>
+	<head>
+		<title>Willow's Whimsical Space</title>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<link rel="stylesheet" href="https://tilde.club/~willow/style.css">
+	</head>
+	<body>
+		<center>
+			<pre>
 
-    <h2 style="text-align:center;">file not found</h2>
-    <p style="text-align:center;">
-      Looks like this tilde is empty.<br>
-      <a href="/">return home</a> •
-      <a href="http://tilde.club/~harper/link.html?action=random">random tilde</a>
-    </p>
+           \    /o|| _    / _          
+            \/\/ |||(_)\/\/_>          
+                          __           
+\    /|_ o._ _  _o _ _.| (_ ._  _. _ _ 
+ \/\/ | ||| | |_>|(_(_|| __)|_)(_|(_(/_
+                            |          
+			</pre>
+		</center>
 
-    <div class="links">
-      <p>
-        Need a hand? Read the
-        <a href="https://tilde.club/~anthonydpaul/primer.html">n00b’s primer</a>,
-        then <code>ssh</code> in and craft your own page!
-      </p>
-    </div>
+		<p>$ ls</p>
+		<p>
+			<a href="https://tilde.club/~willow/about/">about.txt</a>
+			<a href="https://tilde.club/~willow/git/">git/</a>
+		</p>
 
-    <!-- Tildeverse Banner Exchange -->
-    <div style="text-align:center;">
-      <iframe src="https://banner.tildeverse.org/work.php?ID=deepend"
-              width="468" height="60" frameborder="0" scrolling="no"></iframe>
-    </div>
+		<p>$ 404</p>
+		<p>404: command not found</p>
 
-    <!-- Tilde Club Badge -->
-    <div style="text-align:center; margin-top:1.5rem;">
-      <a href="http://tilde.club">
-        <img src="http://tilde.club/~zarate/tildeclub.gif"
-             alt="Tilde Club Badge" width="88" height="31" border="0">
-      </a>
-    </div>
-  </body>
+		<p>$ <a class="blink">█</a></p>
+	</body>
+
+	<footer>
+		<p>
+			<a href="https://tilde.club" target="_blank"><img src="http://tilde.club/~zarate/tildeclub.gif" border="0" width="88" height="31" alt="Tilde Club Badge"></a>
+			<a href="https://archlinux.org" target="_blank"><img src="https://tilde.club/~willow/arch.png"></a>
+		</p>
+		<p>
+			<a href="https://whimsically-natured.space/" target="_blank"><img src="https://tilde.club/~willow/whimsy.gif"></a>
+			<a href="https://al2f.codeberg.page/" target="_blank"><img src="https://tilde.club/~willow/al2f.gif"></a>
+			<a href="https://jessieisironicallym3.nekoweb.org/" target="_blank"><img src="https://jessieisironicallym3.nekoweb.org/jessies-place-web-button.gif"></a>
+			<a href="https://goodgirl.dev/" target="_blank"><img src="https://goodgirl.dev/_images/site_button.png"></a>
+		</p>
+	</footer>
 </html>
diff --git a/about/index.html b/about/index.html
new file mode 100644
index 0000000..9a48724
--- /dev/null
+++ b/about/index.html
@@ -0,0 +1,55 @@
+<html lang="en">
+	<head>
+		<title>Willow's Whimsical Space</title>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<link rel="stylesheet" href="https://tilde.club/~willow/style.css">
+	</head>
+	<body>
+		<center>
+			<pre>
+
+           \    /o|| _    / _          
+            \/\/ |||(_)\/\/_>          
+                          __           
+\    /|_ o._ _  _o _ _.| (_ ._  _. _ _ 
+ \/\/ | ||| | |_>|(_(_|| __)|_)(_|(_(/_
+                            |          
+			</pre>
+		</center>
+
+		<p>$ ls</p>
+		<p>
+			<a href="https://tilde.club/~willow/about/">about.txt</a>
+			<a href="https://tilde.club/~willow/git/">git/</a>
+		</p>
+
+		<p>$ cat about.txt</p>
+		<p>
+			Hi, I'm Willow! Welcome to my Whimsical Space!
+			I am currently a jazz piano student in college working on my associate's degree,
+			but I'm also interested in many other subjects.
+			I plan on pursuing my interest in physics and computer programming after I get my aforementioned degree.
+			As you've already read, I have three good main interests, and while I'm currently pursuing a career in one (music),
+			the others remain as mere hobbies - this website being a product of it.
+			I also have several other services hosted by my own homelab of sorts.
+			Due to being a pretty substantial privacy advocate,
+			these services serve to replace all that I've used in the past from large tech companies.
+		</p>
+
+		<p>$ <a class="blink">█</a></p>
+	</body>
+
+	<footer>
+		<p>
+			<a href="https://tilde.club" target="_blank"><img src="http://tilde.club/~zarate/tildeclub.gif" border="0" width="88" height="31" alt="Tilde Club Badge"></a>
+			<a href="https://archlinux.org" target="_blank"><img src="https://tilde.club/~willow/arch.png"></a>
+		</p>
+		<p>
+			<a href="https://whimsically-natured.space/" target="_blank"><img src="https://tilde.club/~willow/whimsy.gif"></a>
+			<a href="https://al2f.codeberg.page/" target="_blank"><img src="https://tilde.club/~willow/al2f.gif"></a>
+			<a href="https://jessieisironicallym3.nekoweb.org/" target="_blank"><img src="https://jessieisironicallym3.nekoweb.org/jessies-place-web-button.gif"></a>
+			<a href="https://goodgirl.dev/" target="_blank"><img src="https://goodgirl.dev/_images/site_button.png"></a>
+		</p>
+	</footer>
+</html>
diff --git a/al2f.gif b/al2f.gif
new file mode 100644
index 0000000..f0d605f
--- /dev/null
+++ b/al2f.gif
diff --git a/arch.png b/arch.png
new file mode 100644
index 0000000..f6ccce3
--- /dev/null
+++ b/arch.png
diff --git a/index.html b/index.html
index 8ac634a..e0438dd 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,42 @@
 <html lang="en">
 	<head>
-		<title>My tilde.club page</title>
+		<title>Willow's Whimsical Space</title>
 		<meta charset="UTF-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<link rel="stylesheet" href="https://tilde.club/style.css">
+		<link rel="stylesheet" href="https://tilde.club/~willow/style.css">
 	</head>
 	<body>
-		<h1>~~~this is my tilde.club page~~~~</h1>
-		<p>Just log in with your secure internet shell to change this file! </p>
-		<p>You may want to read: <a href="https://tilde.club/~anthonydpaul/primer.html">How to ~tilde; a n00b's primer</a> for help.</p>
-		<br>
-
-               <!-- Tildeverse Banner Exchange code begin -->
-                <div style="text-align: center;">
-                        <iframe src="https://banner.tildeverse.org/work.php?ID=deepend" width="468" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" target="_blank"></iframe>
-                </div>
-                <!-- Tildeverse Banner Exchange code begin -->
-
-		<!-- Begin Tilde.Club Ring Fragment-->
-		<center>
-			<font size="2">
-			</font></p>
-			<center>
-				<font size="2">
-					<center>
-						<br><img src="http://tilde.club/~harper/webring.png"  border="0" usemap="#notepad.map"><br>
-					</center>
-					<br>
-					Click for the [
-					<a href="http://tilde.club/~harper/link.html?action=random" target="_top">Random page</a> ]
-					<br>
-					Want to join the ring? Click here for
-					<a href="http://tilde.club/~harper/link.html?action=info" target="_top">info</a>.
-					<br>
-				</font>
-			</center>
-			<map name="notepad.map">
-				<area shape="rect" coords="0, 0, 60, 70" target="_top" href="http://tilde.club/~harper/link.html?action=join">
-				<area shape="rect" coords="130, 0, 417, 75" target="_top" href="http://tilde.club/~harper/link.html?action=random">
-				<area shape="rect" coords="465, 0, 549, 75" target="_top" href="http://tilde.club/~harper/link.html?action=join">
-			</map>
-		</center>
-		<!-- End Webring Fragment-->
-		
-		<!-- Begin Tilde Club Badge -->
 		<center>
-			<p><a href="http://tilde.club"><img src="http://tilde.club/~zarate/tildeclub.gif" border="0" width="88" height="31" alt="Tilde Club Badge"></a></p>
+			<pre>
+
+           \    /o|| _    / _          
+            \/\/ |||(_)\/\/_>          
+                          __           
+\    /|_ o._ _  _o _ _.| (_ ._  _. _ _ 
+ \/\/ | ||| | |_>|(_(_|| __)|_)(_|(_(/_
+                            |          
+			</pre>
 		</center>
-		<!-- End Tilde Club Badge -->
+
+		<p>$ ls</p>
+		<p>
+			<a href="https://tilde.club/~willow/about/">about.txt</a>
+			<a href="https://tilde.club/~willow/git/">git/</a>
+		</p>
+
+		<p>$ <a class="blink">█</a></p>
 	</body>
+
+	<footer>
+		<p>
+			<a href="https://tilde.club" target="_blank"><img src="http://tilde.club/~zarate/tildeclub.gif" border="0" width="88" height="31" alt="Tilde Club Badge"></a>
+			<a href="https://archlinux.org" target="_blank"><img src="https://tilde.club/~willow/arch.png"></a>
+		</p>
+		<p>
+			<a href="https://whimsically-natured.space/" target="_blank"><img src="https://tilde.club/~willow/whimsy.gif"></a>
+			<a href="https://al2f.codeberg.page/" target="_blank"><img src="https://tilde.club/~willow/al2f.gif"></a>
+			<a href="https://jessieisironicallym3.nekoweb.org/" target="_blank"><img src="https://jessieisironicallym3.nekoweb.org/jessies-place-web-button.gif"></a>
+			<a href="https://goodgirl.dev/" target="_blank"><img src="https://goodgirl.dev/_images/site_button.png"></a>
+		</p>
+	</footer>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..63e7822
--- /dev/null
+++ b/style.css
@@ -0,0 +1,374 @@
+body {
+	margin: auto;
+	font-size: 24px;
+	padding: 1em;
+	max-width: 1024px;
+	font-family: 'Courier New', monospace;
+	color: #0f0;
+	background: #000;
+	word-wrap: break-word;
+}
+
+a {
+	text-decoration: none;
+	color: #0f0;
+	font-weight: bold;
+	padding-right: 0.25em;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #0f0;
+}
+
+hr {
+	border-color: #fb5;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.advisory {
+	background: #fc4;
+	color: #222;
+	font-weight: bold;
+	padding: 1em;
+	border-radius: 0.25em;
+}
+
+h1 {
+	font-size:3rem;
+	letter-spacing:-.75px;
+	color: #0f0;
+	padding-top:.5rem;
+}
+
+footer {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	text-align: center;
+}
+
+.grid {
+	border-collapse: collapse;
+}
+
+.col {
+	border: 6px double #fb5;
+	padding: 1em;
+	flex-grow: 1;
+}
+
+.blink {
+	animation: blink 1s infinite;
+	animation-timing-function: linear(0 0%, 0 49%, 1 50%, 1 99%);
+}
+
+@keyframes blink {
+	from {opacity: 1;}
+		to {opacity: 0;}
+}
+
+/* THEGOODS */
+#fancyboi::before {
+	content: "$ ";
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes flash {
+		50% { opacity: 0; }
+	}
+
+	@keyframes reveal {
+		from { max-width: 2em; } /* Width of ::before */
+			to { max-width: 100%; }
+	}
+
+	#fancyboi {
+		overflow: hidden;
+		white-space: nowrap;
+		animation: reveal 4s linear;
+		text-overflow: "█";
+	}
+
+	#fancyboi::after {
+		content: "█";
+		animation: flash 0.5s step-end infinite;
+		position: relative;
+		top: -2px;
+		margin-left: 3px;
+	}
+}
+/* SDOOGEHT */
+
+.sourceCode {
+	color:#008000;
+}
+
+code > span.fl {
+	color: #008000;
+}
+
+/* Style the navbar */
+#navbar {
+	overflow: hidden;
+	background-color: #fb5;
+	color: #222;
+	z-index: 99;
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	border-radius: 0.25em;
+}
+
+#navbar a:hover {
+	background-color: #f93;
+}
+
+/* Navbar linkss */
+#navbar a {
+	float: left;
+	display: block;
+	color: black;
+	text-align: center;
+	padding: 14px;
+	text-decoration: none;
+}
+
+/* RSS Icon Styles */
+.rss-icon {
+	float: right;
+	margin-top:5px;
+}
+
+/* Page content */
+.user-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
+}
+
+.user-list a {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex: 10em;
+}
+
+.user-list a:before {
+	content:"~";
+}
+
+[data-op="5"]   { opacity:5%; }
+[data-op="10"]  { opacity:10%; }
+[data-op="15"]  { opacity:15%; }
+[data-op="20"]  { opacity:20%; }
+[data-op="25"]  { opacity:25%; }
+[data-op="30"]  { opacity:30%; }
+[data-op="35"]  { opacity:35%; }
+[data-op="40"]  { opacity:40%; }
+[data-op="45"]  { opacity:45%; }
+[data-op="50"]  { opacity:50%; }
+[data-op="55"]  { opacity:55%; }
+[data-op="60"]  { opacity:60%; }
+[data-op="65"]  { opacity:65%; }
+[data-op="70"]  { opacity:70%; }
+[data-op="75"]  { opacity:75%; }
+[data-op="80"]  { opacity:80%; }
+[data-op="85"]  { opacity:85%; }
+[data-op="90"]  { opacity:90%; }
+[data-op="95"]  { opacity:95%; }
+[data-op="100"] { opacity:100%; }
+
+.user-list a:hover {
+	text-decoration:underline;
+	color:#f70;
+}
+
+.user-list b {
+	background-color: #fb5;
+	color:#000;
+}
+
+input[type="text"],
+	textarea {
+		background-color: #333;
+		color: darkorange;
+	}
+
+div.alert-warning {
+	background-color: darkred;
+}
+div.alert-success {
+	background-color: darkgreen;
+}
+
+.notice-message {
+	background-color: #f93;
+	color: #222;
+	font-weight: bold;
+	padding: 0.75em;
+	border-radius: 0.25em;
+	margin: 1em 0;
+	text-align: center;
+	border: 2px solid #fb5;
+	box-shadow: 0 0 10px rgba(255, 187, 85, 0.5);
+}
+
+blockquote {
+	border-left: 2px solid #fb5;
+	background-color: rgba(255, 187, 85, 5%);
+	padding: 0.5em;
+}
+
+@media (min-width: 768px) {
+	.row {
+		display: flex;
+		flex-wrap: nowrap;
+		flex-direction: row-reverse;
+	}
+}
+
+@media (max-width: 768px) {
+	td {
+		display: block;
+	}
+}
+
+/* Ensure the user-list displays items in a single column */
+.single-column {
+	display: block;
+}
+.single-column li {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Style for the article content */
+.article-headers {
+	background-color: #333;
+	color: #fb5;
+	padding: 1em;
+	border: 1px solid #fb5;
+	border-radius: 0.25em;
+	margin-bottom: 1em;
+}
+
+.article-headers p {
+	margin: 0.5em 0;
+}
+
+pre {
+	border: 2px solid #0f0;
+	width: 70%;
+}
+
+/* Style for error messages */
+.alert-warning {
+	background-color: darkred;
+	color: #fb5;
+	padding: 1em;
+	border-radius: 0.25em;
+	font-weight: bold;
+}
+/* Ensure the user-list displays items in a single column */
+.single-column {
+	display: block;
+}
+.single-column li {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Tree structure styles */
+.tree, .tree ul {
+	padding: 0;
+	list-style: none;
+	position: relative;
+}
+
+.tree ul {
+	margin-left: 1em; /* indentation for nested lists */
+}
+
+.tree ul:before {
+	content: "";
+	display: block;
+	width: 0;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	border-left: 1px solid #fb5;
+}
+
+.tree li {
+	margin: 0;
+	padding: 0.5em 0 0.5em 1em; /* space between items */
+	position: relative;
+}
+
+.tree li:before {
+	content: "";
+	display: inline-block;
+	width: 1em; /* horizontal space for the branch line */
+	height: 0;
+	border-top: 1px solid #fb5;
+	position: absolute;
+	top: 1.2em; /* adjust as needed */
+	left: 0;
+}
+
+.tree li:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: -0.5em; /* adjust to align with the branch */
+	border-left: 1px solid #fb5;
+}
+
+.tree li:last-child:after {
+	display: none; /* hide the line for the last child */
+}
+
+/* Style for timestamps */
+.timestamp {
+	color: #999;
+	font-size: 0.9em;
+	margin-left: 0.5em;
+}
+/* Highlighted item */
+.highlighted {
+	background-color: #333; /* Dark background to fit the page colorscheme */
+	border: 1px solid #fb5; /* Matching border color */
+	border-radius: 0.25em; /* Slight border radius for better appearance */
+	padding: 0.5em; /* Padding for better readability */
+}
+
+#active-users {
+	margin-top: 20px;
+	display: flex;
+	align-items: center;
+	gap:10px;
+}
+
+#active-users h2 {
+	flex-shrink:0;
+	font-size: 1.25rem;
+}
+
+#active-users a {
+	color: #fb5;
+	text-decoration: none;
+}
+
+#active-users a:hover {
+	color: #f70;
+}
diff --git a/whimsy.gif b/whimsy.gif
new file mode 100644
index 0000000..d17bfbd
--- /dev/null
+++ b/whimsy.gif
author	~willow <willow@tilde.club>	2026-05-11 06:40:42 +0000
committer	~willow <willow@tilde.club>	2026-05-11 06:40:42 +0000
commit	c2d4bb2602dc51a22f87b114606fe94f8d79e10e (patch)
tree	87976c512eb0a5c4a5054ebe56c99e50296183d1
parent	ea6ef4759f0ec714050fcd369fc3c7f365881ee1 (diff)