Raccoonauts Mascot
Web Development & Design

Site Dev & Design

Context

Hackathons, School Projects, Freelance

Role

Full Stack Development

Tools

HTML × CSS × Javascript × AJAX × PHP

Front-End Development | HTML × CSS × Javascript

Raccoonaut's Expedition

Raccoonaut waving hello!
Raccoonaut's Expedition Cover Photo

Overview

"Raccoonaut’s Expedition" is an entry for an outer-space theme SFU Hackathon, SOSY's Hackademia. Our entry placed first for overall Community Vote!

Raccoonaut’s Expedition is a website designed to visualize our solar system in orbit. It is an accelerated simulation modelled to showcase the relative size of the planets, as well as the speed at which they rotate around the sun. Through the assistance of a raccoon-astronaut, our site mascot, we also provide some brief information relevant to the clicked-upon planet.

View our Devpost Submission.

Team

Kenneth Juang × Karson Nguyen × Matthew Yang

Raccoonaut's Expedition Demo Screenshot
Raccoonaut in action

my role

I was the art director, illustrator, and a front-end developer. I created the overall look and feel for Raccoonaut’s Expedition, from the colors, layouts, and typography, to the vector graphic of our little Raccoon.

I mainly handled the HTML and CSS code to ensure the UI was cohesive and appealing, sprinkling in subtle Javascript animations with the help of anime.js.

UI Webapp Design | Figma

GameSeta

GameSeta Homepage Mockup
GameSeta Site Homepage Mockup

Overview

GameSeta is an up-and-coming webapp platform for creating and managing highschool esports teams.

The platform revolves around two major stakeholders: players which consist of current students, and coaches which are faculty and staff at the specified schools. As this work has not been released yet, I cannot disclose details of the project at the moment.

View the organization's homepage.

my role

I was a contract UX / UI Designer for GameSeta. I have designed interactive prototypes of the app in progress through Figma. I also designed the logo for their recent SD43 Tournament.

Full Stack Development | HTML × CSS × Javascript × AJAX × PHP

Snacket

Snacket Report Cover
Snacket Report Cover

Overview

Snacket is a database collection of pocket-sized snacks, carefully selected either by their tiny nature, (hence pocket-sized) or how they are packaged on the market.

Snacket is similar to a blog mixed with an e-commerce website, with the purpose of sharing some of the different types of tiny snacks that are able to fit in one's pocket. The database displays all snacks in a grid view, and can be further inspected in a detail page for each snack. Filters are utilized to search by categories. This project was completed for a semester-long final project in Internet Computing Technologies.

No current demo at the moment; as the site requires back-end support (mySQL database), I will provide a demo video of the interactions soon.

Snacket Site Preview
Snacket Site Preview

my role

I was fully responsible for the site UI Design, as well as the entire back end to structure the database. HTML, CSS, Javascript, PHP, AJAX, and mySQL technologies were used.

View Other Work