Digital garden staniverse.xyz — a portfolio that is a WebXR constellation

The idea

A portfolio site is usually built on AIDA: attract attention, hold interest, create desire, prompt action. Email capture forms, SEO copy, a call to action on every screen. I went the other way. I did not need a landing page that lists works and asks you to subscribe to a newsletter. I needed a space where you can see how one thing grows out of another — and not in a paragraph of text but literally: a 3D graph of connections that you can enter from a VR headset browser and find yourself inside.

I work with XR, I talk about immersive technology, I convince people that they need it. I consider it wrong to be a person who broadcasts about XR from a flat screen but does not show how he builds and applies it with his own hands. staniverse.xyz is my answer: here is a WebXR experience, here is how it is assembled, here is what you hear and see. Come in from a Quest 3 and fly between my posts and cases as between stars. Or open it on your phone in AR — the graph will lie down right in your room. Or simply on the desktop.

The constellation is not there for the sake of a pretty metaphor. ya.ty.gorod. is the root node: out of it grew the Arch, MetaVyatka and Protected Vyatka (directly, as a bachelor’s thesis). Protected Vyatka may later join MetaVyatka. Albina is a separate line, but may find use in both: an embodied AI guide for natural areas or for the digital archive of the region. The graph on the home page is the map of this branching practice. You can fly across it and see the connections for yourself, without explanations.

Even the sidebar works on the same principle: the lab is the only section that unfolds child files in the navigation, because it is the space of experiments and connections matter especially there.

staniverse.xyz is literally a reified methodology. Not a description of connections but a space where connections are tangible. You can show not only the works but also the way they are connected in your head — and make that a means of the art itself. The process of making is a separate layer: a Telegram channel (raw human output) → LLM tagging (machine structuring) → an Obsidian vault (knowledge architecture) → WebXR constellations (immersive visualisation). A full cycle from the chaos of personal experience to spatial navigation through meanings.

Context

Projects, notes, cases and posts live in my Obsidian vault. The Telegram channel @staniverse is a stream of observations about GenAI, XR and automation. Posts from it are normalised by an LLM and settle into the structure of the vault. Part of this space has become public — not as a static calling card but as a working reflection of how I think and connect ideas. staniverse.xyz is the public slice of the vault. A portfolio, a knowledge archive and an XR venue in one place. The whole stack: tagging the Telegram channel → Obsidian → a Python sync script → Quartz → GitLab Pages.

How it works

WebXR: a constellation instead of a list

A Three.js scene loads on the home page, where every post, case, project and note is a star. Each category has its own colour: XR is purple, AI is light blue, technology is green, places are yellow, thoughts are pink, media is blue. The nodes are tied together by edges of shared subject matter, and you can travel through that graph.

In VR (Quest 3, Supermedium, any headset with a browser):

You are inside the graph. The stars are around you in 3D, each with a name, a type and a date
The left stick moves you forwards, backwards and sideways. Smooth, as in a simulator
The right stick turns you and changes altitude. You circle a cluster of AI nodes from above, dive into XR projects
Grip is acceleration. The faster you fly, the louder the whistle of pink noise
The trigger selects a star. A 3D card (CanvasTexture) opens with a description, tags and an “Open” button
The thumbrest opens the page in the browser

Hand tracking (Quest 3, Vision Pro): a pinch selects a star, a fist plus a drag moves you.

Desktop: the mouse turns, the wheel flies. Mobile: a touch joystick on the left and a swipe to turn the camera.

AR mode for smartphones: the graph is projected onto the room, the nodes arranged in a sphere of about two metres around you. You walk and tap the stars with your finger.

If you touch nothing at all, an automatic drift starts: the camera slowly travels between hubs, as if the site is guiding itself.

Generative music

Everything you hear on the home page is synthesised in real time through the Web Audio API. No files are loaded — it is generative ambient that never repeats. It is based on the pentatonic scale: it guarantees consonance with any number of voices sounding at the same time. A custom library of timbres.

The sound reacts to your position in the graph. Fly up to a cluster and new frequencies open up; density and volume change. The graph sounds different depending on where you are. There are interactive sounds for hovering, selecting a node and flying. A dynamics compressor protects against clipping.

The architecture of the audio scene keeps being refined — the current version is not the final one.

Architecture: Telegram → Obsidian → the site

Posts from @staniverse enter the vault in two steps. First tg_sync.py pulls new messages from the Telegram API through Telethon and saves them to result.json. Then rebuild_channel_notes.py runs tg_parser.parse_export(): it groups messages into threads (by continuation markers, reply_to and albums), sends each thread to a local LLM (Qwen 3.5-9B via LM Studio) with a prompt that returns JSON — title, tags, summary, type (tech/personal/project/share/event/mixed), entities, mood. In parallel a regex filter looks for known entities (Unity, WebXR, n8n, Claude…) as a fallback. For new entities wiki stubs are created — you mention a new tool and a stub appears in 04-knowledge/wiki/. The first occurrence of every entity becomes a wiki link. The resulting .md gets frontmatter with source: https://t.me/staniverse/N.

Content is published through sync_vault.py: filtering by publish: true in the frontmatter, mapping into the structure of Quartz’s content/, processing wiki links, converting assets into /assets/foo.jpg and video into a <video> tag.

The build is local — GitLab CI only publishes the finished public/. deploy.sh runs sync_vault plus the Quartz build, prunes unused assets, publishes video to the GitLab Package Registry, deletes video from public/ (too heavy for Pages) and pushes the orphan pages branch. GitLab publishes in about ten seconds.

The single unsolved problem is video. GitLab Pages cannot carry heavy artefacts, so the plan is to move to a dedicated server or Cloudflare R2.

What I did personally

Designed the architecture: Telegram → tg_sync → tg_parser (LLM tagging) → Obsidian → sync_vault → Quartz → GitLab Pages
Wrote the import pipeline: tg_sync.py, tg_parser.py with LLM generation of titles, tags, types and entities
Assembled the WebXR graph on Three.js: VR, AR, desktop, mobile, flight, hand tracking
Wrote the generative audio scene on the Web Audio API: ambient on the pentatonic scale with proximity reactivity and category mixing
Set up CI/CD: deploy.sh, the orphan branch, asset pruning, GitLab Pages
Integrated custom Quartz components: graph-xr, fluid-bg, garden-filter
Wrote the frontend through vibe coding with OpenAI Codex and GLM-5.1

Stack

Quartz 4
Obsidian
Three.js (0.184)
WebXR / Web Audio API
GitLab Pages / Git LFS
Python (tg_parser.py, sync_vault.py)
Telethon
Shell (deploy.sh)
Qwen 3.5-9B (LLM tagging of posts)
OpenAI Codex (vibe coding the frontend)
GLM-5.1 (vibe coding the frontend)

Immediate focus

Move to a dedicated server or Cloudflare R2 for video
Migrate to a new version of Quartz or switch to Astro
More interactive elements in the graph: filtering by time, a “connections only” mode

Result

staniverse.xyz is not a landing page with a subscription form and SEO copy. It is a public slice of living thought: an Obsidian vault you can walk into. You fly from an AI agent to a photogrammetry model of the Vyatka arch and you see the connections not because I wrote a paragraph about “how we arrived at the conclusion” but because they are there — the nodes are joined by edges, the graph changes the music next to different clusters, and you hear it. I could have made an ordinary website by the rules. But then I would be a person who talks about immersive technology from a flat screen.