5.4 KiB
5.4 KiB
Sir Blob's Desktop
My portfolio website, built as a web version of my Arch Linux desktop.
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.
- Floating windows - Alt + V or the title bar button pops a window out of the tiling layout so it can be dragged and resized.
- btop - a system monitor window with my real GitHub commit graph, repos as processes and some very scientific CPU and caffeine readings.
- 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,whoamiorcowsay. - 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 + V | Float or tile window |
| 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 |
btop |
system monitor with my GitHub stats |
pacman -S <pkg> |
install things (not really) |
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 |