diff --git a/README.md b/README.md deleted file mode 100644 index ae0faef..0000000 --- a/README.md +++ /dev/null @@ -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 diff --git a/app.js b/app.js new file mode 100644 index 0000000..2693d56 --- /dev/null +++ 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 = "

Copied!

"; + this.style.backgroundColor = "#8c977d"; + this.style.color = "#151515"; + + setTimeout(() => { + this.innerHTML = "

Discord

"; + 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(); + } +}); \ No newline at end of file diff --git a/css/_footer.scss b/css/_footer.scss new file mode 100644 index 0000000..dc68640 --- /dev/null +++ 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; + } +} diff --git a/css/_hero.scss b/css/_hero.scss new file mode 100644 index 0000000..db0e1d0 --- /dev/null +++ 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; + } +} diff --git a/css/_nav.scss b/css/_nav.scss new file mode 100644 index 0000000..0b2524b --- /dev/null +++ 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); +} diff --git a/css/_variables.scss b/css/_variables.scss new file mode 100644 index 0000000..16bf4b1 --- /dev/null +++ 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; +} diff --git a/css/fonts/Hubot-Sans.woff2 b/css/fonts/Hubot-Sans.woff2 new file mode 100644 index 0000000..5089fc4 Binary files /dev/null and b/css/fonts/Hubot-Sans.woff2 differ diff --git a/css/fonts/Mona-Sans.woff2 b/css/fonts/Mona-Sans.woff2 new file mode 100644 index 0000000..8208a50 Binary files /dev/null and b/css/fonts/Mona-Sans.woff2 differ diff --git a/css/footer.css b/css/footer.css deleted file mode 100644 index 4b1f026..0000000 --- a/css/footer.css +++ /dev/null @@ -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; -} diff --git a/css/main.css b/css/main.css deleted file mode 100644 index b1d070b..0000000 --- a/css/main.css +++ /dev/null @@ -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; -} diff --git a/css/nav.css b/css/nav.css deleted file mode 100644 index f74c04a..0000000 --- a/css/nav.css +++ /dev/null @@ -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; - } -} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5b35264 --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..7febd0a --- /dev/null +++ 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"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..2645637 --- /dev/null +++ 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("../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: $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; + } + } +} \ No newline at end of file diff --git a/gallery/animal_booper.webp b/gallery/animal_booper.webp deleted file mode 100644 index 55efed9..0000000 Binary files a/gallery/animal_booper.webp and /dev/null differ diff --git a/gallery/animal_doggy.gif b/gallery/animal_doggy.gif deleted file mode 100644 index 709088b..0000000 Binary files a/gallery/animal_doggy.gif and /dev/null differ diff --git a/gallery/animal_doggys.webp b/gallery/animal_doggys.webp deleted file mode 100644 index 3781b7f..0000000 Binary files a/gallery/animal_doggys.webp and /dev/null differ diff --git a/gallery/animal_farmer.webp b/gallery/animal_farmer.webp deleted file mode 100644 index 1eed8fe..0000000 Binary files a/gallery/animal_farmer.webp and /dev/null differ diff --git a/gallery/animal_goob.webp b/gallery/animal_goob.webp deleted file mode 100644 index 9cda4a8..0000000 Binary files a/gallery/animal_goob.webp and /dev/null differ diff --git a/gallery/animal_smile.webp b/gallery/animal_smile.webp deleted file mode 100644 index 43ab1fb..0000000 Binary files a/gallery/animal_smile.webp and /dev/null differ diff --git a/gallery/animal_snooooooot.webp b/gallery/animal_snooooooot.webp deleted file mode 100644 index 24161b1..0000000 Binary files a/gallery/animal_snooooooot.webp and /dev/null differ diff --git a/gallery/animal_snooot.webp b/gallery/animal_snooot.webp deleted file mode 100644 index cac0247..0000000 Binary files a/gallery/animal_snooot.webp and /dev/null differ diff --git a/gallery/fluffy_hi.webp b/gallery/fluffy_hi.webp deleted file mode 100644 index ebfeecd..0000000 Binary files a/gallery/fluffy_hi.webp and /dev/null differ diff --git a/gallery/fluffy_no-bitches.webp b/gallery/fluffy_no-bitches.webp deleted file mode 100644 index d3f24f2..0000000 Binary files a/gallery/fluffy_no-bitches.webp and /dev/null differ diff --git a/gallery/fluffy_rat.webp b/gallery/fluffy_rat.webp deleted file mode 100644 index b3b1592..0000000 Binary files a/gallery/fluffy_rat.webp and /dev/null differ diff --git a/gallery/fluffy_sad.webp b/gallery/fluffy_sad.webp deleted file mode 100644 index ac44e69..0000000 Binary files a/gallery/fluffy_sad.webp and /dev/null differ diff --git a/gallery/fluffy_stretch.webp b/gallery/fluffy_stretch.webp deleted file mode 100644 index f50517e..0000000 Binary files a/gallery/fluffy_stretch.webp and /dev/null differ diff --git a/gallery/fluffy_taidum.webp b/gallery/fluffy_taidum.webp deleted file mode 100644 index 3c8c12b..0000000 Binary files a/gallery/fluffy_taidum.webp and /dev/null differ diff --git a/gallery/photo_beach.webp b/gallery/photo_beach.webp deleted file mode 100644 index a63d91f..0000000 Binary files a/gallery/photo_beach.webp and /dev/null differ diff --git a/gallery/photo_fire.webp b/gallery/photo_fire.webp deleted file mode 100644 index d4f818b..0000000 Binary files a/gallery/photo_fire.webp and /dev/null differ diff --git a/gallery/photo_friend.webp b/gallery/photo_friend.webp deleted file mode 100644 index 5dfbd57..0000000 Binary files a/gallery/photo_friend.webp and /dev/null differ diff --git a/gallery/photo_funny.webp b/gallery/photo_funny.webp deleted file mode 100644 index d2e9310..0000000 Binary files a/gallery/photo_funny.webp and /dev/null differ diff --git a/gallery/photo_funny2.webp b/gallery/photo_funny2.webp deleted file mode 100644 index ac76e37..0000000 Binary files a/gallery/photo_funny2.webp and /dev/null differ diff --git a/gallery/photo_lamp.webp b/gallery/photo_lamp.webp deleted file mode 100644 index 6ebd0d8..0000000 Binary files a/gallery/photo_lamp.webp and /dev/null differ diff --git a/gallery/photo_land.webp b/gallery/photo_land.webp deleted file mode 100644 index 6ee1cb1..0000000 Binary files a/gallery/photo_land.webp and /dev/null differ diff --git a/gallery/photo_nice.webp b/gallery/photo_nice.webp deleted file mode 100644 index 3356276..0000000 Binary files a/gallery/photo_nice.webp and /dev/null differ diff --git a/gallery/photo_rocks.webp b/gallery/photo_rocks.webp deleted file mode 100644 index ed0504c..0000000 Binary files a/gallery/photo_rocks.webp and /dev/null differ diff --git a/gallery/photo_spook.webp b/gallery/photo_spook.webp deleted file mode 100644 index bbfd8bf..0000000 Binary files a/gallery/photo_spook.webp and /dev/null differ diff --git a/gallery/photo_stars.webp b/gallery/photo_stars.webp deleted file mode 100644 index 5905293..0000000 Binary files a/gallery/photo_stars.webp and /dev/null differ diff --git a/gallery/photo_sunset2.webp b/gallery/photo_sunset2.webp deleted file mode 100644 index 066abdb..0000000 Binary files a/gallery/photo_sunset2.webp and /dev/null differ diff --git a/gallery/photo_train.webp b/gallery/photo_train.webp deleted file mode 100644 index b96e1eb..0000000 Binary files a/gallery/photo_train.webp and /dev/null differ diff --git a/images/Black_Candy.svg b/images/Black_Candy.svg deleted file mode 100644 index 5bb9c28..0000000 --- a/images/Black_Candy.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - Icon - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/images/Nextcloud.webp b/images/Nextcloud.webp deleted file mode 100644 index b89f659..0000000 Binary files a/images/Nextcloud.webp and /dev/null differ diff --git a/images/bg-2.png b/images/bg-2.png deleted file mode 100644 index fee78da..0000000 Binary files a/images/bg-2.png and /dev/null differ diff --git a/images/bg-3.png b/images/bg-3.png deleted file mode 100644 index 3e4b1bb..0000000 Binary files a/images/bg-3.png and /dev/null differ diff --git a/images/bg-4.jpg b/images/bg-4.jpg deleted file mode 100644 index f5c2f92..0000000 Binary files a/images/bg-4.jpg and /dev/null differ diff --git a/images/bg-5.svg b/images/bg-5.svg deleted file mode 100644 index 4a49c34..0000000 --- a/images/bg-5.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/bg-6.svg b/images/bg-6.svg deleted file mode 100644 index 7423d83..0000000 --- a/images/bg-6.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/bg.jpg b/images/bg.jpg deleted file mode 100644 index 6f7e43e..0000000 Binary files a/images/bg.jpg and /dev/null differ diff --git a/images/sussywussy.png b/images/sussywussy.png deleted file mode 100644 index 5e6d15c..0000000 Binary files a/images/sussywussy.png and /dev/null differ diff --git a/img/funny.jpg b/img/funny.jpg new file mode 100644 index 0000000..3239b03 Binary files /dev/null and b/img/funny.jpg differ diff --git a/gallery/photo_landscape.webp b/img/landscape.webp similarity index 100% rename from gallery/photo_landscape.webp rename to img/landscape.webp diff --git a/gallery/fluffy_VRchat-meet-2021.webp b/img/meet-2021.webp similarity index 100% rename from gallery/fluffy_VRchat-meet-2021.webp rename to img/meet-2021.webp diff --git a/images/ref.png b/img/ref.png similarity index 100% rename from images/ref.png rename to img/ref.png diff --git a/img/sad.png b/img/sad.png new file mode 100644 index 0000000..ae6b3a2 Binary files /dev/null and b/img/sad.png differ diff --git a/img/sneak.png b/img/sneak.png new file mode 100644 index 0000000..fee8fcc Binary files /dev/null and b/img/sneak.png differ diff --git a/images/fluffy.png b/img/taidum.png similarity index 100% rename from images/fluffy.png rename to img/taidum.png diff --git a/index.php b/index.php index 0e5629f..2532fc6 100644 --- a/index.php +++ b/index.php @@ -1,193 +1,221 @@ + - - - - - Fluffy's funky website - - - - - - + Hiiiiiii + + + + + + + + + + + + + + + +
+ -
-

Experience in programming

-

I have a decent understanding of PC operating systems and now also a start on networking with setting up my own server.

-

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.

-

ince then I attempted many thingies like HTML, CSS, PHP, JavaScript, Bash, C# and other stuffs!

-

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!

-

These stats come from my GitHub profile

- -
+
+
+
+ +

O, hi stranger

+

I'm a smelly Maned Wolf that goes by Fluffy Bean. I'm 17 years old that has weird interests

+
-
-

System configuration

-

Operating system

- Screenshot of Linux desktop environment -

My main operating system is Arch Linux, in this screenshot you can see a "rice" of Rofi and Polybar! Which you can see here!

-

My secondary operating system is Windows 10 just for VR

+ -

Hardware

-

For my PC case, I'm using an NZXT H510 (white) covered with a bunch of stickers and magnets.

-

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.

-

Thats with 16GBs (2x8) of DDR4-3600 ram from Corsair, with an Nvidia GTX1060 (6gb) Zotac AMP edition.

-

Which is all powered by a Corsair 550W 80+ Gold power supply.

-

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.

+
+

Social Links

+ + + + -

Equipment

-

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.

-

For my monitor I have a BenQ MOBIUZ EX2510. For VR I have a normal CV1 with 2 cameras.

-

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.

+
-

Server

-

My server is a simple Zotac ZBOX-CI527.

-

It still has the base 8GBs of ram and i5-7200U CPU. But I upgraded it with a 120GB SSD.

-

And it is running a Proxmox server with many many LXC containers because why not :3

-
+

Special Thanks

+

Jeetix: Helping me with learning how to make websites!

+

Carty: Teaching me how to run servers and the networking!

+

mrHDash: For the Ref Sheet and most other art on the page!

+

Zadok: Silly taidum art seen below!

+

Shep: For the free YHC!

-
-

Current projects

-

Other than this website I also have been working on hosting these:

-
- Nextcloud Logo - Black Candy Logo -
-
+
-
-

Special Thanks

-

To Jeetix for helping me with learning how to make websites and keeping the original site up and running!

-

And to Carty for teaching me how to run servers and the networking required to keep sites online!

-

mrHDash for the Ref Sheet and most other art on the page!

-

To Zadok for the silly taidum art in the nav bar!

-
+ Orange maned wolf sona in Taidum form +
+
- +
+
+ +

Hobbies

+

Hobbies hobbies hobbies hobbies hobbies hobbies dick hobbies hobbies hobbies hobbies hobbies

+
-
-

Refsheet

- Ref Sheet containing an orange anthro Maned Wolf. -

Bandana

-

#FF7700 - #FFDC00 - #00D621 - #0088FF

-

Fur

-

#ff851b - #fff3bb - #613700

-

Beans / Eyes

-

#febbec - #c859c9

-
+ -
-

Funny jokes!

-

Cow joke

-

What did the cow say to the other cow that took up all the space? "Mooooove over"!

-

Eel joke

-

Why can't electric eels get depressed? Because they're always positive!

-
+
+ -
-

Mah Music taste!

-

Here I will put (most) of the music I enjoy listening too!

-

Ma Spotify playlists

- - +

Metal Boxes

+

My metal box

+

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!

+

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!

+ Screenshot of Linux desktop environment +

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

-

Music flavours

-

Rock/Metal

-

Bring me the Horizon

-

Pink Floyd

-

Ocean Colour Scene

-

Oasis

-

Fleetwood Mac

-

Stereophonics

+

But its not all graphical

+

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.

+

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

-

EDM/Electronic

-

acloudyskye

-

Conro

-

Pixel Terror

+
-

Chill

-

M38

-

C148

-

The Rare Occasion

-

Cavetown

-

Daughter

-

Low Roar

+

Electronics

+

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!

+

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

+ LCD saying 0 days since I peed myself, attached to a pico with a rotary switch laying to the left of it -

Other

-

Gorillaz

-

Joywave

+
-

Well...

-

I listen to everything, but feel free to complain to me about my choices!

-
-
+

Mah Music taste!

+

I like music! And heres what I like listening to.

+

Rock/Metal

+
+

Bring me the Horizon

+

Pink Floyd

+

Ocean Colour Scene

+

Oasis

+

Fleetwood Mac

+

Stereophonics

+

Muse

+
- +

EDM/DnB

+
+

acloudyskye

+

Conro

+

Pixel Terror

+
+

Other

+
+

M38

+

C148

+

The Rare Occasion

+

Cavetown

+

Daughter

+

Low Roar

+

Gorillaz

+

Joywave

+

Twenty One Pilots

+
+ +
+ + + + + +
+
+ +

Experiance

+

Yet still no job lol

+
+ + + +
+

Experience in programming

+

I have a decent understanding of PC operating systems and now also a start on networking with setting up my own server.

+

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.

+

ince then I attempted many thingies like HTML, CSS, PHP, JavaScript, Bash, C# and other stuffs!

+

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!

+

These stats come from my GitHub profile

+ +
+
+ + + + + + + + - + + \ No newline at end of file diff --git a/leaves.jpg b/leaves.jpg new file mode 100644 index 0000000..5a8e723 Binary files /dev/null and b/leaves.jpg differ diff --git a/scripts/gallery.js b/scripts/gallery.js deleted file mode 100644 index eaf05bc..0000000 --- a/scripts/gallery.js +++ /dev/null @@ -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; -}); diff --git a/stylesheet.css b/stylesheet.css deleted file mode 100644 index a752293..0000000 --- a/stylesheet.css +++ /dev/null @@ -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; -}