Web Portfolio

Out of over 20 websites I have worked on in the past few years, I've selected six that best represent my skills and capacities. This portfolio showcases my work in design, programming, online marketing (e.g. Search Engine Optimization), and with content management systems.

Penn Undergraduate Assembly

http://pennua.org

The Undergraduate Assembly is the elected, representative branch of student government at Penn, charged with improving life for all students through funding, services, and advocacy.

Client Undergraduate Assembly

Tools used Wordpress, CSS, Javascript, MySQL, some PHP tweaking

Status Completed in July 2009, ongoing maintenance

What I did One of the main goals of this project is to increase transparency of the UA. We opted to transform Wordpress into a content management system so that updates can be easily published by any - tech-savy or not - elected representative.

Penn Appetit

http://pennappetit.com

Penn Appetit is a semesterly magazine for all types of food writing, including food features, restaurant reviews, recipes, creative food writing, interviews and food narratives.

Client Penn Appetit

Tools used HTML, CSS, XML, Javascript, Illustrator

Status Completed in December 2008. Maintenance is minimal.

What I did Penn Appetit wanted visitors to be able to view their beautifully designed magazine on the website. I implemented rollover preview as well as Flash Page Flip.

East Coast Asian American Student Union Conference

http://ecaasu2010.org

*Note: I no longer maintain this website, thus it deviates from my original template.

ECAASU is the largest inter-collegiate Asian American student network in the US. Each year, over 1000 students attend ECAASU's annual conference to learn and create change.

Client I was part of the ECAASU Marketing Team

Tools used Illustrator, Photoshop, HTML, CSS, Javascript

Status Completed in August 2009.

Vistamor Inquiry Database

http://vistamor.com/vistamor_registration.php

Vistamor is a Senior Retirement Community located in the beautiful Montgomery area of Orange County New York.

Client Pace Advertising - Internship

Tools used PHP, MySQL, HTML

Status Completed in July 2009

What I did I coded a PHP inquiry registration form (from scratch) which allows clients to access the database on phpMyAdmin.

Website Template for Visions NYC

Screenshot of the template

Visions is an organization that provides services to the blind and visually challenged.

Client Pace Advertising - Internship

Tools used Illustrator, Photoshop, HTML, CSS, Javascript, CANON D40

StatusTemplate design and coding completed in July 2009.

Hogwarts: Visualized

Part 1

Part 2

Part 3

Assignment Independent Final Project

Course Information Design and Visualization, Freshmen Spring 09

Medium 2D Design

Description I am a huge fan of Nicholas Feltron's annual reports and decided to dedicate my final project to emulate his style. I did not have real life data, so I took those of Harry Potter. I did find some interesting statistics: did you notice that "Blimey" was never exclaimed in Book 6 (although it was used 16 and 20 times respectively in Book 5 and 7)? The usage of "He-who-must-not-be-named" in reference to Voldemort also vanished completely in Book 6. My guess? The editors must have edited out unnecessary / long words to make Book 6 shorter.

IM Mapping

Screen Shot (Highly recommended for smaller monitors)

Try it! (PG 13)

*Note: The original was designed for viewing in a 21.5 inch monitor. I am still working on making it compatible with smaller screens.

Assignment A Mapping Experience: students were asked merely to create a piece that mapped some sort of personal information.

Course Information Design and Visualization, Freshmen Spring 09

Medium Web - HTML and Javascript (I would recreate it in flash if I had the time!)

Description The IM Map is a map that shows all my instant messanging conversations throughout one week. I experimented with using a pie chart to express peiods of time conversations take place. It is also an interactive tool. When you rollover a specific conversation button, you can read information of that particular chat (such as Friend's name, duration, word count, IM client), a wordle showing 50 most used words in the conversation, and it duration on the pie chart .

Short Haul

Download the file

Assignment Hello: Design and perform a 2-minute spoken and visual presentation (Powerpoint!) about yourself built from personal data and vital statistics.

Course Information Design and Visualization, Freshmen Spring 09

Medium 2D Design

Description Behavior on plane can reveal a lot about a person. I borrowed this setting to introduce myself to the class - the homesick Californian. This graph chronicles what I do throughout the flight.

Short Haul

View

Assignment Craigslist Redesign

Course Web Design II

Medium HTML, CSS, Javascript

Description

Travailler

Assignment 10-15 second animation

Course Web Design II, Sophomore Spring 10

Medium Animation

Graphics Portfolio

This is a small selection of my work from design courses I took / am taking at Penn. I will slowly incorporate extra-curricular work once I have time for scanning and hard-drive-digging.