diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..be3fa94 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,26 @@ +/* + 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); +} +footer * { + margin: 0; padding: 0; + display: block; +} +footer div { + width: 18rem; + justify-content: center; align-content: center; + text-align: center; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..dde1c48 --- /dev/null +++ b/css/main.css @@ -0,0 +1,94 @@ +/* + Main +*/ +main section { + margin: 3rem 0; padding: 1rem; + width: auto; + + background-color: var(--bg); color: var(--fg); + + border-radius: var(--rad); + + box-shadow: var(--shadow); +} +main section * { + margin: 0 0 0.7rem; padding: 0; + max-width: 100%; width: auto; min-width: none; + height: auto; + + border-radius: 5px; +} +main section *:last-child { + margin-bottom: 0; +} + +/* + I hate CSS +*/ +#intro { + text-align: center; +} +#experiance img { + margin: 0 auto; + display: block; +} +#spotify { + display: flex; + flex-direction: column; +} + +/* + Sona colours +*/ +/* +.cFF7700{background-color: var(--bandana-0);} +.cFFDC00{background-color: var(--bandana-1);} +.c00D621{background-color: var(--bandana-2);} +.c0088FF{background-color: var(--bandana-3);} +*/ +/* + Gallery +*/ +.gallery-image { + width: 100%; height: 30rem; + object-fit: contain; + + background-color: #000; +} + +.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::-webkit-scrollbar { + display: none; +} +.gallery img { + margin: 0 0.5rem; + + height: 10rem; width: 12rem; + + object-fit: cover; + + user-select: none; + + transition: transform 0.1s ease-out; +} +.gallery img:hover { + margin: -0.25rem 0.25rem; + border: 0.25rem 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 new file mode 100644 index 0000000..6ef51a4 --- /dev/null +++ b/css/nav.css @@ -0,0 +1,40 @@ +/* + Nav +*/ +nav { + margin: auto; padding: 1rem; + width: auto; + + position: sticky; top: 1rem; + + display: flex; flex-direction: row; + justify-content: space-between; align-items: center; + + background-color: var(--bg-alt); color: var(--fg-dark); + + border-radius: var(--rad); + + box-shadow: var(--shadow); +} +nav * { + margin: 0; padding: 0; +} +nav img { + margin: 0; padding: 0; + height: 2rem; width: auto; + + transform: rotate(-25deg) scale(3.2); + + filter: drop-shadow(1px 0 0 var(--bg-alt)) + drop-shadow(0 1px 0 var(--bg-alt)) + drop-shadow(-1px 0 0 var(--bg-alt)) + drop-shadow(0 -1px 0 var(--bg-alt)); +} + +nav div * { + margin: 0 0.2rem; padding: 0; + + text-align: right; + + font-weight: bolder; +} diff --git a/fonts/FiraCode.ttf b/fonts/FiraCode.ttf new file mode 100644 index 0000000..f75b2a2 Binary files /dev/null and b/fonts/FiraCode.ttf differ diff --git a/fonts/LexendDeca.ttf b/fonts/LexendDeca.ttf new file mode 100644 index 0000000..6405e15 Binary files /dev/null and b/fonts/LexendDeca.ttf differ diff --git a/fonts/Rubik.ttf b/fonts/Rubik.ttf new file mode 100644 index 0000000..c253818 Binary files /dev/null and b/fonts/Rubik.ttf differ diff --git a/gallery/big_boy_fluffy.jpg b/gallery/big_boy_fluffy.jpg new file mode 100755 index 0000000..a00b138 Binary files /dev/null and b/gallery/big_boy_fluffy.jpg differ diff --git a/gallery/boi.jpg b/gallery/boi.jpg new file mode 100644 index 0000000..7b5c631 Binary files /dev/null and b/gallery/boi.jpg differ diff --git a/gallery/corruption.jpg b/gallery/corruption.jpg new file mode 100755 index 0000000..e45e924 Binary files /dev/null and b/gallery/corruption.jpg differ diff --git a/gallery/doggy.gif b/gallery/doggy.gif new file mode 100644 index 0000000..709088b Binary files /dev/null and b/gallery/doggy.gif differ diff --git a/gallery/doggys.webp b/gallery/doggys.webp new file mode 100644 index 0000000..3781b7f Binary files /dev/null and b/gallery/doggys.webp differ diff --git a/gallery/fire.jpg b/gallery/fire.jpg new file mode 100755 index 0000000..3e82a29 Binary files /dev/null and b/gallery/fire.jpg differ diff --git a/gallery/friend.jpg b/gallery/friend.jpg new file mode 100755 index 0000000..bcd1516 Binary files /dev/null and b/gallery/friend.jpg differ diff --git a/gallery/funny.jpg b/gallery/funny.jpg new file mode 100755 index 0000000..1677213 Binary files /dev/null and b/gallery/funny.jpg differ diff --git a/gallery/funny_v2.jpg b/gallery/funny_v2.jpg new file mode 100755 index 0000000..27305cb Binary files /dev/null and b/gallery/funny_v2.jpg differ diff --git a/gallery/goob.webp b/gallery/goob.webp new file mode 100644 index 0000000..9cda4a8 Binary files /dev/null and b/gallery/goob.webp differ diff --git a/gallery/landscape.jpg b/gallery/landscape.jpg new file mode 100755 index 0000000..0c3bbdd Binary files /dev/null and b/gallery/landscape.jpg differ diff --git a/pfp.jpg b/gallery/pfp.jpg similarity index 100% rename from pfp.jpg rename to gallery/pfp.jpg diff --git a/gallery/photo_2022-04-20_20-46-58.webp b/gallery/photo_2022-04-20_20-46-58.webp new file mode 100644 index 0000000..cac0247 Binary files /dev/null and b/gallery/photo_2022-04-20_20-46-58.webp differ diff --git a/gallery/sad.png b/gallery/sad.png new file mode 100644 index 0000000..ae6b3a2 Binary files /dev/null and b/gallery/sad.png differ diff --git a/gallery/stars.jpg b/gallery/stars.jpg new file mode 100755 index 0000000..a6fddaa Binary files /dev/null and b/gallery/stars.jpg differ diff --git a/gallery/sunset_beach.jpg b/gallery/sunset_beach.jpg new file mode 100755 index 0000000..30b543c Binary files /dev/null and b/gallery/sunset_beach.jpg differ diff --git a/gallery/sunset_in_town.jpg b/gallery/sunset_in_town.jpg new file mode 100755 index 0000000..9b4ba71 Binary files /dev/null and b/gallery/sunset_in_town.jpg differ diff --git a/gallery/vrc_christmas_meetup_2021.webp b/gallery/vrc_christmas_meetup_2021.webp new file mode 100644 index 0000000..8a05a07 Binary files /dev/null and b/gallery/vrc_christmas_meetup_2021.webp differ diff --git a/gallery/webcam.webp b/gallery/webcam.webp new file mode 100644 index 0000000..1eed8fe Binary files /dev/null and b/gallery/webcam.webp differ diff --git a/images/bg-alt.png b/images/bg-alt.png new file mode 100644 index 0000000..fee78da Binary files /dev/null and b/images/bg-alt.png differ diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..6f7e43e Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/fluffy.png b/images/fluffy.png new file mode 100644 index 0000000..a9d4d7b Binary files /dev/null and b/images/fluffy.png differ diff --git a/images/ref.png b/images/ref.png new file mode 100644 index 0000000..55b6f4c Binary files /dev/null and b/images/ref.png differ diff --git a/images/sussywussy.png b/images/sussywussy.png new file mode 100644 index 0000000..5e6d15c Binary files /dev/null and b/images/sussywussy.png differ diff --git a/index.php b/index.php index c985d6e..bdb03fe 100644 --- a/index.php +++ b/index.php @@ -3,62 +3,141 @@ - - - Fluffy's Epic Site + + + Fluffy's funky website + + - -
-
- -

