Switched gallery to WEBP and adjusted page contents
18
css/main.css
|
|
@ -14,13 +14,18 @@ main section {
|
|||
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;
|
||||
}
|
||||
main section img {
|
||||
height: auto;
|
||||
}
|
||||
.justify-text p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/*
|
||||
I hate CSS
|
||||
|
|
@ -28,7 +33,7 @@ main section *:last-child {
|
|||
#intro {
|
||||
text-align: center;
|
||||
}
|
||||
#experiance img {
|
||||
#experience img {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -37,15 +42,6 @@ main section *:last-child {
|
|||
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
|
||||
*/
|
||||
|
|
|
|||
22
css/nav.css
|
|
@ -19,7 +19,11 @@ nav {
|
|||
nav * {
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
nav img {
|
||||
|
||||
.nav-logo {
|
||||
display: flex; flex-direction: row;
|
||||
}
|
||||
.nav-logo img {
|
||||
margin: 0; padding: 0;
|
||||
height: 2rem; width: auto;
|
||||
|
||||
|
|
@ -30,11 +34,23 @@ nav img {
|
|||
drop-shadow(-1px 0 0 var(--bg-alt))
|
||||
drop-shadow(0 -1px 0 var(--bg-alt));
|
||||
}
|
||||
.nav-logo h2 {
|
||||
margin: 0 0 0 2rem; padding: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
}
|
||||
@media (max-width:569px) {
|
||||
.nav-logo h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav div * {
|
||||
.nav-links * {
|
||||
margin: 0 0.2rem; padding: 0;
|
||||
|
||||
text-align: right;
|
||||
color: var(--fg-dark);
|
||||
|
||||
text-align: right; text-decoration: none;
|
||||
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
|
|
|||
BIN
fonts/Rubik.ttf
|
Before Width: | Height: | Size: 9.7 MiB After Width: | Height: | Size: 9.7 MiB |
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 312 KiB After Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 177 KiB |
BIN
gallery/animal_snooooooot.webp
Normal file
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 4.6 MiB |
BIN
gallery/boi.jpg
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 1.4 MiB |
BIN
gallery/fire.jpg
|
Before Width: | Height: | Size: 7.2 MiB |
|
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 178 KiB |
BIN
gallery/fluffy_hi.webp
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
gallery/fluffy_sad.webp
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
gallery/fluffy_stretch.webp
Normal file
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 4.5 MiB |
|
Before Width: | Height: | Size: 344 KiB |
|
Before Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 4.1 MiB |
BIN
gallery/pfp.jpg
|
Before Width: | Height: | Size: 16 KiB |
BIN
gallery/photo_beach.webp
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
gallery/photo_corruption.webp
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
gallery/photo_fire.webp
Normal file
|
After Width: | Height: | Size: 4.3 MiB |
BIN
gallery/photo_friend.webp
Normal file
|
After Width: | Height: | Size: 2.5 MiB |
BIN
gallery/photo_funny.webp
Normal file
|
After Width: | Height: | Size: 397 KiB |
BIN
gallery/photo_funny2.webp
Normal file
|
After Width: | Height: | Size: 962 KiB |
BIN
gallery/photo_lamp.webp
Normal file
|
After Width: | Height: | Size: 3.3 MiB |
BIN
gallery/photo_landscape.webp
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
gallery/photo_stars.webp
Normal file
|
After Width: | Height: | Size: 136 KiB |
BIN
gallery/photo_sunset2.webp
Normal file
|
After Width: | Height: | Size: 2.7 MiB |
BIN
gallery/sad.png
|
Before Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 279 KiB |
|
Before Width: | Height: | Size: 5.1 MiB |
|
Before Width: | Height: | Size: 3.9 MiB |
65
index.php
|
|
@ -9,12 +9,18 @@
|
|||
<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=Open+Sans:wght@500&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<img src="images/fluffy.png">
|
||||
<div>
|
||||
<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>
|
||||
|
|
@ -28,41 +34,42 @@
|
|||
<p>This is supposed to be a descriptive intro line, but I don't feel like writing this</p>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<h2>About me</h2>
|
||||
<p>Hi! I'm <span class="fluffyColour">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 id="summary" class="justify-text">
|
||||
<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>
|
||||
|
||||
<section id="interests">
|
||||
<section id="interests" class="justify-text">
|
||||
<h2>My interests</h2>
|
||||
<p>Appart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself</p>
|
||||
<p>I also enjoy using Linux (Arch btw) which gives me access to do things such as custormise my entire system!</p>
|
||||
<p>Another thing I enjoy doing is playing games, some of my favroute tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD</p>
|
||||
<p>I also enjoy using Linux (Arch btw) which gives me access to do things such as customise my entire system!</p>
|
||||
<p>Another thing I enjoy doing is playing games, some of my favourite tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD</p>
|
||||
</section>
|
||||
|
||||
<section id="experiance">
|
||||
<h2>Experiance in programming</h2>
|
||||
<p>I have a decently wide range of knowlage on computers and programming </p>
|
||||
<section id="experience" class="justify-text">
|
||||
<h2>Experience in programming</h2>
|
||||
<p>I have a decently wide range of knowledge on computers and programming </p>
|
||||
<p>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!</p>
|
||||
<p>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#</p>
|
||||
<p>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!</p>
|
||||
<p>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!</p>
|
||||
<p>These stats come from my GitHub profiles public repositories (private ones are not counted)</p>
|
||||
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Fluffy-Bean&layout=compact">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="justify-text">
|
||||
<h2>Special Thanks</h2>
|
||||
<p>To <span class="jeetixColour">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="cartyColour">Carty</span> for teaching me how to run servers and the networking required to keep sites online!</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section id="gallery">
|
||||
<h2>Random pictures lol</h2>
|
||||
<img src="gallery/vrc_christmas_meetup_2021.webp" class="gallery-image">
|
||||
<img src="gallery/fluffy_VRchat-meet-2021.webp" class="gallery-image">
|
||||
<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"/>',
|
||||
printf('<img src="gallery/%s" draggable="false" loading="lazy"/>',
|
||||
basename($i)
|
||||
);
|
||||
}
|
||||
|
|
@ -73,7 +80,7 @@
|
|||
|
||||
<section id="refsheet">
|
||||
<h2>Refsheet</h2>
|
||||
<img src="images/ref.png" alt="Refsheet containing an orange anthro Maned Wolf.">
|
||||
<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>
|
||||
|
|
@ -82,18 +89,18 @@
|
|||
<p>#febbec - #c859c9</p>
|
||||
</section>
|
||||
|
||||
<section id="jokes">
|
||||
<section id="jokes" class="justify-text">
|
||||
<h2>Funny jokes!</h2>
|
||||
<h3>Cow joke</h3>
|
||||
<p>What did the cow say to the other cow that took up all the space? "Mooooove over"!</p>
|
||||
<h3>Eel joke</h3>
|
||||
<p>Why can't electric eels get depresed? Because they're always positive!</p>
|
||||
<p>Why can't electric eels get depressed? Because they're always positive!</p>
|
||||
</section>
|
||||
|
||||
<section id="pc">
|
||||
<section id="pc" class="justify-text">
|
||||
<h2>System configuration</h2>
|
||||
<h3>Operating system</h3>
|
||||
<img src="images/sussywussy.png" alt="Screenshot of Linux desktop enviroment">
|
||||
<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! Which you can see <a href="https://github.com/Fluffy-Bean/dots">here</a>!</p>
|
||||
<p>My secondary system is Windows 10 Pro just for VR</p>
|
||||
|
||||
|
|
@ -105,17 +112,19 @@
|
|||
<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>
|
||||
|
||||
<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 mousemat.</p>
|
||||
<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>
|
||||
|
||||
<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 containters because why not :3</p>
|
||||
<p>And it is running a Proxmox server with many many LXC containers because why not :3</p>
|
||||
</section>
|
||||
|
||||
<section id="spotify">
|
||||
<h2>Mah Spotify playlist!</h2>
|
||||
<section id="spotify" class="justify-text">
|
||||
<h2>Mah Music taste!</h2>
|
||||
<p>Here are some playlists I made with some music I enjoy listening to. Though I missed many many songs.</p>
|
||||
<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>
|
||||
</section>
|
||||
|
|
@ -129,8 +138,8 @@
|
|||
</div>
|
||||
<div>
|
||||
<h3>Page status</h3>
|
||||
<p>Last updated 15 Jun 2022</p>
|
||||
<p>Made and designed by Fluffy</p>
|
||||
<p>Last updated 16 Jun 2022</p>
|
||||
<p>Made and designed by <span class="fluffy-colour">Fluffy</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Other works</h3>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,20 @@
|
|||
@import "css/main.css";
|
||||
@import "css/footer.css";
|
||||
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "Rubik", sans-serif;
|
||||
src: url(fonts/Rubik.ttf);
|
||||
src: url(fonts/Rubik.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
src: url(fonts/LexendDeca.ttf);
|
||||
src: url(fonts/LexendDeca.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Code', monospace;
|
||||
src: url(fonts/FiraCode.ttf);
|
||||
src: url(fonts/FiraCode.ttf) format('truetype');
|
||||
}
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bg: #151515;
|
||||
|
|
@ -44,14 +46,13 @@
|
|||
--eye: #C859C9;
|
||||
}
|
||||
* {
|
||||
font-family: "Fira Code", monospace;
|
||||
font-weight: 450;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
html {
|
||||
margin: 0; padding: 0;
|
||||
|
||||
background-color: var(--bg-alt);
|
||||
background-color: #817670;
|
||||
background-image: url("images/bg-alt.png");
|
||||
|
||||
background-position: center;
|
||||
|
|
@ -67,6 +68,10 @@ body {
|
|||
background: none;
|
||||
}
|
||||
|
||||
p,a {
|
||||
font-family: "Fira Code", monospace;
|
||||
}
|
||||
|
||||
h1,h2,h3 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
font-weight: 600;
|
||||
|
|
@ -79,11 +84,13 @@ h2 {
|
|||
font-size: 30px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--green);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--orange);
|
||||
|
|
@ -99,17 +106,21 @@ a:visited {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cartyColour {
|
||||
span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.carty-colour {
|
||||
color: #C29356;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.jeetixColour {
|
||||
.jeetix-colour {
|
||||
color: cadetblue;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fluffyColour {
|
||||
color: #FB9645;
|
||||
.fluffy-colour {
|
||||
color: #FF851B;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||