Merge pull request #4 from Fluffy-Bean/v5

V5

.gitignore

@@ -0,0 +1,142 @@
+# Remove all development files
+uploads/
+
+# remove all PyCharm files
+.idea
+
+# remove all VSCode files
+.vscode
+
+# remove all CSS files
+static/css/style.css
+static/css/style.css.map
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/

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,205 @@
+from flask import Flask, render_template, request, jsonify
+from flask_compress import Compress
+
+import dotenv
+
+from random import choice
+import json
+import requests
+
+# Getting color palette from album art
+import colorthief
+
+LASTFM_API_KEY = dotenv.get_key('./.env', 'LASTFM')
+
+app = Flask(__name__)
+Compress(app)
+
+
+#
+#   ROUTES
+#
+@app.route('/')
+def index():
+    msg = [
+        'Don\'t cry because it\'s over, smile because it happened',
+        'This could go one of two ways...', 'Gwa Gwa',
+        'It\'s a UNIX system! I know this!', '*internal screaming*',
+        'Don\'t forget to drink water!', 'I wish we were better strangers.',
+        'If I were you, I\'d run now', 'SILICA GEL "DO NOT EAT".',
+        'Gods die too.', 'Eat hotchip and lie'
+    ]
+
+    return render_template('index.html', msg=choice(msg))
+
+
+@app.route('/cretura')
+def cretura():
+    return render_template('cretura.html')
+
+
+@app.route('/about')
+def about():
+    """
+    Returns a dict with all the languages I know and their level of knowledge
+    0 = Absolute beginner
+    1 = Basics
+    2 = Intermediate
+    3 = Advanced
+    4 = Expert
+    5 = Undefeated
+    """
+    languages = {
+        'Python': {
+            'level': 3,
+            'since': '2020',
+            'color': '#3776AB',
+        },
+        'HTML': {
+            'level': 4,
+            'since': '2021',
+            'color': '#E34F26',
+        },
+        'CSS': {
+            'level': 3,
+            'since': '2021',
+            'color': '#1572B6',
+        },
+        'JavaScript': {
+            'level': 2,
+            'since': '2022',
+            'color': '#F7DF1E',
+        },
+        'Sass/SCSS': {
+            'level': 4,
+            'since': '2022',
+            'color': '#CC6699',
+        },
+        'PHP': {
+            'level': 2,
+            'since': '2022',
+            'color': '#777BB4',
+        },
+        'SQL': {
+            'level': 1,
+            'since': '2022',
+            'color': '#4479A1',
+        },
+        'Scratch': {
+            'level': 5,
+            'since': '2015',
+            'color': '#FFD500',
+        },
+        'Shell': {
+            'level': 2,
+            'since': '2021',
+            'color': '#89E051',
+        },
+        'Rust': {
+            'level': 0,
+            'since': '2023',
+            'color': '#CE422B',
+        },
+    }
+    
+    systems = {
+        'Ubuntu': {
+            'level': 2,
+            'since': '2022',
+            'color': '#E95420',
+        },
+        'Arch': {
+            'level': 3,
+            'since': '2021',
+            'color': '#1793D1',
+        },
+        'Proxmox': {
+            'level': 2,
+            'since': '2021',
+            'color': '#E57000',
+        },
+        'Windows': {
+            'level': 1,
+            'since': '2011',
+            'color': '#0078D6',
+        },
+    }
+    return render_template('about.html', languages=languages, systems=systems)
+
+
+@app.route('/music', methods=['GET', 'POST'])
+def music():
+    if request.method == 'POST':
+        current_tracks = requests.get(
+            f'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key={LASTFM_API_KEY}&limit=5&format=json'
+        )
+        current_tracks = json.loads(current_tracks.text)
+
+        tracks = []
+
+        for track in current_tracks['recenttracks']['track']:
+            # As django is weird with @attr in json data
+            # I make a new dict with a bool for nowPlaying
+            nowPlaying = False
+            if '@attr' in track:
+                nowPlaying = True
+
+            # Yoink color palette from album art
+            color_thief = colorthief.ColorThief(
+                requests.get(track['image'][2]['#text'], stream=True).raw)
+            palette = color_thief.get_palette()
+
+            tmp_track = {
+                'name': track['name'],
+                'artist': track['artist']['#text'],
+                'album': track['album']['#text'],
+                'url': track['url'],
+                'image': track['image'][2]['#text'],
+                'nowPlaying': nowPlaying,
+                'palette': palette[0]
+            }
+
+            tracks.append(tmp_track)
+
+        return jsonify(tracks)
+
+    # GET request
+    return render_template('music.html')
+
+
+#
+#   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

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/buttons.sass