Find me!

-
- Twitter - Telegram - Github - Steam -

Discord: Fluffy Bean#5212

-
-
-
-
-
-

Welcome to my site!

-
-
-
-

About Me

-

Hi! I'm Fluffy Bean. I'm a 17 year old who found himself on the internet one day and became a furry!

-
-
-

My interests

-

Apart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself

-

I also enjoy using Linux (Arch btw) which gives me access to do things such as customise my entire system!

-

Another thing I enjoy doing is playing games, some of my favourite tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD

-
-
-

Experience in programming

-

I have a decently wide range of knowledge on computers and programming

-

Since I was young I delved into computers head first, and breaking a lot on the way. I started with Scratch, then progressed to Python in Secondary School where I really started my programming adventure!

-

Since then I tried many programming languages and programming-related stuff, I currently know Python, HTML and CSS but am also learning PHP, C# and soon JavaScript

-

I also got into Linux since the start was rough with me breaking a terminal emulator, locking a harddrive and many others. Then after a few months Manjaro gave into my messing around and I broke Gnome Display Manager along with Gnome itself. Since then I've been using Arch (btw) and happily configuring Rofi, Polybar, fish and even theming Discord, Spotify and Firefox!

-
-
-

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!

-
- -
-
-
- -
-
+ + + + +
+
+

