Loading project case study
All work

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.

Visit live app Read the case study

Value and impact

One home for creative work
5 Categories
A personal visual identity
10 Themes
Context stays with the work
Brief → Experience

01

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.

  • Agentic Build
  • AI/ML
  • Prototyping
  • Design Systems

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.

04

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.

01 / 05

The creative workspace

02 / 05

A browsable project collection

03 / 05

Comic book theme

04 / 05

Samus theme

05 / 05

Context before interaction

4 more screens

The rest of the product

Controls that stay out of the way

Raptor theme

Terminal theme

Find a project or switch themes

05

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.

06

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.

PreviousAI Persona Generator View all projects