About Page Update 2
This commit is contained in:
@@ -92,13 +92,30 @@
|
||||
<Icon icon={line.icon} width="16" class="card-icon" />
|
||||
{/if}
|
||||
<span class="card-title">
|
||||
{#each titleSegments as segment}
|
||||
{#if getSegmentStyle(segment)}
|
||||
<span style={getSegmentStyle(segment)}>{segment.text}</span>
|
||||
{:else}
|
||||
{segment.text}
|
||||
{/if}
|
||||
{/each}
|
||||
{#if line.link}
|
||||
<a
|
||||
href={line.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="card-title-link"
|
||||
>
|
||||
{#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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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' },
|
||||
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user