Fluffy's Swagger Website

+

This is supposed to be a descriptive intro line, but I don't feel like writing this

+
+ +
+

About me

+

Hi! I'm Fluffy Bean. I'm a 17 year old who found himself on the internet one day and became a furry! (And a developer)

+
+ +
+

My interests

+

Appart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself

+

I also enjoy using Linux (Arch btw) which gives me access to do things such as custormise my entire system!

+

Another thing I enjoy doing is playing games, some of my favroute tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD

+
+ +
+

Experiance in programming

+

I have a decently wide range of knowlage on computers and programming

+

Since I was young I delved into computers head first, and breaking a lot on the way. I started with Scratch, then progressed to Python in Secondary School where I really started my programming adventure!

+

Since then I tried many programming languages and programming-related stuff, I currently know Python, HTML and CSS but am also learning PHP and C#

+

I also got into Linux since, the start was rough with me breaking a bunch of stuff. But since then I've been using Arch (btw) and happily configuring Rofi, Polybar, fish and even theming Discord, Spotify and Firefox!

+ +
+ +
+

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!

+
+ + + +
+

Refsheet

+ Refsheet 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 depresed? Because they're always positive!

+
+ +
+

System configuration

+

Operating system

+ Screenshot of Linux desktop enviroment +

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 system is Windows 10 Pro 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.

+ +

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 mousemat.

+

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

+ +

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 containters because why not :3

+
+ +
+

Mah Spotify playlist!

