studiolo.svetim.fm
ActiveLearn about the studiolo
This site is the proof of its own thesis. A GPU-accelerated physarum simulation as the living background. A desktop windowing system with draggable panels and persistent state. An AI chatbot powered by Cloudflare Workers. Interactive blog visualizations. All built in a single 23-hour session by one developer and an AI pair — 35 commits, 80 files, 11,139 lines of code.
// WHAT IS A STUDIOLO?
A studiolo was a small private room in Renaissance Italian homes — a personal study where scholars, artists, and thinkers kept their instruments, manuscripts, and curiosities. It wasn't a showroom. It was a workspace for synthesis: a place where ideas from different domains could collide. This site is that room, digitized. A space where projects, writing, and thinking coexist — not as a portfolio to be consumed, but as a working environment to be explored.
// WHAT IS PHYSARUM?
The living background you see is a simulation of Physarum polycephalum — a slime mold that solves mazes, optimizes transport networks, and finds shortest paths without a brain. It works through emergence: millions of simple agents following local chemical trails, collectively producing global intelligence. Each project node on the homepage is a food source. The trails you see are the organism reaching toward them. It's not decoration — it's a metaphor for how simple rules and clear constraints produce complex, adaptive behavior.
// WHY THIS EXISTS
Most portfolios are templates. This one is an argument — that systems-first thinking and AI augmentation let a single person ship production-quality interactive software at a pace that used to require a team. Every component follows the same architectural patterns: Astro files, scoped styles, CSS custom properties, IntersectionObserver triggers. The consistency is what made the velocity possible.
// THE SPRINT
35 commits across 23 hours. Six work blocks, one developer, ~78 story points.
// WHAT'S IN IT
- GPU-accelerated physarum simulation — WebGL2 compute shaders with automatic CPU fallback, 12 real-time parameters, 4 respawn patterns
- Desktop windowing system — draggable, z-ordered panels with persistent state across sessions
- AI chatbot (alex.ai) — Cloudflare Workers AI streaming SSE with structured context injection from .well-known/ai-context.json
- Interactive blog visualizations — scroll-triggered SVG animations built as Astro components, imported into MDX posts
- Glass lens distortion — post-processing shader that warps the physarum trail behind UI panels
- Cross-browser WebGL recovery — Safari 18 context loss detection and restoration during View Transitions
- Responsive across desktop, tablet (iPad), and mobile — single-screen mode on tablet, stacked on mobile
// WHAT SHIPPED
11,139 lines across 80 files. Distribution by feature:
// PATTERN COMPRESSION
Every component follows the same shape. When patterns are consistent, decisions compress — and compressed decisions are what AI executes best.
// ARCHITECTURE
No framework runtime — no React, no Vue, no hydration cost. Astro compiles pages to static HTML. Interactive features (physarum simulation, desktop shell, chat client) ship as scoped vanilla JS islands.
┌─────────────────────────────────────────────────────┐
│ Astro 5 (SSG) │
│ │
│ ┌──────────┐ ┌───────────┐ ┌──────────────────┐ │
│ │ Pages │ │ Blog │ │ Project Pages │ │
│ │ (astro) │ │ (MDX) │ │ (dynamic slug) │ │
│ └─────┬─────┘ └─────┬─────┘ └────────┬─────────┘ │
│ │ │ │ │
│ ┌─────▼─────────────▼────────────────▼──────────┐ │
│ │ Static HTML Output │ │
│ └───────────────────┬───────────────────────────┘ │
│ │ │
│ ┌───────────────────▼───────────────────────────┐ │
│ │ Client-Side Islands │ │
│ │ │ │
│ │ ┌─────────────┐ ┌────────────────────────┐ │ │
│ │ │ Physarum │ │ Desktop Shell │ │ │
│ │ │ WebGL2 GPU │ │ drag, z-order, state │ │ │
│ │ │ simulation │ │ window management │ │ │
│ │ └──────┬──────┘ └────────────────────────┘ │ │
│ │ │ │ │
│ │ ┌──────▼──────┐ ┌────────────────────────┐ │ │
│ │ │ Renderer │ │ Chat (SSE client) │ │ │
│ │ │ + glass │ │ → CF Workers AI │ │ │
│ │ │ lens FX │ │ Llama 3.2 3B │ │ │
│ │ └─────────────┘ └────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ GitHub Pages (static hosting) │ │
│ │ studiolo.svetim.fm (custom domain) │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘No framework runtime. Astro compiles to static HTML. Simulation, desktop shell, and chat ship as vanilla JS islands.
// KEY DECISIONS
- Astro SSG over Next.js/SvelteKit — no framework runtime, no hydration cost. Interactive parts are scoped vanilla JS islands, not a framework
- WebGL2 compute-via-texture for physarum — no WebGPU requirement, runs on Safari and older GPUs with automatic CPU fallback
- Desktop metaphor over scroll page — the windowing system makes content feel explorable rather than consumable
- Cloudflare Workers AI over browser-local LLM — cross-platform, no 16GB RAM requirement, free tier fits a personal site
- MDX blog posts with Astro component imports — visualizations are code, not images. They animate, respond to scroll, and match the site's design system
- CSS custom properties as the design system — one set of color/font tokens powers everything from physarum trails to blog captions