Merge pull request #1 from Fluffy-Bean/v4

V4
2024-12-26 17:26:06 +00:00 · 2022-11-12 20:47:50 +00:00 · 2022-11-12 20:47:50 +00:00 · 7bfa30a8f4
parent 5dab307513 6a350dbb59
commit 7bfa30a8f4
61 changed files with 1309 additions and 608 deletions
--- a/README.md
+++ b/README.md
@ -1,40 +0,0 @@
-# Weeeeebsite stuffs
-
-This page is not made for public use, but I upload the code to this page for people to see how it looks like behind the scenes.
-
-## how
-This page contains PHP so it is not possible to run in the average browser, it must be ran with a LocalHost or web server.
-If you're willing to remove the PHP contents and rename the index to .html it should be possble to run in a normal browser.
-
-For anyone curious, no, I did not use any special software or tools to generate/compile the CSS or HTML (excluding the PHP).
-It is all written by hand, so pleeeeease help me fix problems, thank youuu.
-
-## ToDo
-
-### Gallery
-  - [ ] Make proper PHP gallery
-  - [ ] Add image Database with alt tags
-
-
-### Upload
-  - [ ] Login system
-  - [ ] Upload section
-
-### Blog
-  - [ ] Links to blogs
-  - [ ] Generating page with PHP from database
-
-### Contact section
-  - [ ] Make telegram bot with python
-  - [ ] PHP section on page with information filling out
-  - [ ] Make them somehow communicate 💀
-
-### Bruh
-  - [x] Big bruh
-
-## Legal
-Art on the page is all items that belong to me
-
-Photos (excluding the raccoons) are my own
-
-The background image does not belong to me
--- a/app.js
+++ b/app.js
@ -0,0 +1,96 @@
+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";
+    
+    document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px";
+    document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px";
+}
+
+
+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)`;
+        }
+    });
+}
+
+document.querySelector("#refsheet").onclick = function() {
+    $('.nav-item')[3].click();
+}
+
+document.querySelector("#twitter_btn").onclick = function() {
+    window.open("https://twitter.com/fluffybeanUwU", "_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");
+    //console.log("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);
+}
+
+$(document).ready(function() {
+    // Assign scroll to all sections
+    scrollFunction("#Home", 0);
+    scrollFunction("#Hobbies", 1);
+    scrollFunction("#Experiance", 2);
+    scrollFunction("#Gallery", 3);
+
+    // get GET parameters
+    const urlParams = new URLSearchParams(window.location.search);
+    const tab = urlParams.get('t');
+
+    // 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();
+    }
+});
--- a/bg.jpg
+++ b/bg.jpg
--- a/css/_footer.scss
+++ b/css/_footer.scss
@ -0,0 +1,37 @@
+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: $black200;
+
+  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;
+  }
+}
--- a/css/_hero.scss
+++ b/css/_hero.scss
@ -0,0 +1,113 @@
+.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;
+
+    font-family: $font-header;
+    font-size: 2.5rem;
+    font-weight: 800;
+    font-stretch: ultra-expanded;
+
+    color: $white;
+
+    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 {
+    font-size: 1.5rem;
+  }
+
+  p {
+    display: none;
+  }
+
+  img {
+    opacity: 0;
+  }
+}
--- a/css/_nav.scss
+++ b/css/_nav.scss
@ -0,0 +1,86 @@
+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);
+}
--- a/css/_variables.scss
+++ b/css/_variables.scss
@ -0,0 +1,49 @@
+// 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;
+}
--- a/css/fonts/Hubot-Sans.woff2
+++ b/css/fonts/Hubot-Sans.woff2
--- a/css/fonts/Mona-Sans.woff2
+++ b/css/fonts/Mona-Sans.woff2
--- a/css/footer.css
+++ b/css/footer.css
@ -1,32 +0,0 @@
-/*
-  Footer
-*/
-
-footer {
-  margin: auto; padding: 1rem;
-  width: auto;
-
-  display: flex; flex-direction: row; flex-wrap: wrap;
-  justify-content: space-around; align-items: center;
-
-  background-color: var(--bg); color: var(--fg);
-
-  border-radius: var(--rad);
-
-  box-shadow: var(--shadow);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-}
-footer * {
-  margin: 0; padding: 0;
-  display: block;
-}
-footer div {
-  width: 18rem;
-  justify-content: center; align-content: center;
-  text-align: center;
-}
-footer div h3 {
-  margin-bottom: 0.5rem;
-}
--- a/css/main.css
+++ b/css/main.css
@ -1,111 +0,0 @@
-/*
-  Main
-*/
-section {
-  margin: 5rem 0; padding: 1rem;
-  width: auto;
-
-  background-color: var(--bg); color: var(--fg);
-
-  border-radius: var(--rad);
-
-  box-shadow: var(--shadow);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-}
-section * {
-  margin: 0 0 0.5rem; padding: 0;
-  max-width: 100%; width: auto; min-width: none;
-
-  border-radius: 5px;
-}
-section *:last-child {
-  margin-bottom: 0;
-}
-section img {
-  margin-bottom: 0.5rem;
-  height: auto;
-}
-section p, section a {
-  margin-bottom: 0.5rem;
-}
-
-/*
-  I suck at CSS
-*/
-#experience img {
-  display: block;
-}
-
-#spotify {
-  display: flex;
-  flex-direction: column;
-}
-
-#projects div {
-  display: flex; flex-direction: row;
-  justify-content: space-around;
-}
-#projects div img {
-  margin-right: 1rem; margin-bottom: 0;
-  height: 150px; width: 150px;
-}
-#projects div img:last-child {
-  margin: 0;
-}
-
-/*
-  Gallery
-*/
-.gallery-image {
-  margin-bottom: 1rem; padding: 0;
-  width: 100%; height: 30rem;
-  object-fit: contain;
-
-  display: block;
-
-  background-color: var(--bg-1);
-}
-
-.gallery {
-  margin: 0; padding: 0;
-  height: 10rem;
-
-  display: flex; flex-direction: row;
-  overflow-x: scroll;
-
-  user-select: none;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.gallery:hover {
-  cursor: grab;
-}
-.gallery::-webkit-scrollbar {
-  display: none;
-}
-
-.gallery img {
-  margin: 0 0.5rem;
-
-  height: 10rem;
-  max-width: 46%; width: auto;
-
-  object-fit: cover;
-
-  user-select: none;
-
-	transition: transform 0.2s cubic-bezier(0,.76,0,1);
-}
-.gallery img:hover {
-  outline: 0.3rem var(--green) solid;
-  transform: scale(0.9);
-}
-
-.gallery img:first-child {
-  margin-left: 0;
-}
-.gallery img:last-child {
-  margin-right: 0;
-}
--- a/css/nav.css
+++ b/css/nav.css
@ -1,59 +0,0 @@
-/*
-  Nav
-*/
-nav {
-  margin: auto; padding: 1rem;
-  width: auto;
-
-  position: sticky; top: 1rem;
-  z-index: 999;
-
-  display: flex; flex-direction: row;
-  justify-content: space-between; align-items: center;
-
-  background-color: var(--bg); color: var(--fg);
-
-  border-radius: var(--rad);
-
-  box-shadow: var(--shadow);
-
-  border: 0.2rem solid var(--green);
-  outline: 0.5rem solid var(--bg);
-}
-nav * {
-  margin: 0; padding: 0;
-}
-
-.nav-logo {
-  display: flex; flex-direction: row;
-}
-.nav-logo img {
-  margin: 0; padding: 0;
-  height: 2rem; width: auto;
-
-  transform: rotate(-25deg) scale(3.5);
-}
-.nav-logo h2 {
-  margin: 0 0 0 2rem; padding: 0;
-  font-size: 28px;
-  font-weight: 900;
-}
-
-.nav-links * {
-  margin: 0 0.2rem; padding: 0;
-
-  color: var(--fg);
-
-  text-align: right; text-decoration: none;
-
-  font-weight: bolder;
-}
-
-@media (max-width:569px) {
-  .nav-logo h2 {
-    display: none;
-  }
-  nav {
-    position: static;
-  }
-}
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,437 @@
+@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: #121212;
+}
+
+#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;
+  font-family: "Mona-Sans", sans-serif;
+  font-size: 2.5rem;
+  font-weight: 800;
+  font-stretch: ultra-expanded;
+  color: #e8e5e5;
+  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 {
+  font-size: 1.5rem;
+}
+.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("../leaves.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: #8c977d;
+  -webkit-text-decoration: underline 0.1rem #151515;
+          text-decoration: underline 0.1rem #151515;
+  transition: -webkit-text-decoration 0.2s ease-in-out;
+  transition: text-decoration 0.2s ease-in-out;
+  transition: text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
+}
+.content a:hover {
+  color: #e8e5e5;
+  -webkit-text-decoration: underline 0.3rem #8c977d;
+          text-decoration: underline 0.3rem #8c977d;
+}
+.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 */
--- a/css/style.css.map
+++ b/css/style.css.map
@ -0,0 +1 @@
+{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
--- a/css/style.scss
+++ b/css/style.scss
@ -0,0 +1,297 @@
+@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: $green;
+
+    text-decoration: underline 0.1rem $black;
+  
+    transition: text-decoration 0.2s ease-in-out;
+
+    &:hover {
+      color: $white;
+      text-decoration: underline 0.3rem $green;
+    }
+  }
+
+  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;
+    color: $green;
+    border-left: 0.9rem solid $green;
+
+    p {
+      color: inherit;
+    }
+  }
+}
--- a/gallery/animal_booper.webp
+++ b/gallery/animal_booper.webp
--- a/gallery/animal_doggy.gif
+++ b/gallery/animal_doggy.gif
--- a/gallery/animal_doggys.webp
+++ b/gallery/animal_doggys.webp
--- a/gallery/animal_farmer.webp
+++ b/gallery/animal_farmer.webp
--- a/gallery/animal_goob.webp
+++ b/gallery/animal_goob.webp
--- a/gallery/animal_smile.webp
+++ b/gallery/animal_smile.webp
--- a/gallery/animal_snooooooot.webp
+++ b/gallery/animal_snooooooot.webp
--- a/gallery/animal_snooot.webp
+++ b/gallery/animal_snooot.webp
--- a/gallery/fluffy_hi.webp
+++ b/gallery/fluffy_hi.webp
--- a/gallery/fluffy_no-bitches.webp
+++ b/gallery/fluffy_no-bitches.webp
--- a/gallery/fluffy_rat.webp
+++ b/gallery/fluffy_rat.webp
--- a/gallery/fluffy_sad.webp
+++ b/gallery/fluffy_sad.webp
--- a/gallery/fluffy_stretch.webp
+++ b/gallery/fluffy_stretch.webp
--- a/gallery/fluffy_taidum.webp
+++ b/gallery/fluffy_taidum.webp
--- a/gallery/photo_beach.webp
+++ b/gallery/photo_beach.webp
--- a/gallery/photo_fire.webp
+++ b/gallery/photo_fire.webp
--- a/gallery/photo_friend.webp
+++ b/gallery/photo_friend.webp
--- a/gallery/photo_funny.webp
+++ b/gallery/photo_funny.webp
--- a/gallery/photo_funny2.webp
+++ b/gallery/photo_funny2.webp
--- a/gallery/photo_lamp.webp
+++ b/gallery/photo_lamp.webp
--- a/gallery/photo_land.webp
+++ b/gallery/photo_land.webp
--- a/gallery/photo_nice.webp
+++ b/gallery/photo_nice.webp
--- a/gallery/photo_rocks.webp
+++ b/gallery/photo_rocks.webp
--- a/gallery/photo_spook.webp
+++ b/gallery/photo_spook.webp
--- a/gallery/photo_stars.webp
+++ b/gallery/photo_stars.webp
--- a/gallery/photo_sunset2.webp
+++ b/gallery/photo_sunset2.webp
--- a/gallery/photo_train.webp
+++ b/gallery/photo_train.webp
--- a/images/Black_Candy.svg
+++ b/images/Black_Candy.svg
@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-    <title>Icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <circle id="path-1" cx="60" cy="60" r="60"></circle>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
-            <stop stop-color="#B932B4" offset="0%"></stop>
-            <stop stop-color="#A15ABF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="iOS-App-Icon-Template" transform="translate(-700.000000, -918.000000)">
-            <g id="Icon" transform="translate(700.000000, 918.000000)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="Mask" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
-                <rect id="Background" fill="url(#linearGradient-3)" mask="url(#mask-2)" x="0" y="0" width="120" height="120" rx="8"></rect>
-                <g id="candy_center" mask="url(#mask-2)">
-                    <g transform="translate(-11.015625, -11.015625)">
-                        <g id="Group-3" stroke-width="1" fill="none">
-                            <rect id="Rectangle" fill-opacity="0" fill="#979797" x="0.0984177292" y="-2.72848411e-12" width="141.390931" height="142.321135"></rect>
-                            <g id="Group-4" transform="translate(82.186031, 95.278637)" fill="#BFBFBF">
-                                <path d="M0.434938326,4.06834176 C-0.0601257408,3.16934676 0.262561716,2.03659828 1.15568093,1.53827721 L3.34592849,0.316215837 C4.2390477,-0.18210523 5.3643926,0.142705172 5.85945667,1.04170017 L31.034918,46.7582356 C31.1078142,46.890609 23.7211824,46.7881635 23.7194705,46.8448567 L0.434938326,4.06834176 Z" id="Combined-Shape"></path>
-                            </g>
-                            <g id="Group-2" transform="translate(70.793883, 71.160567) rotate(-29.000000) translate(-70.793883, -71.160567) translate(37.077584, 39.193051)">
-                                <path d="M64.9876945,31.9364977 C64.9876945,14.2984571 51.1037197,-3.26849658e-13 33.9769689,-3.26849658e-13 C16.8502181,-3.26849658e-13 2.96624332,14.2984571 2.96624332,31.9364977" id="Path" fill="#121212"></path>
-                                <path d="M64.718036,63.8729955 C64.718036,46.2349548 50.8340612,31.9364977 33.7073104,31.9364977 C16.5805596,31.9364977 2.69658483,46.2349548 2.69658483,63.8729955" id="Path" fill="#3B3B3B" transform="translate(33.707310, 47.904747) rotate(180.000000) translate(-33.707310, -47.904747) "></path>
-                                <rect id="Rectangle" fill="#212121" x="-2.84217094e-13" y="28.6039936" width="67.4146208" height="6.9427169" rx="2.8125"></rect>
-                                <path d="M48.8458177,2.22549734 L49.7390049,2.21245315 C51.1973426,2.19115526 52.4946974,3.13501834 52.9232945,4.5291155 C53.8549926,7.55964861 54.2996139,10.5240001 54.2571584,13.42217 C54.2146837,16.321654 53.6846903,19.1548963 52.6671784,21.921897 C52.1985091,23.1963663 50.9932321,24.0504868 49.6354657,24.0703158 L48.525574,24.0865247 C47.2966826,24.1044716 46.2859204,23.122807 46.2679736,21.8939156 C46.2644381,21.6518298 46.3004321,21.4107895 46.3745472,21.1803009 C47.2469789,18.4667168 47.7027898,15.7722934 47.7419799,13.0970305 C47.7806772,10.4554079 47.4131655,7.83246703 46.6394448,5.2282079 C46.2717992,3.9908081 46.9768901,2.68967029 48.2142944,2.32203972 C48.4193912,2.26110582 48.6318834,2.22862166 48.8458177,2.22549734 Z" id="Rectangle" fill="#EDEDED" transform="translate(49.761751, 13.156011) rotate(-48.000000) translate(-49.761751, -13.156011) "></path>
-                            </g>
-                        </g>
-                        <path d="M98.4771434,97.2482373 C98.7164514,97.2475707 98.9109892,97.4410278 98.9116557,97.6803358 C98.911658,97.681139 98.911658,97.6819422 98.9116558,97.6827454 L98.7987801,138.348956 C98.798111,138.589989 98.6028823,138.78522 98.3618489,138.785891 C98.1225409,138.786558 97.9280031,138.5931 97.9273366,138.353792 C97.9273343,138.352989 97.9273343,138.352186 97.9273366,138.351383 L98.0402123,97.6851727 C98.0408813,97.4441392 98.23611,97.2489087 98.4771434,97.2482373 Z" id="Rectangle" fill="#FFFFFF" transform="translate(98.419496, 118.017064) rotate(-29.000000) translate(-98.419496, -118.017064) "></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/images/Nextcloud.webp
+++ b/images/Nextcloud.webp
--- a/images/bg-2.png
+++ b/images/bg-2.png
--- a/images/bg-3.png
+++ b/images/bg-3.png
--- a/images/bg-4.jpg
+++ b/images/bg-4.jpg
--- a/images/bg-5.svg
+++ b/images/bg-5.svg
--- a/images/bg-6.svg
+++ b/images/bg-6.svg
--- a/images/bg.jpg
+++ b/images/bg.jpg
--- a/images/sussywussy.png
+++ b/images/sussywussy.png
--- a/img/funny.jpg
+++ b/img/funny.jpg
--- a/gallery/photo_landscape.webp
+++ b/gallery/photo_landscape.webp
--- a/gallery/fluffy_VRchat-meet-2021.webp
+++ b/gallery/fluffy_VRchat-meet-2021.webp
--- a/images/ref.png
+++ b/images/ref.png
--- a/img/sad.png
+++ b/img/sad.png
--- a/img/sneak.png
+++ b/img/sneak.png
--- a/images/fluffy.png
+++ b/images/fluffy.png
--- a/index.php
+++ b/index.php
@ -1,193 +1,221 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="Hell">
-	<meta name="theme-color">
-  <title>Fluffy's funky website</title>
-	<link rel="icon" type="image/x-icon" href="images/fluffy.png">
-	<!-- Style -->
-	<link rel="stylesheet" href="stylesheet.css">
-	<!-- Fonts -->
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&amp;display=swap">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&amp;display=swap">
+    <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>

-  <nav>
-		<div class="nav-logo">
-			<img src="images/fluffy.png">
-			<h2><span class="fluffy-colour">Fluffy's hell</span></h2>
-		</div>
-		<div class="nav-links">
-			<a href="https://twitter.com/fluffybeanUwU">Twitter</a>
-			<a href="http://t.me/Fluffy_Bean">Telegram</a>
-			<a href="https://github.com/Fluffy-Bean">Github</a>
-			<p>Discord:&nbsp;Fluffy&nbsp;Bean#5212</p>
-		</div>
-  </nav>
+            <button onclick="openTab(event, 'Hobbies')" class="nav-item">
+                <p>Hobbies</p>
+            </button>

-	<main>
-		<section id="intro" class="center">
-			<h1>Fluffy's Swagger Website</h1>
-			<p>This is supposed to be a descriptive intro line, but I don't feel like writing this</p>
-		</section>
+            <button onclick="openTab(event, 'Experiance')" class="nav-item">
+                <p>Experiance</p>
+            </button>

-		<section id="summary" >
-			<h2>Summary</h2>
-			<p>Hi! I'm <span class="fluffy-colour">Fluffy Bean</span>. I'm a 17 year old who found himself on the internet one day and became a furry! (And a developer)</p>
-		</section>
+            <button onclick="openTab(event, 'Gallery')" class="nav-item">
+                <p>Gallery</p>
+            </button>

-		<section id="interests" >
-			<h2>My interests</h2>
-			<p>I am very interested in computers from any era, mainly the software side of them. I always tinkered with them from a very young age, and broke many computers and laptops on the way, but that didn’t stop me! Look where I am now dad, it was worth it.</p>
-			<p>Unsurprisingly that led me to using Linux, Arch btw, which gives me access to many more cool thingys to play around with like a proper terminal with no batch crap.</p>
-			<p>I also enjoy listening to music, a lot of it, and which leads me nicely to my next part, Rhythm games!The main 2 titles I enjoy playing are Beat Saber and Spin Rhythm XD, but I also enjoy playing other games like Minecraft, The Witcher 3 and the Half Life and Portal series.</p>
-		</section>
+            <span id="nav-item_underline"></span>
+        </nav>

-		<section id="experience" >
-			<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" class="center">
-		</section>
+        <div class="main">
+            <div id="Home" class="tabContent">
+                <div id="hero" class="hero">
+                    <img src="img/sad.png">
+                    <h1>O, hi stranger</h1>
+                    <p>I'm a smelly Maned Wolf that goes by Fluffy Bean. I'm 17 years old that has weird interests</p>
+                </div>

-		<section id="pc" >
-			<h2>System configuration</h2>
-			<h3>Operating system</h3>
-			<img src="images/sussywussy.png" alt="Screenshot of Linux desktop environment" loading="lazy">
-			<p>My main operating system is Arch Linux, in this screenshot you can see a "rice" of Rofi and Polybar! <a href="https://github.com/Fluffy-Bean/dots">Which you can see here</a>!</p>
-			<p>My secondary operating system is Windows 10 just for VR</p>
+                <span class="heroSpacing"></span>

-			<h3>Hardware</h3>
-			<p>For my PC case, I'm using an NZXT H510 (white) covered with a bunch of stickers and magnets.</p>
-			<p>But for whats inside is a bit more interesting. I am using a Gigabyte X570 AORUS ELITE motherboard, pared with an AMD 5 3600. Cooling that is a be quiet! Pure Rock 2.</p>
-			<p>Thats with 16GBs (2x8) of DDR4-3600 ram from Corsair, with an Nvidia GTX1060 (6gb) Zotac AMP edition.</p>
-			<p>Which is all powered by a Corsair 550W 80+ Gold power supply.</p>
-			<p>For storage I am using a Hitachi Deskstar that has 2TBs of storage for my games and larger files. For my boot SSD I am using a Samsung 980 1TB M.2 NVMe.</p>
+                <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="telegram_btn">
+                        <p>Telegram</p>
+                        <i class="ph-telegram-logo c_purple"></i>
+                    </button>
+                    <button class="btn_large" id="github_btn">
+                        <p>Github</p>
+                        <i class="ph-github-logo c_yellow"></i>
+                    </button>
+                    <button class="btn_large" id="discord_btn">
+                        <p>Discord</p>
+                        <i class="ph-discord-logo c_green"></i>
+                    </button>

-			<h3>Equipment</h3>
-			<p>My keyboard is a Razer Blackwiddow X Chroma that has been through too much. To go with that I have a Logitech g502 mouse with a Hyena Agenda mouse mat.</p>
-			<p>For my monitor I have a BenQ MOBIUZ EX2510. For VR I have a normal CV1 with 2 cameras.</p>
-			<p>Headphones are very important to me, as I use them for hours at a time everyday and listen to a lot of music, so I got myself Steelseries Arctis 3 (only to be very dissapointed with the mic and build quality). I also enjoy playing some games with a controller so I have a modded Xbox One S controller.</p>
+                    <br>

-			<h3>Server</h3>
-			<p>My server is a simple Zotac ZBOX-CI527.</p>
-			<p>It still has the base 8GBs of ram and i5-7200U CPU. But I upgraded it with a 120GB SSD.</p>
-			<p>And it is running a Proxmox server with many many LXC containers because why not :3</p>
-		</section>
+                    <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>

-		<section id="projects">
-			<h2>Current projects</h2>
-			<p>Other than this website I also have been working on hosting these:</p>
-			<div>
-				<img src="images/Nextcloud.webp" alt="Nextcloud Logo">
-				<img src="images/Black_Candy.svg" alt="Black Candy Logo">
-			</div>
-		</section>
+                    <br>

-		<section id="thanks">
-			<h2>Special Thanks</h2>
-			<p>To <span class="jeetix-colour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running!</p>
-			<p>And to <span class="carty-colour">Carty</span> for teaching me how to run servers and the networking required to keep sites online!</p>
-			<p><span class="mrhdash-colour">mrHDash</span> for the <a href="#refsheet">Ref Sheet</a> and most other art on the page!</p>
-			<p>To <span class="zadok-colour">Zadok</span> for the silly taidum art in the nav bar!</p>
-		</section>
+                    <img src="img/taidum.png" alt="Orange maned wolf sona in Taidum form">
+                </div>
+            </div>

-		<section id="gallery">
-			<h2>Random pictures lol</h2>
-			<img src="gallery/fluffy_VRchat-meet-2021.webp" class="gallery-image" alt="No alt for these images at the moment, I am very sorry">
-			<div class="gallery" draggable="false">
-				<?php
-				$images = glob("gallery/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);
-				foreach ($images as $i) {
-					printf('<img src="gallery/%s" draggable="false" loading="lazy"/>',
-						basename($i)
-					);
-				}
-				?>
-			</div>
-			<script src="scripts/gallery.js"></script>
-		</section>
+            <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>

-		<section id="refsheet">
-			<h2>Refsheet</h2>
-			<img src="images/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>
-		</section>
+                <span class="heroSpacing"></span>

-		<section id="jokes" >
-			<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>
-		</section>
+                <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>
+                    -->

-		<section id="spotify" >
-			<h2>Mah Music taste!</h2>
-			<p>Here I will put (most) of the music I enjoy listening too!</p>
-			<h3>Ma Spotify playlists</h3>
-			<iframe src="https://open.spotify.com/embed/playlist/5e4iqBdioVN56hz1KCYWNi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
-			<iframe src="https://open.spotify.com/embed/playlist/37vWcad8w7GBvNIZUkDxEi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
+                    <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>Music flavours</h3>
-			<h4>Rock/Metal</h4>
-			<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>
+                    <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>

-			<h4>EDM/Electronic</h4>
-			<p>acloudyskye</p>
-			<p>Conro</p>
-			<p>Pixel Terror</p>
+                    <br>

-			<h4>Chill</h4>
-			<p>M38</p>
-			<p>C148</p>
-			<p>The Rare Occasion</p>
-			<p>Cavetown</p>
-			<p>Daughter</p>
-			<p>Low Roar</p>
+                    <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">

-			<h4>Other</h4>
-			<p>Gorillaz</p>
-			<p>Joywave</p>
+                    <br>

-			<h3>Well...</h3>
-			<p>I listen to everything, but feel free to complain to me about my choices!</p>
-		</section>
-	</main>
+                    <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>

-	<footer>
-		<div>
-			<h3>Direct Contact</h3>
-			<a href="http://t.me/Fluffy_Bean">Telegram</a>
-			<a href="https://twitter.com/fluffybeanUwU">Twitter</a>
-		</div>
-		<div>
-			<h3>Page status</h3>
-			<p>Last updated 13 Jul 2022</p>
-			<p>Made and designed by <span class="fluffy-colour">Fluffy</span></p>
-		</div>
-		<div>
-			<h3>Other works</h3>
-			<a href="https://github.com/Fluffy-Bean">Github</a>
-			<a href="https://testing.fluffybean.gay">Testing Page</a>
-		</div>
-	</footer>
+                    <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">12 Nov</span></p>
+        </footer>
+
+        <script src="app.js"></script>
+    </main>
 </body>
-</html>
+
+</html>
--- a/scripts/gallery.js
+++ b/scripts/gallery.js
@ -1,34 +0,0 @@
-document.querySelectorAll(".gallery img").forEach(image =>{
-  image.onclick = () =>{
-    document.querySelector(".gallery-image").src = image.getAttribute("src");
-  }
-});
-
-const slider = document.querySelector(".gallery");
-let isDown = false;
-let startX;
-let scrollLeft;
-
-slider.addEventListener("mousedown", (e) => {
-  isDown = true;
-  startX = e.pageX - slider.offsetLeft;
-  scrollLeft = slider.scrollLeft;
-
-  document.querySelector(".gallery").style.cursor= "grabbing";
-});
-slider.addEventListener("mouseleave", () => {
-  isDown = false;
-
-  document.querySelector(".gallery").style.cursor= "grab";
-});
-slider.addEventListener("mouseup", () => {
-  isDown = false;
-
-  document.querySelector(".gallery").style.cursor= "grab";
-});
-slider.addEventListener("mousemove", (e) => {
-  if (!isDown) return;
-  const x = e.pageX - slider.offsetLeft;
-  const walk = x - startX;
-  slider.scrollLeft = scrollLeft - walk;
-});
--- a/stylesheet.css
+++ b/stylesheet.css
@ -1,124 +0,0 @@
-@import "css/nav.css";
-@import "css/main.css";
-@import "css/footer.css";
-
-:root {
-  --bg: #151515df;
-  --bg-1: #242621;
-  --bg-2: #1D1E1C;
-
-  --fg:#E8E3E3;
-  --fg-dark: #151515;
-
-  --shadow: 6px 6px 10px #15151588;
-  --rad: 5px;
-
-  --orange: #FF7700;
-  --orange-alt: #E0863E;
-  --green: #8C977D;
-}
-* {
-  font-weight: 400;
-}
-
-html {
-  margin: 0; padding: 0;
-
-  background-color: var(--bg-2);
-  background-image: url("images/bg-6.svg");
-
-  height: 100vh;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-}
-body {
-  margin: 0 auto; padding: 1rem;
-  max-width: 969px; width: auto; min-width: none;
-
-  background-color: var(--bg-1);
-  background: none;
-}
-
-p,a {
-  font-family: "Fira Code", monospace;
-}
-
-h1,h2,h3,h4 {
-  font-family: "Lexend Deca", sans-serif;
-  font-weight: 600;
-  color: var(--green);
-}
-h1 {
-  font-size: 40px;
-}
-h2 {
-  font-size: 30px;
-}
-h3 {
-  font-size: 23px;
-}
-h4 {
-  font-size: 19px;
-}
-
-a {
-  color: var(--green);
-  text-decoration: none;
-  font-weight: bold;
-}
-a:hover {
-  color: var(--orange);
-  font-weight: bolder;
-}
-a:focus {
-  color: var(--orange);
-}
-a:active {
-  color: var(--orange-alt);
-}
-a:visited {
-  text-decoration: underline;
-}
-
-hr {
-  height: 0.2rem;
-
-  background-color: var(--green);
-}
-
-span {
-  display: inline;
-}
-.carty-colour {
-	color: #C29356;
-  font-weight: bold;
-}
-.jeetix-colour {
-	color: cadetblue;
-  font-weight: bold;
-}
-.fluffy-colour {
-	color: #FF851B;
-  font-weight: bold;
-}
-.mrhdash-colour {
-	color: #a58fb6;
-  font-weight: bold;
-}
-.zadok-colour {
-	color: #542b00;
-  font-weight: bold;
-}
-
-.gray-info {
-  font-style: italic;
-  opacity: 0.6;
-  z-index: inherit;
-}
-.center {
-  margin-left: auto; margin-right: auto;
-  justify-content: center;
-  text-align: center;
-}
				`@ -0,0 +1 @@`
				{"version":3,"sources":["_variables.scss","style.css","_nav.scss","_hero.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}