SirBlob/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update links data source

Browse Source
This commit is contained in:
SirBlob
2026-06-30 21:04:06 +00:00
parent 70cd01019d
commit 6cfce40e54
4 changed files with 165 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+143 -106
View File
@@ -4,36 +4,66 @@ An Arch Linux terminal-themed portfolio website with Hyprland-style TUI componen
## Features
- 🖥️ **Hyprland-style TUI** - Terminal interface inspired by Textual Python TUI
- 🎨 **Theme Support** - Arch Linux and Catppuccin (Mocha/Latte) themes
- 🌓 **Dark/Light Mode** - Toggle between dark and light modes
- ⌨️ **Keyboard Navigation** - Navigate with arrow keys or vim-style j/k
- 🎮 **3D Model Viewer** - Interactive Three.js viewer for .glb models
- ⚡ **Configurable Speed** - Per-page typing animation speed
- 📱 **Responsive** - Works on desktop and mobile
- 🎨 **Rich Text Formatting** - Colors, backgrounds, and text decorations
- Hyprland-style TUI - Terminal interface inspired by Textual Python TUI
- Interactive command line - Type commands directly into the terminal to navigate and run actions
- Theme Support - Arch Linux and Catppuccin (Mocha/Latte) themes
- Dark/Light Mode - Toggle between dark and light modes
- Keyboard Navigation - Navigate with arrow keys or vim-style j/k
- 3D Model Viewer - Interactive Three.js viewer for .glb models
- QR Links Page - Generate a scannable QR code for any of your links
- Configurable Speed - Per-page typing animation speed
- Responsive - Works on desktop and mobile
- Rich Text Formatting - Colors, backgrounds, and text decorations
## Pages
- **Home** (`/`) - Neofetch-style intro with navigation
- **Portfolio** (`/portfolio`) - Skills, projects, and contact info
- **Models** (`/models`) - 3D model gallery with interactive viewer
- **Hackathons** (`/hackathons`) - Hackathon projects and achievements
- **Components** (`/components`) - Showcase of all TUI components
- Home (`/`) - Neofetch-style intro with navigation
- About (`/about`) - Background and details
- Portfolio (`/portfolio`) - Profile, experience, skills, and contact info
- Projects (`/projects`) - Open source, packages, and hackathon projects
- Models (`/models`) - 3D model gallery with interactive viewer
- Components (`/components`) - Showcase of all TUI components
- Links (`/links`) - All links with on-demand QR codes
The navbar exposes Home, About, Portfolio, Projects, and Blog. The Models, Components, and Links pages are reachable directly by URL or with the terminal `cd` command (for example, `cd links`).
## Terminal Commands
Every terminal page has an interactive command line at the bottom. Click the terminal (or just start typing once focused), enter a command, and press Enter. Output is printed back into the terminal.
Use the Up/Down arrows to cycle through command history.
| Command | Aliases | Description |
|---------|---------|-------------|
| `help` | `h`, `?` | List all available commands |
| `clear` | `cls` | Clear the terminal |
| `whoami` | | Show a short bio |
| `neofetch` | `banner` | Display system info |
| `skills` | | List skills by category |
| `contact` | `socials` | Show social links as buttons |
| `email` | | Open a mail draft |
| `cd <page>` | `goto`, `open` | Navigate to a page |
| `ls` | | List the pages you can visit |
| `theme [name]` | | List or set the color theme |
| `mode [dark\|light]` | | Toggle or set dark/light mode |
| `echo <text>` | | Print text back |
| `date` | | Show the current date and time |
Command definitions live in `src/lib/components/tui/terminal-commands.ts`. Add a new entry to the `commands` list to extend the command set.
## Configuration
The site configuration is now **modular** — split into focused files in `src/lib/config/` for easier maintenance. You can still import everything from `$lib/config` for backward compatibility.
The site configuration is modular - split into focused files in `src/lib/config/` for easier maintenance. You can still import everything from `$lib/config` for backward compatibility.
### Config File Structure
```
src/lib/config/
├── index.ts # Barrel export (re-exports all modules)
├── user.ts # User profile, socials, skills
├── user.ts # User profile, socials, links, skills
├── layout.ts # Layout dimensions, breakpoints, fonts, navbar, scrollbar
├── theme.ts # Colors, animations, effects, loading screen
├── content.ts # Projects, 3D models, hackathon cards
├── content.ts # Projects, 3D models, experience, hackathon cards
├── terminal.ts # Terminal settings, TUI styling, speed presets, shortcuts
└── navigation.ts # Navigation links, site metadata, page meta
```
@@ -45,9 +75,9 @@ src/lib/config/
import { user, colorPalette, projects } from '$lib/config';
// Direct imports (smaller bundles, faster builds)
import { user, skills } from '$lib/config/user';
import { user, skills, links } from '$lib/config/user';
import { colorPalette, animations } from '$lib/config/theme';
import { projects, models, cards } from '$lib/config/content';
import { openSourceProjects, cards, experience } from '$lib/config/content';
import { terminalSettings, keyboardShortcuts } from '$lib/config/terminal';
import { navigation, site, pageMeta } from '$lib/config/navigation';
```
@@ -56,14 +86,15 @@ import { navigation, site, pageMeta } from '$lib/config/navigation';
| File | Contents |
|------|----------|
| `user.ts` | `user`, `skills` |
| `user.ts` | `user`, `skills`, `links` |
| `layout.ts` | `layout`, `breakpoints`, `fonts`, `navbar`, `scrollbar` |
| `theme.ts` | `colorPalette`, `terminalButtons`, `loadingScreen`, `effects`, `animations` |
| `content.ts` | `projects`, `models`, `cards`, `sortedCards` + types |
| `content.ts` | `openSourceProjects`, `packageProjects`, `models`, `experience`, `cards`, `sortedCards` + types |
| `terminal.ts` | `terminalSettings`, `tuiStyle`, `tuiText`, `pageSpeedSettings`, `pageAutoscrollSettings`, `speedPresets`, `modelViewer`, `particles`, `keyboardShortcuts` |
| `navigation.ts` | `navigation`, `site`, `pageMeta` |
### Example: Key config snippets
```typescript
// Toggle theme keys and other shortcuts
export const keyboardShortcuts = {
@@ -83,7 +114,6 @@ export const terminalSettings = {
lineDelay: 100,
showCursor: true,
promptStyle: 'full',
icon: '🐧',
scrollMargin: 80,
};
@@ -100,21 +130,12 @@ export const colorPalette = {
error: '#f38ba8',
success: '#a6e3a1',
};
// TUI styling example
export const tuiStyle = {
borderRadius: 8,
borderWidth: 2,
width: '95%',
bodyPadding: '1rem 1.25rem 2rem 1.25rem',
buttonPadding: '0.5rem 0.75rem',
};
```
### How to Customize
- Edit `config/user.ts` to update your profile, socials, and skills
- Edit `config/content.ts` to add projects, models, or hackathon entries
- Edit `config/user.ts` to update your profile, socials, links, and skills
- Edit `config/content.ts` to add projects, models, experience, or hackathon entries
- Edit `config/theme.ts` to change colors, animations, or loading screen
- Edit `config/terminal.ts` to adjust typing speed, TUI styling, or shortcuts
- Edit `config/layout.ts` to change dimensions, breakpoints, or navbar settings
@@ -124,11 +145,28 @@ Changes take effect on next reload. Some values (fonts, CSS variables) may also
### Where to Look for Types & Utilities
- `src/lib/config/` — All configuration modules
- `src/lib/components/tui/types.ts` — TerminalLine types
- `src/lib/components/tui/utils.ts` — Parsing utilities and style helpers
- `src/lib/stores/theme.ts` — Theme store & `toggleMode()`
- `src/lib/index.ts` — Helper functions (barrel export)
- `src/lib/config/` - All configuration modules
- `src/lib/components/tui/types.ts` - TerminalLine types
- `src/lib/components/tui/utils.ts` - Parsing utilities and style helpers
- `src/lib/components/tui/terminal-commands.ts` - Interactive command definitions
- `src/lib/stores/theme.ts` - Theme store & `toggleMode()`
- `src/lib/index.ts` - Helper functions (barrel export)
## Links Page
The `/links` page lists everything in the `links` array (a dedicated list, separate from `user.socials`) and renders a scannable QR code for whichever link is selected, plus a clickable button to open it.
Add or remove entries in `src/lib/config/user.ts`:
```typescript
export const links: LinkItem[] = [
{ name: 'GitHub', icon: 'mdi:github', link: 'https://github.com/SirBlobby' },
{ name: 'Email', icon: 'mdi:email', link: `mailto:${user.email}` },
// Add page-only links here without touching user.socials
];
```
QR codes are generated with the `svelte-qrcode` package, loaded on the client.
## Speed Presets
@@ -214,11 +252,11 @@ Combine multiple styles with commas:
const lines: TerminalLine[] = [
{ type: 'command', content: 'ls -la' }, // With prompt prefix
{ type: 'output', content: 'File listing...' }, // Muted text
{ type: 'error', content: 'Error message' }, // Red with ✗ prefix
{ type: 'success', content: 'Success!' }, // Green with ✓ prefix
{ type: 'info', content: 'Information' }, // Primary with › prefix
{ type: 'header', content: 'Section Title' }, // Bold with # icon
{ type: 'blank', content: '' }, // Empty line
{ type: 'error', content: 'Error message' }, // Red with prefix
{ type: 'success', content: 'Success!' }, // Green with prefix
{ type: 'info', content: 'Information' }, // Primary with prefix
{ type: 'header', content: 'Section Title' }, // Bold heading
{ type: 'blank', content: '' }, // Empty line
{ type: 'divider', content: 'SECTION', id: 'section' }, // Horizontal divider with anchor ID
];
```
@@ -381,7 +419,6 @@ Groups allow you to arrange multiple elements together with custom layout:
groupDirection: 'row', // row | column (default: row)
groupAlign: 'start', // start | center | end
groupGap: '1rem', // CSS gap value
groupGap: '1rem', // CSS gap value
groupExpand: true, // Expand children to fill width (default: false)
inline: true, // Render inline with other elements
children: [
@@ -407,6 +444,7 @@ Main terminal component:
interactive={true}
speed="normal"
autoscroll={true}
enableCommands={true}
onComplete={() => console.log('Done!')}
/>
```
@@ -417,6 +455,7 @@ Props:
- `interactive` - Enable keyboard navigation
- `speed` - Typing speed preset or multiplier
- `autoscroll` - Auto-scroll as content types (default: true)
- `enableCommands` - Show the interactive command input (default: true)
- `onComplete` - Callback when typing animation finishes
### Anchor Scrolling
@@ -435,30 +474,31 @@ Then link to it with `/portfolio#skills` - the page will scroll to that section
src/lib/components/
├── TerminalTUI.svelte # Main terminal container
└── tui/
├── types.ts # TypeScript types (TerminalLine, TerminalAPI, etc.)
├── utils.ts # Parsing & styling utilities
├── terminal-api.ts # Terminal API factory for reactive control
├── terminal-typing.ts # Typing animation engine
├── terminal-keyboard.ts# Keyboard navigation handler
├── TuiHeader.svelte # Top status bar
├── TuiBody.svelte # Scrollable content area (uses TuiLine)
├── TuiFooter.svelte # Bottom status bar
├── TuiLine.svelte # Unified line renderer for all types
├── TuiGroup.svelte # Container for grouped elements
├── TuiButton.svelte # Full-width button
├── TuiLink.svelte # Inline clickable link
├── TuiCard.svelte # Card with header/body/footer
├── TuiCardGrid.svelte # Grid layout for cards
├── TuiProgress.svelte # Animated progress bar
├── TuiAccordion.svelte # Collapsible sections
├── TuiTable.svelte # Data table with headers
├── TuiTooltip.svelte # Hover tooltip
├── TuiInput.svelte # Text input field
├── TuiTextarea.svelte # Multi-line text input
├── TuiCheckbox.svelte # Checkbox input
├── TuiRadio.svelte # Radio button group
├── TuiSelect.svelte # Dropdown select
└── TuiToggle.svelte # Toggle switch
├── types.ts # TypeScript types (TerminalLine, TerminalAPI, etc.)
├── utils.ts # Parsing & styling utilities
├── terminal-api.ts # Terminal API factory for reactive control
├── terminal-typing.ts # Typing animation engine
├── terminal-keyboard.ts # Keyboard navigation handler
├── terminal-commands.ts # Interactive command definitions
├── TuiHeader.svelte # Top status bar
├── TuiBody.svelte # Scrollable content area + command input
├── TuiFooter.svelte # Bottom status bar
├── TuiLine.svelte # Unified line renderer for all types
├── TuiGroup.svelte # Container for grouped elements
├── TuiButton.svelte # Full-width button
├── TuiLink.svelte # Inline clickable link
├── TuiCard.svelte # Card with header/body/footer
├── TuiCardGrid.svelte # Grid layout for cards
├── TuiProgress.svelte # Animated progress bar
├── TuiAccordion.svelte # Collapsible sections
├── TuiTable.svelte # Data table with headers
├── TuiTooltip.svelte # Hover tooltip
├── TuiInput.svelte # Text input field
├── TuiTextarea.svelte # Multi-line text input
├── TuiCheckbox.svelte # Checkbox input
├── TuiRadio.svelte # Radio button group
├── TuiSelect.svelte # Dropdown select
└── TuiToggle.svelte # Toggle switch
```
## Terminal API
@@ -540,7 +580,6 @@ The `TerminalTUI` component exposes a reactive API for programmatic control via
]);
async function runProcess() {
// Update existing line
terminal?.updateById('status', {
type: 'info',
content: 'Processing...'
@@ -548,7 +587,6 @@ The `TerminalTUI` component exposes a reactive API for programmatic control via
await delay(1000);
// Add progress
terminal?.write({
type: 'progress',
content: '',
@@ -558,7 +596,6 @@ The `TerminalTUI` component exposes a reactive API for programmatic control via
await delay(1000);
// Complete
terminal?.updateById('status', {
type: 'success',
content: 'Complete!'
@@ -575,13 +612,14 @@ The `TerminalTUI` component exposes a reactive API for programmatic control via
The `ModelViewer` component provides an interactive Three.js viewer for `.glb` models.
### Features
- **Mouse Controls**: Drag to rotate, scroll to zoom
- **Arrow Key Controls**: Use arrow keys to orbit the camera (click viewer to focus first)
- **Auto-rotate**: Toggle automatic rotation
- **Wireframe Mode**: View model wireframe
- **Adjustable Lighting**: Increase/decrease scene brightness
- **Fullscreen Mode**: Expand to full viewport (press `Escape` to exit)
- **Ground Plane**: Optional shadow-receiving ground
- Mouse Controls: Drag to rotate, scroll to zoom
- Arrow Key Controls: Use arrow keys to orbit the camera (click viewer to focus first)
- Auto-rotate: Toggle automatic rotation
- Wireframe Mode: View model wireframe
- Adjustable Lighting: Increase/decrease scene brightness
- Fullscreen Mode: Expand to full viewport (press Escape to exit)
- Ground Plane: Optional shadow-receiving ground
- Graceful Fallback: Shows an error message when WebGL is unavailable instead of crashing
### Usage
@@ -596,11 +634,13 @@ Place `.glb` files in `/static/models/` and they'll be accessible at `/models/fi
## Tech Stack
- **Framework**: SvelteKit 2.x with Svelte 5 runes
- **Styling**: Tailwind CSS 4.x
- **3D**: Three.js with GLTFLoader
- **Icons**: @iconify/svelte
- **Font**: JetBrains Mono
- Framework: SvelteKit 2.x with Svelte 5 runes
- Styling: Tailwind CSS 4.x
- 3D: Three.js with GLTFLoader
- QR codes: svelte-qrcode
- Icons: @iconify/svelte
- Font: JetBrains Mono
- Runtime: Bun
## Development
@@ -614,29 +654,31 @@ bun run dev
# Build for production
bun run build
# Preview production build
bun run preview
# Type-check
bun run check
```
## Keyboard Shortcuts
| Key | Action |
|-----|--------|
| `↑` / `k` | Navigate up |
| `↓` / `j` | Navigate down |
| `Enter` | Activate button |
| `Y` | Skip typing animation |
| `T` | Toggle dark/light mode |
| Up / k | Navigate up |
| Down / j | Navigate down |
| Enter | Activate button |
| Y | Skip typing animation |
| T | Toggle dark/light mode |
When the command input is focused, these keys type normally instead of triggering navigation.
### 3D Model Viewer
| Key | Action |
|-----|--------|
| `←` | Rotate camera left |
| `→` | Rotate camera right |
| `↑` | Rotate camera up |
| `↓` | Rotate camera down |
| `Escape` | Exit fullscreen |
| Left | Rotate camera left |
| Right | Rotate camera right |
| Up | Rotate camera up |
| Down | Rotate camera down |
| Escape | Exit fullscreen |
## Theme System
@@ -647,7 +689,7 @@ Themes are defined as JSON files in `src/lib/assets/themes/`. Each theme contain
```json
{
"name": "Theme Name",
"icon": "🎨",
"icon": "arch",
"dark": {
"colors": {
"primary": "#89b4fa",
@@ -673,8 +715,8 @@ Themes are defined as JSON files in `src/lib/assets/themes/`. Each theme contain
}
},
"light": {
"colors": { /* light mode colors */ },
"colorMap": { /* light mode color map */ }
"colors": { },
"colorMap": { }
}
}
```
@@ -696,14 +738,10 @@ Themes are defined as JSON files in `src/lib/assets/themes/`. Each theme contain
```
4. Update the `ColorTheme` type to include your theme name
### Available Themes
- **Arch Linux** (`arch`) - Classic terminal colors with Arch blue
- **Catppuccin** (`catppuccin`) - Soft, pastel Mocha/Latte colors
### Theme-Specific Colors
Beyond the basic colors, themes include:
- `teal`, `sky`, `sapphire`, `lavender`
- `teal`, `sky`, `sapphire`, `lavender`
- `peach`, `maroon`, `mauve`
- `flamingo`, `rosewater`
@@ -716,7 +754,6 @@ Beyond the basic colors, themes include:
## Mobile Considerations
- **Viewport height**: Uses `100dvh` (dynamic viewport height) to properly handle mobile browser chrome
- **Background color**: A fallback dark background (`#1e1e2e`) is set on `html` and `body` to prevent white bars when the page content doesn't fill the viewport
- **Overflow handling**: Hidden horizontal scrollbar to prevent accidental horizontal scroll on mobile
- Viewport height: Uses `100dvh` (dynamic viewport height) to properly handle mobile browser chrome
- Background color: A fallback dark background (`#1e1e2e`) is set on `html` and `body` to prevent white bars when the page content doesn't fill the viewport
- Overflow handling: Hidden horizontal scrollbar to prevent accidental horizontal scroll on mobile