flasky flasky

app.js

@@ -1,110 +0,0 @@
-function openTab(evt, tabName) {
-    var i, tabContent, navItem;
-
-    tabContent = document.getElementsByClassName("tabContent");
-    for (i = 0; i < tabContent.length; i++) {
-        tabContent[i].style.opacity = "0";
-        tabContent[i].style.display = "none";
-    }
-    
-    navItem = document.getElementsByClassName("nav-item");
-    for (i = 0; i < navItem.length; i++) {
-        navItem[i].className = navItem[i].className.replace(" nav-item_selected", "");
-    }
-    
-    document.getElementById(tabName).style.display = "block";
-    setTimeout(function() {
-        document.getElementById(tabName).style.opacity = "1";
-    }, 100);
-    
-    evt.currentTarget.className += " nav-item_selected";
-
-    window.history.replaceState(null, null, `?t=${tabName}`);
-    
-    document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px";
-    document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px";
-}
-
-
-// Scroll listener to change hero look
-function scrollFunction(id, section) {
-    const scrollActivate = 220;
-    const selector = document.querySelector(id);
-    
-    selector.addEventListener("scroll", (event) => {
-        if (selector.scrollTop > scrollActivate) {
-            if (!$(selector).hasClass("hero_scrolled")) {
-                $(".hero")[section].className += " hero_scrolled";
-                $(".hero")[section].style.height = "";
-            }
-        } else {
-            $(".hero")[section].className = "hero";
-            $(".hero")[section].style.height = `calc(20rem - ${selector.scrollTop}px)`;
-            $(".hero img")[section].style.filter = `blur(${2 + (selector.scrollTop / 20)}px) brightness(0.7)`;
-        }
-    });
-}
-
-
-// Special link
-document.querySelector("#refsheet").onclick = function() { $('.nav-item')[3].click(); }
-
-// Link to social medias
-document.querySelector("#twitter_btn").onclick = function() { window.open("https://twitter.com/fluffybeanUwU", "_blank"); }
-document.querySelector('#mastodon_btn').onclick = function() { window.open("https://meow.social/@Fluffy_Bean", "_blank"); }
-document.querySelector("#telegram_btn").onclick = function() { window.open("http://t.me/Fluffy_Bean", "_blank"); }
-document.querySelector("#github_btn").onclick = function() { window.open("https://github.com/Fluffy-Bean", "_blank"); }
-document.querySelector("#discord_btn").onclick = function() {
-    navigator.clipboard.writeText("Fluffy Bean#5212");
-
-    this.innerHTML = "<p>Copied!</p>";
-    this.style.backgroundColor = "#8c977d";
-    this.style.color = "#151515";
-
-    setTimeout(() => {
-        this.innerHTML = "<p>Discord</p><i class='ph-discord-logo c_green'></i>";
-        this.style.backgroundColor = "";
-        this.style.color = "";
-    }, 2000);
-}
-
-window.onpopstate = function(e){
-    const urlParams = new URLSearchParams(window.location.search);
-    const tab = urlParams.get('t').toLowerCase();
-
-    if (tab === "home") {
-        $('.nav-item')[0].click();
-    } else if (tab === "hobbies") {
-        $('.nav-item')[1].click();
-    } else if (tab === "experiance") {
-        $('.nav-item')[2].click();
-    } else if (tab === "gallery") {
-        $('.nav-item')[3].click();
-    } else {
-        $('.nav-item')[0].click();
-    }
-};
-
-$(document).ready(function() {
-    // Assign scroll to all sections
-    scrollFunction("#Home", 0);
-    scrollFunction("#Hobbies", 1);
-    scrollFunction("#Experiance", 2);
-    scrollFunction("#Gallery", 3);
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const tab = urlParams.get('t').toLowerCase();
-
-    // Switch to tab on load
-    if (tab === "home") {
-        $('.nav-item')[0].click();
-    } else if (tab === "hobbies") {
-        $('.nav-item')[1].click();
-    } else if (tab === "experiance") {
-        $('.nav-item')[2].click();
-    } else if (tab === "gallery") {
-        $('.nav-item')[3].click();
-    } else {
-        $('.nav-item')[0].click();
-    }
-});

app.py

@@ -0,0 +1,83 @@
+from flask import Flask, render_template, send_from_directory, abort, url_for, jsonify, redirect, request, session
+from werkzeug.utils import secure_filename
+import os
+import random
+
+
+app = Flask(__name__)
+
+
+#
+#   ERROR HANDLERS
+#
+@app.errorhandler(405)
+def method_not_allowed(e):
+    error = '405'
+    msg = 'Method sussy wussy'
+    return render_template('error.html', error=error, msg=msg), 404
+
+
+@app.errorhandler(404)
+def page_not_found(e):
+    error = '404'
+    msg = 'Could not find what you need!'
+    return render_template('error.html', error=error, msg=msg), 404
+
+
+@app.errorhandler(403)
+def forbidden(e):
+    error = '403'
+    msg = 'Go away! This is no place for you!'
+    return render_template('error.html', error=error, msg=msg), 403
+
+
+@app.errorhandler(410)
+def gone(e):
+    error = '410'
+    msg = 'The page is no longer available! *sad face*'
+    return render_template('error.html', error=error, msg=msg), 410
+
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    error = '500'
+    msg = 'Server died inside :c'
+    return render_template('error.html', error=error, msg=msg), 500
+
+
+#
+#   ROUTES
+#
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/funny')
+def funny():
+    return render_template('funny.html')
+
+@app.route('/error/<error>/<msg>')
+def error(error, msg):
+    try:
+        error = str(error)
+    except:
+        abort(405)
+    
+    try:
+        msg = str(msg)
+    except:
+        abort(405)
+    
+    return render_template('error.html', error=error, msg=msg)
+
+
+#
+#   METHODS
+#
+@app.route('/fileList/<item_type>', methods=['GET'])
+def image_list(item_type):
+    if request.method != 'GET':
+        abort(405)
+
+    #return jsonify(item_list)

css/_footer.scss

