About Page Update

src/lib/pages/about.ts

@@ -1,23 +1,6 @@
 import type { TerminalLine } from '$lib/components/tui/types';
 import { user } from '$lib/config';
 
-
-
-const songs = [
-    {
-        name: 'Song A',
-        url: 'https://example.com'
-    },
-    {
-        name: 'Song B',
-        url: 'https://example.com'
-    },
-    {
-        name: 'Song C',
-        url: 'https://example.com'
-    }
-]
-
 const artist = [
     {
         name: 'Noah Floersch',
@@ -42,7 +25,7 @@ const games = [
     {
         name: 'Pokemon TCG Online',
         image: '/img/pokemontcg.png',
-        url: 'https://pokemon.com'
+        url: 'https://www.pokemon.com/us/pokemon-tcg'
     },
     {
         name: "Fire Watch",
@@ -53,6 +36,16 @@ const games = [
         name: "Expediton 33",
         image: '/img/e33.png',
         url: 'https://expedition33.com'
+    },
+    {
+        name: "Mini Motorways",
+        image: '/img/mini.png',
+        url: 'https://store.steampowered.com/app/1127500/Mini_Motorways/'
+    },
+    {
+        name: "Risk",
+        image: '/img/risk.png',
+        url: 'https://store.steampowered.com/app/1128810/RISK_Global_Domination/'
     }
 ]
 
@@ -78,7 +71,22 @@ export const lines: TerminalLine[] = [
         ]
     },
     { type: 'blank', content: '' },
-    { type: 'divider', content: 'Games' },
+
+    {
+        type: 'group', content: '', groupAlign: 'start', groupGap: '1rem',
+        children: [
+            { type: 'output', content: `(&primary, bold)Links >(&)`, inline: true },
+            { type: 'link', href: "/about#hobbies", content: `(&bg-blue, black, bold)Hobbies(&)`, inline: true },
+            { type: 'link', href: "/about#games", content: `(&bg-orange, black, bold)Games(&)`, inline: true },
+            { type: 'link', href: "/about#music", content: `(&bg-accent, black, bold)Music(&)`, inline: true },
+        ]
+    },
+
+
+    { type: 'divider', content: 'Hobbies', id: 'hobbies' },
+    { type: 'blank', content: '' },
+
+    { type: 'divider', content: 'Games', id: 'games' },
     {
         type: 'group',
         content: '',
@@ -91,12 +99,21 @@ export const lines: TerminalLine[] = [
             content: '',
             cardWidth: 1,
             cardFloat: 'center',
+            children: [
+                {
+                    type: 'button',
+                    content: '(&icon, proicons:game) (&white)Play(&)',
+                    href: g.url,
+                    style: 'primary',
+                    textStyle: 'center',
+                }
+            ]
         }))
     },
 
     { type: 'blank', content: '' },
 
-    { type: 'divider', content: 'Music Recommendations' },
+    { type: 'divider', content: 'Music Recommendations', id: 'music' },
 
     { 
         type: 'group',
@@ -105,18 +122,12 @@ export const lines: TerminalLine[] = [
         children: [
             { type: 'output', content: '(&accent)Artists:(&) ', inline: true },
             ...artist.flatMap((a, i): TerminalLine[] => {
-                const item: TerminalLine = { type: 'link', content: `(&white)${a.name}(&)`, href: a.url, inline: true };
+                const item: TerminalLine = { type: 'link', content: `(&primary)${a.name}(&)`, href: a.url, inline: true };
                 return i < artist.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item];
             }),
         ]
     },
 
-    // { type: 'blank', content: '' },
-    // { type: 'output', content: '(&accent)Songs:(&) ', inline: true },
-    // ...songs.flatMap((s, i): TerminalLine[] => {
-    //     const item: TerminalLine = { type: 'link', content: `(&white)${s.name}(&)`, href: s.url, inline: true };
-    //     return i < songs.length - 1 ? [item, { type: 'output', content: ' (&muted)•(&) ', inline: true }] : [item];
-    // }),
     { type: 'blank', content: '' },
     {
         type: 'card',
@@ -126,5 +137,5 @@ export const lines: TerminalLine[] = [
             { type: 'info', content: 'Loading playlist...' }
         ]
     },
-    { type: 'blank', content: '' },
+    { type: 'blank', content: '' }
 ];