From 84469e37533aca0f0aca9235e2050746ccbb5d66 Mon Sep 17 00:00:00 2001 From: Sir Blob Date: Mon, 1 Dec 2025 18:40:29 +0000 Subject: [PATCH] About Page Update 2 --- src/lib/components/tui/TuiCard.svelte | 44 +++++++-- src/lib/components/tui/types.ts | 1 + src/lib/pages/about.ts | 129 +++++++++++++++++++++++++- 3 files changed, 166 insertions(+), 8 deletions(-) diff --git a/src/lib/components/tui/TuiCard.svelte b/src/lib/components/tui/TuiCard.svelte index 936313d..25422da 100644 --- a/src/lib/components/tui/TuiCard.svelte +++ b/src/lib/components/tui/TuiCard.svelte @@ -92,13 +92,30 @@ {/if} - {#each titleSegments as segment} - {#if getSegmentStyle(segment)} - {segment.text} - {:else} - {segment.text} - {/if} - {/each} + {#if line.link} + + {#each titleSegments as segment} + {#if getSegmentStyle(segment)} + {segment.text} + {:else} + {segment.text} + {/if} + {/each} + + {:else} + {#each titleSegments as segment} + {#if getSegmentStyle(segment)} + {segment.text} + {:else} + {segment.text} + {/if} + {/each} + {/if} {/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; } diff --git a/src/lib/components/tui/types.ts b/src/lib/components/tui/types.ts index 7ac351c..9b79f40 100644 --- a/src/lib/components/tui/types.ts +++ b/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 { diff --git a/src/lib/pages/about.ts b/src/lib/pages/about.ts index 734dcd0..dc05578 100644 --- a/src/lib/pages/about.ts +++ b/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' }, {