@@ -0,0 +1,36 @@
+.btn
+    margin: 0
+    padding: 0.5rem 1rem
+
+    width: auto
+    height: 2.5rem
+
+    position: relative
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    border: transparent 0 solid
+    border-radius: 2px
+
+    background: $black
+    color: $white !important
+
+    font-size: 1rem
+    font-weight: 500
+    line-height: 1
+
+    text-decoration: none
+    text-align: center
+    text-transform: uppercase
+
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+
+    &:hover
+        background: $white
+        color: $black !important
+
+    &:focus
+        outline: none

static/css/style.sass

@@ -0,0 +1,430 @@
+@use 'sass:map'
+
+$black: #101010
+$dark: #151515
+$grey: #808080
+$white: #e8e3e3
+$primary: #8C977D
+
+@font-face
+    font-family: 'jetbrains_monoitalic'
+    src: url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff') format('woff')
+    font-weight: normal
+    font-style: normal
+    font-display: swap
+@font-face
+    font-family: 'jetbrains_monoregular'
+    src: url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff') format('woff')
+    font-weight: normal
+    font-style: normal
+    font-display: swap
+
+html
+    margin: 0
+    padding: 0
+body
+    margin: 0
+    padding: 3rem 1rem 1rem
+    width: 100vw
+    min-height: 100vh
+
+    background-color: $black
+
+    font-family: 'jetbrains_monoregular', sans-serif
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    overflow-x: hidden
+    box-sizing: border-box
+
+    *
+        box-sizing: border-box
+    
+nav
+    margin: 0
+    padding: 0.5rem 1rem
+
+    width: 100vw
+    height: 3rem
+
+    position: fixed
+    top: 0
+    left: 0
+
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 1rem
+
+    z-index: 1
+
+    color: $white
+
+    a
+        margin: 0
+        padding: 0
+
+        width: auto
+        height: 2rem
+
+        position: relative
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        font-size: 1.1rem
+        font-weight: 400
+        line-height: 1
+
+        text-align: left
+        text-decoration: none
+        text-transform: uppercase
+
+        color: $grey
+
+        &:hover
+            color: $white
+
+    a.selected
+        color: $primary
+
+        &:hover
+            color: $white
+
+    span
+        margin: 0 0 0.2rem 0
+        padding: 0
+
+        width: 2px
+        height: 1.25rem
+
+        position: relative
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        background-color: $grey
+
+.wrapper
+    margin: 0 auto
+    padding: 1rem
+
+    width: 100%
+    max-width: 621px
+
+    min-height: auto
+
+    position: relative
+
+    display: flex
+    flex-direction: column
+    gap: 1rem
+
+    background: $dark
+    color: $white
+    border-radius: 2px
+
+    z-index: 2
+    box-sizing: border-box
+    //overflow: hidden
+
+    h1
+        margin: 0 // 0 1rem 0
+        padding: 0
+
+        font-size: 2.25rem
+        font-weight: 600
+        line-height: 1
+
+        text-align: left
+        text-transform: uppercase
+        white-space: break-spaces
+
+    h2
+        margin: 0
+        padding: 0
+
+        font-size: 1.5rem
+        font-weight: 600
+        line-height: 1
+
+        text-align: left
+        text-transform: uppercase
+
+    h3
+        margin: 0
+        padding: 0
+
+        font-size: 1.25rem
+        font-weight: 600
+        line-height: 1
+
+        text-align: left
+        text-transform: uppercase
+
+    p
+        margin: 0
+        padding: 0
+
+        font-size: 1.1rem
+        font-weight: 400
+        line-height: 1.2
+
+        text-align: left
+
+        color: $grey
+
+    a
+        margin: 0
+        padding: 0
+
+        font-size: 1.1rem
+        font-weight: 400
+        line-height: 1.2
+
+        text-align: left
+
+        color: $primary
+
+        &:hover
+            color: $white
+
+    img
+        margin: 0 auto
+        padding: 0
+
+        width: auto
+        max-width: 100%
+
+        position: relative
+
+        display: block
+
+        border-radius: 2px
+
+        object-fit: cover
+
+        z-index: 1
+
+p.subtitle
+    color: $white
+    text-transform: uppercase
+
+.content
+    display: flex
+    flex-direction: column
+    justify-content: space-between
+    gap: 0.5rem
+
+    //overflow: hidden
+
+.bar-chart
+    margin: 0
+    padding: 0
+
+    position: relative
+    
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+.marker
+    width: 2px
+    height: 100%
+
+    position: absolute
+    top: 0
+    left: 0
+
+    background-color: rgba($white, 0.1)
+
+    z-index: -2
+
+.sub_experiance
+    width: 0%
+    height: 1.69rem
+
+    position: relative
+
+    background-color: $primary
+    border-radius: 2px
+
+    transition: width 2s cubic-bezier(.86,0,.07,1)
+
+    .fg
+        width: 100%
+        height: 100%
+
+        position: absolute
+
+        overflow: hidden
+
+        span
+            position: absolute
+            top: 50%
+            left: 1.5rem
+            transform: translateY(-50%)
+
+            font-size: 0.9rem
+            font-weight: 600
+            white-space: nowrap
+
+            color: $black
+
+    .bg
+        position: absolute
+        top: 50%
+        left: 1.5rem
+        transform: translateY(-50%)
+
+        font-size: 0.9rem
+        font-weight: 600
+        white-space: nowrap
+
+        color: $white
+
+        z-index: -1
+
+@keyframes loader
+    0%
+        width: 0
+        left: 0
+    30%
+        width: 100%
+        left: 0
+    60%
+        width: 100%
+        left: 100%
+    100%
+        width: 100%
+        left: 100%
+
+.loader
+    margin: 1rem 0
+
+    width: 100%
+    height: 2px
+
+    position: relative
+
+    background-color: $black
+
+    overflow: hidden
+
+    &::after
+        content: ''
+
+        margin: 0
+        padding: 0
+
+        width: 0
+        height: 100%
+
+        position: absolute
+        top: 0
+        left: 0
+
+        background-color: $primary
+
+        animation: loader 1s ease-in-out infinite
+
+.music
+    display: flex
+    flex-direction: column
+    gap: 1rem
+
+.track
+    display: flex
+    flex-direction: row
+    gap: 1rem
+
+    position: relative
+
+    overflow: hidden
+
+.track-image
+    padding: 0px
+
+    // Its too late for me to be bothered to fix a bug I have
+    min-width: 5rem
+    width: 5rem
+    max-width: 5rem
+    min-height: 5rem
+    height: 5rem
+    max-height: 5rem
+
+    border-radius: 2px
+    background-color: $black
+
+    transition: all 0.3s cubic-bezier(.86,0,.07,1)
+
+    img
+        margin: 0
+        padding: 0
+
+        width: 100%
+        height: 100%
+
+        display: block
+        float: left
+
+        border-radius: 2px
+        background-color: $dark
+
+        opacity: 1
+        object-fit: cover
+
+        transition: all 0.2s cubic-bezier(.86,0,.07,1)
+
+.track-info
+    display: flex
+    flex-direction: column
+    //justify-content: space-between
+    gap: 0.5rem
+
+    overflow: hidden
+
+    a
+        margin: 0
+        padding: 0
+
+        font-size: 1.1rem
+        font-weight: 600
+        line-height: 1.2
+
+        text-align: left
+        text-decoration: none
+
+        color: $white
+
+        &:hover
+            color: $primary
+
+p.track-nowplaying
+    color: $primary
+
+@import "buttons"
+@import "toast"
+
+@media (max-width: 669px)
+    .wrapper
+        max-width: 100%
+        border-radius: 0
+
+        h1
+            font-size: 2rem
+            text-align: center
+
+    p.subtitle
+        text-align: center
+
+    .track-image
+        width: 2px
+        height: auto
+
+        img
+            opacity: 0

