TECHNOLOGY USED

The client requested to have a full branding, along with a website to be designed and built. The website itself depicts a gaming community that over the years has become great friends. So it was important that the website include photos of each member and little fun things about each other. I chose to use a parallax effect, and have a photo from one of theirs get together as being the background image.

TECHNOLOGY USED

Blast is a iOS based Application that is currently in development. My role in this project was conceptualizing every aspect of the branding, design, user interface and user experience. I’ve included a PDF with my entire process work flow here: as well as its location at the bottom.

The Screen-shots below are not final renditions, as the App is currently in development. The Screen-shots give you a glimpse of what the App will have.

TECHNOLOGY USED

Where The Fuck Am I was designed and built to detect the users location and give them an accurate pinpoint on their device utilizing Google Maps API technology. The website revolves around wanting to create a simple, user friendly design, that gives the user interchangeable cityscapes while determining their location in the process. The website itself was built to be fully responsive and compliant with all HTML5 standards, giving the ability to work on both mobile and desktops.

Below you will see screen-shots from both Desktop and Mobile. Each image (at random) that is pulled, is pulled from Flickr library and credited to the photographer in a hyper-link at the bottom of the page.

HomePage

After Detecting Location

HomePage

After Detecting Location

TECHNOLOGY USED

The client requested to have a full branding, along with a website to be designed and built. The client is a YouTuber and twitch.tv streamer. So it was important that what games they are playing, and the games they have played be the main showcase on the website. I chose to illustrate the clients face and create that as the main logo. The client's interests were into video games and technology, so I chose to illustrate this by having him wear a Google glass over his eye. He also maintained a weblog that focused on technology primarily. So this was a perfect fit for the client.

The website itself was built using HTML5, CSS3, JavaScript and jQuery. I had to create a custom script that would detect when the client was streaming on twitch.tv and notify people on his website that he is streaming. This can be seen at the top of the page where it says f00d is "online/offline". The client wanted viewers to see all his videos on his website, and have a built in sorter. This way his viewers could sort through his videos to easily find pieces that they found relevant. Future implementation will have the website utilizing Ajax based on scrolling through the videos, instead of loading every video thumbnail, as the viewer scrolls through the page. The next set of videos will load dynamically. This will be implemented once the websites videos have grown to a massive number, along with mobile ready page. The GTmetrix score is 98% on Page Speed Grade. And W3C validation is 100% certified.

The top page of the website displays a slider below the header to showcase the games that the client is playing.

The bottom page of the website displays info of the client, and utilizes a parallax info.

TECHNOLOGY USED

This website was built to provide people with helpful dating tips. However there is a twist. Every 20 or so Tips generated. The viewer will get 4-5 bad tips, before resetting back to the original helpful tips. This was created to poke fun at all the dating tip sites out there. It currently receives several messages a month for new tips to be added by other viewers.

Pro Dating Tips Generator utilizes a lot of custom JavaScript to pull images from its database and randomly generate the images with randomly generated text. You can see below some of the custom code used to create this. I had to make sure to keep it full responsive, which meant the images must stay at a working aspect ratio, but maintain a full screen. This required some custom coding to get it to work. Essentially after a certain width, the website detects this and readjusts the image, so the center of it still shows to the viewer, while everything else changes size.

Showcasing the responsiveness of the site fluidly showing on an iPad 3

 function init() {
    myImage = document.getElementById("mainImage");
    var e = document.getElementById("buttonNext");
    btnCounters = 0;
    if (e.addEventListener) {
        e.addEventListener("click", function() {
            processClicks("next")
        }, false)
    }
}

function processClicks(e) {
    console.log("btnCounters");
    if (e == "next")
        if (btnCounters < 20) {
            btnCounters++;
            randomImage = Math.floor(Math.random() * images.length);
            randomQuote = Math.floor(Math.random() * quotes.length);
            $(myImage).one("load", function() {
                myImage.src = images[randomImage]
            });
            if (myImage.complete) {
                $(myImage).load();
                myQuotes.innerHTML = quotes[randomQuote];
                $("#myQuotes").hide();
                $("#myQuotes").delay(300).fadeIn(200)
            }
        } else {
            btnCounters++;
            randomImage = Math.floor(Math.random() * images.length);
            randomcrazyQuote = Math.floor(Math.random() * crazyquotes.length);
            $(myImage).one("load", function() {
                myImage.src = images[randomImage]
            });
            if (myImage.complete) {
                $(myImage).load();
                myQuotes.innerHTML = crazyquotes[randomcrazyQuote];
                $("#myQuotes").hide();
                $("#myQuotes").delay(300).fadeIn(200)
            }
            if (btnCounters == 25) {
                btnCounters = 0
            }
        }
}

Showcasing some of the custom JavaScript being used to pull and rotate through images

TECHNOLOGY USED

