diff --git a/public/static/img/banner.png b/public/static/img/banner.png
new file mode 100644
index 0000000..dad8efe
Binary files /dev/null and b/public/static/img/banner.png differ
diff --git a/public/static/img/stars.gif b/public/static/img/stars.gif
deleted file mode 100644
index edacc06..0000000
Binary files a/public/static/img/stars.gif and /dev/null differ
diff --git a/public/static/img/welcome-to-willy.club.gif b/public/static/img/welcome-to-willy.club.gif
deleted file mode 100644
index 5369ba1..0000000
Binary files a/public/static/img/welcome-to-willy.club.gif and /dev/null differ
diff --git a/public/static/js/snow.js b/public/static/js/snow.js
new file mode 100644
index 0000000..bd61248
--- /dev/null
+++ b/public/static/js/snow.js
@@ -0,0 +1,98 @@
+/**
+ * Pretty cool snow that was TOTALLY not stolen from soneone else ;-)
+ */
+
+// Amount of Snowflakes
+var snowMax = 100;
+
+// Snowflake Colours
+var snowColor = ["#fff"];
+
+// Snow Entity
+var snowEntity = "*";
+
+// Falling Velocity
+var snowSpeed = 0.75;
+
+// Minimum Flake Size
+var snowMinSize = 8;
+
+// Maximum Flake Size
+var snowMaxSize = 24;
+
+// Refresh Rate (in milliseconds)
+var snowRefresh = 75;
+
+// Additional Styles
+var snowStyles = "z-index: 0; cursor: default; user-select: none;";
+
+/*
+// End of Configuration
+// ----------------------------------------
+// Do not modify the code below this line
+*/
+
+var snow = [],
+ pos = [],
+ coords = [],
+ lefr = [],
+ marginBottom,
+ marginRight;
+
+function randomise(range) {
+ rand = Math.floor(range * Math.random());
+ return rand;
+}
+
+function initSnow() {
+ var snowSize = snowMaxSize - snowMinSize;
+ marginBottom = document.body.scrollHeight - 5;
+ marginRight = document.body.clientWidth - 15;
+
+ for (i = 0; i <= snowMax; i++) {
+ coords[i] = 0;
+ lefr[i] = Math.random() * 15;
+ pos[i] = 0.03 + Math.random() / 10;
+ snow[i] = document.getElementById("flake" + i);
+ snow[i].style.fontFamily = "inherit";
+ snow[i].size = randomise(snowSize) + snowMinSize;
+ snow[i].style.fontSize = snow[i].size + "px";
+ snow[i].style.color = snowColor[randomise(snowColor.length)];
+ snow[i].style.zIndex = -1;
+ snow[i].sink = snowSpeed * snow[i].size / 5;
+ snow[i].posX = randomise(marginRight - snow[i].size);
+ snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
+ snow[i].style.left = snow[i].posX + "px";
+ snow[i].style.top = snow[i].posY + "px";
+ }
+
+ moveSnow();
+}
+
+function resize() {
+ marginBottom = document.body.scrollHeight - 5;
+ marginRight = document.body.clientWidth - 15;
+}
+
+function moveSnow() {
+ for (i = 0; i <= snowMax; i++) {
+ coords[i] += pos[i];
+ snow[i].posY += snow[i].sink;
+ snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
+ snow[i].style.top = snow[i].posY + "px";
+
+ if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
+ snow[i].posX = randomise(marginRight - snow[i].size);
+ snow[i].posY = 0;
+ }
+ }
+
+ setTimeout("moveSnow()", snowRefresh);
+}
+
+for (i = 0; i <= snowMax; i++) {
+ document.write("" + snowEntity + "");
+}
+
+window.addEventListener('resize', resize);
+window.addEventListener('load', initSnow);
\ No newline at end of file
diff --git a/public/static/style/main.css b/public/static/style/main.css
index 76c7fba..c5e8e21 100644
--- a/public/static/style/main.css
+++ b/public/static/style/main.css
@@ -1,5 +1,62 @@
+html, body {
+ height: 100%;
+}
+
body {
- background-color: black;
- background-image: url('../img/stars.gif');
- color: bisque;
+ margin: 0;
+ background: #560707;
+ color: #431718;
+ font-size: 1rem;
+ font-family: 'Times New Roman', Times, serif;
+ line-height: 1.5;
+}
+
+header {
+ image-rendering: pixelated;
+}
+
+h1 {
+ margin-top: .5rem;
+ margin-bottom: .5rem;
+ border-bottom: 1px solid;
+}
+
+a {
+ color: blue;
+}
+
+.container {
+ margin: auto;
+ max-width: 600px;
+ background: bisque;
+}
+
+main {
+ padding: 1rem;
+ padding-top: 0;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ max-height: 10rem;
+ height: auto;
+}
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+}
+td, th {
+ text-align: left;
+ padding: 8px;
+}
+tr:nth-child(even) {
+ background: #eed3b3;
+}
+
+@media (max-width: 600px) {
+ .container {
+ min-height: 100%;
+ }
}
\ No newline at end of file
diff --git a/routes/start.php b/routes/start.php
index dd895fb..6a295d9 100644
--- a/routes/start.php
+++ b/routes/start.php
@@ -8,6 +8,7 @@ ErrorHandler::register(function($error_messages) {
});
Route::get('/', fn() => view('pages/home'));
+Route::get('/matrix', fn() => view('pages/matrix'));
// since no route was matched we show a page not found error
http_response_code(404);
diff --git a/views/pages/home.php b/views/pages/home.php
index db04661..dd723b6 100644
--- a/views/pages/home.php
+++ b/views/pages/home.php
@@ -1,4 +1,46 @@
- 'Home'])?>
+ 'Welcome to the willy club'])?>
+Welcome to the willy club
+
+Theres more than just willies! This site hosts some of my personal projects and services for me and acquaintances.
+
+
+
+Contact
+
+You can find me on Matrix at @william:willy.club
+
+Webring
+
+Check out any of these other websites
+
+... nothingness
+
+Well maybe there will be a webring here in the future.
+
+I don't know what more to put here
+
+This is just some text to make the page feel more complete? Yeah
\ No newline at end of file
diff --git a/views/pages/matrix.php b/views/pages/matrix.php
new file mode 100644
index 0000000..95c3fa7
--- /dev/null
+++ b/views/pages/matrix.php
@@ -0,0 +1,13 @@
+ 'Matrix Homeserver'])?>
+
+Matrix Homeserver
+
+Come solve all of the worlds problems on the willy club public matrix homeserver.
+
+You can register on a client that supports it by adding:
+
+https://matrix.willy.club
+
+as the homeserver, enjoy!
+
+
\ No newline at end of file
diff --git a/views/templates/footer.php b/views/templates/footer.php
index d378fbe..60f000d 100644
--- a/views/templates/footer.php
+++ b/views/templates/footer.php
@@ -1,3 +1,4 @@
+