About Me

Background

Me!

Hello, welcome to my portfolio! I have been playing around with HTML, CSS and JavaScript since I was in fourth grade, peeking into pages of code and tweaking them to find out how they worked. This early fascination in computers has lived in me and through my work ever since I gained an affinity for technology. My first programming language was C#, which I learned rather quickly and enjoyed using to create software / games that were fun to make and see unfold. I also learned Java, C/C++, PHP, jQuery, AJAX and SQL in college and it is in my interests to learn more modern and upcoming languages.

I love working with computers and also enjoy meeting and connecting with people. My passion for computers and helping others has lead me to become a tutor for Computer Science and Mathematics at the Instructional Center (IC) at UW for the past two years. There is not another feeling like that of helping others succeed where they are struggling. After my first year working at the IC, I received a Certificate of Recognition for outstanding work as a peer tutor. I am dedicated in being a peer tutor at the IC because most of the students there come from the same ethnic, financial, or disadvantaged background that I do. Helping others who is at a point in their career that I once was gives me a sense of pride in myself.

Education

Big W at University of Washington

I started my formal training with computer programming in high school at the Teen's Technical Internship Program (TTIP), offered by the Technology Access Foundation (TAF). TAF was a great resource and fostered early growth for me in the technology field. Through TTIP, I learned C# programming and ASP.Net.

I am currently a Senior at the University of Washington in Seattle and am currently aspiring to attain a degree in Informatics. After graduating, I wish to be able to consolidate my skills in the many aspects of information, people and technology to apply them in innovative and practical ways. Although I am a strong programmer, I understand that knowing how to design effective and intuitive interfaces and understanding information architecture are valuable assets to being in the technical field. Through Informatics, I seek to solidify my programming while learning the best practices and skills in design and architecture.

PokemanZ

Summary

PokemanZ Team PokemanZ v1.1 PokemanZ v1.2.5 PokemanZ v1.3 PokemanZ v1.4

This game was a C# project I made with my team during a CodeDay hackathon. It uses the XNA framework and is a real-time platformer.

Background

PokemanZ (poh-key-man zee) was the result of the very first hackathon I went to. For those of you who don't know what a hackathon is, it's a twenty-four hour coding marathon. Developers, designers, and innovators get together, pitch ideas, form teams and begin coding away for the entire duration. This particular project came from the CodeDay hackathon during June 2012. My team was a group of seven members, some programmers and a couple designers.

My Role

Though we had five programmers, my role was the main programmer. I programmed the body of the code that intertwined everything together including the player animation, collision detection, object placement, and spawning. Other programmers made weapons, AI, physics, and map design. Since this was a twenty-four hour marathon, many members of the team got worn out towards the end and almost gave up. However, I kept pushing and hacking at the program and was essentially the main driving force between the final couple iterations of the game.

The Game

Prior to the event, our team decided three things: platformer game, Pokemon / Digimon, and zombies! We had no idea how it was going to turn out or what the details were. We also had none or little experience making games of this sort and had to learn how to use the XNA framework for the first portion of the marathon. The first game image to the right show me learning and testing out the framework. Afterward, we branched out and each made a part of the game - physics, weapons, AI, collision, etc. Meanwhile, I would be assembling all these components together into a main body of code that integrated each of the parts the other programmers were making.

What I Learned

I would say the most important thing I learned from this experience was exposure to how games such as platformers are made. One would think that the way they "work" is that the player moves and the camera follows them. However, this is only the illusion the players see when playing games. The way it is implemented is quite opposite. The player is static the whole time while the game environment moves around the player. Whenever the player moves, the background, game objects, AI and everything else moves in the opposite direction the player is moving.

Ebaytor

[Live Demo] Note: music will autoplay

Summary

Ebaytor Team

This two-player web game uses HTML, CSS, AJAX, jQuery and the Ebay API to make an interactive game using listings on Ebay to play the game.

Background

Ebaytor Logo Ebaytor introduction page

Similar to PokemanZ, this game was made during a hackthon in December 2013 at CodeDay. The reason we chose to make this game was because we decided that the usage of the Ebay API in conjunction with a game would be a unique and eye-catching project. We had a team of four and none of the team members had experience with the Ebay API prior to this. The three programmers on the team each had to learn how to use the API.

My Role

I had two major roles in this project. Throughout the project, I developed the interface for the game. In addition, towards the last quarter of the project, I took over programmig the main game flow logic because my teammates were exhausted and almost give up. I designed the interface with three tabs because it most effectively represented our game: the instructions, weapons search and battle scene. I also created the interface for the search screen and battle scene, including the placement of the items on the battle screen.

The Website

Ebaytor weapon selection page Ebaytor battle attack page

The website has a foundation of HTML and CSS in addition to jQuery to manage the DOM and AJAX to query the Ebay API. The three tabs of the page are made using the accordian widget from jQuery. jQuery is a big driving force behind the page and is used to implement the game flow. The weapons page is also powered by jQuery and AJAX. The page dynamically uses AJAX to fetch the categories from the Ebay API and asks the players to search for items within these categories. They use these terms to search for three items each. The player that picks the highest priced item wins the battle then the page transitions to the battle tab, playing an animation for the winner. The game ends when one player wins four times.

What I learned

