Indie Web & Mobile Sandbox · V1.0

Designing for the person on the other side of the screen.

Hi, I’m Shang’en (Emily) Song. In 5th grade, I thought software was a set of rules inside a cold grid. Today, I build HTML5 mini-games, assistive visual tools, and everyday pricing utilities grounded in real-world human observation—with native iOS & Android releases planned through college.

🐍 Python & HTML5 Canvas 👁️ Vision-Assistive Edge Pipeline 📊 Consumer & Cross-Border Modeling
Project 01 · Interactive HTML5 Arcade

Snake & 2048: The Amber Streetlamp Edition

“Rebuilt from my 5th-grade Python code—this time, replacing cold neon grids with an amber streetlamp, winter snow, and a steaming meal.”

Score: 0 Amber Streetlamp + Snow + Hot Meal
Press Start (or use Arrow Keys / WASD / D-Pad) to play. Toggle the theme button above to compare Cold vs. Warm design!

Why Warmth Matters in Game Design

When I recreated Snake and 2048 in 5th grade, I cared only about collision arrays and score loops. Years later, after meeting the producer of a billion-download puzzle game whose core overseas players are elderly users exercising their memory—and testing an early build for a mobile studio—I noticed a quiet gap: many casual games are calm, but calm is not the same as warm.

  • Amber Streetlamp Halo: Replaces stark black/blue arcade backgrounds with a soft evening streetlamp gradient (`#45270d` → `#140d07`) that reduces eye strain.
  • Winter Snow & Steaming Meal: Turns abstract pixel targets into a steaming bowl on a snowy evening, giving players a sense of arrival.
  • Try It Live: Click “Theme: Amber Streetlamp” to switch back and forth between my 5th-grade cold grid and the human-centered warm edition.
Project 02 · Vision-Assistive Image Pipeline (Bethel Foundation)

High-Contrast Boundary Tracer for Low-Vision Classrooms

“Children with low vision are not missing the ability to appreciate detail; they are missing a clear boundary where one object ends and the world begins.”

Stage 3 (High-Saturation Red Contour Stroke): A bold red boundary traces the ears, paws, and tail so a low-vision child's eyes know exactly where to anchor.

How the 3-Stage Pipeline Works

Volunteering with the Bethel Foundation—which supports ~2,000 visually impaired students across 15 schools in China—our 40+ volunteer team processed thousands of courseware illustrations (over 100 personally processed and refined by me):

  1. Stage 1 (The Problem): A yellow Labrador on sunlit grass dissolves into a pale blur for a student with low contrast sensitivity.
  2. Stage 2 (100% Foreground Contrast): AI segmentation removes the cluttered garden background and replaces it with solid `#000000` black while preserving the dog’s natural fur and expression.
  3. Stage 3 (Visual Anchor): A high-saturation red contour stroke outlines key anatomical landmarks (ears, back, paws, tail) so students can track science and story illustrations alongside their peers.
Project 03 · AP Computer Science Principles

Hogwarts Multi-Trait Weighted Sorting Engine

“People rarely fit inside a single rigid label. I designed a weighted vector scoring model so sorting feels like being understood.”

Project 04 · Real-World Economics & Pricing Utilities

Everyday Utility Lab: Cross-Border Group-Order & Senior Bundle Simulator

“Built from two real projects: a Tokyo-to-Beijing fan merchandise mini-program and a Summer 2025 neighborhood convenience store pricing study.”

Group-Order Landed Cost / Fan
¥122 RMB
Saved vs. Secondary Scalpers
¥126 saved / item
Senior Afternoon Bundle Value
40% off morning price
Estimated Evening Fruit Spoilage
-60% unsold fruit

From Spreadsheets to Living Community Tools

  • Tokyo → Local Fan Group-Order Mini-Program: After tracking a year of concert ticket and limited-merchandise secondary market prices in Excel and Python, I negotiated cross-border freight consolidation so ~15 monthly orders could bypass scalper markups.
  • Neighborhood Convenience Store Senior Bundle (Summer 2025): During six 30-minute on-site observation sessions next to a year-round kindergarten, I noticed elderly shoppers leaving empty-handed when comparing afternoon fruit prices. Pairing high-variance perishable fruits with low-volatility staple vegetables gave seniors a clear reason to buy while reducing evening spoilage.