I'm Sunny Mui.

Catalyze SV City Development Project Map

Interactive map web app of Santa Clara County development projects built in collaboration with the nonprofit Catalyze SV to deploy on their existing website. Showcases their project scorecards, evaluations, and other info for stakeholders.

Built with Open Street Maps and Mapbox GL JS to render open source canvas rendered maps. Structured to be usable in an iframe to meet client integration & non-technical maintainability requirements on a Wix Corvid enabled site. Loads libraries and externals assets via CDN for complete independence from host page. Has multiple view types, map functions, animations/transitions, and state management.

Destroy the Comics Shop:
E-Commerce Store

Responsive, verified by McAfee Secure, content focused, conversion optimized, and completely Destroy the Comics branded e-commerce store selling premium graphic art apparel and vinyl stickers featuring art from local SF Bay Area artists.

WooCommerce based subsite install integrated on the main Destroy the Comics domain with numerous web performance, SEO, conversion, and security optimizations. Custom functions written for features like conditional display of artist information, custom size charts, free shipping counter, etc. Includes Mailchimp, FB Pixel, Square, PayPal, Amazon Payments, and other integrations.

Disaster Response SJ: React Web App

React based web application to notify people of active disasters in San Jose. Includes active disaster notifications, disaster planning resources, plus an administrative interface for disaster response managers to create/maintain updates.

Collaborated with the Disaster Response team at Code for San Jose to refactor and add new components to this React app. Wrote and implemented a LocationIQ based geocoding module for admin interface use, enhanced form validation functions, added a logo component, extensively enhanced CSS for better UI design, massively expanded documentation, added 2 disaster planning content components, and various project management tasks like issue reporting & troubleshooting.

Razing the Bar: Nonprofit Website

Website built for the foster youth focused nonprofit Razing the Bar. Showcases their methods, research, success stories, organizational timeline, ways to get involved, and allows donors to directly contribute online.

Collaborated with Code for San Jose RTB team and Razing the Bar staff to build and style site according to Sketch/Zeplin spec. Built using Wordpress as a CMS to allow non-technical client staff to maintain and update content. Integrates donation handling via Charitable and payment processing via PayPal. Fully responsive for viewing on any screen size.

SJ Taco Map

An interactive and filterable map of Taquerias in San Jose where you can get live info pulled from Google Places, FourSquare, and Google Maps. Read essential basic information, browse reviews, see ratings, and compare social stats for each taco shop.

Integrates 3rd party APIs and an MVVM front end web framework for a single page web app. Built on Boostrap for rapid development and standards compliant web design. Implements instant search through efficient array filtering. Mobile friendly with responsive design. Built with modular, object oriented design and attention paid to object caching for performance. Robust error handling for network and API errors.

Star Milo: Clicker Game

Click Milo the cat to make MiloBucks, use your $ to buy upgrades, and spend all of your time clicking on a cat floating in space.

A simple webapp showcasing conditional game logic, scoring probability systems factoring in upgradeable player stats, object oriented methods, prototypal classing, and CSS animations. Plain Javascript wrapped in an anonymous IIFE to keep the global namespace clear.

Destroy the Comics: Responsive Blog

A news-magazine style blog built and deployed rapidly for immediate use by an editorial team. Uses a Wordpress CMS for easy content creation/maintenace and a customized child theme.

Built for convenience of the writing team, with features to manage onsite SEO, automatic image optimization, social media marketing, 3rd party MailChimp integration, AdWords integration, AMP (Accelerated Mobile Pages) compatibility, analytics, enhanced Wordpress security, caching/Gzip compression, inlined critical CSS, minification/concatenation, and asynchronous script loads for page speed.

HTML5 Canvas Game - Swim Free or Die Hard

HTML5 Canvas/Javascript frogger-style game with enemy types, difficulty selection, item pickups, sound effects, animation, and more.

Features superclass/subclass inheritance, sprite map animations, requestAnimationFrame game loop, hitbox collision detection, spatial partitioning, mobile touch controls, item rarity, randomly generated enemies, and more.

Dynamic Javascript Populated Resume

My personal long-form single page responsive resume website. The website is built using my own simple templating system from data stored in JS objects.

Refactored into an MVC modular class structure. Features an animated CSS gradient background header, a minimal scrollspy function, CSS animations, JS/CSS text truncation, various CSS3 special text effects, and completely documented in the code.

Globial Business Pro Sales Page

The premium membership sales page for Globial, a B2B ecommerce startup. Exemplifies a long form persuasive sales page.

I developed the content and design to convince potential customers to upgrade to premium memberships. I helped gather testimonials and implemented copy/information to overcome some of their common sales objections.

KnotSuite Company Homepage

A corporate homepage prototype for the B2B startup KnotSuite, which focuses on team messaging, productivity, and project management.

All of the written content, image previews, and mockups of their app had to be created for this project as well. I worked closely with their team to develop the marketing copy, site design, and content.

KnotSilicon App Homepage

A web app homepage prototype for the KnotSilicon app, one of the management apps developed by KnotSuite, a B2B startup. The app helps users monitor silicon manufacturing lifecycle progress in real time.

This page is one of the sub-landing pages under the KnotSuite umbrella. The written content and mockups were developed specifically for this project. The design had to be customized to client specifications.

Web Performance and Speed Optimized Website

A website with known poor page loading and running web performance was optimized to improve speed and efficiency, achieving ~97 in Google Page Speed for the index page and a visually intensive page achieving 60 fps.

Optimizations include async scripts, inlining critical css, image optimization, caching/Gzipping, minification/concatenation, async web font loader, layout thrashing fixes, variable caching, event debouncing, minimization of DOM appends, modifying compositor only properties for animations, dynamically setting number of animated elements to minimum needed to achieve effect, and more.

Responsive One Page Simple Site

A completely responsive simple single page website good for sharing a story or some information that wouldn't be changing very often.

This project features judicious use of srcset and picture elements for art direction and resolution appropriate image loading. Placeholder content and images used as examples for the page.