static/css/toast.sass

@@ -0,0 +1,89 @@
+@keyframes toastTimeout
+    0%
+        left: -100%
+    100%
+        left: 0%
+    
+.toast-container
+    margin: 0
+    padding: 0
+
+    width: 100%
+    height: auto
+    max-width: 400px
+
+    position: fixed
+    bottom: 0.5rem
+    left: 50%
+    transform: translateX(-50%)
+
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
+
+    font-size: 1rem
+    font-weight: 500
+    line-height: 1
+    text-align: center
+
+    z-index: 9999
+
+.toast
+    margin: 0
+    padding: 0.5rem 1rem
+
+    min-height: 2.5rem
+
+    position: relative
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    transform: scaleY(0)
+
+    color: $white
+    background-color: $dark
+    border-radius: 2px
+
+    opacity: 0
+
+    transition: all 0.3s ease-in-out
+    overflow: hidden
+
+    &:hover
+        cursor: pointer
+
+.toast-show
+    opacity: 1
+    transform: scaleY(1)
+
+.toast-hide
+    opacity: 0
+    tansform: translateY(5rem)
+
+.toast-time
+    margin: 0
+    padding: 0
+
+    width: 100%
+    height: 2px
+
+    position: absolute
+    bottom: 0
+    left: 0%
+
+    background-color: $primary
+
+    animation: toastTimeout 5s linear forwards
+
+@media (max-width: 669px)
+    .toast-container
+        padding: 0.5rem
+
+        width: 100%
+        max-width: 100%
+
+        bottom: 0
+        left: 0
+        transform: none