@@ -1,37 +0,0 @@
-footer {
-  margin: 0;
-  padding: 0.5rem 1rem;
-
-  width: 100%;
-  height: 2.5rem;
-
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-
-  justify-content: space-around;
-  align-items: center;
-
-  box-sizing: border-box;
-
-  background-color: $black-darker;
-
-  border-radius: 0 0 0.5rem 0.5rem;
-
-  p,
-  a {
-    margin: 0;
-    padding: 0;
-
-    font-family: $font-body;
-    font-size: 0.8rem;
-    font-weight: 800;
-    font-stretch: semi-condensed;
-
-    color: $white;
-
-    display: block;
-
-    text-transform: uppercase;
-  }
-}

css/_hero.scss

@@ -1,120 +0,0 @@
-.heroSpacing {
-  margin: 0;
-  padding: 0;
-
-  width: 100%;
-  height: 20rem;
-
-  display: block;
-
-  background-color: $black-darker;
-}
-
-.hero {
-  margin: 0;
-  padding: 1rem;
-
-  width: 100%;
-  height: 20rem;
-
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  position: absolute;
-  top: 3rem;
-
-  box-sizing: border-box;
-
-  background-color: $black;
-
-  overflow: hidden;
-
-  pointer-events: none;
-  user-select: none;
-
-  h1 {
-    margin: 0;
-    padding: 0 0 0 0.5rem;
-
-    font-family: $font-header;
-    font-size: 2.5rem;
-    font-weight: 800;
-    font-stretch: ultra-expanded;
-
-    line-height: 1;
-
-    color: $white;
-    border-left: 1.5rem solid $green;
-
-    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-
-    z-index: +2;
-  }
-  p {
-    margin: 0;
-    padding: 0;
-
-    font-family: $font-body;
-    font-size: 1rem;
-    font-weight: 600;
-    font-stretch: semi-expanded;
-
-    color: $white;
-
-    z-index: +2;
-  }
-
-  img {
-    margin: 0;
-    padding: 0;
-
-    width: 100%;
-    height: 100%;
-
-    opacity: 1;
-
-    filter: blur(2px) brightness(0.7);
-
-    object-fit: cover;
-    object-position: center;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    z-index: +1;
-  }
-}
-
-.hero_scrolled {
-  padding: 0.5rem 1rem;
-
-  height: 3rem;
-
-  top: 0;
-
-  justify-content: center;
-
-  background-color: $black-darker;
-   
-  border-radius: 0.5rem 0.5rem 0 0;
-
-  pointer-events: all;
-
-  h1 {
-    padding: 0;
-
-    font-size: 1.5rem;
-
-    border-left: 0rem $black-darker solid;
-  }
-
-  p {
-    display: none;
-  }
-
-  img {
-    opacity: 0;
-  }
-}

css/_nav.scss

@@ -1,86 +0,0 @@
-nav {
-  margin: 0;
-  padding: 0;
-
-  width: 100%;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  position: relative;
-
-  border-radius: 0.5rem 0.5rem 0 0;
-}
-
-.nav-item {
-  margin: 0;
-  padding: 0.5rem;
-
-  width: 100%;
-  height: 3rem;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  box-sizing: border-box;
-
-  background-color: $black;
-
-  border: none;
-
-  user-select: none;
-
-  &:hover {
-    background-color: $black-darker;
-  }
-
-  p,
-  a {
-    margin: auto;
-    padding: 0;
-
-    display: inline-block;
-
-    font-family: $font-body;
-    font-size: 1rem;
-    font-weight: 600;
-    font-stretch: semi-expanded;
-
-    color: $white;
-
-    transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
-  }
-
-  &:nth-child(1) {
-    border-radius: 0.5rem 0 0 0;
-  }
-  &:nth-child(4) {
-    border-radius: 0 0.5rem 0 0;
-  }
-}
-
-.nav-item_selected {
-  background-color: $black-est;
-}
-
-#nav-item_underline {
-  margin: 0;
-  padding: 0;
-
-  width: 25%;
-  height: 0.3rem;
-
-  display: block;
-
-  position: absolute;
-
-  bottom: 0;
-  left: 0;
-
-  background-color: $green;
-
-  transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1),
-    width 0.2s cubic-bezier(0.86, 0, 0.07, 1);
-}

css/_variables.scss

