About Page Update 2

src/lib/components/tui/TuiCard.svelte

@@ -92,13 +92,30 @@
 				<Icon icon={line.icon} width="16" class="card-icon" />
 			{/if}
 			<span class="card-title">
-				{#each titleSegments as segment}
+				{#if line.link}
-					{#if getSegmentStyle(segment)}
+					<a
-						<span style={getSegmentStyle(segment)}>{segment.text}</span>
+						href={line.link}
-					{:else}
+						target="_blank"
-						{segment.text}
+						rel="noopener noreferrer"
-					{/if}
+						class="card-title-link"
-				{/each}
+					>
+						{#each titleSegments as segment}
+							{#if getSegmentStyle(segment)}
+								<span style={getSegmentStyle(segment)}>{segment.text}</span>
+							{:else}
+								{segment.text}
+							{/if}
+						{/each}
+					</a>
+				{:else}
+					{#each titleSegments as segment}
+						{#if getSegmentStyle(segment)}
+							<span style={getSegmentStyle(segment)}>{segment.text}</span>
+						{:else}
+							{segment.text}
+						{/if}
+					{/each}
+				{/if}
 			</span>
 		</div>
 	{/if}
@@ -209,6 +226,19 @@
 		font-size: 0.85rem;
 	}
 
+	.card-title-link {
+		color: var(--card-accent);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-underline-offset: 2px;
+		transition: all 0.15s ease;
+	}
+
+	.card-title-link:hover {
+		text-decoration-style: solid;
+		filter: brightness(1.2);
+	}
+
 	.card-body {
 		padding: 0.75rem;
 	}

src/lib/components/tui/types.ts

@@ -106,6 +106,7 @@ export interface CardLine extends BaseTerminalLine {
 	cardWidth?: string | number;
 	cardHeight?: string | number;
 	cardFloat?: 'start' | 'center' | 'end';
+	link?: string;
 }
 
 export interface ProgressLine extends BaseTerminalLine {

src/lib/pages/about.ts

@@ -16,11 +16,30 @@ const artist = [
     }
 ]
 
+const hobbies = [
+    {
+        name: 'Swimming',
+        description: 'I enjoy swimming as a way to relax and stay active. It is my favorite sport.',
+        icon: 'proicons:person-swim'
+    },
+    {
+        name: 'Baking',
+        description: 'I love baking pastries and experimenting with new dessert recipes.',
+        icon: 'proicons:cake'
+    },
+    {
+        name: 'Robotics',
+        description: 'Building and programming robots to solve problems is a fascinating challenge.',
+        icon: 'proicons:robot'
+    }
+]
+
 const games = [
     {
         name: 'Minecraft',
         image: '/img/minecraft.png',
-        url: 'https://minecraft.net'
+        url: 'https://minecraft.net',
+        link: 'https://minecraft.net'
     },
     {
         name: 'Pokemon TCG Online',
@@ -49,6 +68,59 @@ const games = [
     }
 ]
 
+let shows = [
+    {
+        name: 'Silo',
+        rating: '10/10',
+        imdburl: 'https://www.imdb.com/title/tt14688458/'
+    },
+    {
+        name: 'The Mandalorian',
+        rating: '7/10',
+        imdburl: 'https://www.imdb.com/title/tt8111088/'
+    },
+    {
+        name: "Andor",
+        rating: '9/10',
+        imdburl: 'https://www.imdb.com/title/tt9253284/'
+    },
+    {
+        name: 'Severance',
+        rating: '9/10',
+        imdburl: 'https://www.imdb.com/title/tt11280740/'
+    },
+    {
+        name: "D.P. (KDrama)",
+        rating: '10/10',
+        imdburl: 'https://www.imdb.com/title/tt13024974/'
+    }
+];
+
+shows = shows.sort((a, b) => {
+    const ratingA = parseFloat(a.rating.split('/')[0]);
+    const ratingB = parseFloat(b.rating.split('/')[0]);
+    return ratingB - ratingA;
+});
+
+
+let movies = [
+    {
+        name: 'Interstellar',
+        rating: '10/10',
+        imdburl: 'https://www.imdb.com/title/tt0816692/'
+    },
+    {
+        name: "How to Train Your Dragon",
+        rating: '10/10',
+        imdburl: 'https://www.imdb.com/title/tt1621800/'
+    }
+];
+
+movies = movies.sort((a, b) => {
+    const ratingA = parseFloat(a.rating.split('/')[0]);
+    const ratingB = parseFloat(b.rating.split('/')[0]);
+    return ratingB - ratingA;
+});
 
 
 export const lines: TerminalLine[] = [
@@ -78,12 +150,27 @@ export const lines: TerminalLine[] = [
             { 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#shows", content: `(&bg-yellow, black, bold)Shows(&)`, inline: true },
+            { type: 'link', href: "/about#movies", content: `(&bg-green, black, bold)Movies(&)`, inline: true },
             { type: 'link', href: "/about#music", content: `(&bg-accent, black, bold)Music(&)`, inline: true },
         ]
     },
 
 
     { type: 'divider', content: 'Hobbies', id: 'hobbies' },
+    {
+        type: 'group',
+        content: '',
+        display: 'grid',
+        children: hobbies.map((h): TerminalLine => ({
+            type: 'card',
+            cardTitle: h.name,
+            icon: h.icon,
+            content: h.description,
+            cardWidth: 1,
+            cardFloat: 'center',
+        }))
+    },
     { type: 'blank', content: '' },
 
     { type: 'divider', content: 'Games', id: 'games' },
@@ -113,6 +200,46 @@ export const lines: TerminalLine[] = [
 
     { type: 'blank', content: '' },
 
+    { type: 'divider', content: 'TV Shows', id: 'shows' },
+    {
+        type: 'group',
+        content: '',
+        display: 'grid',
+        children: shows.map((s): TerminalLine => ({
+            type: 'card',
+            cardTitle: s.name,
+            content: '',
+            cardWidth: 1,
+            cardFloat: 'center',
+            link: s.imdburl,
+            children: [
+                { type: 'output', content: `Rating: (&accent)${s.rating}(&)` }
+            ]
+        }))
+    },
+
+    { type: 'blank', content: '' },
+
+    { type: 'divider', content: 'Movies', id: 'movies' },
+    {
+        type: 'group',
+        content: '',
+        display: 'grid',
+        children: movies.map((m): TerminalLine => ({
+            type: 'card',
+            cardTitle: m.name,
+            content: '',
+            cardWidth: 1,
+            cardFloat: 'center',
+            link: m.imdburl,
+            children: [
+                { type: 'output', content: `Rating: (&accent)${m.rating}(&)` }
+            ]
+        }))
+    },
+
+    { type: 'blank', content: '' },
+
     { type: 'divider', content: 'Music Recommendations', id: 'music' },
 
     {