static/js/main.js

@@ -0,0 +1,87 @@
+function addToast(text='Sample toast notification') {
+    var container = document.querySelector('.toast-container');
+
+    // Create notification element
+    var parent = document.createElement('span');
+    parent.classList.add('toast');
+    parent.innerText = text;
+    parent.onclick = function() {
+        if (parent.parentNode) {
+            parent.classList.add('toast-hide');
+
+            setTimeout(function() {
+                container.removeChild(parent);
+            }, 500);
+        }
+    };
+
+    // Create span to show time remaining
+    var timer = document.createElement('span');
+    timer.classList.add('toast-time');
+    parent.appendChild(timer);
+
+    // Append notification to container
+    container.appendChild(parent);
+    setTimeout(function() {
+        parent.classList.add('toast-show');
+    }, 1);
+
+    // Remove notification after 5 seconds
+    setTimeout(function() {
+        if (parent.parentNode) {
+            parent.classList.add('toast-hide');
+
+            setTimeout(function() {
+                container.removeChild(parent);
+            }, 500);
+        }
+    }, 5000);
+}
+
+function garble(obj, speed=1) {
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ_-"
+
+    let interval = null;
+    let iteration = 0;
+
+    clearInterval(interval);
+    
+    interval = setInterval(() => {
+        obj.innerText = obj.innerText
+            .split("")
+            .map((letter, index) => {
+                if (index < iteration) {
+                    return obj.dataset.value[index];
+                }
+                // 27 as hyphens wrap text that can make page jump a lot
+                return letters[Math.floor(Math.random() * 27)]
+            })
+            .join("");
+
+        if(iteration >= obj.dataset.value.length){ 
+            clearInterval(interval);
+        }
+
+        iteration += 1 / speed;
+    }, 30);
+}
+
+
+// Main title and subtitle, should only be one of each per page
+if (document.querySelector("h1")) {
+    const title = document.querySelector("h1");
+    garble(title, 1.5);
+}
+if (document.querySelector(".subtitle")) {
+    const subtitle = document.querySelector(".subtitle");
+    garble(subtitle);
+}
+
+
+// h2 and h3 headers on page, there can be multiple so we need to loop through them
+if (document.querySelectorAll("h2, h3")) {
+    const headers = document.querySelectorAll("h2, h3");
+    headers.forEach((header) => {
+        garble(header);
+    });
+}