Like a Sir derived from a conversation on Reddit where a redditor asked for an App where he/she could take a photo with their phone, and drag n drop mustaches, beards, top hats and other like a sir characteristics. After discussing this idea with the redditor, he became my client and I worked on developing the idea and branding behind it.
Naturally I would have to base it around the popular meme called “like a sir” so the unlicensed meme character would have to be implemented in the logo. The color palette, UI/UX of the mobile App and fonts were up to my discretion.
The App itself went through 5 different revisions before officially being placed on the iOS App Store. Then went through 7 more minimal revisions after more feedback. The App itself gathered over 20,000 downloads and was reviewed on several publication websites, before its removal from the store. (Reasons were due to lack of future funding) You can view the entire work flow process here:
During promotional period, I created a website to help promote the mobile App, as well as flyers that were handed out to many colleges.

The Screen-shots below showcase the Website, Branding, Flyer's and the Application itself. Everything was designed, published and built by myself for the client.

Screen-shot of the Promotional website

Screen-shot of the Promotional Flyer

TECHNOLOGY USED

Don’t Kill the Birdy revolves around the idea of what Flappy Bird took. You flap to avoid hitting barriers. However this game took a twist, in were the barriers are chainsaws. This was made to as an adult take at the original game, with having the cute birdy get attacked by chainsaws.
As you progress in the game the chainsaws move faster, and the gap for you to flap through gets smaller and smaller, but not small enough for you to not be able to fly through. In the end the game gives you a high score once you have died.

The Birdy and everything designed was created by myself, as well as the coding and building of the game. I wanted to take a cute bird, and throw it in a very harsh environment. I released it on iOS App Store, Google Play Store, Amazon App Store and Microsoft Store.
Below you can see several screen-shots of the App, from start to eventually finishing with a high score.

TECHNOLOGY USED

Runaway Panda is a jump based games that revolves around the Panda character that is trying to escape the zoo. As the Panda progresses throughout the Zoo, it is presented with harder and harder obstacles. The Panda is given several options for it to jump on as it progresses such as giraffe heads and boxes. There is no final section to the level as it is purely high score based. You keep jumping as you progress throughout the level.

The Panda and everything designed was created by myself, as well as the coding and building of the game. I released it on iOS App Store, Google Play Store, Amazon App Store and Microsoft Store.
Below you can see several screen-shots of the App, from start to eventually finishing with a high score.

TECHNOLOGY USED

The client requested to have a website built around their business Sylvan Lodge Banquet Hall. The business provides a location for customers who are need of a Banquet Hall.
They were looking for a simple easy to use website that featured a gallery and quickly editable with a CMS like structure to make quick text updates. Thus I went ahead and built the site around the CMS, Word-press, to make it easy to use for any future updates for the client. Initially there were 7+ pages that featured all the different foods they offered, but over time they had them removed and wanted to have just 3 pages. They also requested a web hosting solution and setup with instructions on how to manage the site after it went live.

The Screen-shots below showcase bits of the website.

Home Page

Rental Information Section

Gallery

TECHNOLOGY USED

The Wheelhaus website and idea came after discovering that a popular you-tube based company weren't producing any more videos using another websites roulette wheel. Turned out that support for it had stopped.
This led me to design a new and better roulette wheel, that actually spun the games in real-time. The idea of the website is simple. Allow the user to spin the wheel to find a random game to play, either through their own game library (STEAM) or through a global library.
This required using Steam's own API, that was very limited in terms of what it could do to say the least. I set out to create a secure network for users to log into my website using their steam credentials and cache their data on my server. This allowed for quick and easy retrieval every-time the wheel was spun.
The design for the website was designed around the actual STEAM color choices.
I then presented this website to the you-tube based company and was met with a lot of joy from both the employees and viewers of their content. It currently is being used in a weekly series by them.
Future implementations will include more info on the game that has been given to you via the spinning wheel. This will require storing more data on my end, and effectively applying the game's data to the chosen game.

The Screen-shots below showcase bits of the website.

Main Page for when someone is logged in

Main Page for people wanting to exclude their own game library

TECHNOLOGY USED

The game called H1Z1 is a survival based game, that requires you to roam through the world, typically alone and try to survive as long as possible.
However there was an issue with the game. It didn't give you an interactive map that showed you all the locations on the map to find ammo, housing etc... So I went ahead and created a website that does just that.
It utilizes leaflet.js to create the map, as well as incorporating my own bits of code to help identify the players position on the map. This was done simply because the game lets you find your location in console. So all you have to do is simply copy and paste your location in the search box on my website, and it will pinpoint your location on the map!
Some other features exist such as toggling on and off different items on the map, as well as using the ruler (on the left side) to draw out your destination and figure out how far you must go!

The Screen-shots below showcase bits of the website.

Homepage

Map View