+ + +
+
+ + + + diff --git a/scripts/gallery.js b/scripts/gallery.js new file mode 100644 index 0000000..68b684f --- /dev/null +++ b/scripts/gallery.js @@ -0,0 +1,28 @@ +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; +}); +slider.addEventListener("mouseleave", () => { + isDown = false; +}); +slider.addEventListener("mouseup", () => { + isDown = false; +}); +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 index edfe225..9b4034e 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,177 +1,115 @@ -/* Page style */ -@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5.2/distr/fira_code.css); -:root { - font-size: 17px; - --bg: #151515; - --bg-alt: #E8E3E3; - --fg: #E8E3E3; - --rad: 20px; - -ms-overflow-style: none; - scrollbar-width: none; +@import "css/nav.css"; +@import "css/main.css"; +@import "css/footer.css"; + +@font-face { + font-family: "Rubik", sans-serif; + src: url(fonts/Rubik.ttf); } -::-webkit-scrollbar { - display: none; +@font-face { + font-family: "Lexend Deca", sans-serif; + src: url(fonts/LexendDeca.ttf); +} +@font-face { + font-family: 'Fira Code', monospace; + src: url(fonts/FiraCode.ttf); +} + +:root { + --bg: #151515; + --bg-alt: #E8E3E3; + + --h: #8C977D; + --fg:#E8E3E3; + --fg-dark: #151515; + + --shadow: 6px 6px 10px #15151588; + --rad: 15px; + + --orange: #FF7700; + --orange-alt: #E0863E; + --green: #8C977D; + + /* refsheet colours */ + --bandana-0: #FF7700; + --bandana-1: #FFDC00; + --bandana-2: #00D621; + --bandana-3: #0088FF; + + --fur-0: #FF851B; + --fur-1: #FFF3BB; + --fur-2: #613700; + + --beans: #FEBBEC; + --eye: #C859C9; } * { - font-family: 'Fira Code', monospace; - font-weight: 369; - color: var(--fg); - transition-timing-function: ease-out; - transition: 0.1s; + font-family: "Fira Code", monospace; + font-weight: 450; } +html { + margin: 0; padding: 0; + background-color: var(--bg-alt); + background-image: url("images/bg-alt.png"); -@media (max-width:1200px) { - .rootContainer{ - display: flex; - flex-direction: column; - } - body{ - margin: 2vh; - } - img { - width: 169px; - } - .textContainer { - width: auto; - } - .textContainer, - .profileContainer { - padding: 1vh; - } - .paragraph { - text-align: justify; - } + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; } -@media (min-width:1200px) { - .rootContainer{ - display: flex; - flex-direction: row; - } - body { - min-height: 86vh; - margin: 6vh; - } - img { - width: 269px; - } - .textContainer { - width: 100%; - } - .textContainer, - .profileContainer { - padding: 2vh; - } +body { + margin: 0 auto; padding: 1rem; + max-width: 969px; width: auto; min-width: none; + + background-color: var(--bg-alt); + background: none; } - - -img { - margin: 2em; - border-radius: 50%; - box-shadow: 0px 2px 15px #000000; +h1,h2,h3 { + font-family: "Lexend Deca", sans-serif; + font-weight: 600; + color: var(--h); +} +h1 { + font-size: 40px; +} +h2 { + font-size: 30px; +} +h3 { + font-size: 20px; } - - -.profileLinks { - float: left; -} a { - font-weight: 500; - text-decoration: none; + color: var(--green); } a:hover { - font-weight: 800; + color: var(--orange); + font-weight: bolder; +} +a:focus { + color: var(--orange); +} +a:active { + color: var(--orange-alt); } a:visited { text-decoration: underline; } -a.button { - display: block; - padding: 0.35em 1.2em; - border: 0.12em solid var(--fg); - margin: 0 0.3em 0.3em 0; - border-radius: 0.5em; - box-sizing: border-box; - text-decoration: none; - text-align: center; -} - - -h1, -h2 { - font-weight: 450; - color: #E0863E; -} -/* Funky colours */ .cartyColour { color: #C29356; + font-weight: bold; } + .jeetixColour { color: cadetblue; + font-weight: bold; } + .fluffyColour { color: #FB9645; -} -.cartyColour, -.jeetixColour, -.fluffyColour { - font-weight: 500; -} - -/* Link colours */ -.twitterColour { - color: #1D9BF0; -} -.telegramColour { - color: #1C93E3; -} -.githubColour { - color: #F0F6FC; -} -.steamColour { - color: #C5C3C0; -} -.discordColour { - color: #5865F2; -} -.discord, -.discordColour { - font-weight: 500; -} - - -.paragraph { - margin: 12px; - color: #DADADA; -} -.textContainer, -.profileContainer { - padding: 2vh; - display: flex; - flex-direction: column; -} -.profileContainer { - text-align: center; - align-items: center; -} - - - -footer { - text-align: center; - align-items: center; -} -body { - background-color: var(--bg); - box-shadow: 0px 4px 20px var(--bg); - border-radius: 1em; -} -html { - margin: 0; - padding: 0; - background-color: var(--bg-alt); + font-weight: bold; }