{#each labelSegments as segment}
{#if segment.icon}
@@ -198,4 +233,30 @@
min-width: 100%;
}
}
+
+ /* Continuous Style */
+ .progress-bar.continuous .progress-blocks {
+ display: none;
+ }
+
+ /* Text Style */
+ .progress-text-bar {
+ font-family: monospace;
+ font-size: 1rem;
+ color: var(--terminal-dim);
+ white-space: nowrap;
+ }
+
+ .progress-text-bar .char {
+ color: var(--terminal-dim);
+ }
+
+ .tui-progress:not(.text-style) .progress-text-bar {
+ display: none;
+ }
+
+ .progress-text-bar .bracket {
+ color: var(--terminal-text);
+ font-weight: bold;
+ }
diff --git a/src/lib/components/tui/terminal-api.ts b/src/lib/components/tui/terminal-api.ts
index 91c5cb7..639976c 100644
--- a/src/lib/components/tui/terminal-api.ts
+++ b/src/lib/components/tui/terminal-api.ts
@@ -48,13 +48,17 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
function refreshDisplayedLines() {
const state = getState();
const colorMap = getColorMap();
- const displayedLines = state.lines.map((line, i) => {
+ // Only update lines that are already displayed to avoid forcing untyped lines to appear
+ const displayedLines = state.displayedLines.map((displayed, i) => {
+ const line = state.lines[i];
+ if (!line) return displayed; // Should not happen if state is consistent
+
const parsed = parseLine(line, colorMap);
return {
parsed,
- charIndex: parsed.plainText.length,
- complete: true,
- showImage: state.displayedLines[i]?.showImage ?? (line.type === 'image')
+ charIndex: displayed.complete ? parsed.plainText.length : displayed.charIndex,
+ complete: displayed.complete,
+ showImage: displayed.showImage ?? (line.type === 'image')
};
});
setState({ displayedLines, lines: [...state.lines] });
diff --git a/src/lib/components/tui/types.ts b/src/lib/components/tui/types.ts
index 2b797f7..7ac351c 100644
--- a/src/lib/components/tui/types.ts
+++ b/src/lib/components/tui/types.ts
@@ -77,6 +77,8 @@ export interface ButtonLine extends BaseTerminalLine {
href?: string;
icon?: string;
external?: boolean;
+ textStyle?: 'start' | 'center' | 'end';
+ border?: boolean;
}
export interface LinkLine extends BaseTerminalLine {
@@ -101,12 +103,16 @@ export interface CardLine extends BaseTerminalLine {
image?: string;
imageAlt?: string;
children?: TerminalLine[];
+ cardWidth?: string | number;
+ cardHeight?: string | number;
+ cardFloat?: 'start' | 'center' | 'end';
}
export interface ProgressLine extends BaseTerminalLine {
type: 'progress';
progress: number; // 0-100
progressLabel?: string;
+ progressStyle?: 'block' | 'continuous' | 'text';
}
export interface AccordionLine extends BaseTerminalLine {
@@ -195,8 +201,9 @@ export interface GroupLine extends BaseTerminalLine {
type: 'group';
children: TerminalLine[];
groupDirection?: 'row' | 'column';
- groupAlign?: 'start' | 'center' | 'end';
+ groupAlign?: 'start' | 'center' | 'end' | 'stretch';
groupGap?: string;
+ groupExpand?: boolean;
}
// Discriminated union of all line types
diff --git a/src/lib/components/tui/utils.ts b/src/lib/components/tui/utils.ts
index 1e78a75..467d82d 100644
--- a/src/lib/components/tui/utils.ts
+++ b/src/lib/components/tui/utils.ts
@@ -169,7 +169,7 @@ export function getSegmentStyle(segment: TextSegment): string {
if (segment.bold) styles.push('font-weight: bold');
if (segment.dim) styles.push('opacity: 0.6');
if (segment.italic) styles.push('font-style: italic');
-
+
// Combine text decorations
const decorations: string[] = [];
if (segment.underline) decorations.push('underline');
@@ -178,7 +178,7 @@ export function getSegmentStyle(segment: TextSegment): string {
if (decorations.length > 0) {
styles.push(`text-decoration: ${decorations.join(' ')}`);
}
-
+
return styles.join('; ');
}
@@ -211,3 +211,26 @@ export function getButtonStyle(style?: string): string {
return 'var(--terminal-text)';
}
}
+
+export function parseDimension(value: string | number | undefined): string | undefined {
+ if (value === undefined) return undefined;
+ if (typeof value === 'number') {
+ // If it's a decimal between 0 and 1, treat as percentage
+ if (value > 0 && value <= 1) {
+ return `${value * 100}%`;
+ }
+ return `${value}px`;
+ }
+ if (typeof value === 'string') {
+ // Handle fractions like "1/2", "1/3"
+ if (value.includes('/')) {
+ const [num, den] = value.split('/').map(Number);
+ if (!isNaN(num) && !isNaN(den) && den !== 0) {
+ return `${(num / den) * 100}%`;
+ }
+ }
+ // Return as is if it already has a unit or is just a number string
+ return value;
+ }
+ return undefined;
+}
diff --git a/src/lib/config/navigation.ts b/src/lib/config/navigation.ts
index efd7a76..90088b0 100644
--- a/src/lib/config/navigation.ts
+++ b/src/lib/config/navigation.ts
@@ -6,6 +6,7 @@ import { user, skills } from './user';
export const navigation = [
{ name: 'home', path: '/', icon: '~' },
+ { name: 'about', path: '/about', icon: 'mdi:account' },
{ name: 'portfolio', path: '/portfolio', icon: '📁' },
// { name: 'models', path: '/models', icon: '🎨' },
{ name: 'projects', path: '/projects', icon: '🏆' },
@@ -45,6 +46,12 @@ export const pageMeta: Record
= {
icon: 'mdi:home',
keywords: ['home', 'portfolio', 'about']
},
+ '/about': {
+ title: `${user.displayname} — About`,
+ description: `About — ${user.title} portfolio and projects.`,
+ icon: 'mdi:account',
+ keywords: ['about', 'portfolio', 'about']
+ },
'/portfolio': {
title: `${user.displayname} — Portfolio`,
description: 'Selected projects, highlights and case studies.',
diff --git a/src/lib/config/terminal.ts b/src/lib/config/terminal.ts
index aee7b14..e985a44 100644
--- a/src/lib/config/terminal.ts
+++ b/src/lib/config/terminal.ts
@@ -134,6 +134,7 @@ export const pageSpeedSettings: Record = {
// 'models': 'instant', // No typing animation
// 'hackathons': 0.5, // Custom: 2x faster than normal
'home': 'fast',
+ 'about': 'normal',
'portfolio': 'instant',
'models': 'fast',
'projects': 'fast',
@@ -147,6 +148,7 @@ export const pageAutoscrollSettings: Record = {
// 'home': true, // Enable autoscroll
// 'portfolio': false, // Disable autoscroll
'home': true,
+ 'about': false,
'portfolio': false,
'models': false,
'projects': false,
diff --git a/src/lib/config/user.ts b/src/lib/config/user.ts
index ea92bf6..e32725b 100644
--- a/src/lib/config/user.ts
+++ b/src/lib/config/user.ts
@@ -3,7 +3,7 @@
// ============================================================================
export const user = {
- name: 'Gagan M',
+ name: 'Gagan "Adith" M',
displayname: 'Sir Blob',
username: 'sirblob',
hostname: 'engineering',
diff --git a/src/lib/pages/about.ts b/src/lib/pages/about.ts
new file mode 100644
index 0000000..76b3296
--- /dev/null
+++ b/src/lib/pages/about.ts
@@ -0,0 +1,82 @@
+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: 'Artist A',
+ url: 'https://example.com'
+ },
+ {
+ name: 'Artist B',
+ url: 'https://example.com'
+ },
+ {
+ name: 'Artist C',
+ url: 'https://example.com'
+ }
+]
+
+
+
+export const lines: TerminalLine[] = [
+ { type: 'command', content: 'cat ~/about.md' },
+ { type: 'blank', content: '' },
+
+ { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 180, inline: true },
+
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'column',
+ groupAlign: 'start',
+ inline: true,
+ children: [
+ { type: 'header', content: `(&bold)${user.name}(&)` },
+ { type: 'info', content: `(&accent)${user.title}(&)` },
+ { type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` },
+ { type: 'output', content: `(&muted)${user.bio}(&)` },
+ ]
+ },
+ { type: 'blank', content: '' },
+ { type: 'divider', content: 'Music Recommendations' },
+
+ { type: 'output', content: '(&accent)Artist:(&) ', inline: true },
+ ...artist.flatMap((a, i): TerminalLine[] => {
+ const item: TerminalLine = { type: 'link', content: `(&white)${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',
+ id: 'music-player',
+ content: '',
+ children: [
+ { type: 'info', content: 'Loading playlist...' }
+ ]
+ },
+ { type: 'blank', content: '' },
+];
diff --git a/src/lib/pages/components.ts b/src/lib/pages/components.ts
index 8f22c6c..d90be31 100644
--- a/src/lib/pages/components.ts
+++ b/src/lib/pages/components.ts
@@ -110,6 +110,15 @@ export const lines: TerminalLine[] = [
action: () => console.log('Error clicked')
},
{ type: 'blank', content: '' },
+ {
+ type: 'button',
+ content: 'Borderless Button',
+ icon: 'mdi:border-none',
+ style: 'primary',
+ border: false,
+ action: () => console.log('Borderless clicked')
+ },
+ { type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Link Buttons(&)' },
{
@@ -219,6 +228,20 @@ export const lines: TerminalLine[] = [
},
{ type: 'blank', content: '' },
+ { type: 'info', content: '(&blue,bold)Full Width Group(&)' },
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'row',
+ groupGap: '1rem',
+ groupExpand: true,
+ children: [
+ { type: 'button', content: 'Full Width A', style: 'primary' },
+ { type: 'button', content: 'Full Width B', style: 'accent' }
+ ]
+ },
+ { type: 'blank', content: '' },
+
{ type: 'info', content: '(&blue,bold)Group with Links(&)' },
{
type: 'group',
@@ -409,6 +432,25 @@ export const lines: TerminalLine[] = [
},
{ type: 'blank', content: '' },
+ { type: 'info', content: '(&blue,bold)Card Sizing & Floating(&)' },
+ {
+ type: 'card',
+ content: 'Centered 50% width card',
+ cardTitle: 'Centered Card',
+ cardWidth: '1/2',
+ cardFloat: 'center',
+ style: 'primary'
+ },
+ {
+ type: 'card',
+ content: 'Floated right 300px card',
+ cardTitle: 'Floated Card',
+ cardWidth: 300,
+ cardFloat: 'end',
+ style: 'accent'
+ },
+ { type: 'blank', content: '' },
+
// ═══════════════════════════════════════════════════════════════
// TABLES
// ═══════════════════════════════════════════════════════════════
diff --git a/src/lib/pages/portfolio.ts b/src/lib/pages/portfolio.ts
index 411f23c..b000325 100644
--- a/src/lib/pages/portfolio.ts
+++ b/src/lib/pages/portfolio.ts
@@ -4,7 +4,7 @@ import { user, skills, projects } from '$lib/config';
export const lines: TerminalLine[] = [
// Header command
- { type: 'command', content: 'cat ~/about.md' },
+ { type: 'command', content: 'cat ~/portfolio.md' },
{ type: 'blank', content: '' },
// Avatar image
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 0311fc8..351cb29 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,9 +1,9 @@
diff --git a/src/routes/about/+page.server.ts b/src/routes/about/+page.server.ts
new file mode 100644
index 0000000..b431976
--- /dev/null
+++ b/src/routes/about/+page.server.ts
@@ -0,0 +1,25 @@
+import ytpl from 'ytpl';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+
+ const playlistUrl = 'https://music.youtube.com/playlist?list=PLHqPHHvmOjJ6JwiYc3Fg-O5JGbVppI1VR&si=CIb9WIKhjKsRV3p3';
+
+ const playlist = await ytpl(playlistUrl, { limit: Infinity });
+
+ const songs = playlist.items.map((item, index) => {
+ return {
+ index: index + 1,
+ title: item.title,
+ duration: item.duration, // format is usually mm:ss
+ author: item.author.name,
+ isLive: item.isLive,
+ url: item.shortUrl
+ };
+ });
+
+ return {
+ songs
+ };
+
+}
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..3b96eef
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,173 @@
+
+
+
+ About | {user.displayname}
+
+
+
+
+
+
+
+