templates/about.html

@@ -0,0 +1,104 @@
+{% extends 'layout.html' %}
+{% block nav_about %}selected{% endblock %}
+
+{% block content %}
+    <div class="content">
+        <h1 data-value="About-Me">About-Me</h1>
+    </div>
+
+    <div class="content">
+        <h2 data-value="Meeeeeee">Meeeeeee</h2>
+        <p>Hewwo, I'm a 17 year old nerd, who likes to code and tinker with computers!</p>
+        <p>I'm mostly a frontend developer, with some knowlage of the backend. I also enjoy programming for the hell of it</p>
+        <p>Fluffy Bean is a maned wolf, he reflects my personality and is my fursona</p>
+        <p>Refsheet made by mrHDash</p>
+    </div>
+    
+    <img src="{{ url_for('static', filename='images/ref.png') }}" alt="Orange maned wolf sneaking under a yellow sheet">
+    
+    <div class="content">
+        <h2 data-value="Experiance and Projects">Experiance and Projects</h2>
+        <p>I'm quite well experianced with Python, HTML, CSS/Sass, and Shell Scripting.And have some experiance with JavaScript, PHP, MySQL and a few other languages</p>
+        <p>My main operating system has been Linux for about 1.5 years (Arch btw)</p>
+        <p>Now I have started to learn hardware and been messing around with Pi Picos!</p>
+        <p>Recently I have started working on a gallery, originally written in PHP for my own use before making it public</p>
+        <p>It is now written in Python with Flask and is open source! You can find it on <a href="https://github.com/Fluffy-Bean/onlylegs">GitHub</a>. Or on my self hosted instance of <a href="https://git.leggy.dev/Fluffy/onlylegs">Gitea</a>!</p>
+    </div>
+
+    <div class="content">
+        <h2 data-value="Level of knowlage">Level of knowlage</h2>
+        <p>My levels of knowlage are based on a scale of 0-5, with 0 being very little experiance and 5 being best in the world, obviously ;3</p>
+
+        <span class="bar-chart">
+            <h3 data-value="Languages">Languages</h3>
+            {% for lang in languages %}
+                <span class="sub_experiance"
+                    data-value="{{ languages[lang].level }}"
+                    style="background-color: {{ languages[lang].color }};">
+                    <span class="fg"><span>{{ lang }} - Since {{ languages[lang].since }}</span></span>
+                    <span class="bg">{{ lang }} - Since {{ languages[lang].since }}</span>
+                </span>
+            {% endfor %}
+
+            <h3 data-value="OS'">OS'</h3>
+            {% for os in systems %}
+                <span class="sub_experiance"
+                    data-value="{{ systems[os].level }}"
+                    style="background-color: {{ systems[os].color }};">
+                    <span class="fg"><span>{{ os }} - Since {{ systems[os].since }}</span></span>
+                    <span class="bg">{{ os }} - Since {{ systems[os].since }}</span>
+                </span>
+            {% endfor %}
+
+            <span class="marker" data-value="0"></span>
+            <span class="marker" data-value="1"></span>
+            <span class="marker" data-value="2"></span>
+            <span class="marker" data-value="3"></span>
+            <span class="marker" data-value="4"></span>
+        </span>
+    </div>
+
+    <script>
+        var bars = document.querySelectorAll(".sub_experiance");
+    
+        bars.forEach(bar => {
+            var value = bar.getAttribute("data-value");
+            
+            // 0 - 5
+            if (value == 0) {
+                bar.style.width = "20%";
+            } else if (value == 1) {
+                bar.style.width = "40%";
+            } else if (value == 2) {
+                bar.style.width = "60%";
+            } else if (value == 3) {
+                bar.style.width = "80%";
+            } else if (value == 4) {
+                bar.style.width = "100%";
+            } else if (value == 5) {
+                bar.style.width = "621%";
+            }
+        });
+
+        var markers = document.querySelectorAll(".marker");
+    
+        markers.forEach(bar => {
+            var value = bar.getAttribute("data-value");
+            
+            // 0 - 5
+            if (value == 0) {
+                bar.style.left = "20%";
+            } else if (value == 1) {
+                bar.style.left = "40%";
+            } else if (value == 2) {
+                bar.style.left = "60%";
+            } else if (value == 3) {
+                bar.style.left = "80%";
+            } else if (value == 4) {
+                bar.style.left = "100%";
+            } else if (value == 5) {
+                bar.style.left = "621%";
+            }
+        });
+    </script>
+{% endblock %}

