I was supposed to optimise, but I relised I couldn't be asked

css/main.css

@@ -1,7 +1,7 @@
 /*
   Main
 */
-main section {
+section {
   margin: 5rem 0; padding: 1rem;
   width: auto;
 
@@ -14,34 +14,47 @@ main section {
   border: 0.2rem solid var(--green);
   outline: 0.5rem solid var(--bg);
 }
-main section * {
+section * {
   margin: 0 0 0.5rem; padding: 0;
   max-width: 100%; width: auto; min-width: none;
 
   border-radius: 5px;
 }
-main section *:last-child {
+section *:last-child {
   margin-bottom: 0;
 }
-main section img {
+section img {
   margin-bottom: 0.5rem;
   height: auto;
 }
-main section p, main section a {
+section p, section a {
   margin-bottom: 0.5rem;
 }
 
 /*
-  I hate CSS
+  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
 */
@@ -52,7 +65,7 @@ main section p, main section a {
 
   display: block;
 
-  background-color: var(--bg-dark);
+  background-color: var(--bg-1);
 }
 
 .gallery {
@@ -96,39 +109,3 @@ main section p, main section a {
 .gallery img:last-child {
   margin-right: 0;
 }
-
-/*
-  Filter
-*/
-.filter-list {
-  margin: 0 0 1rem 0; padding: 0;
-  width: 100%;
-  display: flex; flex-direction: row;
-
-  justify-content: space-between;
-}
-
-.filter-list div {
-  margin: 0 1rem 0 0; padding: 0.5rem;
-  width: 15rem; min-width: 8rem;
-  height: 1.5rem;
-
-  display: flex;
-  justify-content: center; align-items: center;
-
-  text-align: center;
-
-  background-color: var(--bg-dark);
-}
-@media (max-width:750px) {
-  .filter-list {
-    flex-direction: column;
-  }
-  .filter-list div {
-    margin: 0 0 1rem 0;
-    width: auto;
-  }
-}
-.filter-list div:last-child {
-  margin: 0;
-}

css/nav.css

@@ -32,11 +32,6 @@ nav * {
   height: 2rem; width: auto;
 
   transform: rotate(-25deg) scale(3.5);
-
-  /*filter: drop-shadow(1px 0 0 var(--bg-dark))
-          drop-shadow(0 1px 0 var(--bg-dark))
-          drop-shadow(-1px 0 0 var(--bg-dark))
-          drop-shadow(0 -1px 0 var(--bg-dark));*/
 }
 .nav-logo h2 {
   margin: 0 0 0 2rem; padding: 0;

images/Black_Candy.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="60" cy="60" r="60"></circle>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#B932B4" offset="0%"></stop>
+            <stop stop-color="#A15ABF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="iOS-App-Icon-Template" transform="translate(-700.000000, -918.000000)">
+            <g id="Icon" transform="translate(700.000000, 918.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Mask" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
+                <rect id="Background" fill="url(#linearGradient-3)" mask="url(#mask-2)" x="0" y="0" width="120" height="120" rx="8"></rect>
+                <g id="candy_center" mask="url(#mask-2)">
+                    <g transform="translate(-11.015625, -11.015625)">
+                        <g id="Group-3" stroke-width="1" fill="none">
+                            <rect id="Rectangle" fill-opacity="0" fill="#979797" x="0.0984177292" y="-2.72848411e-12" width="141.390931" height="142.321135"></rect>
+                            <g id="Group-4" transform="translate(82.186031, 95.278637)" fill="#BFBFBF">
+                                <path d="M0.434938326,4.06834176 C-0.0601257408,3.16934676 0.262561716,2.03659828 1.15568093,1.53827721 L3.34592849,0.316215837 C4.2390477,-0.18210523 5.3643926,0.142705172 5.85945667,1.04170017 L31.034918,46.7582356 C31.1078142,46.890609 23.7211824,46.7881635 23.7194705,46.8448567 L0.434938326,4.06834176 Z" id="Combined-Shape"></path>
+                            </g>
+                            <g id="Group-2" transform="translate(70.793883, 71.160567) rotate(-29.000000) translate(-70.793883, -71.160567) translate(37.077584, 39.193051)">
+                                <path d="M64.9876945,31.9364977 C64.9876945,14.2984571 51.1037197,-3.26849658e-13 33.9769689,-3.26849658e-13 C16.8502181,-3.26849658e-13 2.96624332,14.2984571 2.96624332,31.9364977" id="Path" fill="#121212"></path>
+                                <path d="M64.718036,63.8729955 C64.718036,46.2349548 50.8340612,31.9364977 33.7073104,31.9364977 C16.5805596,31.9364977 2.69658483,46.2349548 2.69658483,63.8729955" id="Path" fill="#3B3B3B" transform="translate(33.707310, 47.904747) rotate(180.000000) translate(-33.707310, -47.904747) "></path>
+                                <rect id="Rectangle" fill="#212121" x="-2.84217094e-13" y="28.6039936" width="67.4146208" height="6.9427169" rx="2.8125"></rect>
+                                <path d="M48.8458177,2.22549734 L49.7390049,2.21245315 C51.1973426,2.19115526 52.4946974,3.13501834 52.9232945,4.5291155 C53.8549926,7.55964861 54.2996139,10.5240001 54.2571584,13.42217 C54.2146837,16.321654 53.6846903,19.1548963 52.6671784,21.921897 C52.1985091,23.1963663 50.9932321,24.0504868 49.6354657,24.0703158 L48.525574,24.0865247 C47.2966826,24.1044716 46.2859204,23.122807 46.2679736,21.8939156 C46.2644381,21.6518298 46.3004321,21.4107895 46.3745472,21.1803009 C47.2469789,18.4667168 47.7027898,15.7722934 47.7419799,13.0970305 C47.7806772,10.4554079 47.4131655,7.83246703 46.6394448,5.2282079 C46.2717992,3.9908081 46.9768901,2.68967029 48.2142944,2.32203972 C48.4193912,2.26110582 48.6318834,2.22862166 48.8458177,2.22549734 Z" id="Rectangle" fill="#EDEDED" transform="translate(49.761751, 13.156011) rotate(-48.000000) translate(-49.761751, -13.156011) "></path>
+                            </g>
+                        </g>
+                        <path d="M98.4771434,97.2482373 C98.7164514,97.2475707 98.9109892,97.4410278 98.9116557,97.6803358 C98.911658,97.681139 98.911658,97.6819422 98.9116558,97.6827454 L98.7987801,138.348956 C98.798111,138.589989 98.6028823,138.78522 98.3618489,138.785891 C98.1225409,138.786558 97.9280031,138.5931 97.9273366,138.353792 C97.9273343,138.352989 97.9273343,138.352186 97.9273366,138.351383 L98.0402123,97.6851727 C98.0408813,97.4441392 98.23611,97.2489087 98.4771434,97.2482373 Z" id="Rectangle" fill="#FFFFFF" transform="translate(98.419496, 118.017064) rotate(-29.000000) translate(-98.419496, -118.017064) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

index.php

@@ -60,8 +60,8 @@
 			<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! Which you can see <a href="https://github.com/Fluffy-Bean/dots">here</a>!</p>
+			<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 system is Windows 10 just for VR</p>
+			<p>My secondary operating system is Windows 10 just for VR</p>
 
 			<h3>Hardware</h3>
 			<p>For my PC case, I'm using an NZXT H510 (white) covered with a bunch of stickers and magnets.</p>
@@ -81,7 +81,16 @@
 			<p>And it is running a Proxmox server with many many LXC containers because why not :3</p>
 		</section>
 
-		<section >
+		<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>
+
+		<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>
@@ -92,22 +101,6 @@
 		<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="filter-list">
-				<div>
-					<p>Blur</p>
-				</div>
-				<div>
-					<p>Grayscale</p>
-				</div>
-				<div>
-					<p>Hue</p>
-				</div>
-				<div>
-					<p>Saturation</p>
-				</div>
-			</div>
-			-->
 			<div class="gallery" draggable="false">
 				<?php
 				$images = glob("gallery/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);

stylesheet.css

@@ -4,11 +4,9 @@
 
 :root {
   --bg: #151515df;
-  --bg-alt: #E8E3E3;
+  --bg-1: #242621;
-  --bg-dark: #242621;
+  --bg-2: #1D1E1C;
-  --bg-dark-alt: #1D1E1C;
 
-  --h: #8C977D;
   --fg:#E8E3E3;
   --fg-dark: #151515;
 
@@ -26,7 +24,7 @@
 html {
   margin: 0; padding: 0;
 
-  background-color: var(--bg-dark-alt);
+  background-color: var(--bg-2);
   background-image: url("images/bg-6.svg");
 
   height: 100vh;
@@ -39,7 +37,7 @@ body {
   margin: 0 auto; padding: 1rem;
   max-width: 969px; width: auto; min-width: none;
 
-  background-color: var(--bg-alt);
+  background-color: var(--bg-1);
   background: none;
 }
 
@@ -50,7 +48,7 @@ p,a {
 h1,h2,h3,h4 {
   font-family: "Lexend Deca", sans-serif;
   font-weight: 600;
-  color: var(--h);
+  color: var(--green);
 }
 h1 {
   font-size: 40px;
@@ -84,6 +82,12 @@ a:visited {
   text-decoration: underline;
 }
 
+hr {
+  height: 0.2rem;
+
+  background-color: var(--green);
+}
+
 span {
   display: inline;
 }