SirBlob/website
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile styles, social icons and README badges

Browse Source
This commit is contained in:
SirBlob committed 2026-10-26 16:08:26 -04:00
1 parent be028d6934
commit a0fd2fa2a1
23 files changed
+235 -184
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+55 -142
View File
@@ -1,152 +1,65 @@
# Sir Blob's Desktop
<div align="center">
<h1>Sir Blob's Desktop</h1>
<p>My portfolio website, built as a web version of my Arch Linux desktop.</p>
A portfolio website that recreates my Arch Linux desktop (Hyprland, Quickshell bar, kitty terminals) in the browser. Built with SvelteKit 3, Svelte 5 runes and Tailwind CSS 4.
<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/Three.js-000000?style=for-the-badge&logo=threedotjs&logoColor=white" alt="Three.js" />
<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, live Discord status, battery and a theme picker.
- **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** - Flats, Retro 82, Tokyo Night, Catppuccin, Arch Linux, Gruvbox, Nord, Kanagawa, Wintry, Rose, Cerberus, Catppuccin Latte and Rose Pine Dawn, each with its own wallpaper.
- **Portfolio** - about, portfolio, projects (open source, packages, hackathons, research), blog with RSS, 3D models and links with QR codes.
- **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 + 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.
## 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 |
## Running
`start` builds the site with Bun (so it does not depend on the system Node version) and serves it with Bun on `PORT` (default 3000), reading `.env` for the Discord variables.
```bash
bun install
bun run dev
bun run build
bun run start
bun run check
```
## How the desktop works
- The top bar mirrors the blob-shell Quickshell bar: chai menu (app launcher), workspaces 1-9, clock, Discord status and theme picker.
- Every page (`/about`, `/projects/hackathons`, ...) opens as a tiled window, so old resume links still work.
- Terminals open next to it and tile with the Hyprland dwindle layout.
- Desktop icons open a page, a terminal running a command, or an external link.
- On small screens the focused window goes fullscreen and open windows are listed as tabs.
### Keybinds
| Keys | Action |
| --- | --- |
| Alt + Enter | Open a kitty terminal |
| Alt + Space | App launcher |
| Alt + Q | Close focused window |
| Alt + F | Fullscreen the page window |
| Alt + J / K | Focus next / previous window |
| Alt + 1-9 | Switch workspace |
| Alt + T | Next theme |
Alt stands in for Super, which browsers do not receive.
## Editing content
Everything you would normally change lives in `content/`. No code changes needed.
| File | Contents |
| --- | --- |
| `content/profile.json` | name (shown only on the portfolio page), bio, avatar, education, socials (also used by the links page), skills, interests |
| `content/experience.json` | experience with highlights, tech, awards and links |
| `content/leadership.json` | leadership roles |
| `content/about.json` | hobbies, games, shows, movies |
| `content/projects/opensource.json` | open source projects |
| `content/projects/packages.json` | published packages |
| `content/projects/hackathons.json` | hackathon projects, events and awards |
| `content/projects/research.json` | research roles and projects |
| `content/models.json` | 3D models (files go in `static/models/`) |
| `content/desktop.json` | default theme, workspaces, desktop icons, startup command |
| `content/blog.json` | blog name, tagline, posts per page |
| `content/blog/*.md` | blog posts |
### Projects
Every project in every category uses the same shape. Only `name`, `description`, `tags` and `links` are required.
```json
{
"name": "HushMap",
"description": "What it does.",
"image": "/hacks/hushmap.png",
"tags": ["Svelte", "FastAPI"],
"featured": true,
"event": { "name": "Bitcamp 2026", "university": "University of Maryland", "location": "College Park, MD", "year": "2026" },
"awards": [{ "track": "Best UI/UX Hack", "place": "Winner" }],
"demoMayBeOffline": false,
"version": "2.2.0",
"links": { "demo": "https://...", "code": "https://...", "devpost": "https://...", "package": "https://...", "article": "https://..." }
}
```
Featured projects are listed first.
### Desktop icons
Each icon in `content/desktop.json` has a `label`, an Iconify `icon` and one `open` action:
```json
{ "label": "about", "icon": "mdi:account", "open": { "page": "/about" } }
{ "label": "skills.sh", "icon": "mdi:script-text", "open": { "terminal": "skills" } }
{ "label": "github", "icon": "mdi:github", "open": { "url": "https://github.com/SirBlobby" } }
```
`{ "terminal": "" }` opens an empty terminal.
### Blog posts
Add a markdown file to `content/blog/`. The file name is the URL slug.
```markdown
---
title: My Post Title
author: Sir Blob
date: 2026-01-01
tags: meta, notes
excerpt: One line summary for the list and the RSS feed.
---
Post content in markdown.
```
The RSS feed is at `/blog/rss.xml`.
## Themes
Themes live in `src/lib/theme/themes.ts` and use the same keys as a blomarchy `colors.toml`, so a theme can be copied over from the dotfiles. Each theme can set a `wallpaper` (from `static/wallpapers/`) and an `activeBorder` gradient. The default theme is set in `content/desktop.json`.
Shipped themes: Flats (default), Retro 82, Tokyo Night, Catppuccin, Arch Linux, Gruvbox, Nord, Kanagawa, Wintry, Rose, Cerberus, Catppuccin Latte, Rose Pine Dawn.
## Terminal commands
`help`, `whoami`, `fastfetch`, `skills`, `contact`, `email`, `experience`, `projects [category]`, `ls`, `cd <page>`, `theme [name]`, `echo`, `cowsay`, `date`, `clear`, `exit`. Page names (`about`, `hackathons`, ...) and social names (`github`, `linkedin`, ...) also work as commands. Tab completes commands, pages after `cd`, themes after `theme` and categories after `projects`; when several match it lists them like bash. Up/Down walk history, Ctrl+L clears.
Commands live in `src/lib/terminal/commands/`.
## Code layout
| Path | Contents |
| --- | --- |
| `src/lib/content/` | typed loader for `content/` |
| `src/lib/blog/` | markdown renderer, frontmatter, highlighting, dates |
| `src/lib/theme/` | theme palettes, stylesheet generation, current theme state |
| `src/lib/desktop/` | window manager, dwindle tiling, keybinds, desktop actions |
| `src/lib/terminal/` | terminal output model and commands |
| `src/lib/site/pages.ts` | page list used by the terminal and launcher |
| `src/lib/components/shell/` | bar, workspaces, clock, theme menu, Discord status |
| `src/lib/server/discord.ts` | Discord bot and presence lookup |
| `src/lib/components/desktop/` | desktop, windows, icons, launcher |
| `src/lib/components/terminal/` | kitty terminal |
| `src/lib/components/ui/` | shared page pieces |
| `src/routes/` | pages |
## Discord status
The bar shows live Discord presence (status, avatar, guild tag, activities). A discord.js bot starts with the server (`src/hooks.server.ts`) and the bar polls `/api/discord` every 30 seconds. Copy `.env.example` to `.env` and fill in:
| Variable | Value |
| --- | --- |
| `DISCORD_TOKEN` | bot token, with the Server Members and Presence intents enabled |
| `DISCORD_USER_ID` | your user id |
| `DISCORD_GUILD_ID` | a server both you and the bot are in |
Variables are declared in `src/env.ts`. Without them the widget shows your profile name as offline.
## Analytics
Umami is loaded in `src/app.html`.
Site content lives in `content/`.