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](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. - **File explorer** - a thunar window that browses `static/files` with grid and list views, a gallery of image thumbnails, previews for images, video and audio, and the image viewer for opening pictures. - **Kitty terminals** - a real command line with history and tab completion. Try `fastfetch`, `whoami` or `cowsay`. - **Desktop icons** - grouped into pages, terminal scripts, apps (files, tcg, movies, shows, books, games), games 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. - **Library apps** - movies, shows, books and games open as their own windows with status filters, search, sorting, details and a monthly watch and read history. Entries in the same series or collection are grouped together. Games can also be marked as a favorite or liked, with tags and a note, and the about page shows those starred games. - **Live data** - GitHub stars and forks, npm downloads, AniList anime stats and Last.fm listening stats collected into SQLite. - **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 | | `thunar` / `files` | browse `static/files` | | `movies` / `shows` / `books` / `games library` | open the library apps | | `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 5000; set `HOST_PORT` to publish it on a different port. Shows, movies and books live in the `library-data` volume and Last.fm data in the `lastfm-data` volume. ## 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` | Looking up shows and movies in the content editor | | `IGDB_CLIENT_ID`, `IGDB_CLIENT_SECRET` | Looking up games on IGDB in the content editor, from a Confidential app in the [Twitch developer console](https://dev.twitch.tv/console) | | `LASTFM_API_KEY` | Collecting Last.fm scrobbles for the listening stats | | `LIBRARY_API_KEY` | Secret the content editor sends to change shows, movies, books and games. Set the same value on the server and locally | | `LIBRARY_API_URL` | Site the content editor talks to, `http://localhost:5000` by default | | `LIBRARY_DATA_DIR` | Folder for `library.db`, `data/library` by default | | `LASTFM_DATA_DIR` | Folder for `lastfm.db`, `data/lastfm` by default | ## Content Personal content and config live in `content/`. Shows, movies, books and games are the exception: they live in a SQLite database at `data/library/library.db` (set `LIBRARY_DATA_DIR` to move it) that the server owns, so adding one never needs a commit. Last.fm scrobbles and album covers are collected at runtime into `data/lastfm/lastfm.db` (set `LASTFM_DATA_DIR` to move it). On first start an older `scrobbles.jsonl`, `covers.json`, `track-covers.json` and `images/` in that folder are moved into the database, and those files can be deleted afterwards. Both databases stay out of git. ### Library API | Request | Does | | --- | --- | | `GET /api/library` | Every show, movie, book and game, public | | `PUT /api/library/media/` | Add or change a show or movie | | `DELETE /api/library/media/` | Remove a show or movie | | `PUT /api/library/books/` | Add or change a book | | `DELETE /api/library/books/` | Remove a book | | `PUT /api/library/games/` | Add or change a game | | `DELETE /api/library/games/` | Remove a game | | `GET /api/library/images/` | A saved poster, cover or game image | Changes need `Authorization: Bearer `. A `PUT` only changes the fields it sends, and `null` clears one. When a status changes to watching, reading or playing the start date is set, and to watched, read or played the finish date, unless the request sends its own. Posters, covers and game images are downloaded by the server and kept in the database. A site path such as `/img/minecraft.png` is used as it is. ### Content editor A terminal app built with [Textual](https://textual.textualize.io/) edits the playlist, shows, movies, books, games, 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, Pillow and pillow-heif. Run it once, and again when `requirements.txt` changes. | Key | Action | | --- | --- | | `1` to `9`, `0` | Switch between Music, Shows, Movies, Books, Games, Profile, Experience, Leadership, Projects and Themes | | `a` | Add (YouTube link, IMDb link, Goodreads link, or a store link, IGDB link or name for a game) | | `S` | Add books from a Goodreads series | | `e` / `Enter` | Edit the selected entry (or change the rating for shows, movies, books and games) | | `g` | Put a show or movie in a group, which the library apps and about page show together, or set a game's tags and note | | `h` | Set the started and finished dates for a show, movie, book or game | | `l` | Change a game's store link or image | | `f` | Toggle featured on a project, or make a game your favorite | | `k` | Add a game to the games you like (up to 20) | | `p` | Preview a theme in the editor | | `t` | Switch the editor to the next theme | | `s` | Move a book to another shelf, set a show, movie or game status (a game can also be replayable), 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; `u` also refreshes a show or movie from OMDb, or a game from IGDB | | `C` | Save every missing book cover, or every missing show and movie poster and details, into the library | | `r` | Reload from disk or the library | | `q` | Quit | The Shows, Movies, Books and Games tabs read and write the library through the API at `LIBRARY_API_URL` using `LIBRARY_API_KEY`, so point it at the live site to update it from anywhere. Show and movie titles are looked up on OMDb with `OMDB_API_KEY` from `.env` when added; fill in the name field to skip the lookup. Books are scraped from Goodreads when added. To check a Goodreads link on its own, run `python3 tools/content/goodreads.py `. Games are looked up on IGDB with `IGDB_CLIENT_ID` and `IGDB_CLIENT_SECRET`. A Steam or Xbox link is matched to its IGDB entry directly; any other store link (Nintendo, Epic, GOG and so on) is searched by the name in the link, or by the name you enter. An IGDB link such as `https://www.igdb.com/games/hades-ii` always matches exactly. IGDB fills in the release date, platforms, developers, publishers, genres, summary, rating and a 16:9 artwork image; enter your own image to use it instead. To check a lookup on its own, run `python3 tools/content/igdb.py `. To move the games that used to be listed in `about.json` into the library once, run `bun run games:import`. It removes them from `about.json` only when every game was imported. | File | Holds | | --- | --- | | `profile.json` | Name, bio, socials, skills and photos | | `about.json` | Hobbies, setup and the AniList and Last.fm usernames | | `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 | | `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 | | File in `data/` | Holds | | --- | --- | | `library/library.db` | Shows, movies, books, games, their history dates and saved images | | `lastfm/lastfm.db` | Last.fm scrobbles, album and track cover links and saved cover images | ### Files Files you drop into `static/files` (any folders inside it too) show up in the file explorer and are served at `/files/...`. Hidden files are skipped. ```sh bun run files ``` Converts every HEIC or HEIF photo in `static/files` to a JPEG, turned the right way up and without metadata, and removes GPS location data from any other photo in there since the folder is public. Converted originals are moved to `tools/content/.cache/heic-originals`; pass `--delete-originals` to delete them instead, or `--keep-location` to leave location data alone. Run `bun run content:setup` again first to install `pillow-heif`. A hobby in `about.json` can have a `folder`, such as `"folder": "robotics"`. Clicking that hobby on the about page opens the file explorer in `static/files/robotics`. ### 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.