Mobile Portfolio

Pikii

Pikii

chat networking

Pikii is a mix between social networking, chatrooms, and online dating. Underneath the hood, it's a MEAN stack. MongoDB is a great tool for scalable operations and AngularJS does a fantastic job of managing the front end. Node.js is of course moving in on PHP's territory as the go-to open source language. Much like MongoDB, I chose it for its great scalability. It's also much better organized than PHP in my opinion, and you can share code from the front end on the server since it's universally JavaScript. Pikii features several components including WebRTC video chat, IRC-like chatrooms, YouTube broadcasting with your friends, and private messaging, all served in several language communities like English and Spanish.

Pitchweight

Pitchweight

A Music Site

Pitchweight is a website that collects user opinions on music and then aggregates them in a way that allows you to find the best music in a variety of styles. The site uses an extensive REST API for songs, artists, tags, and ratings - embracing an MVC architecture that makes the site easy to maintain. Among its technical features are Facebook Login integration, Twitter Bootstrap components, and various interesting usages of jQuery and AJAX. From the user's perspective, you are able to view any music from iTunes' 30 million song database and search for songs based on their scores, tags, and a variety of other filters. You can also send these songs to a radio-like playlist that will play the songs for you. Lastly, there's a complete artist registration system that enables independent musicians to put their music on the site themselves. Pitchweight is also a Microsoft BizSpark startup.

EXiT Fit

EXiT Fit

fitting software

This is a bike fitting application that helps retailers to keep track of their cyclist customers and give them the best fit possible on their bike. First, the application is gated by a handmade login/registration (PHP/MySQL). I defended against SQL injection with parameterized queries as well as storing the passwords encrypted with randomized salts. Inside is the actual app which allows you to find the best fitting frame based on user input. Results are sorted by best match with the ability to filter on a variety of variables. Seat angle is calculated mathematically based on the inputs which also influence the seemingly static fit bike image, actually various "moving parts" that realistically depict what the fit bike would look like in real life if set at such measurements. It also has a PHP/MySQL saving module that stores your fits for later.
(To demo: User - demo | Pass - 1234)

EXiT Cycling

EXiT Cycling

bike fitting

The EXiT Cycling website features a beautifully designed home page that really showcases the great products that this company makes. The product pages themselves are organized into modules to give a coherence to the line of tools that they offer. Once the potential customer is considering to make a purchase, they have an interactive pricing page that adds prices in real time as you fill it out. The user can then attain a rough estimate of the cost of their purchase before requesting a full detail quote. There's also a neat feature at the bottom of the site that automatically loads various random photos of customers using their products, try reloading the page to see new images!

360° Fit Bike

360° Fit Bike

In addition to the whole website, I also worked on a very cool project: composing a 360 degree digital version of the fit bike product. In order to do this, I took 40 different photographs of equally spaced perspectives of the bike. Compiling these together and then using the jQuery Reel plugin, you have a user controlled rotatable fit bike right in front of you. Users can view it from practically any angle!

Regiontalk

Regiontalk

Filtered Posts

Regiontalk is something of a pet project that spun up out of conversations on how people could communicate based on filters that omit certain people's posts. I decided to make a service in which you could filter the content based on many different variables about people, most importantly their location, but also other data like their age, gender, and interests. The site allows users to publicly post information ("broadcast") as well as privately message each other. The ability to filter through conversations enables the creation of dynamic chatrooms, a fascinating idea. Although the potential for a chatroom is here, there's also the ability to broadcast long-form posts that are more like classified ads in a way. The signup process is friction free, requiring only a username and password. Like in the good ol' days of the web.

Dot 3 Studios

Dot 3 Studios

CG Agency

A sleek portfolio site for the 3D graphics agency, Dot 3 Studios. The people behind Dot 3 have had their work in everywhere from nationally broadcasted TV ad campaigns to films like The Avengers. Of course it was a pleasure to give this boatload of work a new home. The site is completely handcrafted relying on an MVC architecture that even incorporates a mini JSON API (see next slide for more info). Among the bells and whistles: dynamically resized images powered by PHP, extensive use of the HTML5 History API to manage URL state pushing upon project clicks, jQuery Cycle and Fancybox integtration throughout. Beautiful computer graphics such as these only deserve the best presentation they can get.

Dot 3 Studios JSON

JSON API

One of the great parts of this project was the opportunity to create a completely custom made content management framework for the agency to use so that they themselves can continue to manage the site without perpetually relying on developers such as myself. The site back end relies on a MySQL database to store all project information along with a JSON API to expose the data to the front end. The API embraces RESTful principles underneath and even works with several parameters such as filtering by job ID, sorting by completion date, or limiting quantity. Entering in new projects is a breeze now, and that's a good thing considering the prolific amount of work this agency puts out!

Build Your C7

Build Your C7

Corvette Heaven

This is what happens when you combine great talent from two different industries. Build Your C7 let's you rotate a digitally generated version of the most recent model of the Chevrolet Corvette. This isn't your ordinary 360 though. What makes it special is that there are actually 360 frames to rotate through... in HD. It defaults to 36 frames on site load (for casual users) so make sure to click on the frame count button in the top right to switch. If you dare that is. Each 360 will run you ~70 MB, so be prepared for loading time. Dealing with so much content required CDN hosting just to make sure bandwidth needs were met for launch. Several options are available to choose from, including color options and environmental shots. CG work courtesy of Dot 3 Studios.

Capital Grey

Capital Grey

site redesign

This is a redesign and recode of the band Capital Grey's website. The new site features a fantastic new style based on an edgy design that portrays the group's new sound. The design is a bit minimalist this time around, focusing on broad design strokes rather than intricate details. One of my favorite touches about this project was the constantly moving background which reminds me of the sort of interactive feel you get from looking at the main menu of a music DVD, always having visual elements moving around as if the thing was just brimming with expression in general.

aufie

aufie

news blog

Here's a nice little blog I did using the Ghost blogging platform which uses Node.js for the back end. The site has big banners for each blog story and has a very modern feel. Each blog story has an easy-to-use image upload system so that the author can quickly publish stories.

Tesla Machine Tool

Tesla Machine Tool

CNC machining

This one was a little ditty that I did for a great machining company Michigan called Tesla Machine Tool. The site takes a simplistic approach and focuses on creating leads with a prominent contact link in the menu and large images to persuade the user into requesting a quote for their project.

Stacks of Wax

Studios Page

Audio Production

Stacks of Wax is an audio production company that I did a web development for. Their studios page is a good example of today's design fashion toward scrolling rather than showing and hiding elements. The submenu at the side reacts to which section you are currently looking at.

Capital Grey

Capital Grey

Newspaper Concept

For the rock band Capital Grey, the 2012 version of the site has an earthy design for the layout and feel of the background textures. The site emphasizes the musicians' roles in the group and their image. There is also WordPress incorporated into the site structure through the blog section. Latest posts from the blog section are then looped back into the front page.