templates/cretura.html

@@ -0,0 +1,23 @@
+{% extends 'layout.html' %}
+{% block nav_cretura %}selected{% endblock %}
+
+{% block content %}
+    <h1 data-value="Cretura">Cretura</h1>
+    <p class="subtitle" data-value="Thanks to these critters!">Thanks to these critters!</p>
+
+    <div class="content" id="about">
+        <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, also my smelly brother</p>
+        <p>Zadok: Silly taidum art on the icon of this page!</p>
+        <!--
+        <p>
+            Shep: Provided free YCH, 
+            <a href="https://twitter.com/ShepGoesBlep/status/1563946805062148102?s=20&t=0wVGqoYa74AsjSSnkZbzjA">you can find it here</a>
+        </p>
+        <img src="{{ url_for('static', filename='images/sneak.png') }}" alt="Orange maned wolf sneaking under a yellow sheet" height="200px" style="opacity:0" onload="fadeOnLoad(this)">
+        -->
+    </div>
+
+    <img src="{{url_for('static', filename='images/ny.png')}}">
+{% endblock %}

templates/error.html

@@ -0,0 +1,7 @@
+{% extends 'layout.html' %}
+{% block content %}
+    <div class="content">
+        <h1 data-value="{{error}}">{{error}}</h1>
+        <p class="subtitle" data-value="{{msg}}">{{msg}}</p>
+    </div>
+{% endblock %}

templates/index.html

@@ -0,0 +1,28 @@
+{% extends 'layout.html' %}
+{% block nav_home %}selected{% endblock %}
+
+{% block content %}
+    <div class="content">
+        <h1 data-value="Social-Media">Social-Media</h1>
+        <p class="subtitle" data-value="{{msg}}">{{msg}}</p>
+    </div>
+
+    <div class="content">
+        <a href="https://twitter.com/fluffybeanUwU" class="btn" data-value="Twitter">Twitter</a>
+        <a href="https://meow.social/@Fluffy_Bean" class="btn" data-value="Mastodon">Mastodon</a>
+        <a href="https://t.me/Fluffy_Bean" class="btn" data-value="Telegram">Telegram</a>
+        <a href="https://github.com/Fluffy-Bean" class="btn" data-value="Github">Github</a>
+        <button class="btn" data-value="Discord" id="discord">Discord</button>
+    </div>
+
+    <script>
+        document.getElementById("discord").onclick = function() {
+            try {
+                navigator.clipboard.writeText("Fluffy Bean#5212");
+                addToast("Copied to clipboard");
+            } catch (err) {
+                addToast("Error copying to clipboard, are you on HTTP?");
+            }
+        }
+    </script>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,27 @@
+<!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>
+    <meta name="description" content="Fluffy Bean's amazing website">
+    <link rel="icon" href="{{url_for('static', filename='images/taidum.png')}}">
+    <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
+    <script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
+</head>
+<body>
+    <nav>
+        <a class="{% block nav_home %}{% endblock %}" href="/">Home</a>
+        <a class="{% block nav_about %}{% endblock %}" href="/about">About</a>
+        <a class="{% block nav_cretura %}{% endblock %}" href="/cretura">Cretura</a>
+        <span class="spacer"></span>
+        <a class="{% block nav_music %}{% endblock %}" href="/music">Music</a>
+    </nav>
+
+    <div class="wrapper">
+        {% block content %} {% endblock %}
+    </div>
+
+    <div class="toast-container"></div>
+</body>
+</html>

