153 lines
6.7 KiB
Markdown
153 lines
6.7 KiB
Markdown
<div align="center">
|
|
<h1>Sir Blob's Desktop</h1>
|
|
<p>My portfolio website, built as a web version of my Arch Linux desktop.</p>
|
|
|
|
<img src="https://img.shields.io/badge/Arch_Linux-1793D1?style=for-the-badge&logo=arch-linux&logoColor=white" alt="Arch Linux" />
|
|
<img src="https://img.shields.io/badge/Hyprland-00A86B?style=for-the-badge&logo=hyprland&logoColor=white" alt="Hyprland" />
|
|
<img src="https://img.shields.io/badge/SvelteKit-FF3E00?style=for-the-badge&logo=svelte&logoColor=white" alt="SvelteKit" />
|
|
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
|
<img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white" alt="Tailwind CSS" />
|
|
<img src="https://img.shields.io/badge/Bun-000000?style=for-the-badge&logo=bun&logoColor=white" alt="Bun" />
|
|
</div>
|
|
|
|
---
|
|
|
|
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 <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
|
|
|
|
```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 <url>`.
|
|
|
|
| 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.
|