This Portfolio — A Micro-App Flutter OS

Problem

A conventional portfolio describes work in a scroll of text and links. I wanted the opposite: a portfolio that is itself a Flutter product, where every claim is a live app a visitor can open, use, and judge in seconds.

Approach

Designed a micro-app architecture: every demo implements a single MicroAppModule contract and registers into a MicroAppManager registry. A go_router shell renders each app inside a phone frame with a shared splash, theming, and analytics pipeline, so 21 independent demos behave like one operating system.

Impact

The site ships as a single Flutter web bundle on Firebase Hosting with deep-linkable apps and case studies, light and dark themes, and a custom boot loader that keeps the first paint fast.

Challenge

Making 21 unrelated demos feel like one product required a strict module contract and shared design tokens. Keeping startup quick meant preloaded fonts, WebP screenshots, aggressive cache headers, and an HTML boot loader instead of a blank canvas.

What I built

• One MicroAppModule contract + registry powers a home grid of 21 interactive demos.
• Phone-frame shell: an interactive device mockup on desktop, full-screen on mobile.
• In-page demo overlay opens apps directly from the hero without losing context.
• Deep links for every app (/app/:id) and case study (/case-study/:slug) via go_router.
• Boot loader + preloaded fonts eliminate the blank-canvas flash on first load.
• A canonical content catalog generates this text as static HTML for crawlers and assistants.

Outcomes

• Turns portfolio browsing into hands-on product demos — no install, no signup.
• One router, one theme system, one analytics pipeline shared by every micro-app.
• Scales by design: a new demo is a folder plus one registration line in main().

Stack

• Flutter Web
• Dart
• go_router
• flutter_bloc
• Firebase

Links

• Live Site