Auto Scroll Update
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev --host",
|
"dev": "vite dev --host",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"server": "vite build && node server/server.js"
|
"start": "vite build && node server/server.js"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/adapter-node": "^5.4.0",
|
"@sveltejs/adapter-node": "^5.4.0",
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
onComplete?: () => void;
|
onComplete?: () => void;
|
||||||
interactive?: boolean;
|
interactive?: boolean;
|
||||||
speed?: SpeedPreset | number;
|
speed?: SpeedPreset | number;
|
||||||
|
autoscroll?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
@@ -26,7 +27,8 @@
|
|||||||
class: className = '',
|
class: className = '',
|
||||||
onComplete,
|
onComplete,
|
||||||
interactive = true,
|
interactive = true,
|
||||||
speed = 'normal'
|
speed = 'normal',
|
||||||
|
autoscroll = true
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
// Calculate speed multiplier from preset or number
|
// Calculate speed multiplier from preset or number
|
||||||
@@ -54,15 +56,14 @@
|
|||||||
let terminalElement: HTMLDivElement;
|
let terminalElement: HTMLDivElement;
|
||||||
let bodyElement = $state<HTMLDivElement>();
|
let bodyElement = $state<HTMLDivElement>();
|
||||||
|
|
||||||
// Autoscroll to bottom
|
// Autoscroll to bottom (respects autoscroll prop)
|
||||||
function scrollToBottom() {
|
function scrollToBottom() {
|
||||||
if (bodyElement) {
|
if (!autoscroll || !bodyElement) return;
|
||||||
bodyElement.scrollTo({
|
bodyElement.scrollTo({
|
||||||
top: bodyElement.scrollHeight,
|
top: bodyElement.scrollHeight,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Get all interactive button indices
|
// Get all interactive button indices
|
||||||
let buttonIndices = $derived(
|
let buttonIndices = $derived(
|
||||||
|
|||||||
@@ -4,12 +4,13 @@
|
|||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|
||||||
export const user = {
|
export const user = {
|
||||||
name: 'Sir Blob',
|
name: 'Gagan M',
|
||||||
|
displayname: 'Sir Blob',
|
||||||
username: 'sirblob',
|
username: 'sirblob',
|
||||||
hostname: 'engineering',
|
hostname: 'engineering',
|
||||||
title: 'Engineering Student',
|
title: 'Engineering Student',
|
||||||
email: 'you@example.com',
|
email: 'sirblob0@gmail.com',
|
||||||
location: 'San Francisco, CA',
|
location: 'Washington DC-Baltimore Area',
|
||||||
bio: `Hi, I am Sir Blob — a engineer who loves making things.` +
|
bio: `Hi, I am Sir Blob — a engineer who loves making things.` +
|
||||||
`I build fun coding projects, participate in game jams and hackathons, and enjoy games like Minecraft and Pokémon TCG Live.`,
|
`I build fun coding projects, participate in game jams and hackathons, and enjoy games like Minecraft and Pokémon TCG Live.`,
|
||||||
|
|
||||||
@@ -487,6 +488,19 @@ export const pageSpeedSettings: Record<string, SpeedPreset | number> = {
|
|||||||
'hackathons': 'normal'
|
'hackathons': 'normal'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Per-page autoscroll settings (whether to auto-scroll as content types)
|
||||||
|
// Set to false to disable autoscroll on specific pages
|
||||||
|
export const pageAutoscrollSettings: Record<string, boolean> = {
|
||||||
|
// Examples:
|
||||||
|
// 'home': true, // Enable autoscroll
|
||||||
|
// 'portfolio': false, // Disable autoscroll
|
||||||
|
'home': true,
|
||||||
|
'portfolio': false,
|
||||||
|
'models': true,
|
||||||
|
'hackathons': false,
|
||||||
|
'components': true
|
||||||
|
};
|
||||||
|
|
||||||
// Speed preset multipliers (lower = faster)
|
// Speed preset multipliers (lower = faster)
|
||||||
export const speedPresets: Record<SpeedPreset, number> = {
|
export const speedPresets: Record<SpeedPreset, number> = {
|
||||||
'instant': 0, // No delay, instant display
|
'instant': 0, // No delay, instant display
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// Central helper functions and re-exports
|
// Central helper functions and re-exports
|
||||||
import { terminalSettings, pageSpeedSettings, speedPresets, user } from './config';
|
import { terminalSettings, pageSpeedSettings, speedPresets, pageAutoscrollSettings, user } from './config';
|
||||||
|
|
||||||
export type SpeedPreset = 'instant' | 'fast' | 'normal' | 'slow' | 'typewriter';
|
export type SpeedPreset = 'instant' | 'fast' | 'normal' | 'slow' | 'typewriter';
|
||||||
|
|
||||||
@@ -45,6 +45,16 @@ export function getPageSpeedMultiplier(pageName: string): number {
|
|||||||
return speedPresets[setting] ?? 1;
|
return speedPresets[setting] ?? 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get autoscroll setting for a page
|
||||||
|
* @param pageName - Name of the page (e.g., 'home', 'portfolio')
|
||||||
|
* @returns boolean - Whether autoscroll is enabled (default: true)
|
||||||
|
*/
|
||||||
|
export function getPageAutoscroll(pageName: string): boolean {
|
||||||
|
const setting = pageAutoscrollSettings[pageName];
|
||||||
|
return setting ?? true; // Default to enabled
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the terminal prompt string
|
* Get the terminal prompt string
|
||||||
*/
|
*/
|
||||||
@@ -64,4 +74,4 @@ export function getPrompt(path: string = '~'): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Barrel exports (convenience re-exports)
|
// Barrel exports (convenience re-exports)
|
||||||
export { user, terminalSettings, pageSpeedSettings, speedPresets, pageMeta, site } from './config';
|
export { user, terminalSettings, pageSpeedSettings, speedPresets, pageAutoscrollSettings, pageMeta, site } from './config';
|
||||||
|
|||||||
@@ -2,17 +2,18 @@
|
|||||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||||
import type { TerminalLine } from '$lib/components/tui/types';
|
import type { TerminalLine } from '$lib/components/tui/types';
|
||||||
import { user, skills, site, navigation } from '$lib/config';
|
import { user, skills, site, navigation } from '$lib/config';
|
||||||
import { getPageSpeedMultiplier } from '$lib';
|
import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
|
||||||
import { colorTheme } from '$lib/stores/theme';
|
import { colorTheme } from '$lib/stores/theme';
|
||||||
|
|
||||||
const speed = getPageSpeedMultiplier('home');
|
const speed = getPageSpeedMultiplier('home');
|
||||||
|
const autoscroll = getPageAutoscroll('home');
|
||||||
|
|
||||||
// Build the terminal lines for the home page
|
// Build the terminal lines for the home page
|
||||||
const lines: TerminalLine[] = [
|
const lines: TerminalLine[] = [
|
||||||
// neofetch style intro
|
// neofetch style intro
|
||||||
{ type: 'command', content: 'bash ~/startup.sh', delay: 300 },
|
{ type: 'command', content: 'bash ~/startup.sh', delay: 300 },
|
||||||
{ type: 'blank', content: '' },
|
{ type: 'blank', content: '' },
|
||||||
{ type: 'header', content: `Welcome to ${user.name}'s Portfolio` },
|
{ type: 'header', content: `Welcome to ${user.displayname}'s Portfolio` },
|
||||||
{ type: 'blank', content: '' },
|
{ type: 'blank', content: '' },
|
||||||
{ type: 'output', content: `(&muted)${user.bio}(&)` },
|
{ type: 'output', content: `(&muted)${user.bio}(&)` },
|
||||||
{ type: 'blank', content: '' },
|
{ type: 'blank', content: '' },
|
||||||
@@ -42,7 +43,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="home-container">
|
<div class="home-container">
|
||||||
<TerminalTUI {lines} title="~" interactive={true} {speed} />
|
<TerminalTUI {lines} title="~" interactive={true} {speed} {autoscroll} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||||
import type { TerminalLine } from '$lib/components/tui/types';
|
import type { TerminalLine } from '$lib/components/tui/types';
|
||||||
import { user } from '$lib/config';
|
import { user } from '$lib/config';
|
||||||
import { getPageSpeedMultiplier } from '$lib';
|
import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
|
||||||
|
|
||||||
const speed = getPageSpeedMultiplier('portfolio');
|
const speed = getPageSpeedMultiplier('components');
|
||||||
|
const autoscroll = getPageAutoscroll('components');
|
||||||
|
|
||||||
// Sample data for examples
|
// Sample data for examples
|
||||||
const sampleTableHeaders = ['Name', 'Type', 'Status'];
|
const sampleTableHeaders = ['Name', 'Type', 'Status'];
|
||||||
@@ -303,7 +304,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="components-container">
|
<div class="components-container">
|
||||||
<TerminalTUI {lines} title="~/components" interactive={true} {speed} />
|
<TerminalTUI {lines} title="~/components" interactive={true} {speed} {autoscroll} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||||
import type { TerminalLine } from '$lib/components/tui/types';
|
import type { TerminalLine } from '$lib/components/tui/types';
|
||||||
import { user, sortedCards } from '$lib/config';
|
import { user, sortedCards } from '$lib/config';
|
||||||
import { getPageSpeedMultiplier } from '$lib';
|
import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
|
||||||
|
|
||||||
const speed = getPageSpeedMultiplier('hackathons');
|
const speed = getPageSpeedMultiplier('hackathons');
|
||||||
|
const autoscroll = getPageAutoscroll('hackathons');
|
||||||
|
|
||||||
// Count stats
|
// Count stats
|
||||||
const totalHackathons = sortedCards.length;
|
const totalHackathons = sortedCards.length;
|
||||||
@@ -32,7 +33,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="hackathons-container">
|
<div class="hackathons-container">
|
||||||
<TerminalTUI {lines} title="~/hackathons" interactive={true} {speed} />
|
<TerminalTUI {lines} title="~/hackathons" interactive={true} {speed} {autoscroll} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -3,11 +3,12 @@
|
|||||||
import type { TerminalLine } from '$lib/components/tui/types';
|
import type { TerminalLine } from '$lib/components/tui/types';
|
||||||
import ModelViewer from '$lib/components/ModelViewer.svelte';
|
import ModelViewer from '$lib/components/ModelViewer.svelte';
|
||||||
import { user } from '$lib/config';
|
import { user } from '$lib/config';
|
||||||
import { getPageSpeedMultiplier } from '$lib';
|
import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
|
||||||
import { themeColors } from '$lib/stores/theme';
|
import { themeColors } from '$lib/stores/theme';
|
||||||
import Icon from '@iconify/svelte';
|
import Icon from '@iconify/svelte';
|
||||||
|
|
||||||
const speed = getPageSpeedMultiplier('models');
|
const speed = getPageSpeedMultiplier('models');
|
||||||
|
const autoscroll = getPageAutoscroll('models');
|
||||||
|
|
||||||
// Available GLB files in static/models/
|
// Available GLB files in static/models/
|
||||||
const glbModels = [
|
const glbModels = [
|
||||||
@@ -62,7 +63,7 @@
|
|||||||
>
|
>
|
||||||
<!-- Terminal Section -->
|
<!-- Terminal Section -->
|
||||||
<div class="terminal-section">
|
<div class="terminal-section">
|
||||||
<TerminalTUI {lines} title="~/3d-models" interactive={true} {speed} />
|
<TerminalTUI {lines} title="~/3d-models" interactive={true} {speed} {autoscroll} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 3D Viewer Section -->
|
<!-- 3D Viewer Section -->
|
||||||
|
|||||||
@@ -2,9 +2,10 @@
|
|||||||
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
import TerminalTUI from '$lib/components/TerminalTUI.svelte';
|
||||||
import type { TerminalLine } from '$lib/components/tui/types';
|
import type { TerminalLine } from '$lib/components/tui/types';
|
||||||
import { user, skills, projects, site } from '$lib/config';
|
import { user, skills, projects, site } from '$lib/config';
|
||||||
import { getPageSpeedMultiplier } from '$lib';
|
import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';
|
||||||
|
|
||||||
const speed = getPageSpeedMultiplier('portfolio');
|
const speed = getPageSpeedMultiplier('portfolio');
|
||||||
|
const autoscroll = getPageAutoscroll('portfolio');
|
||||||
|
|
||||||
// Build the terminal lines for the portfolio page
|
// Build the terminal lines for the portfolio page
|
||||||
const lines: TerminalLine[] = [
|
const lines: TerminalLine[] = [
|
||||||
@@ -123,7 +124,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="portfolio-container">
|
<div class="portfolio-container">
|
||||||
<TerminalTUI {lines} title="~/portfolio" interactive={true} {speed} />
|
<TerminalTUI {lines} title="~/portfolio" interactive={true} {speed} {autoscroll} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user