01

Overview

My closet lived across three places at once:

  1. screenshots of things I wanted
  2. notes app tally of what I'd spent
  3. drawer I hadn't actually opened in a month

Nothing talked to each other, so I kept re-buying things I already owned and losing track of what I was saving for.

My Wardrobe is my answer to that — one safe space that holds the closet I actually own, the list of things I want, and the budget that ties them together.

I designed and built the whole thing myself; from the swipe-up cinematic intro down to the Firebase schema that syncs a closet across devices.

This single website became a real tool I use every month.

Visit the live site ↗
  • Pages shipped6
  • Core surfaces4
  • Data layerFirestore + local fallback
  • Typeface pairingCormorant + DM Sans
  • Budget edits / monthCapped at 3
02

Design system

Warm, paper-toned neutrals with a single deep-brown to not lose its character

Display / Serif Wardrobe, Wishlist, Budget
Body / Sans don't get overstimulated, at least this one is organized.
Label / Sans Wishlist · Fukuya · Budget
03

Features

Every demo below is real, running code — not a screenshot. Hover, drag, & click them the way you would in the app.

3.1

The wardrobe, as a photo grid

Closet items are grouped into editorial full-bleed categories instead of a spreadsheet-style list. Hovering a tile brings the photo into full color and slightly forward.

This closet is like a lookbook, not inventory

CSS transformsCustom categoriesRight-click context menu
ClothingClothing
ShoesShoes
AccessoriesAccessories
BeautyBeauty
3.2

A budget that reacts as you set it

New users set a monthly spending goal on a single slider.

The bar, and the "left to spend" caption all update live, so the goal feels concrete instead of abstract.

Range inputLive progress barOverspend state

Try the slider, then log a spend below!

300/month
$50$1,000
$0.00 spent · 0%$300.00 left
3.3

Want it, then mark it bought

Wishlist items carry a status instead of living in a separate "purchased" list — flipping an item from Want to Bought is one click, and it quietly folds that price into the budget's spend total instead of asking you to re-enter it.

Status toggleURL-scrape addCategory tabs
Linen wide-leg trousers
$128 · Uniqlo
Court sneakers
$90 · Adidas
3.4

Fukuya — the packages you forget you ordered

服屋 ("clothing shop") tracks what's in transit alongside per-store spending habits, so "where is that package" and "how much have I spent at this store" live in the same view. Sync re-checks delivery status against the order date.

Package trackingPer-store historyPlayful naming
Uniqlo
Ordered Jul 2
In transit
Aritzia
Ordered Jun 28
Arrived
04

Live demo

This pulls in the real app running locally, page for page — not a recreation. If the dev server for myweb isn't running, you'll see a note instead of a blank frame.

Visit the live site ↗
05

Under the hood

Frontend
  • Hand-written HTML/CSS/JS; no framework
  • Every page shares one stylesheet on CSS custom properties
Auth & data
  • Firebase Authentication + Firestore for cross-device sync
  • LocalStorage fallback for app to still work fully signed-out
State
  • sessionStorage gates one time moments:
    • cinematic intro
    • first sync of the day
  • makes returning visits stay quiet
Interaction
  • Native <input type="range"> sliders
  • right-click context menus
  • modal flows

All kept native for accessibility and feel.