2026-10-31 21:17:42 -04:00
2026-10-31 22:53:17 -04:00
2026-10-31 22:53:17 -04:00
2026-10-31 22:53:17 -04:00
2025-11-28 02:40:12 +00:00
2026-10-31 21:39:11 -04:00
2026-10-31 22:53:17 -04:00
2026-10-31 22:53:17 -04:00

Sir Blob's Desktop

My portfolio website, built as a web version of my Arch Linux desktop.

Arch Linux Hyprland SvelteKit TypeScript Tailwind CSS Bun

The site recreates my blomarchy setup in the browser: a Hyprland-style tiling desktop, the Quickshell bar, and kitty terminals you can type into.

Features

  • Tiling windows - every page opens as a window that tiles like Hyprland's dwindle layout, with gradient borders.
  • Quickshell bar - app launcher, workspaces, clock, music player, live Discord status, battery details and a theme picker.
  • Music player - plays a random song from a YouTube playlist, muted until you unmute it, with seek, skip, repeat, volume and a playlist view.
  • Image viewer - click any image to open it in an imv window with zoom, pan, rotate, pinch and swipe.
  • Kitty terminals - a real command line with history and tab completion. Try fastfetch, whoami or cowsay.
  • Desktop icons - grouped into pages, terminal scripts and socials (GitHub, LinkedIn, Devpost, Discord).
  • 13 themes - Cerberus, Flats, Tokyo Night, Night Cat, Catppuccin, Arch Linux, Gruvbox, Nord, Kanagawa, Wintry, Rose, Catppuccin Latte and Rose Pine Dawn, each with its own wallpaper.
  • Portfolio - about, portfolio, projects (open source, packages, hackathons, research, organizations), blog with RSS and links with QR codes.
  • Live data - GitHub stars and forks, npm downloads, AniList anime stats and OMDb posters for shows and movies.
  • Mobile friendly - on small screens windows go fullscreen with tabs to switch between them.

Keybinds

Keys Action
Alt + Enter Open a terminal
Alt + Space App launcher
Alt + Q Close window
Alt + F Fullscreen page
Alt + J / K Next / previous window
Alt + 1-9 Switch workspace
Alt + T Next theme

Alt stands in for Super, since browsers can't use it.

Image viewer

Keys Action
Left / Right Previous / next image
+ / - Zoom in / out
0 Fit to window
R / Shift + R Rotate right / left
Esc Close viewer

Terminal commands

Command Does
help list every command
whoami who I am
fastfetch system info
skills skills by category
experience work experience
projects [category] list my projects
contact where to find me
ls / cd <page> browse and open pages
theme [name] list or switch themes
cowsay <text> moo

Running

bun install
bun run dev
bun run start

The music player needs ffmpeg installed on the server.

Docker

docker compose up -d --build

The image builds the site with Bun and includes ffmpeg. It reads .env and serves on port 3000; set HOST_PORT to publish it on a different port.

Configuration

Copy .env.example to .env and fill in what you need. Every value is optional.

Variable Used for
DISCORD_TOKEN, DISCORD_USER_ID, DISCORD_GUILD_ID Live Discord status in the bar
OMDB_API_KEY Posters and details for shows and movies

Content

Site content lives in content/.

Content CLI

A small Python tool (standard library only) edits the playlist, shows and movies without touching the JSON by hand.

bun run content music list --titles
bun run content music add https://www.youtube.com/watch?v=VIDEO_ID
bun run content music remove VIDEO_ID
bun run content movie add tt0816692 --rating 10
bun run content show add https://www.imdb.com/title/tt14688458/ --rating 10 --name "Silo"
bun run content show rate Silo 9
bun run content movie remove Interstellar
bun run content show list

Titles are looked up on OMDb with OMDB_API_KEY from .env; pass --name to skip the lookup. Run bun run content --help for every option.

File Holds
profile.json Name, bio, socials, skills and photos
about.json Hobbies, games, shows, movies and the AniList username
experience.json / leadership.json Work experience and leadership roles
projects/*.json Open source, packages, hackathons, research groups and organizations
music.json YouTube links for the music player
desktop.json Workspaces, desktop icons and the startup command
blog/*.md Blog posts
Languages
Svelte 45.5%
TypeScript 33%
Python 21%
CSS 0.3%