templates/music.html

@@ -0,0 +1,103 @@
+{% extends 'layout.html' %}
+{% block nav_music %}selected{% endblock %}
+
+{% block content %}
+    <h1 data-value="Muuuuuuusic">Muuuuuuusic</h1>
+
+    <div class="music">
+        <span class="loader"></span>
+    </div>
+
+    <div class="content">
+        <p>Provided by <a href="http://www.last.fm">Last.fm</a></p>
+    </div>
+
+    <script>
+        function processMusic(data) {
+            const music = document.querySelector('.music');
+            music.innerHTML = '';
+            
+            data = JSON.parse(data);
+
+            Object.entries(data).forEach(([key, value]) => {
+                // Create track container
+                const track = document.createElement('div');
+                track.classList.add('track');
+
+                // Create track image container
+                const trackImage = document.createElement('span');
+                trackImage.classList.add('track-image');
+                // UUUUUUUUUGHHHHHHHHHH
+                trackImage.style.backgroundColor = `rgb(${value.palette[0]}, ${value.palette[1]}, ${value.palette[2]})`;
+                // Create track image
+                const trackImageImg = document.createElement('img');
+                trackImageImg.src = value.image;
+                trackImage.appendChild(trackImageImg);
+
+
+                // Create track info container
+                const trackInfo = document.createElement('div');
+                trackInfo.classList.add('track-info');
+
+                // Create track title
+                const trackTitle = document.createElement('a');
+                trackTitle.href = value.url;
+                trackTitle.innerHTML = value.name;
+
+                // Create track artist
+                const trackArtist = document.createElement('p');
+                trackArtist.innerHTML = 'by ' + value.artist;
+
+                // If track is now playing, add now playing text
+                // Else add album name
+                if (value.nowPlaying) {
+                    const trackNowPlaying = document.createElement('p');
+                    trackNowPlaying.classList.add('track-nowplaying');
+                    trackNowPlaying.innerHTML = 'Now Playing:';
+
+                    // Append now playing and track info to track info
+                    trackInfo.appendChild(trackNowPlaying);
+                    trackInfo.appendChild(trackTitle);
+                    trackInfo.appendChild(trackArtist);
+                } else {
+                    const trackAlbum = document.createElement('p');
+                    trackAlbum.innerHTML = 'on ' + value.album;
+
+                    // Append track title, artist and album to track info
+                    trackInfo.appendChild(trackTitle);
+                    trackInfo.appendChild(trackArtist);
+                    trackInfo.appendChild(trackAlbum);
+                }
+
+                // Append track image and track info to track
+                track.appendChild(trackImage);
+                track.appendChild(trackInfo);
+
+                // Append track to music
+                music.appendChild(track);
+            });
+        }
+
+        // Make POST request with XHR
+        let xhr = new XMLHttpRequest();
+        xhr.open('POST', '/music', true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.send(JSON.stringify({}));
+
+        // Handle response
+        xhr.onloadend = function () {
+            if (xhr.readyState == XMLHttpRequest.DONE) {
+                // check if no error occurred
+                if (xhr.status == 200) {
+                    processMusic(xhr.responseText);
+                } else {
+                    const music = document.querySelector('.music');
+                    music.innerHTML = '<p>Music data could not be loaded :<</p>';
+                }
+            } else {
+                const music = document.querySelector('.music');
+                music.innerHTML = '<p>Music data could not be loaded :<</p>';
+            }
+        };
+    </script>
+{% endblock %}