Sir Blob's Desktop

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

--- The site recreates my [blomarchy](https://git.sirblob.co/SirBlob/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, a theme picker and a wallpaper 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`, `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 + 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 ` | browse and open pages | | `theme [name]` | list or switch themes | | `cowsay ` | moo | | `btop` | system monitor with my GitHub stats | | `pacman -S ` | install things (not really) | ## Running ```bash bun install bun run dev bun run start ``` The music player needs `ffmpeg` installed on the server. ### Docker ```bash 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 editor A terminal app built with [Textual](https://textual.textualize.io/) edits the playlist, shows, movies, books, portfolio, projects and themes without touching the JSON by hand. It uses the site's own themes. ```bash bun run content:setup bun run content ``` `content:setup` creates a virtual environment in `tools/content/.venv` and installs Textual and Pillow. Run it once. | Key | Action | | --- | --- | | `1` to `9` | Switch between Music, Shows, Movies, Books, Profile, Experience, Leadership, Projects and Themes | | `a` | Add (YouTube link, IMDb link or Goodreads link) | | `e` / `Enter` | Edit the selected entry (or change the rating for shows, movies and books) | | `f` | Toggle featured on a project | | `p` | Preview a theme in the editor | | `t` | Switch the editor to the next theme | | `s` | Move a book to another shelf, or make a theme the site default | | `d` | Delete | | `K` / `J` | Move a song or entry up or down | | `u` / `U` | Refresh the selected book, or every book, from Goodreads | | `r` | Reload from disk | | `q` | Quit | Show and movie titles are looked up on OMDb with `OMDB_API_KEY` from `.env`; fill in the name field to skip the lookup. Books are scraped from Goodreads once when added and saved to `books.json`. To check a Goodreads link on its own, run `python3 tools/content/goodreads.py `. | 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 | | `books.json` | Books scraped from Goodreads for the about page | | `wallpapers.json` | Wallpapers for the picker, written by `bun run wallpapers` | | `desktop.json` | Workspaces, desktop icons, the startup command and the default theme | | `themes.json` | Color themes for the site and the content editor | | `blog/*.md` | Blog posts | ### Wallpapers ```sh bun run wallpapers ``` Converts every image in `~/dotfiles/wallpapers` into a compressed JPEG in `static/wallpapers/gallery`, with a small thumbnail for the picker, and writes the list to `content/wallpapers.json`. Unchanged wallpapers are skipped, so run it again whenever the dotfiles change. Pass a folder to use a different source, or `--force` to convert everything again.