The most important thing I learned from this experience was learning how to use an API and effectively implementing it. Using the Ebay was relatively easy and straightforward (unlike other APIs, as I've come to learn) and was a pleasant introduction to the API world. Because it was easy, I have been more inclined to learn about APIs and what they can do.

Snake

[Live Demo] Requires latest .NET framework

Summary

Snake speed options Snake maze options Snake color options Snake gameplay

This particular game was the first one I made. I made it when I was a freshman in high school in 2006 using C#.

Background

I was in a very great after school program called Teen's Technical Internship Program (TTIP) at the Technology Access Foundation (TAF) in high school. The program ran alongside school and taught the students technical skills and helped students get internships for the summer. For my freshman year with the program, I was taught C# and at the end of year, we were assigned the task of creating a game with a partner.

My Role

Although prior to the TTIP program I had no experience programming, I quickly caught on and learned at an extremely quick pace compared to my classmates. I often finished assignments early and helped other students with theirs. Because of this, for this assignment I took on most of logical and difficult programming. My partner took care of programming the colors customization and menu design.

The Game

The game is a fairly simple snake game. Menu options allow the user to customize their snake and its outline with the handful of colors available via C#. The way the game was implemented was using a 2D array to record the "grid" that the game is on. Each "cell" was either a snake part, maze piece, food or empty. Every time the game frame advances, each snake piece advances forward one step and the necessary calculations are made - such as randomly generating new food or detecting a collision. Each time the snake eats, a new piece of the snake is added by canceling the snake's removal of the tail piece. "Mazes" are generated randomly throughout the map.

What I Learned

This is one of the projects that I am most proud of. Even though I was a novice at programming, I was able to consolidate everything I learned thus far to create something out of nothing. Given I created something exciting with little knowledge, I learned that there are a plethora of possibilities of ideas that can be created with programming. This idea intrigued me extremely and has solidified my interest in computer programming ever since.

Facebook Reconnect

Summary

Reconnect interesting implementation detail

Facebook Reconnect is a web page created at a Facebook Hackathon. It was designed primarily for people who wanted to "reconnect" with friends who they haven't seen in a long time and wanted a quick summary of their activities.

Background

Reconnect mutual friends

Facebook Reconnect is also a hackthon product, conceived at the Facebook Hackathon in February 2013. The website was made because one of our teammates went on vacation, took photos, met friends, and visited many places. When he want to mark it as a life event, the pictures he chose were copied to the life event (it didn't have the likes or comments from before) and all the activities he had during that time was scattered on his timeline. This "trouble" sparked the idea to create this website.

My Role

Reconnect mutual friends Reconnect mutual friends

My team of four had two programmers and two designers (I was a designer). I designed the website with the intention of replicating an experience similar to that of Facebook itself. The theme implemented is very similar to the old Facebook look. One of the challenging parts of this project displaying everything in such a way that was concise and informative while laying out the most important things prominently. I kept this in mind as I designed the grid-like interface that is on the results page.

The Website

Reconnect main page Reconnect initial search page Reconnect main page

We used the Facebook API to have the user login through their Facebook - similar to what they see when they use other websites or apps that use Facebook login. After login, they are taken to a simple search page with input boxes for their friend's name and start / end date range. Once submitted, our algorithm combs through their friend's Facebook activities to find the most interesting and important events from their life. Major images are taken and placed in a fashion similar to Facebook - one larger image and multiple smaller images. Statuses are also shown, on the right of the images, also similar to Facebook's timeline statuses. Any mutual friends gained within the time frame are display below this in icons.

What I learned

The most important thing to take away from this project was gaining the insight to create concise and informative interfaces. Given a set of parameters for the result set, I learned to design simple layouts that are effective in conveying the data behind them.

RageQuit Games

Summary

An iOS platformer game that is still in the works. Check back later to see if I'm finished!

Kevin and Chanleap's Wedding Website

[kevinandchanleap.com] Note: music will autoplay

Summary

A desktop website I built for my friends' wedding, using HTML, CSS, AJAX, PHP, jQuery, and some jQuery plugins. Includes single-page scrolling with RSVP function and a gallery viewer, with a design made from scratch.

Background

Well, it's pretty clear the need for this website and why it's made. I'm honored to have been the first people they thought of to ask! I enjoyed making this website because it's one of the first (besides my portfolio) websites I made outside of class and school.

The Website

In order to understand what Kevin and Chanleap wanted the website to look and feel like, I had to gather requirements and do some mockups with them. I found this process interesting, because I was able to apply what I learned in my class to a real-world experience. It also helps that they are great people to work with! Once I determined what the basic requirements of the website were, I started thinking about how to design the page. Some of their requirements (one-page scrolling, gallery, autocomplete for RSVP, countdown timer) were available online as open-source code. I decided to take advantage of that to cut down development time. However, because I needed them to look and behave a certain way, I still had to figure out how they worked and what to change; this was a great learning experience in problem solving. Also, I decided to make some web services (PHP) to serve up the galleries, RSVP list, and handle RSVP submits. I didn't want to load all the galleries at once because of the high-quality pictures they had. Also, I wanted to have the RSVP list be able to be served up to the guests, in addition to having a private page for Kevin and Chanleap to edit the guest list, so I also made that accessible thru a web service. The RSVP submission handles notifications via email when someone submits their RSVP.

What I learned

The most important thing I learned from creating this website was how to interact with clients to determine what the product will look like. It also helps a lot to check in often with the client about your progress to make sure you both agree with the product while it's being developed. This way, you can make adjustments if necessary. This was a great learning opportunity for me to apply skills learned in the classroom into real-world results.