Terminal Portfolio Developer

Expert agent for developing and maintaining terminal-style portfolio and blog sites built with Svelte, featuring split-screen command interfaces and Beehiiv integration.

What This Skill Does

This skill helps you work with terminal-emulator portfolio sites built using Svelte. It understands the architecture of split-screen terminal interfaces, command registration systems, reactive state management, and Beehiiv blog integration via Cloudflare Functions.

Architecture Understanding

Core Components

1. **Split-Screen Layout**: Terminal on left (50%), content panel on right (50%), stacked on mobile

2. **Command System**: Centralized registry in `utils/commands.ts` supporting sync/async commands

3. **State Management**: Svelte stores for history, theme, and content

4. **Beehiiv Integration**: Server-side API proxy via Cloudflare Functions with 5-minute caching

Key Files

Development Workflow

1. Setting Up

```bash

Install dependencies

yarn install

Start dev server

yarn dev

Run type checks

yarn check

Build for production

yarn build

```

2. Adding New Commands

When adding a new command:

1. Register it in `src/utils/commands.ts`

2. Return string (HTML supported) for sync or Promise<string> for async

3. Command output displays in right panel, not terminal

4. Commands receive arguments as string array

Example:

```typescript

export const commands = {

mycommand: async (args: string[]) => {

const result = await fetchData(args[0]);

return `<div class="output">${result}</div>`;

}

};

```

3. Working with Beehiiv

**Environment Setup:**

**Available Commands:**

**API Caching:**

4. Styling Guidelines

**Color Scheme (Permanent):**

**Layout Rules:**

5. State Management

**History Store:**

**Content Store:**

**Theme Store:**

Common Tasks

Adding a New Feature

1. Identify component location (terminal vs. content panel)

2. Create/modify component in `src/lib/components/`

3. Register any new commands in `utils/commands.ts`

4. Update stores if state management needed

5. Test responsiveness (desktop and mobile)

Debugging

1. Check browser console for errors

2. Verify Cloudflare Functions logs for API issues

3. Inspect localStorage for history persistence

4. Use `yarn check` for TypeScript/Svelte errors

Performance Optimization

1. Implement caching for API calls (5-minute minimum)

2. Limit history size in localStorage

3. Use async/await for long-running commands

4. Lazy-load heavy content in right panel

Accessibility

1. Ensure keyboard navigation works (tab, arrows, enter)

2. Add ARIA labels to interactive elements

3. Test with screen readers

4. Maintain focus management in command input

Important Constraints

1. **No horizontal scrollbars** - all content must fit within panel widths

2. **Commands output to right panel only** - terminal shows commands, not outputs

3. **Permanent color scheme** - no theme switching functionality

4. **Server-side Beehiiv proxy** - never expose API keys client-side

5. **Mobile-first responsive** - test all changes on mobile breakpoints

Examples

Example 1: Add Simple Command

```typescript

// In src/utils/commands.ts

skills: () => {

return `

<div class="skills-list">

<h2>Skills</h2>

<ul>

<li>JavaScript/TypeScript</li>

<li>Svelte</li>

<li>Node.js</li>

</ul>

</div>

`;

}

```

Example 2: Add Async Command with Caching

```typescript

let cachedData: { data: string; timestamp: number } | null = null;

experience: async () => {

const now = Date.now();

if (cachedData && now - cachedData.timestamp < 300000) {

return cachedData.data;

}

const response = await fetch('/api/experience');

const data = await response.text();

cachedData = { data, timestamp: now };

return data;

}

```

Example 3: Create Cloudflare Function

```typescript

// functions/api/mydata.ts

export async function onRequest(context: { env: any }) {

const { API_KEY } = context.env;

const response = await fetch('https://api.example.com/data', {

headers: { 'Authorization': `Bearer ${API_KEY}` }

});

return new Response(await response.text(), {

headers: { 'Content-Type': 'application/json' }

});

}

```

Notes