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",
+      "href": "https://brulijam.com/mtrx/#/@brulijam:brulijam.com?web-instance[element.io]=app.element.io&client=element.io",
       "icon": "https://simpleicons.org/icons/matrix.svg",
       "group": 1
     },
@@ -125,31 +125,6 @@
       "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,31 +82,22 @@ h2 {
     }
 }
 
-.text-link::before {
-    content: "[";
-}
-
-.text-link::after {
-    content: "]";
-}
-
 .text-link {
     color: var(--secondary-color);
-    text-decoration: none;
+    text-decoration: underline solid var(--secondary-color2) 1px;
     position: relative;
-    padding: 5px;
+    padding: 0 2px;
-    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: 0 10px;
+    padding: 10px;
 }
 
 /* Link Group */
@@ -172,7 +163,7 @@ h2 {
 }
 .links:hover .hoverHighlight:not(:hover) {
     @media only screen and (min-width: 480px) {
-        filter: brightness(0.8);
+        filter: brightness(0.5);
     }
 }
 

src/index.html

@@ -23,13 +23,20 @@
     <br>
     <section class="description">
         <p>css is pain and I used way too much math to implement that fuzzy search.</p>
-        <p>One day I will write something meaningful in this paragraph.</p>
+        <p>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. 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>
@@ -54,7 +61,13 @@
         </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,31 +13,12 @@ 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';
 
@@ -58,7 +39,6 @@ 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 = 150;
+const colorChangeInterval = 100;
 
 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}, 20%, 5%)`);
+    document.documentElement.style.setProperty('--secondary-color-bg', `hsl(${hue}, 40%, 5%)`);
     hue = (hue + 1) % 360;
 }