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' },
{