Auto Scroll Update

This commit is contained in:
2025-11-28 03:14:06 +00:00
parent 9bda252271
commit c61cb39475
9 changed files with 56 additions and 26 deletions

View File

@@ -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",

View File

@@ -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(

View File

@@ -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

View File

@@ -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';

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 -->

View File

@@ -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>