work on header stuff for metadata and stylesheets management

client/html/components/header.html

@@ -0,0 +1,58 @@
+<meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- SEO Meta Tags -->
+    <title>Home - Valkyrie</title>
+    <meta name="description" content="Valkyrie is your ultimate platform for creating and sharing immersive gaming experiences. Join us to unleash your creativity and connect with gamers worldwide.">
+    <meta name="keywords" content="Valkyrie, game creation, social gaming, user-generated content, online multiplayer">
+    <meta name="author" content="Valkyrie">
+
+    <!-- Open Graph / Facebook Meta Tags -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://www.valk.fun/">
+    <meta property="og:title" content="Valkyrie - Create, Play, Connect">
+    <meta property="og:description" content="Create and share amazing games, connect with fellow creators, and dive into a world of user-generated content on Valkyrie.">
+    <meta property="og:image" content="https://www.valk.fun/images/AlphaBloxLogo.png">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content="valk.fun">
+    <meta property="twitter:url" content="https://www.valk.fun/">
+    <meta name="twitter:title" content="Valkyrie - Create, Play, Connect">
+    <meta name="twitter:description" content="Create and share amazing games, connect with fellow creators, and dive into a world of user-generated content on Valkyrie.">
+    <meta name="twitter:image" content="https://www.valk.fun/images/AlphaBloxLogo.png">
+
+    <!-- Discord Meta Tags -->
+    <meta name="theme-color" content="#5865F2">
+    <meta property="og:site_name" content="Valkyrie">
+    <meta property="og:image:alt" content="Valkyrie - The Ultimate Gaming Creation Platform">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" id="theme-stylesheet">
+
+    <link rel="stylesheet" href="./css/particles.css">
+    <link rel="icon" href="/images/Valkyrie.ico" type="image/x-icon">
+    <link rel="manifest" href="/site.webmanifest">
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
+
+    <style>
+        .profile-image {
+            width: 100%;
+            height: auto;
+            max-width: 200px;
+        }
+
+        .content-container {
+            margin-bottom: 30px;
+        }
+
+        @media (max-width: 767px) {
+            .content-container {
+                margin-bottom: 15px;
+            }
+        }
+    </style>

client/js/header.js

@@ -0,0 +1,8 @@
+document.addEventListener("DOMContentLoaded", function() {
+    fetch('/html/components/header.html')
+        .then(response => response.text())
+        .then(data => {
+            document.head.innerHTML = data;
+        })
+        .catch(error => console.error('Error loading head component:', error));
+});