Element Bug Fixes

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: '' },
+];

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
     // ═══════════════════════════════════════════════════════════════

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