131 lines
5.4 KiB
Markdown
131 lines
5.4 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 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`, `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 CLI
|
|
|
|
A small Python tool (standard library only) edits the playlist, shows and movies without touching the JSON by hand.
|
|
|
|
```bash
|
|
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 |
|