Qiuner.github.io

One portfolio, five interactive worlds

An immersive personal portfolio built with Astro and Three.js. The same projects, experiences, and ideas are reinterpreted as a cosmic journey, a navigable archipelago, a living jianghu inn, a linework room, and a detailed studio.

Explore the portfolio · 中文 · Architecture

---

World Previews

Cosmic World	Archipelago World	Jianghu World
Linework World	Studio World

Highlights

Five distinct interpretations

Each World has its own art direction, camera language, interaction model, and Portfolio Binding. Content is not duplicated or rewritten for individual scenes.

Portal journeys

Interactive landmarks connect the Worlds. The Runtime prepares the destination, hands over rendering ownership only when it is ready, and rolls back to the source World if loading fails or the journey is cancelled.

One Content Kernel

Projects, awards, skills, timeline entries, links, and media live in one semantic source of truth. Every World references stable portfolio IDs instead of page order or scene coordinates.

Adaptive 3D runtime

A shared Runtime owns the WebGL renderer, frame scheduling, input routing, quality budgets, World Sessions, and resource cleanup. The experience adapts its pixel ratio, effects, shadows, update rate, and transition mode to the device.

Static-first fallback

Astro emits a readable portfolio before WebGL starts. The content remains available when JavaScript, WebGL, or a 3D World cannot load.

---

Local Development

git clone https://github.com/Qiuner/Qiuner.github.io.git
cd Qiuner.github.io
npm install
npm run dev

Open the URL printed by Astro, normally http://localhost:4321.

# Type and Astro diagnostics
npm run check

# Test suite
npm test

# Production build and local preview
npm run build
npm run preview

Tech Stack

• Site and static output: Astro 7
• 3D runtime: Three.js WebGLRenderer
• Language: TypeScript 6
• World UI: Vue 3 and DOM overlays
• Testing: Vitest + jsdom
• Hosting: GitHub Pages + GitHub Actions

Repository Map

• src/content/portfolio.ts — canonical portfolio content
• src/runtime/ — renderer, frame scheduling, lifecycle, Portal journeys, and resources
• src/worlds/ — lazy World Modules and their visual bindings
• src/pages/index.astro — static portfolio host and Runtime mount point
• public/ — locally hosted World and portfolio media
• CONTEXT.zh-CN.md — domain language and architecture invariants
• docs/ARCHITECTURE.zh-CN.md — implemented architecture and evolution plan
• docs/adr/ — accepted architecture decisions

Architecture

The project separates portfolio facts from their presentation:

Content Kernel → World Binding → World Module
                         ↓
Astro Host ← Shared Runtime → Portal Journey

The Content Kernel is the single source of truth. World Modules are independently loadable interpretations. The Runtime is the sole owner of renderer, browser frame loop, input routing, quality policy, and World Session lifetime.

See the architecture overview and domain context for the complete model.

Deployment

Pushes to main are built by the deployment workflow and published as a static site on GitHub Pages. All production media and the Three.js dependency are owned by this repository; no runtime CDN is required.