seo + performance + error handling

css/global.css

@@ -1,11 +1,9 @@
-/* Import */
 @import url("https://fonts.googleapis.com/css2?family=Changa:wght@200&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Borel&family=Pacifico&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Rubik+Broken+Fax&display=swap");
 
-/* Reset */
 html {
 	box-sizing: border-box;
 	font-size: 100%;
@@ -42,10 +40,7 @@ img {
 	height: auto;
 }
 
-/* Background Styling */
 body {
-	/* background-image: url('../assets/images/ai_abstract_minimal_blue_scenery.jpg'); */
-	/* background-image: url('../assets/images/minimalist_4k_blue_scenery.jpg'); */
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
@@ -61,38 +56,25 @@ body {
 	background-image: linear-gradient(45deg, #29323c, #485563);
 }
 
-/* Basic Styling */
-/* .text-bold {
-	font-weight: 700;
-} */
-
-/* Web Settings */
 * {
 	-webkit-user-drag: none;
-}
-
-* {
 	transition: all 0.4s ease-in-out;
 }
 
-/* Basic Styling */
 body {
 	font-family: Arial, sans-serif;
-	/* margin-bottom: 25px; */
 }
 
 ::selection {
 	background-color: #ffcc00;
 	color: #000;
 }
 
-/* Styles for desktops */
 @media only screen and (min-width: 1025px) {
 	body {
 		font-size: 13px;
 	}
 
-	/* Custom scrollbar */
 	body::-webkit-scrollbar {
 		width: 6px;
 	}
@@ -111,21 +93,18 @@ body {
 	}
 }
 
-/* Styles for mobile devices */
 @media only screen and (max-width: 600px) {
 	body {
 		font-size: 14px;
 	}
 }
 
-/* Styles for tablets */
 @media only screen and (min-width: 601px) and (max-width: 1024px) {
 	body {
 		font-size: 16px;
 	}
 }
 
-/* Styles for desktops */
 @media only screen and (min-width: 1025px) {
 	body {
 		font-size: 13px;

css/lmao.css

@@ -1,4 +1,3 @@
-/* CSS Variables for easy maintenance */
 :root {
 	--primary-color: rgba(0, 0, 0, 0.1);
 	--secondary-color: rgba(0, 0, 0, 0.4);
@@ -8,13 +7,6 @@
 	--font-color: #000000;
 	--font-weight-bold: 700;
 	--font-weight-medium: 500;
-}
-
-:root {
-	--primary-color: rgba(0, 0, 0, 0.1);
-	--secondary-color: rgba(0, 0, 0, 0.4);
-	--hover-shadow: rgba(0, 0, 0, 0.3);
-	--font-color: #000000;
 	--background-color: #ffffff;
 }
 
@@ -31,30 +23,24 @@ body {
 	color: var(--font-color);
 }
 
-/* Button Styles */
 .button {
 	background-color: var(--primary-color);
 	border: 2px solid var(--secondary-color);
 	color: var(--font-color);
 }
 
-/* Default SVG fill color */
 .icon path {
-	fill: #000; /* Default fill color for light theme */
+	fill: #000;
 }
 
-/* Dark theme SVG fill color */
 .dark-theme .icon path {
-	fill: #fff; /* Fill color for dark theme */
+	fill: #fff;
 }
 
 .dark-theme a {
 	color: rgb(204, 136, 33);
 }
 
-/* Other styles using the variables */
-
-/* Button Container */
 .button-container {
 	display: flex;
 	flex-wrap: wrap;
@@ -64,7 +50,6 @@ body {
 	justify-content: center;
 }
 
-/* Button Styles */
 .button {
 	display: flex;
 	justify-content: center;
@@ -91,20 +76,17 @@ body {
 	width: 2.2em;
 }
 
-/* Separator */
 .separator {
 	height: 2px;
 	background-color: var(--secondary-color);
 	margin: 10px 0;
 }
 
-/* Content Header */
 #contentHtag {
 	text-align: center;
 	margin: 1em;
 }
 
-/* Container */
 .container {
 	display: flex;
 	flex-direction: column;
@@ -119,7 +101,6 @@ body {
 	font-weight: var(--font-weight-medium);
 }
 
-/* Navigation and Content */
 #navigation,
 #content {
 	background-color: rgba(0, 0, 0, 0);
@@ -143,12 +124,9 @@ body {
 #content > ul > li > a {
 	text-decoration: none;
 	font-weight: 600;
-	/* color: var(--font-color); */
 }
 
-/* Media Queries for Responsiveness */
 @media (min-width: 768px) {
-	/* Larger screens */
 	.container {
 		margin: 1em 15%;
 	}
@@ -160,7 +138,6 @@ body {
 }
 
 @media (max-width: 767px) {
-	/* Smaller screens */
 	a {
 		font-weight: 600;
 	}