mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-24 12:24:56 +00:00
New page
This commit is contained in:
parent
5dab307513
commit
364a2558ff
61 changed files with 1309 additions and 608 deletions
358
index.php
358
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&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600&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: Fluffy 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&width=769&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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue