Personal Projects / 2026
Stefan’s Playground
Designed a personal creative playground where apps, websites, games, and experiments share a searchable gallery, expressive themes, and a clear path from an idea to a working experience.
Design Highlights
The creative workspace
A browsable project collection
Comic book theme
Samus theme
Context before interaction
Controls that stay out of the way
Raptor theme
Terminal theme
Find a project or switch themes
Overview
Stefan’s Playground is my personal workspace for creative experiments, evolved from a Docebo-focused prototype gallery into a home for apps, websites, games, animations, and whatever comes next. I designed and built a shared gallery that gives each experiment a clickable URL, visual preview, review brief, and version history while preserving its own visual identity. The current collection includes learning, administration, creator, skill-management, and AgentHub explorations.
Challenge
As AI-assisted prototyping made it easier to explore ideas, the work needed a home that could grow beyond one product or type of experiment. A folder of demos made it difficult to discover related directions, understand the thinking behind them, or compare versions. I wanted the workspace to feel personal and playful while keeping the structure needed for useful critique and repeatable design work.
Approach
I reframed the experience around curiosity and experimentation, introducing the Stefan’s Playground identity, a welcoming banner, and categories for different kinds of creative work. I brought the portfolio’s ten themes into the gallery and review pages, adapting their typography, palettes, artwork, and motion to a React interface. A featured exploration, screenshot-led project grid, search, and grouped versions keep the collection navigable, while the surrounding theme stays separate from each prototype’s canvas.
Solution
The redesigned home pairs a full-width themed banner and featured exploration with a varied project grid built from real screenshots. A compact sticky navigation bar keeps search and theme controls within reach, while a keyboard-accessible command palette finds projects and switches themes. Project overviews put the central question up front, followed by the approach, numbered interactions to try, and clear notes on what is simulated. Related versions retain their original URLs, and a collapsible bottom dock keeps prototype controls available without crowding the work. Ten themes carry the portfolio’s visual identity into the workspace, including Comic book artwork, the Samus visor, Raptor claw marks, Terminal code rain, and Jedi motion, with motion controls and optional Samus, Jedi and Terminal music.
Impact
The playground gives my experiments a consistent, browsable home without forcing every idea into the same product aesthetic. Reviewers can discover a direction, understand its context, compare related versions, and enter the working experience. The broader categories and neutral project starter make room for new kinds of work alongside the existing Docebo concepts, while reusable gallery and review patterns reduce setup for each new experiment.
Key Learnings
A creative workspace needs both personality and structure. Expressive themes make exploration feel inviting, but clear metadata, predictable navigation, and preserved design rationale make the work useful later. Keeping gallery styling independent from prototype canvases lets each experiment remain honest to its own context. Motion preferences, keyboard access, and responsive layouts are part of that foundation.