# My Breakthrough Into Game Development!

The AP Tradeshow Card Game is definitely ranked in the top five of all of the projects I have ever done. It all started with the Consumer Electronics Show, or CES in 2016. The company I work for had been to the show regularly for a few years, but months before the 2016 show, they announced that the show's format was going to work a bit differently. They put the word out that they were looking for ways to increase engagement within the booth, and this is when I got to thinking. Although I didn't know exactly what I was going to be making at first, I knew that this would be a perfect opportunity to demonstrate my passion for gaming, and my interest for game development to my manager.


I got to work developing what basic knowledge of game development that I had. I had already played around a little bit with the Unity game engine, and I figured that this would be a good choice since I could script the game in C#, a language I already knew how to handle. My first idea for the game was very ambitious. I had planned to have five different mini games, all vastly unique. After realizing that I would have to keep the overall playtime to around two minutes per player, I decided to use just my favorite mini game, which was a card matching game. I also figured that since the show is held in Las Vegas, a card game theme would fit nicely. Once I landed on this theme, I was able to start gathering assets for the game. I downloaded some free game sounds, and played around with them in Audacity until I got the sounds that I wanted. I modeled the cards in Blender so that I could get a nice 3D flipping animation within the game. Once I had all of this, I used my free time to develop a proof of concept, pitched the idea, and then got approval to fully develop the game for the show.


## Features

### State Machine Programming
The concept of state machines is actually a concept that I derived from some of the hardware projects that I completed in the past. The basic concept is that every game object can be found in one of any finite number of states at any specific time. While in any state, the object responds to outside influence and changes state accordingly. The state machine for each card started in a “hidden” state. Once a card was clicked in this state, the card entered the “flipping” state, and would animate. Clicks were ignored during this state, all the way through to the “visible” state. Once a second card was chosen, the state machine would determine if the card was a match. If there was a match, the card enters its “disappearing” state, and then finally its “disappeared” state wherein it vanishes. If no match is detected, both cards re-enter the “flipping” state, and are finally returned to their “hidden” states.


### Real Time Overhead Display
The game was meant to attract passers by, and did so with the help of a large overhead display above the play station. As players were hitting high scores, or signing up to play, messages would display on the overhead screen in real time. At any time throughout the day, players could return and see how their high score held up against other players. This functionality was achieved by having the game station Android tablets send an HTTP request to a Windows server running a WCF service. The request would have encoded player data, which the service would parse and display appropriately. one of several prizes. 

Roles: Designer, Full Stack Developer. A mobile video game developed for the Android operating system, using the game engine Unity. The game was featured at the 2016 and 2017 CES Tradeshow events.

Tradeshow Card Game

# OpenCart isn't just for e-commerce

HollyCastilloPhotography.com is a portfolio website designed and built around the OpenCart template. While it is true that OpenCart is an e-commerce template, I've found that it actually works very well as a highly customizable Content Management System, or CMS. Wordpress, another CMS that most might think would have made a lot more sense to go with, was a close second choice for the development of this site. The one thing that really influenced my decision between the two templates was the fact that OpenCart is so well structured and developer friendly.


OpenCart is built upon the nice and neat MVC design pattern, is amazingly easy to tweak, and comes with a lot of the tedious work completed out of the box. When building the site, the main concern was avoiding as much grunt work as possible. I had also considered building the site from scratch, using a PHP framework like CodeIgniter or Laravel. Just thinking about spending hours upon hours designing and constructing a database schema from scratch and building all of the back end administrator tools by hand drove me from this idea. Being the only developer on the project, as well as having a full time job at the time, made using a template like OpenCart my only possibility of ever finishing the site.


## Features

### Dynamically Populated Portfolio
Going into the project, I knew I was going to have to design a site that my wife would be able to fill with content on her own, and not have to rely on me to manually code out a new page for every photo shoot that she did. By slightly modifying OpenCart's product and category structure, I was able to develop a portfolio section that could be filled with photos from a back end admin panel.


### Custom Static Information Pages
While generally the content on the site is dynamically stored and displayed, there are a few static HTML pages that were designed to display special information. These pages include the About page, and the Contact page.


### Blog
For the blog section of the site, I used a slightly modified version of an OpenCart module. This is another great thing about using OpenCart. Many things that aren't native to the system could be easily implemented in this way. 

Roles: Designer, Full Stack Developer. A portfolio website showcasing the work of photographer Holly Castillo. The site contains a categorized gallery, contact and information pages, blog, and a fully featured back end admin panel to manage content.

HollyCastilloPhotography.com

# A Place to Share my Development Work
Welcome! This site hosts details of projects I've worked on, along with a Blog of software engineering concepts I've learned and would like to share. Developing this website was a fun little challenge itself, as I wanted to put together something that was both convenient to keep updated, and dirt cheap to host. Here's an overview of how I've managed to do this. 

## Backend: Strapi
Choosing a tech stack was a fun exercise and finding the most cost effective way to produce and serve a modern blog site. It was important to me to have some form of content management system (CMS), but the site should overall be as cheap as possible to run and host. I've used systems like Opencart in the past, where I was able to hack together a CMS from an e-commerce platform. This works alright if you plan on having some kind of shopping system in your website but locks you in to using PHP and we're looking for something a bit more modern. 

Enter [Strapi](https://strapi.io/), a "headless" CMS which lets you put together a collection of content, and serve it with a simple REST API. With this system I could split the layers of content creation and content presentation, allowing me to go with any Frontend stack I want. For this I chose NextJS.

## Frontend: NextJS
The most important feature of NextJS for this website is Static Site Generation (SSG). This feature of NextJS allows me to compile a fully static website with all of the content I've written with Strapi. The magic happens with the special NextJS function `getStaticPaths()` that allows you to define the list of content to crawl at compile time. When you run `yarn build`, NextJS crawls the pages retrieved in `getStaticPaths()` and renders out HTML files for each post. With this setup, we can fully host the site with a lightweight server like Nginx, no need for a back end server language!

More details about how exactly I host this site as cheaply as possible, as well as details on how I automate updates to the site will be coming up in future posts! 

Blog and portfolio website built using Strapi headless Content Management System, and Next.js as a front end. 

large_strapinext.jpg

medium_strapinext.jpg

small_strapinext.jpg

thumbnail_strapinext.jpg

strapinext.jpg

Full Stack
Software Engineer.

My Work

Tradeshow Card Game

HollyCastilloPhotography.com

jeremycastillo.net - This Website

Full StackSoftware Engineer.

My Work

Tradeshow Card Game

HollyCastilloPhotography.com

jeremycastillo.net - This Website

Full Stack
Software Engineer.