small changes

src/content/links.json

@@ -56,7 +56,7 @@
     },
     {
       "name": "Matrix",
-      "href": "https://brulijam.com/mtrx/#/@brulijam:brulijam.com?web-instance[element.io]=app.element.io&client=element.io",
+      "href": "https://brulijam.com/mtrx/#/@brulijam:brulijam.com?web-instance[element.io]=app.element.io",
       "icon": "https://simpleicons.org/icons/matrix.svg",
       "group": 1
     },
@@ -125,6 +125,31 @@
       "href": "https://youtube.com/@brulijam",
       "icon": "https://simpleicons.org/icons/youtube.svg",
       "group": 2
+    },
+    {
+      "name": "source code",
+      "href": "https://git.brulijam.com/brulijam/introduction-website",
+      "group": "footer"
+    },
+    {
+      "name": "links json",
+      "href": "content/links.json",
+      "group": "footer"
+    },
+    {
+      "name": "status",
+      "href": "https://status.brulijam.com/status/brulijam",
+      "group": "footer"
+    },
+    {
+      "name": "files",
+      "href": "https://brulijam.com/files",
+      "group": "footer"
+    },
+    {
+      "name": "music",
+      "href": "https://brulijam.com/music",
+      "group": "footer"
     }
   ],
   "groupNames": {

src/css/main.css

@@ -82,22 +82,31 @@ h2 {
     }
 }
 
+.text-link::before {
+    content: "[";
+}
+
+.text-link::after {
+    content: "]";
+}
+
 .text-link {
     color: var(--secondary-color);
-    text-decoration: underline solid var(--secondary-color2) 1px;
+    text-decoration: none;
     position: relative;
-    padding: 0 2px;
+    padding: 5px;
+    white-space: nowrap;
+    display: inline-block;
 }
 
 .text-link:hover {
-    text-decoration: underline solid var(--secondary-color) 1px;
     filter: drop-shadow(0 0 5px var(--secondary-color2)) brightness(1.02);
     top: -2px;
 }
 
 /* Links Container */
 .links {
-    padding: 10px;
+    padding: 0 10px;
 }
 
 /* Link Group */
@@ -163,7 +172,7 @@ h2 {
 }
 .links:hover .hoverHighlight:not(:hover) {
     @media only screen and (min-width: 480px) {
-        filter: brightness(0.5);
+        filter: brightness(0.8);
     }
 }
 

src/index.html

@@ -23,20 +23,13 @@
     <br>
     <section class="description">
         <p>css is pain and I used way too much math to implement that fuzzy search.</p>
-        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        <p>One day I will write something meaningful in this paragraph.</p>
-            dolore magna aliquyam erat, sed diam
-            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-            takimata sanctus est Lorem ipsum dolor sit
-            amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-            labore et dolore magna aliquyam erat, sed
-            diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-            takimata sanctus est Lorem ipsum dolor sit
-            amet.</p>
     </section>
-    <br><br>
+    <br>
     <section class="fuzzysearch">
         <input type="text" id="link-search" placeholder="fuzzy search">
     </section>
+    <br>
     <section class="links">
         <noscript>
             <p>javascript is not available. You can still see a list of my links <a class="text-link" href="content/links.json">here</a>.</p>
@@ -61,13 +54,7 @@
         </noscript>
     </section>
     <br>
-    <footer>
+    <footer></footer>
-        <a class="text-link" href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
-        <a class="text-link" href="content/links.json" target="_blank">links.json</a>
-        <a class="text-link" href="https://status.brulijam.com/status/brulijam">status</a>
-        <a class="text-link" href="https://brulijam.com/files" target="_blank">files</a>
-        <a class="text-link" href="https://brulijam.com/music" target="_blank">music</a>
-    </footer>
 </main>
 </body>
 </html>

src/js/links.js

@@ -13,12 +13,31 @@ function createLinkDiv(link) {
     return linkDiv;
 }
 
+function createFooterLink(link) {
+    const footerLink = document.createElement('a');
+    footerLink.className = 'text-link';
+    footerLink.href = link.href;
+    footerLink.target = '_blank';
+    footerLink.textContent = link.name;
+    return footerLink;
+}
+
 function createGroups(linksData, groupNames) {
     const container = document.querySelector('.links');
+    const footer = document.querySelector('footer');
 
     const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
 
     groups.forEach((group, index) => {
+        if (group === "footer") {
+            linksData
+                .filter(link => link.group === "footer")
+                .forEach(link => {
+                    const footerLink = createFooterLink(link);
+                    footer.appendChild(footerLink);
+                });
+        } else {
+            // Handle regular links
             const groupContainer = document.createElement('div');
             groupContainer.className = 'linkGroup';
 
@@ -39,6 +58,7 @@ function createGroups(linksData, groupNames) {
                 const br = document.createElement('br');
                 container.appendChild(br);
             }
+        }
     });
 }
 

src/js/main.js

@@ -1,12 +1,12 @@
 let hue = Math.floor(Math.random() * 360);
 
-const colorChangeInterval = 100;
+const colorChangeInterval = 150;
 
 function setRainbowColor() {
     const color = `hsl(${hue}, 80%, 80%)`;
     document.documentElement.style.setProperty('--secondary-color', color);
     document.documentElement.style.setProperty('--secondary-color2', `hsl(${hue}, 40%, 40%)`);
-    document.documentElement.style.setProperty('--secondary-color-bg', `hsl(${hue}, 40%, 5%)`);
+    document.documentElement.style.setProperty('--secondary-color-bg', `hsl(${hue}, 20%, 5%)`);
     hue = (hue + 1) % 360;
 }