About catstarry.xyz

A digital living space built between stars, cream galleries, and cyber arenas.

The Spark: From Constellation to Canvas

The idea for catstarry.xyz emerged from a simple tension: I wanted a personal website that didn't feel like a portfolio template, yet wasn't a chaotic scrapbook either. As someone who isn't a programmer by trade, I found myself drawn to the metaphor of space—not as decoration, but as a way to organize meaning.

I imagined the homepage not as a dashboard, but as a star field you approach from deep space. Five planets—About, Blog, Feed, Learn, and Projects—float freely in a warm, geological universe. Each has its own terrain: About is quiet pale rock, Blog carries sedimentary layers like paper pulp, Feed shows river valleys worn by time, Learn reveals fault lines and mineral veins, and Projects bears the cuts of human craft embedded in natural ground.

The color Klein Blue ($#002FA7$) became the brand voltage—a signal in the void, appearing only at edges, routes, and focal points. It never dominates the planetary surfaces, which remain warm in cream, sand, clay, and mineral tones. This constraint, expressed as:

$$\text{Surface Warmth} \gg \text{Klein Blue Coverage}$$

became the foundational rule of the entire visual system.

The leopard cat—my personal signature, not a mascot—orbits as a Klein Blue satellite near the About planet, a hidden path for those who notice the silhouette of ears and tail in the stardust.

What I Learned: Design as Architecture

Building this project taught me that design decisions are architecture decisions. When we locked DESIGN.md v2.0 in Phase 4.1, we weren't just choosing colors—we were defining data boundaries:

• ADR-005 forced us to separate native Feed content from system footprints (blog publishes, learn completions, project updates) at the storage layer, while presenting them as a unified Public Timeline in the UI.
• ADR-006 retired the idea of a /api/home endpoint. The Home star map is purely static (SSG), carrying no content aggregation. This meant the visual richness of the star field couldn't rely on dynamic data—it had to be honest about being a navigation space, not a content feed.

I learned that CJK typography is a first-class engineering concern, not an afterthought. Chinese body text demands:

$$\text{line-height}_{\text{CJK}} \geq 1.85$$

and display sizing must scale down to approximately $0.9\times$ the English equivalent. Punctuation trimming, hanging punctuation, and quarter-em spacing between Chinese and Latin characters aren't aesthetic flourishes—they're readability requirements.

The three-canvas system—Deep Space (Home), Cream Gallery (Content), and Cyber Arena (Finance)—taught me that consistency doesn't mean uniformity. Each canvas has its own gravity, its own silence, its own rules for interaction. The mouse meteor trail exists fully in Home, weakens in Content, and disappears entirely in Finance where precision matters.

How It Was Built: Vibe Coding with Governance

This project is built on Astro hybrid rendering + React islands + Cloudflare's edge infrastructure (Workers, D1, KV, R2). But the technical stack is only half the story.

Because I'm not a traditional developer, the project follows a design-driven, AI-assisted workflow:

1. Phase 0–1: Establish ubiquitous language and requirements through structured drilling
2. Phase 2–3: Convert requirements into tickets and architecture decisions (ADRs)
3. Phase 4: Lock the design system before writing page components
4. Phase 5: Implement module by module, with TDD and code review
5. Phase 6–8: Test, deploy, and maintain

The dependency baseline migration—from Astro $5.18.2$ to $7.0.9$—happened as an isolated infrastructure task between Phase 4.1 and 4.2, ensuring the framework upgrade didn't bleed into design or feature work. This taught me the value of gated phases: design stays locked while infrastructure moves, and infrastructure migrations carry no feature cargo.

The architecture uses two D1 databases (main site + finance), two Workers (feed-api and finance-api), and a monorepo structure. The Feed system, for instance, handles media uploads to R2, publishes native posts to D1, and renders a unified timeline that blends notes, clips, and system footprints without exposing the storage split to the visitor.

The Challenges: Gravity Wells and Orbits

1. The Home Page Paradox

The hardest design challenge was resisting the urge to make Home a content aggregator. Every instinct says the homepage should show your latest blog post, your recent tweets, your active projects. But ADR-006 locked Home as a pure spatial narrative—a star map you navigate, not a dashboard you read.

This meant accepting that the "discover more" experience is spatial, not temporal. The scroll journey covers $2\text{–}3$ viewport heights of approach space before revealing the full star map. Every planet must remain clickable at any stage. The parallax layers (far, mid, near stars) must suggest depth without becoming a screensaver.

2. The Leopard Cat Easter Egg

The About planet required two paths to the same state: a direct click for accessibility, and a two-click charge-through-explosion sequence via the leopard cat satellite. Designing this meant solving for:

• Keyboard users: must reach About without discovering the cat
• Touch devices: must not require a third gesture
• Reduced motion: must degrade to simple fade transitions
• The explosion constraint: only the cat particles burst; the About planet never explodes

The particle system uses Klein Blue optics exclusively, with charge scales and recovery durations that had to be calibrated in isolation prototypes before touching the canonical CSS.

3. CJK + WCAG + Geological Aesthetics

Balancing warm geological textures with accessibility contrast ratios was a constant negotiation. The Content canvas uses #FAF9F5 (cream gallery) with warm ink text #141413. Home uses #0A0A0C (deep void) with #E5E7EB text. Every token exists in three layers—primitive, semantic, and component—ensuring that a planet's rim glow or a signal satellite's pulse can be reasoned about without leaking raw hex values into component logic.

The mathematical relationship between contrast and warmth became a recurring theme:

$$\text{Contrast Ratio}_{\text{WCAG AA}} \geq 4.5 : 1 \quad \text{for all body text}$$

Yet within that constraint, we had to preserve the feeling of warm rock, paper fiber, and mineral deposit—not cold corporate blue.

4. Non-Programmer + AI Agent Coordination

Perhaps the most human challenge was orchestrating work across AI conversations. Codex doesn't remember across threads. I became the messenger between phases, carrying state from design to architecture to implementation. The workflow-orchestration.md and DASHBOARD.md aren't bureaucratic overhead—they're the nervous system of a project where the human (me) provides continuity and the AI provides execution.

Where It Stands

As of now, the blog prototype is live, the star map is designed but not yet built, the Feed architecture is locked but awaiting implementation, and the Finance panel exists only in specification. The site is a work in continuous orbit—not a finished product, but a living space that grows with its owner.

If you navigate to the star field and see five warm planets against a deep void, each with its own geology and its own quiet invitation to explore—then the core vision has survived the journey from imagination to architecture to code.

And if you find the leopard cat, you'll know you've looked closely enough.

Built With

• astro
• cloudflare
• react
• shadcn/ui
• typescript