About Page Update

src/lib/components/tui/TuiGroup.svelte

@@ -157,7 +157,7 @@
 		display: grid;
 		grid-template-columns: repeat(
 			auto-fill,
-			minmax(max(200px, calc((100% - 3.75rem) / 6)), 1fr)
+			minmax(max(200px, calc((100% - 3.75rem) / 5)), 1fr)
 		);
 		width: 100%;
 	}

src/lib/components/tui/utils.ts

@@ -74,8 +74,9 @@ const textStyles = ['bold', 'dim', 'italic', 'underline', 'strikethrough', 'over
 
 export function parseColorText(text: string, colors: ThemeColorMap = colorMap): TextSegment[] {
 	const segments: TextSegment[] = [];
-	// Match both (&specs)content(&) and (&icon, iconName) patterns
-	const regex = /\(&([^)]+)\)(.*?)\(&\)|\(&icon,\s*([^)]+)\)/g;
+	// Match (&icon, iconName) patterns FIRST, then (&specs)content(&)
+	// This prevents (&icon, ...) from being consumed as the start of a color block
+	const regex = /\(&icon,\s*([^)]+)\)|\(&([^)]+)\)(.*?)\(&\)/g;
 	let lastIndex = 0;
 	let match: RegExpExecArray | null;
 
@@ -84,16 +85,17 @@ export function parseColorText(text: string, colors: ThemeColorMap = colorMap):
 			segments.push({ text: text.slice(lastIndex, match.index) });
 		}
 
-		// Check if this is an icon match (match[3] is the icon name)
-		if (match[3]) {
-			const iconName = match[3].trim();
+		// Check if this is an icon match (Group 1 is the icon name)
+		if (match[1]) {
+			const iconName = match[1].trim();
 			segments.push({ text: '', icon: iconName });
 			lastIndex = match.index + match[0].length;
 			continue;
 		}
 
-		const specs = match[1].split(',').map(s => s.trim().toLowerCase());
-		const content = match[2];
+		// Standard text formatting (Group 2 is specs, Group 3 is content)
+		const specs = match[2].split(',').map(s => s.trim().toLowerCase());
+		const content = match[3];
 		const segment: TextSegment = { text: content };
 
 		for (const spec of specs) {

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: '' }
 ];

src/routes/layout.css

@@ -7,20 +7,6 @@
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 
-/* CSS Reset and Base Styles */
-:root {
-	--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
-	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-	
-	/* Animation durations */
-	--transition-fast: 150ms;
-	--transition-normal: 250ms;
-	--transition-slow: 400ms;
-	
-	/* Spacing */
-	--navbar-height: 60px;
-}
-
 /* Load local JetBrains Mono SemiBold from static folder so the site uses the exact semi-bold file */
 @font-face {
 	font-family: 'JetBrains Mono';
@@ -30,6 +16,19 @@
 	font-display: swap;
 }
 
+/* CSS Reset and Base Styles */
+:root {
+	--font-mono: 'JetBrains Mono', monospace;
+
+	/* Animation durations */
+	--transition-fast: 150ms;
+	--transition-normal: 250ms;
+	--transition-slow: 400ms;
+	
+	/* Spacing */
+	--navbar-height: 60px;
+}
+
 /* Prefer the local semi-bold version when bold/600 weight is requested */
 code, pre, kbd, samp, .terminal, .mono, .prompt, .prompt-mini, .hero-title {
 	font-family: 'JetBrains Mono', var(--font-mono);
@@ -54,7 +53,7 @@ html {
 body {
 	margin: 0;
 	padding: 0;
-	font-family: var(--font-sans);
+	font-family: var(--font-mono) !important;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	overflow-x: hidden;