@@ -1,49 +0,0 @@
-// Variables
-$black: #151515;
-$black-darker: #121212;
-$black-est: #101010;
-$white: #e8e5e5;
-
-$red: #b66467;
-$orange: #d8a657;
-$yellow: #d9bc8c;
-$green: #8c977d;
-$blue: #8da3b9;
-$purple: #a988b0;
-
-@font-face {
-  font-family: 'Mona-Sans';
-    src: url('fonts/Mona-Sans.woff2') format('woff2 supports variations'),
-         url('fonts/Mona-Sans.woff2') format('woff2-variations');
-    font-weight: 200 900;
-    font-stretch: 75% 125%;
-}
-@font-face {
-    font-family: 'Hubot-Sans';
-    src: url('fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
-         url('fonts/Hubot-Sans.woff2') format('woff2-variations');
-    font-weight: 200 900;
-    font-stretch: 75% 125%;
-}
-
-$font-header: "Mona-Sans", sans-serif;
-$font-body: "Hubot-Sans", sans-serif;
-
-.c_red {
-  color: $red;
-}
-.c_orange {
-  color: $orange;
-}
-.c_yellow {
-  color: $yellow;
-}
-.c_green {
-  color: $green;
-}
-.c_blue {
-  color: $blue;
-}
-.c_purple {
-  color: $purple;
-}

css/style.css

@@ -1,439 +0,0 @@
-@font-face {
-  font-family: "Mona-Sans";
-  src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("fonts/Mona-Sans.woff2") format("woff2-variations");
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
-}
-@font-face {
-  font-family: "Hubot-Sans";
-  src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("fonts/Hubot-Sans.woff2") format("woff2-variations");
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
-}
-.c_red {
-  color: #b66467;
-}
-
-.c_orange {
-  color: #d8a657;
-}
-
-.c_yellow {
-  color: #d9bc8c;
-}
-
-.c_green {
-  color: #8c977d;
-}
-
-.c_blue {
-  color: #8da3b9;
-}
-
-.c_purple {
-  color: #a988b0;
-}
-
-nav {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  position: relative;
-  border-radius: 0.5rem 0.5rem 0 0;
-}
-
-.nav-item {
-  margin: 0;
-  padding: 0.5rem;
-  width: 100%;
-  height: 3rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  background-color: #151515;
-  border: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.nav-item:hover {
-  background-color: #121212;
-}
-.nav-item p,
-.nav-item a {
-  margin: auto;
-  padding: 0;
-  display: inline-block;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  font-stretch: semi-expanded;
-  color: #e8e5e5;
-  transition: all 0.2s cubic-bezier(0.86, 0, 0.07, 1);
-}
-.nav-item:nth-child(1) {
-  border-radius: 0.5rem 0 0 0;
-}
-.nav-item:nth-child(4) {
-  border-radius: 0 0.5rem 0 0;
-}
-
-.nav-item_selected {
-  background-color: #101010;
-}
-
-#nav-item_underline {
-  margin: 0;
-  padding: 0;
-  width: 25%;
-  height: 0.3rem;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background-color: #8c977d;
-  transition: left 0.2s cubic-bezier(0.86, 0, 0.07, 1), width 0.2s cubic-bezier(0.86, 0, 0.07, 1);
-}
-
-.heroSpacing {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 20rem;
-  display: block;
-  background-color: #121212;
-}
-
-.hero {
-  margin: 0;
-  padding: 1rem;
-  width: 100%;
-  height: 20rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  position: absolute;
-  top: 3rem;
-  box-sizing: border-box;
-  background-color: #151515;
-  overflow: hidden;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.hero h1 {
-  margin: 0;
-  padding: 0 0 0 0.5rem;
-  font-family: "Mona-Sans", sans-serif;
-  font-size: 2.5rem;
-  font-weight: 800;
-  font-stretch: ultra-expanded;
-  line-height: 1;
-  color: #e8e5e5;
-  border-left: 1.5rem solid #8c977d;
-  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-  z-index: 2;
-}
-.hero p {
-  margin: 0;
-  padding: 0;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  font-stretch: semi-expanded;
-  color: #e8e5e5;
-  z-index: 2;
-}
-.hero img {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  filter: blur(2px) brightness(0.7);
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: center;
-     object-position: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.hero_scrolled {
-  padding: 0.5rem 1rem;
-  height: 3rem;
-  top: 0;
-  justify-content: center;
-  background-color: #121212;
-  border-radius: 0.5rem 0.5rem 0 0;
-  pointer-events: all;
-}
-.hero_scrolled h1 {
-  padding: 0;
-  font-size: 1.5rem;
-  border-left: 0rem #121212 solid;
-}
-.hero_scrolled p {
-  display: none;
-}
-.hero_scrolled img {
-  opacity: 0;
-}
-
-footer {
-  margin: 0;
-  padding: 0.5rem 1rem;
-  width: 100%;
-  height: 2.5rem;
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: space-around;
-  align-items: center;
-  box-sizing: border-box;
-  background-color: #121212;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
-footer p,
-footer a {
-  margin: 0;
-  padding: 0;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 0.8rem;
-  font-weight: 800;
-  font-stretch: semi-condensed;
-  color: #e8e5e5;
-  display: block;
-  text-transform: uppercase;
-}
-
-html {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background-color: #121212;
-  overflow: hidden;
-}
-
-body {
-  margin: 0;
-  padding: 0.5rem;
-  height: 100%;
-  background-image: url("../bg.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  box-sizing: border-box;
-}
-
-@media (max-width: 500px) {
-  body {
-    padding: 0;
-    background-image: none;
-  }
-}
-main {
-  margin: 0 auto;
-  padding: 0;
-  max-width: 769px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background-color: #151515;
-  box-sizing: border-box;
-  border-radius: 0.5rem;
-  z-index: 1;
-}
-
-#Home,
-#Hobbies,
-#Experiance,
-#Gallery {
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-#Home::-webkit-scrollbar,
-#Hobbies::-webkit-scrollbar,
-#Experiance::-webkit-scrollbar,
-#Gallery::-webkit-scrollbar {
-  display: none;
-}
-
-.main {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.tabContent {
-  display: none;
-  height: 100%;
-  opacity: 0;
-  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-  overflow: hidden;
-}
-
-.content {
-  margin: 0;
-  padding: 1rem 1.5rem;
-  width: 100%;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  overflow: hidden;
-  background-color: #151515;
-}
-.content h2 {
-  margin: 0.5rem 0 0.5rem 0;
-  padding: 0;
-  font-family: "Mona-Sans", sans-serif;
-  font-size: 2rem;
-  font-stretch: ultra-expanded;
-  color: #8c977d;
-}
-.content h3 {
-  margin: 0.5rem 0 0.5rem 0;
-  padding: 0 0 0 0.5rem;
-  font-family: "Mona-Sans", sans-serif;
-  font-size: 1.5rem;
-  font-stretch: ultra-expanded;
-  color: #e8e5e5;
-  border-left: 0.9rem solid #8c977d;
-}
-.content h4 {
-  margin: 0.5rem 0 0.25rem 0;
-  padding: 0 0 0 0.5rem;
-  font-family: "Mona-Sans", sans-serif;
-  font-size: 1.25rem;
-  font-stretch: ultra-expanded;
-  color: #e8e5e5;
-  border-left: 0.6rem solid #8c977d;
-}
-.content br {
-  margin: 0 0 2rem 0;
-  padding: 0;
-}
-.content i {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  vertical-align: middle;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1rem;
-}
-.content p {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #e8e5e5;
-}
-.content a {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #e8e5e5;
-  -webkit-text-decoration: underline 0.3rem #8c977d;
-          text-decoration: underline 0.3rem #8c977d;
-  transition: all 0.15s ease-in-out;
-}
-.content a:hover {
-  color: #8c977d;
-  -webkit-text-decoration: underline 0.1px #151515;
-          text-decoration: underline 0.1px #151515;
-}
-.content img {
-  margin: 0 auto;
-  padding: 0;
-  max-width: 100%;
-  max-height: 30rem;
-  width: auto;
-  height: auto;
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  border-radius: 0.5rem;
-}
-.content iframe {
-  border-radius: 0.5rem;
-}
-
-.matrix-list {
-  margin: 0;
-  padding: 0;
-  width: auto;
-  height: auto;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-.matrix-list > * {
-  white-space: nowrap;
-}
-.matrix-list > *::after {
-  content: ",";
-}
-.matrix-list > *:last-child::after {
-  content: "";
-}
-
-.btn_large {
-  margin: 0;
-  padding: 0.5rem 1rem;
-  width: auto;
-  height: auto;
-  font-family: "Hubot-Sans", sans-serif;
-  font-size: 1.25rem;
-  font-weight: 600;
-  background-color: #121212;
-  color: #e8e5e5;
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  gap: 0.5rem;
-  border: none;
-  border-left: 0.3rem solid #8c977d;
-  border-radius: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-.btn_large p {
-  color: inherit;
-  font-stretch: expanded;
-}
-.btn_large:hover {
-  background-color: #101010;
-  color: #8c977d;
-  border-left: 0.9rem solid #8c977d;
-}
-.btn_large:hover p {
-  color: inherit;
-}/*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}

css/style.scss

@@ -1,297 +0,0 @@
-@import 'variables';
-@import 'nav';
-@import 'hero';
-@import 'footer';
-
-
-html {
-  margin: 0;
-  padding: 0;
-  
-  height: 100%;
-  
-  background-color: $black-darker;
-  
-  overflow: hidden;
-}
-
-body {
-  margin: 0;
-  padding: 0.5rem;
-  
-  height: 100%;
-  
-  background-image: url("../bg.jpg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  
-  box-sizing: border-box;
-}
-
-@media (max-width: 500px) {
-  body {
-    padding: 0;
-    background-image: none;
-  }
-}
-
-main {
-  margin: 0 auto;
-  padding: 0;
-  
-  max-width: 769px;
-  width: 100%;
-  
-  height: 100%;
-  
-  display: flex;
-  flex-direction: column;
-  
-  position: relative;
-  
-  background-color: $black;
-  
-  box-sizing: border-box;
-  
-  border-radius: 0.5rem;
-  
-  z-index: +1;
-}
-
-#Home,
-#Hobbies,
-#Experiance,
-#Gallery {
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.main {
-  margin: 0;
-  padding: 0;
-
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  box-sizing: border-box;
-
-  overflow: hidden;
-}
-
-.tabContent {
-  display: none;
-
-  height: 100%;
-
-  opacity: 0;
-
-  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-
-  overflow: hidden;
-}
-
-.content {
-  margin: 0;
-  padding: 1rem 1.5rem;
-
-  width: 100%;
-  height: auto;
-
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  box-sizing: border-box;
-
-  overflow: hidden;
-
-  background-color: $black;
-
-  h2 {
-    margin: 0.5rem 0 0.5rem 0;
-    padding: 0;
-
-    font-family: $font-header;
-    font-size: 2rem;
-    font-stretch: ultra-expanded;
-
-    color: $green;
-  }
-
-  h3 {
-    margin: 0.5rem 0 0.5rem 0;
-    padding: 0 0 0 0.5rem;
-
-    font-family: $font-header;
-    font-size: 1.5rem;
-    font-stretch: ultra-expanded;
-    
-    color: $white;
-    border-left: 0.9rem solid $green;
-  }
-
-  h4 {
-    margin: 0.5rem 0 0.25rem 0;
-    padding: 0 0 0 0.5rem;
-
-    font-family: $font-header;
-    font-size: 1.25rem;
-    font-stretch: ultra-expanded;
-
-    color: $white;
-    border-left: 0.6rem solid $green;
-  }
-
-  br {
-    margin: 0 0 2rem 0;
-    padding: 0;
-  }
-
-  i {
-    margin: 0;
-    padding: 0;
-
-    display: inline-block;
-
-    vertical-align: middle;
-
-    font-family: $font-body;
-
-    font-size: 1rem;
-  }
-
-  p {
-    margin: 0;
-    padding: 0;
-
-    display: inline-block;
-
-    font-family: $font-body;
-    font-size: 1.1rem;
-    font-weight: 600;
-
-    color: $white;
-  }
-
-  a {
-    margin: 0;
-    padding: 0;
-
-    display: inline-block;
-
-    font-family: $font-body;
-    font-size: 1rem;
-    font-weight: 600;
-
-    color: $white;
-
-    text-decoration: underline 0.3rem $green;
-  
-    transition: all 0.15s ease-in-out;
-
-    &:hover {
-      color: $green;
-      text-decoration: underline 0.1px $black;
-    }
-  }
-
-  img {
-    margin: 0 auto;
-    padding: 0;
-
-    max-width: 100%;
-    max-height: 30rem;
-
-    width: auto;
-    height: auto;
-
-    display: block;
-
-    object-fit: contain;
-
-    border-radius: 0.5rem;
-  }
-
-  iframe {
-    border-radius: 0.5rem;
-  }
-}
-
-.matrix-list {
-  margin: 0;
-  padding: 0;
-
-  width: auto;
-  height: auto;
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-
-  > * {
-    white-space: nowrap;
-
-    &::after {
-      content:",";
-    }
-    &:last-child::after {
-      content:"";
-    }
-  }
-}
-
-.btn_large {
-  margin: 0;
-  padding: 0.5rem 1rem;
-
-  width: auto;
-  height: auto;
-
-  font-family: $font-body;
-  font-size: 1.25rem;
-  font-weight: 600;
-
-  background-color: $black-darker;
-  color: $white;
-
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  gap: 0.5rem;
-
-  border: none;
-  border-left: 0.3rem solid $green;
-  border-radius: 0;
-
-  box-sizing: border-box;
-
-  cursor: pointer;
-
-  transition: all 0.2s ease-in-out;
-
-  p {
-    color: inherit;
-    font-stretch: expanded;
-  }
-
-  &:hover {
-    background-color: $black-est;
-    color: $green;
-    border-left: 0.9rem solid $green;
-
-    p {
-      color: inherit;
-    }
-  }
-}

index.php

@@ -1,226 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <title>Hiiiiiii</title>
-    <link rel="icon" type="image/x-icon" href="img/sneak.png">
-
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/style.css">
-
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One">
-
-    <!-- JQuery -->
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
-    </script>
-
-    <!-- Phosphor Icons! -->
-    <script src="https://unpkg.com/phosphor-icons"></script>
-</head>
-
-<body>
-    <main>
-        <nav>
-            <button onclick="openTab(event, 'Home')" class="nav-item nav-item_selected"><p>Home</p></button>
-            <button onclick="openTab(event, 'Hobbies')" class="nav-item"><p>Hobbies</p></button>
-            <button onclick="openTab(event, 'Experiance')" class="nav-item"><p>Experiance</p></button>
-            <button onclick="openTab(event, 'Gallery')" class="nav-item"><p>Gallery</p></button>
-            <span id="nav-item_underline"></span>
-        </nav>
-
-        <div class="main">
-            <div id="Home" class="tabContent">
-                <div id="hero" class="hero">
-                    <img src="img/sad.png">
-
-                    <?php
-                        $welcome = array(
-                            'O, hi Mark',
-                            'O, hi stranger',
-                            'Hewwo',
-                            'AAAAAAA',
-                            'UwU',
-                            'HELLOOOOOO'
-                        );
-
-                        echo "<h1>".$welcome[array_rand($welcome)]."</h1>";
-                    ?>
-
-                    <p>I'm a smelly Maned Wolf that goes by Fluffy Bean. I'm 17 years old that has weird interests</p>
-                </div>
-
-                <span class="heroSpacing"></span>
-
-                <div class="content">
-                    <h2>Social Links</h2>
-                    <button class="btn_large" id="twitter_btn">
-                        <p>Twitter</p>
-                        <i class="ph-twitter-logo c_red"></i>
-                    </button>
-                    <button class="btn_large" id="mastodon_btn">
-                        <p>Mastodon</p>
-                        <i class="ph-linux-logo c_yellow"></i>
-                    </button>
-                    <button class="btn_large" id="telegram_btn">
-                        <p>Telegram</p>
-                        <i class="ph-telegram-logo c_green"></i>
-                    </button>
-                    <button class="btn_large" id="github_btn">
-                        <p>Github</p>
-                        <i class="ph-github-logo c_blue"></i>
-                    </button>
-                    <button class="btn_large" id="discord_btn">
-                        <p>Discord</p>
-                        <i class="ph-discord-logo c_purple"></i>
-                    </button>
-
-                    <br>
-
-                    <h2>Special Thanks</h2>
-                    <p><span class="c_green">Jeetix</span>: Helping me with learning how to make websites!</p>
-                    <p><span class="c_orange">Carty</span>: Teaching me how to run servers and the networking!</p>
-                    <p><span class="c_purple">mrHDash</span>: For the <a id="refsheet" href="#ref">Ref Sheet</a> and most other art on the page!</p>
-                    <p><span class="c_red">Zadok</span>: Silly taidum art seen below!</p>
-                    <p><span class="c_blue">Shep</span>: For the <a href="https://twitter.com/ShepGoesBlep/status/1563946805062148102?s=20&t=0wVGqoYa74AsjSSnkZbzjA">free YHC</a>!</p>
-
-                    <br>
-
-                    <img src="img/taidum.png" alt="Orange maned wolf sona in Taidum form">
-                </div>
-            </div>
-
-            <div id="Hobbies" class="tabContent">
-                <div id="hero" class="hero">
-                    <img src="img/funny.jpg">
-                    <h1>Hobbies</h1>
-                    <p>Hobbies hobbies hobbies hobbies hobbies hobbies dick hobbies hobbies hobbies hobbies hobbies</p>
-                </div>
-
-                <span class="heroSpacing"></span>
-
-                <div class="content">
-                    <!--
-                    <h2>Funny jokes!</h2>
-                    <h3>Cow joke</h3>
-                    <p>What did the cow say to the other cow that took up all the space? <span class="gray-info">"Mooooove over"!</span></p>
-                    <h3>Eel joke</h3>
-                    <p>Why can't electric eels get depressed? <span class="gray-info">Because they're always positive!</span></p>
-                    -->
-
-                    <h2>Metal Boxes</h2>
-                    <h3>My metal box</h3>
-                    <p>My second most favorite thing to play around with. Though I usually manage to break them, I like making them do things that they weren't designed todo!</p>
-                    <p>Due to this I also use Arch Linux btw. Though I haven't used Linux for all that much, I already made some pretty cool things with it!</p>
-                    <img src="https://i.redd.it/a89igasc8hj91.png" alt="Screenshot of Linux desktop environment" loading="lazy">
-                    <p>Heres a screenshot of my desktop, for all you nerds thats a Qtile session, Polybar bar with a few custom scripts, Rofi for my app launcher and Dunst for my notification daemon</p>
-
-                    <h3>But its not all graphical</h3>
-                    <p>I also play around with servers and have this website running on personal one! Its a small Zotac ZBOX-CI527 upgraded to 16Bs of ram with a total of 600GBs of SSD storage.</p>
-                    <p>For the OS, I have Proxmox as its easier to avoid fuckups to the system as a whole! Also a simple Web-Interface for managing everything :3</p>
-
-                    <br>
-
-                    <h2>Electronics</h2>
-                    <p>I also recently picked up micro controlers and other fancy things like that. I am still learning, but its been great fun and I made this!</p>
-                    <p>A Pi Pico wired up to an LCD and Rotary encoder. Though this is simple, it was interesting learning how to get code to communicate with these parts</p>
-                    <img src="img/funny.jpg" alt="LCD saying 0 days since I peed myself, attached to a pico with a rotary switch laying to the left of it">
-
-                    <br>
-
-                    <h2>Mah Music taste!</h2>
-                    <p>I like music! And heres what I like listening to.</p>
-                    <h3>Rock/Metal</h3>
-                    <div class="matrix-list">
-                        <p>Bring me the Horizon</p>
-                        <p>Pink Floyd</p>
-                        <p>Ocean Colour Scene</p>
-                        <p>Oasis</p>
-                        <p>Fleetwood Mac</p>
-                        <p>Stereophonics</p>
-                        <p>Muse</p>
-                    </div>
-
-                    <h3>EDM/DnB</h3>
-                    <div class="matrix-list">
-                        <p>acloudyskye</p>
-                        <p>Conro</p>
-                        <p>Pixel Terror</p>
-                    </div>
-
-                    <h3>Other</h3>
-                    <div class="matrix-list">
-                        <p>M38</p>
-                        <p>C148</p>
-                        <p>The Rare Occasion</p>
-                        <p>Cavetown</p>
-                        <p>Daughter</p>
-                        <p>Low Roar</p>
-                        <p>Gorillaz</p>
-                        <p>Joywave</p>
-                        <p>Twenty One Pilots</p>
-                    </div>
-
-                    <br>
-
-                    <img src="https://spotify-recently-played-readme.vercel.app/api?user=lizarddash005&amp;width=769&amp;count=6">
-                </div>
-            </div>
-
-            <div id="Experiance" class="tabContent">
-                <div id="hero" class="hero">
-                    <img src="https://i.redd.it/a89igasc8hj91.png">
-                    <h1>Experiance</h1>
-                    <p>Yet still no job lol</p>
-                </div>
-
-                <span class="heroSpacing"></span>
-
-                <div class="content">
-                    <h2>Experience in programming</h2>
-                    <p>I have a decent understanding of PC operating systems and now also a start on networking with setting up my own server.</p>
-                    <p>I delved into computers from when I was very smol and started with Scratch (not BASIC like ya’ll older folks) and then progressed to Python in Secondary School where I started to also explore other possibilities.</p>
-                    <p>ince then I attempted many thingies like HTML, CSS, PHP, JavaScript, Bash, C# and other stuffs!</p>
-                    <p>I got into Linux just about a year ago when writing this (29th June 22) and broke many things, but that got me into configuring a lot of software! Such as Rofi, Polybar, fish and even Discord, Spotify and Firefox!</p>
-                    <p class="gray-info center">These stats come from my GitHub profile</p>
-                    <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Fluffy-Bean&layout=compact&card_width=445&langs_count=10&title_color=8C977D&bg_color=151515&text_color=E8E3E3&hide_border=true&icon_color=8C977D&border_radius=15px" class="center">                    
-                </div>
-            </div>
-
-            <div id="Gallery" class="tabContent">
-                <div id="hero" class="hero">
-                    <img src="img/landscape.webp">
-                    <h1>Gallery</h1>
-                    <p>Here is a gallery of my stuff and art!</p>
-                </div>
-
-                <span class="heroSpacing"></span>
-
-                <div class="content">
-                    <img src="img/meet-2021.webp" alt="VRchat meet with a handfull of colourfull taidum avatars" loading="lazy">
-
-                    <br>
-
-                    <h2>Refsheet</h2>
-                    <img id="ref" src="img/ref.png" alt="Ref Sheet containing an orange anthro Maned Wolf." loading="lazy">
-                    <h3>Bandana</h3>
-                    <p>#FF7700 - #FFDC00 - #00D621 - #0088FF</p>
-                    <h3>Fur</h3>
-                    <p>#ff851b - #fff3bb - #613700</p>
-                    <h3>Beans / Eyes</h3>
-                    <p>#febbec - #c859c9</p>
-                </div>
-            </div>
-        </div>
-
-        <footer>
-            <p>Made by <span class="c_orange">Fluffy</span></p>
-            <p>Updated at <span class="c_red">16 Nov</span></p>
-        </footer>
-
-        <script src="app.js"></script>
-    </main>
-</body>
-
-</html>

static/css/_aside.scss

@@ -0,0 +1,118 @@
+@mixin aside-item($color) {
+    background-color: rgba($color, 0.1);
+    border: 1px solid rgba($color, 0.5);
+    color: $color;
+}
+
+.aside {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+
+    box-sizing: border-box;
+
+    hr {
+        margin: 0.5rem 0;
+        padding: 0;
+
+        width: 100%;
+        height: 1px;
+
+        background-color: $white;
+        border: none;
+    }
+
+    br {
+        margin: 0.5rem 0;
+        padding: 0;
+    }
+}
+.aside-container {
+    margin: 0;
+    padding: 1rem;
+
+    position: sticky;
+    top: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.aside-item {
+    margin: 0;
+    padding: 0.75rem;
+
+    width: 100%;
+    height: auto;
+
+    background-color: transparent;
+    color: $white;
+
+    text-decoration: none;
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    border: 1px solid transparent;
+    border-radius: 3px;
+
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+
+    i {
+        opacity: 0;
+        transform: translateX(1rem);
+        transition: all 0.2s ease-in-out;
+        filter: blur(0.1rem);
+
+        pointer-events: none;
+    }
+
+    &:hover i {
+        opacity: 1;
+        transform: translateX(0);
+        filter: blur(0);
+    }
+}
+.aside-red {
+    @include aside-item($red);
+}
+.aside-yellow {
+    @include aside-item($yellow);
+}
+.aside-green {
+    @include aside-item($green);
+}
+.aside-blue {
+    @include aside-item($blue);
+}
+.aside-purple {
+    @include aside-item($purple);
+}
+
+@media screen and (max-width: 768px) {
+    .aside {
+        display: block;
+
+        position: fixed;
+        top: 3rem;
+        left: -100vw;
+
+        width: calc(100vw - 1rem);
+        height: calc(100vh - 3rem);
+
+        z-index: 68;
+        overflow-y: auto;
+
+        box-shadow: 0 0 0.5rem 5px rgba($black, 0.5);
+
+        transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    }
+
+    .aside-active {
+        opacity: 1;
+        left: 0;
+    }
+}

static/css/_footer.scss

@@ -0,0 +1,25 @@
+.footer {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: $black;
+    color: $white;
+
+    p {
+        margin: 0;
+        padding: 0;
+
+        font-size: 0.8rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .footer {
+        background-color: $white;
+        color: $black;
+    }
+}

static/css/_nav.scss

@@ -0,0 +1,56 @@
+.nav {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+    color: $white;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+    position: relative;
+
+    z-index: 69;
+
+    p {
+        margin: 0 1rem;
+        padding: 0;
+
+        font-size: 1rem;
+    }
+}
+.nav-toggle {
+    margin: 0;
+    padding: 0.5rem 1rem;
+
+    display: none;
+
+    background-color: transparent;
+    color: $white;
+
+    border: none;
+
+    i {
+        font-size: 1.5rem;
+
+        display: inline-block;
+
+        // display the hamburger icon vertically centered
+        line-height: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .nav {
+        justify-content: space-between;
+
+        background-color: #121212;
+    }
+    .nav-toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

static/css/_wrapper.scss

@@ -0,0 +1,37 @@
+.wrapper {
+    margin: 0;
+    padding: 0;
+
+    background-color: $white;
+    color: $black;
+
+    border-radius: 6px 0 0 0;
+
+    overflow: hidden;
+}
+
+.content {
+    margin: 0;
+    padding: 0.5rem;
+
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    position: relative;
+
+    p, .btn {
+        margin: 0;
+        padding: 0;
+
+        font-size: 1rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .wrapper {
+        border-radius: 0;
+    }
+}

static/css/scss/_grid.scss

@@ -0,0 +1,35 @@
+body {
+    min-height: 100vh;
+
+    display: grid;
+    grid-template-areas: 'aside nav'
+                        'aside wrapper'
+                        'footer wrapper';
+
+    grid-template-rows: 3rem auto 3rem;
+    grid-template-columns: 20rem 1fr;
+}
+
+.nav {
+    grid-area: nav;
+}
+.wrapper {
+    grid-area: wrapper;
+}
+.aside {
+    grid-area: aside;
+}
+.footer {
+    grid-area: footer;
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        grid-template-areas: 'nav'
+                            'wrapper'
+                            'footer';
+
+        grid-template-rows: 3rem 1fr 3rem;
+        grid-template-columns: 1fr;
+    }
+}

static/css/scss/_normalize.scss

@@ -0,0 +1,32 @@
+* {
+    box-sizing: border-box;
+
+    font-family: $font-header;
+    font-weight: 400;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+    color: $white;
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    min-height: 100vh;
+
+    background-color: $black;
+
+    scroll-behavior: smooth;
+}

static/css/scss/_variables.scss

@@ -0,0 +1,44 @@
+$black: #151515;
+$white: #e8e3e3;
+
+$red: #B66467;
+$yellow: #D9BC8C;
+$green: #8C977D;
+$blue: #8DA3B9;
+//$dblue: #222c45;
+$purple: #A988B0;
+
+$primary: $green;
+
+@font-face {
+    font-family: 'Mona-Sans';
+    src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+@font-face {
+    font-family: 'Hubot-Sans';
+    src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
+$font-header: "Mona-Sans", sans-serif;
+$font-body: "Hubot-Sans", sans-serif;
+
+@function hexToRGB($hex) {
+    @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+    --red: #{hexToRGB($red)};
+    --yellow: #{hexToRGB($yellow)};
+    --green: #{hexToRGB($green)};
+    --blue: #{hexToRGB($blue)};
+    --purple: #{hexToRGB($purple)};
+}
+
+// I want to use this somewhere
+//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%);

static/css/style.css

@@ -0,0 +1,350 @@
+@font-face {
+  font-family: "Mona-Sans";
+  src: url("../fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("../fonts/Mona-Sans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+@font-face {
+  font-family: "Hubot-Sans";
+  src: url("../fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("../fonts/Hubot-Sans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+:root {
+  --red: 182, 100, 103;
+  --yellow: 217, 188, 140;
+  --green: 140, 151, 125;
+  --blue: 141, 163, 185;
+  --purple: 169, 136, 176;
+}
+
+body {
+  min-height: 100vh;
+  display: grid;
+  grid-template-areas: "aside nav" "aside wrapper" "footer wrapper";
+  grid-template-rows: 3rem auto 3rem;
+  grid-template-columns: 20rem 1fr;
+}
+
+.nav {
+  grid-area: nav;
+}
+
+.wrapper {
+  grid-area: wrapper;
+}
+
+.aside {
+  grid-area: aside;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+@media screen and (max-width: 768px) {
+  body {
+    grid-template-areas: "nav" "wrapper" "footer";
+    grid-template-rows: 3rem 1fr 3rem;
+    grid-template-columns: 1fr;
+  }
+}
+* {
+  box-sizing: border-box;
+  font-family: "Mona-Sans", sans-serif;
+  font-weight: 400;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  color: #e8e3e3;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+html ::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background-color: #151515;
+  scroll-behavior: smooth;
+}
+
+.nav {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  color: #e8e3e3;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  position: relative;
+  z-index: 69;
+}
+.nav p {
+  margin: 0 1rem;
+  padding: 0;
+  font-size: 1rem;
+}
+
+.nav-toggle {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  display: none;
+  background-color: transparent;
+  color: #e8e3e3;
+  border: none;
+}
+.nav-toggle i {
+  font-size: 1.5rem;
+  display: inline-block;
+  line-height: 1.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .nav {
+    justify-content: space-between;
+    background-color: #121212;
+  }
+  .nav-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.aside {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  box-sizing: border-box;
+}
+.aside hr {
+  margin: 0.5rem 0;
+  padding: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e8e3e3;
+  border: none;
+}
+.aside br {
+  margin: 0.5rem 0;
+  padding: 0;
+}
+
+.aside-container {
+  margin: 0;
+  padding: 1rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.aside-item {
+  margin: 0;
+  padding: 0.75rem;
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  color: #e8e3e3;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.aside-item i {
+  opacity: 0;
+  transform: translateX(1rem);
+  transition: all 0.2s ease-in-out;
+  filter: blur(0.1rem);
+  pointer-events: none;
+}
+.aside-item:hover i {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.aside-red {
+  background-color: rgba(182, 100, 103, 0.1);
+  border: 1px solid rgba(182, 100, 103, 0.5);
+  color: #B66467;
+}
+
+.aside-yellow {
+  background-color: rgba(217, 188, 140, 0.1);
+  border: 1px solid rgba(217, 188, 140, 0.5);
+  color: #D9BC8C;
+}
+
+.aside-green {
+  background-color: rgba(140, 151, 125, 0.1);
+  border: 1px solid rgba(140, 151, 125, 0.5);
+  color: #8C977D;
+}
+
+.aside-blue {
+  background-color: rgba(141, 163, 185, 0.1);
+  border: 1px solid rgba(141, 163, 185, 0.5);
+  color: #8DA3B9;
+}
+
+.aside-purple {
+  background-color: rgba(169, 136, 176, 0.1);
+  border: 1px solid rgba(169, 136, 176, 0.5);
+  color: #A988B0;
+}
+
+@media screen and (max-width: 768px) {
+  .aside {
+    display: block;
+    position: fixed;
+    top: 3rem;
+    left: -100vw;
+    width: calc(100vw - 1rem);
+    height: calc(100vh - 3rem);
+    z-index: 68;
+    overflow-y: auto;
+    box-shadow: 0 0 0.5rem 5px rgba(21, 21, 21, 0.5);
+    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  }
+  .aside-active {
+    opacity: 1;
+    left: 0;
+  }
+}
+.wrapper {
+  margin: 0;
+  padding: 0;
+  background-color: #e8e3e3;
+  color: #151515;
+  border-radius: 6px 0 0 0;
+  overflow: hidden;
+}
+
+.content {
+  margin: 0;
+  padding: 0.5rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+}
+.content p, .content .btn {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    border-radius: 0;
+  }
+}
+.footer {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #151515;
+  color: #e8e3e3;
+}
+.footer p {
+  margin: 0;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+@media screen and (max-width: 768px) {
+  .footer {
+    background-color: #e8e3e3;
+    color: #151515;
+  }
+}
+h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 2rem;
+  text-align: center;
+  font-weight: 600;
+}
+
+h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+h3 {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.title {
+  margin: 0;
+  padding: 2rem 0;
+  position: relative;
+}
+.title img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  filter: grayscale(100%);
+  transition: all 0.2s ease-in-out;
+}
+.title img:hover {
+  filter: grayscale(0%);
+}
+
+.btn {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  color: #e8e3e3;
+  text-decoration: none;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.btn i {
+  opacity: 0;
+  transform: translateX(1rem);
+  transition: all 0.2s ease-in-out;
+  filter: blur(0.1rem);
+}
+.btn:hover i {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+#funny {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}/*# sourceMappingURL=style.css.map */

static/css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scss/_variables.scss","style.css","scss/_grid.scss","scss/_normalize.scss","_nav.scss","_aside.scss","_wrapper.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}

static/css/style.scss

@@ -0,0 +1,102 @@
+@import 'scss/variables';
+@import 'scss/grid';
+
+@import 'scss/normalize';
+
+@import 'nav';
+@import 'aside';
+@import 'wrapper';
+@import 'footer';
+
+h1 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 2rem;
+    text-align: center;
+    font-weight: 600;
+}
+
+h2 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+h3 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.title {
+    margin: 0;
+    padding: 2rem 0;
+
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 100%;
+
+        object-fit: cover;
+
+        filter: grayscale(100%);
+
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+            filter: grayscale(0%);
+        }
+    }
+}
+
+.btn {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: auto;
+
+    background-color: transparent;
+    color: $white;
+
+    text-decoration: none;
+
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 0.5rem;
+
+    border: none;
+
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+
+    i {
+        opacity: 0;
+        transform: translateX(1rem);
+        transition: all 0.2s ease-in-out;
+        filter: blur(0.1rem);
+    }
+
+    &:hover {
+        i {
+            opacity: 1;
+            transform: translateX(0);
+            filter: blur(0);
+        }
+    }
+}
+
+#funny {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: 100%;
+}

templates/error.html

@@ -0,0 +1,7 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <div class="title">
+        <h1>{{error}}</h1>
+        <p style="text-align: center;">{{msg}}</p>
+    </div>
+{% endblock %}

templates/funny.html

@@ -0,0 +1,4 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
+{% endblock %}

templates/index.html

@@ -0,0 +1,35 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <div class="content" id="about">
+        <h2>Special Thanks</h2>
+        <p>Jeetix: Helping me with learning how to make websites!</p>
+        <p>Carty: Teaching me how to run servers and the networking!</p>
+        <p>mrHDash: For the Ref Sheet and most other art on the page!</p>
+        <p>Zadok: Silly taidum art seen below!</p>
+        <p>Shep: For the free YHC!</p>
+    </div>
+
+    <div class="content" id="contact">
+        <h2>Stalk me</h2>
+        <button class="btn">
+            Twitter
+            <i class="ph-twitter-logo"></i>
+        </button>
+        <button class="btn">
+            Mastodon
+            <i class="ph-linux-logo"></i>
+        </button>
+        <button class="btn">
+            Telegram
+            <i class="ph-telegram-logo"></i>
+        </button>
+        <button class="btn">
+            Github
+            <i class="ph-github-logo"></i>
+        </button>
+        <button class="btn">
+            Discord
+            <i class="ph-discord-logo"></i>
+        </button>
+    </div>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leggy land</title>
+    <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" defer>
+    <script 
+        src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+        crossorigin="anonymous">
+    </script>
+    <script src="https://unpkg.com/phosphor-icons" defer></script>
+</head>
+<body>
+    <div class="nav">
+        <button class="nav-toggle"><i class="ph-list"></i></button>
+        <p>Leggy land</p>
+    </div>
+
+    <div class="aside">
+        <div class="aside-container">
+            <a href="/#" class="aside-item">
+                Home
+                <i class="ph-arrow-right"></i>
+            </a>
+            <a href="/#contact" class="aside-item">
+                Social Media
+                <i class="ph-arrow-right"></i>
+            </a>
+            <a href="/#about" class="aside-item">
+                About
+                <i class="ph-arrow-right"></i>
+            </a>
+
+            <hr>
+
+            <a href="/" class="aside-item">
+                Gallery
+                <i class="ph-image"></i>
+            </a>
+            <a href="/status" class="aside-item">
+                Server Status
+                <i class="ph-cpu"></i>
+            </a>
+            <a href="/" class="aside-item">
+                Gwa Gwa
+                <i class="ph-package"></i>
+            </a>
+
+            <hr>
+
+            <a href="/funny" class="aside-item">
+                lol
+                <i class="ph-arrow-right"></i>
+            </a>
+        </div>
+    </div>
+    
+    <div class="wrapper">
+        {% block content %} {% endblock %}
+    </div>
+
+    <div class="footer">
+        <p>Last updated 27th Dec</p>
+    </div>
+
+    <script>
+        let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
+        let btnElements = document.querySelectorAll('.btn');
+        let asideElements = document.querySelectorAll('.aside-item');
+
+        for (let i = 0; i < btnElements.length; i++) {
+            btnElements[i].addEventListener("mouseover", function() {
+                let randomColour = Math.floor(Math.random() * btnColours.length);
+                this.style.color = `var(--${btnColours[randomColour]})`;
+            });
+        
+            btnElements[i].addEventListener("mouseout", function() {
+                this.style.color = '';
+            });
+        }
+        for (let i = 0; i < asideElements.length; i++) {
+            asideElements[i].addEventListener("mouseover", function() {
+                let randomColour = Math.floor(Math.random() * btnColours.length);
+                this.classList.add(`aside-${btnColours[randomColour]}`);
+            });
+        
+            asideElements[i].addEventListener("mouseout", function() {
+                this.classList = 'aside-item';
+            });
+        }
+
+        let navToggle = document.querySelector('.nav-toggle');
+        let aside = document.querySelector('.aside');
+
+        navToggle.addEventListener('click', function() {
+            aside.classList.toggle('aside-active');
+        });
+
+        function fadeOnLoad(obj) {
+            $(obj).fadeIn(621);
+        }
+    </script>
+</body>
+</html>