
_This was the first video game I ever created. It is a infinite horde space shooter that heavily based off of Space Invaders. The objective in the game is to eliminate all enemy spaceships before you die. This game was created purely in Java_

## Tools, Technologies, and Skills

- Eclipse IDE for development
- Photoshop for graphics and sprites
- Simple graphics editing in Photoshop
- Basic object oriented programming

## Challenges, Issues, and their Resolutions

Starting off is never easy, and boy was this project no exception. As mentioned above I wish that I had a stricter planning and development process. My process for this project was to just think of what I wanted to implement and then spend hours dredging through the Java API and a plethora of internet forums to try to find answers. As you can imagine, this was in no way effective, but as a newbie I was ignorant of the fact of how a good plan can lead to a much faster and more easily maintainable code. Ultimately the challenges weren't ones with code (those are there regardless, and there were MANY here), but instead with planning. The resolution for this was quite straight forward, **PLAN MORE**, and think the problem and implementation through before starting. (:

## What did I Learn

During production of this game I was learning to program at the same time. This combination at the time did not work so well since there wasn't a real structure to my work or process in any form. It took me immensely longer to create this game than it would have, in retrospect. In the same vein, learning object oriented programming in the process was a vital step to learning the basics of programming (as this was one of my primary objectives of this undertaking). As an avid gamer, I definitely garnered a new found appreciation for game development, and software development in general. In addition, learning simple photoshop to create simple sprites for the game was a much lesser challenge then trying to figure out how to actually implement the game, but I ultimately managed to create a product that was not a complete disaster.

## Links

- [Source Code](https://github.com/ShabazBadshah/SpaceWars)
- [Video Demo](http://www.youtube.com/watch?feature=player_embedded&v=vSHpG_tWrcE)


This was the first video game I ever created. It is a infinite horde space shooter that heavily based off of Space Invaders. The objective in the game is to eliminate all enemy spaceships before you die. This game was created purely in Java.

A Space Invaders Remake


_Tetris is one of the most influential games ever created, and one of my personal favorites (I'm not very good at it). This was the second game I ever made. My objective for this game was to create it in as little time as possible (at most 5 days) with a unique implementation. This game took me 4 days non-stop to create, and was programmed in Java._

# Tools, Technologies, and Skills

- Eclipse IDE for development
- Photoshop for graphics and sprites
- Copious amounts of coffee
- Object oriented programming (use of MVC design pattern, I wasn't intentionally aware of this at the time)
- Fast iteration of solutions to a problem (trying to quickly come up with implementations for the logic of Tetris)
- Image editing and processing via Photoshop

# Challenges, Issues, and their Resolutions

Determining an implementation for this game was the most difficult part due to the time constraint I had set on myself. So, I got out a piece of paper and just started writing down possible ways to implement the logic and graphics of the game. Ultimately, I came to the conclusion of the 2 following implementations for the logic:

- Using an nxn grid of booleans to keep track of where each tetromino was located. Draw the shapes wherever the value was True
- A collision based approach where each tetromino would have a position variable, and that variable would be used to calculate where to draw the shapes

Eventually I chose the boolean grid approach due to the fact that keeping track of True/False values made work simpler than keeping track of each tetromino's position. The pieces were also True/False values; as the blocks would move down the grid, the game would update its grid based on the values of each piece. The rotation logic also took a little bit of effort to implement but was relatively simple when compared to implementing the grid.

# What did I Learn

Sometimes iterating through a plethora of solutions very quickly is a good way to determine the best solution. If you think something might not work try to implement it and figure out improvements upon it, or try to attempt a different solution. When working with teams you have to complete projects with very strict deadlines. During this process, if a solution does not work you will have to quickly determine another solution. This project gave me a sense of this urgency.

On a more direct note, I definitely learned a lot about arrays and other general container objects, pertaining to performance. Iterating through different implementations allowed me to begin forming a general workflow for projects or any other type of work, which I will undoubtedly use in the future. Roughly speaking the process goes something like this:

- Write down exactly what your objective for the project is
- Write down the general steps and sections you will have to go through to reach that objective
- Come up with mockups, algorithms, architecture, etc before starting any work on the app. Essentially think through solutions
- Create the product while solving and iterating through solutions if necessary. Also keep track of everything you do (daily logs, backups, design mockups, etc)
- Once project is complete, reflect upon it, and use this opportunity to create more improved products in the future

# Links

- [Source Code](https://github.com/ShabazBadshah/TetrisRemake)
- [Video Demo](http://www.youtube.com/watch?feature=player_embedded&v=EOo-WPmIbdY)


This was the second Java game I ever made. My objective for this game was to create it in as little time as possible (at most 5 days) with a unique implementation.

A Tetris Remake


# Site 1.0

![Personal site v1 homepage](personal-site-v1.png)
![Personal site v1 projects page](personal-site-v1-projects.png)

# Site 2.0

![Personal site v2 main page](mockup_1.png)

![Personal site v2 projects page](mockup_2.png)

# Site 3.0

![Personal site 2.5 about page](personal-site-v2.5-about-v1.jpg)

![Personal site 2.5 projects page](personal-site-v2.5-projects-v1.jpg)

# Site 4.0

![Personal site v3 about page](personal-site-v3-about.png)
![Personal site v3 projects page](personal-site-v3-projects.png)
![Personal site v3 blog article page](personal-site-v3-article.png)


The history of all the iterations of my personal site I have created.

A Visual Gallery of My Personal Sites


_Everyone needs home on the internet, and this is mine. I created [this website](http://shabazbadshah.com/PersonalWebsiteV1/) as an online portfolio to showcase my work and skills. About 1.5 weeks was spent on planning, design, and site architecture. In addition, this project is a showcase of my complete web development workflow and development process. This will be a lengthy read. Enjoy :)_

## Tools, Technologies, and Skills

- Atom Text Editor for website creation
- Photoshop for website mockups
- Jade for HTML markup
- jQuery
- Sass CSS preprocessor
- Github for version control and hosting
- Jekyll for static website templating
- Gulp build system for project resources and tools management
- Autoprefixer for cross browser compatibility

## Planning

As the years have passed, I've become more process focused as an individual, and professionally. Process allows you to work faster because you are aware of the general workflow being utilized. In addition, it allows teams and collaborators to better understand and work on the project in the future.

My general workflow for this project went along the lines of, plan and draft website mockups, create the website while utilizing the drafts as a basis for the CSS, refractor project for consistency, and finally take care of the smaller things such as image compression and performance. Thus, I begin at the initial planning and drafting stage.

This initial drafting stage was vital for this project, because from previous web development experience its really difficult to create a site when you're making things up as you go. So, I got out a piece of paper and starting drawing whatever came to mind. I had decided that my homepage had to be very modular in design; so, I used a "block" system to create each of the individual sections. This would allow me (in the future) to add and remove sections I needed with minimal to no modification of the markup/CSS. Furthermore, each section could have its own distinct style if needed without modification required to any other section. Below are the sketches I created as a basis for the design and layout of the site. I spent about 3 days thinking about and drafting the site.

![Planning Mockup 1](mockup_1.png)

![Planning Mockup 2](mockup_2.png)

![Planning Mockup 3](mockup_3.png)

![Planning Mockup 4](mockup_4.png)

![Planning Mockup 5](mockup_5.png)

Once the initial drafts were complete, I moved onto the photoshop mockups of the ones that I preferred. This was the newest stage I added to my workflow, and it was without a doubt the most referenced and helpful stage in the creation of my site. As I created mockups, I took parts of what I liked about the previous designs/mockups and added them to the new ones. Below are the photoshop mockups that I designed/created.

The Photoshop mockups of the possible final designs of the website

![Photoshop Mockup 2](psd_2.png)

![Photoshop Mockup 1](psd_1.png)

![Photoshop Mockup 3](psd_3.png)

## Website Creation and My Tooling System

Now came the actual work, creating the website. The creation took the longest part, more specifically the CSS. I knew before development that this website needed to be modular, scalable, and would be large and I would need many tools to assist in this. Once I began the implementation the photoshop mockups became vital, as I would refer back to them constantly; changing/modifying sections as needed. The Jade and Sass files were very easy to implement due to their very simple markup (any my tooling system). The remainder of the development was just the regular ol' CSS.

As this was the first workflow that I created and utilized (and will continue to utilize in the future) there was a significant amount of prep work involved for the aforementioned tooling system. I have included all the tools in the Technologies Used section.

I being with Jekyll. This was the basis of my tooling system. Jekyll would allow me to build static websites by using template where individual HTML/CSS content could be injected into upon running a jekyll build or upon uploading the site to Github Pages. Jekyll would also allow me to effortlessly add additional content (in my case, projects) by adding the to the \_posts directory. This would ensure that when I want to add a new project I will just have to create the project specific CSS and HTML markup, and it will take care of the rest.

Next, Gulp. Think of Gulp as the thing that will hold all my tools together. Tools such as Jekyll, Autoprefixer, Sass, and Jade. Gulp also has some cool tweaks that have saved me countless hours and sanity. The most prominent being autorefresh which live-loads the site when you save your work via Ctrl+S; if I were to keep one tool during this process, this would be it. In addition, Gulp allowed me to use Sass and Jade together in the same project. Gulp will take the Sass and Jade files, convert them to CSS and HTML respectively, and put them in their correct folders for Jekyll to serve the website from. Sass also supports imports of other Sass files, allowing for more modular and maintainable CSS.

Finally, autoprefixer assured cross browser compatibility. It takes the CSS from CSS files and adds all the appropriate modifiers for webkit, mozilla, etc.

My folder structure was also imperative for organization of this project:

        _includes
        _jadefiles
        _layouts
        _posts
        _site
        assets
        ├── css
        │   ├── 0 - tools
        │   ├── 1 - base
        │   ├── 2 - modules
        │   ├── 3 - sections
        │   └── 4 - layouts
        ├── img
        ├── js
        └── project-assets

- **\_\_includes**, contains the processed HTML files that were converted from their respective Jade counterparts

- **\_jadefiles**, contains the Jade markup for the site, this will be processed and inserted into the \_includes directory

- **\_layouts**, contains the templates for which the content can be injected into

- **\_posts**, contains the HTML markup for each individual project item, Jekyll loops through this when showing all the projects

- **\_site**, the folder that holds the final site after its been processed by Jekyll, Github Pages serves the site from this folder
  - **0 - tools**, contains libraries and other addons (i.e. bourbon, lightbox normalize.css, animate.css)
  - **1 - base**, contains all colors used in the website, variables (such as sidebar width), and a base Sass file which has custom CSS for things such as paragraphs and images
  - **2 - modules**, contains the CSS of modules that will be used all over the website (such as the sidebar seen on every page of my site)
  - **3 - sections**, contains the CSS for all the different section on the home page (i.e. about, contact, portfolio, hero)
  - **4 - layouts**, contains the primary layouts of different pages on the site (i.e. the homepage and the projects-list page) project-assets, contains the styles, images, and other resources for each individual project from the \_posts directory

## Challenges, Issues, and their Resolutions

There wasn't one "challenge" that hindered my progress throughout this project. The challenges were a plethora of smaller issues such as Github Pages (used for hosting the site) not loading images correctly because they required absolute paths and not relative ones. Others minor challenges included the usual stuff such as items not aligning, media queries overriding eachother, handling the CSS for images not working correctly, etc. The resolutions to these challenges weren't elaborate or are worth explaining (if you do have any questions, you can email me), they usually just required a quick google search or a couple minutes determining a solution.

What did I Learn
During this project, I challenged myself to use jQuery as I had never used it before. The best way you can learn something is by "doing it", and learning jQuery was no different. The process of learning this topic was essentially referring back to the documentation of jQuery and how it did things differently. I have a lot of previous programming experience, so it was quite simple to learn.

In addition, I did learn a couple of smaller topics such as the difference between absolute and relative paths, the basics of the Gulp build system, the Jekyll static website generator, Sass, and Jade, more typography, and more on good compositions and layout. One of the more interesting topics that I learned during the later ends of development was image compression (I went off on a 2 days tangent learning about this). I did dive into the "maths" behind how different image formats work (it was quite awesome) and which ones were the most efficient to use for smaller file sizes. I ended up utilizing the PNG file format since it works better the JPEG for images with solid, well-defined colors (which my site contains a plethora of).

This project has ultimately been one of practicing my design and development skills, but also of becoming a more structured and organized individual and focusing significantly more on process (which I have learned the true value of).

## Links

- [Source Code](https://github.com/ShabazBadshah/PersonalWebsiteV1)
- [Website](http://shabazbadshah.com/PersonalWebsiteV1/)


This is the first iteration of my website. For years I wanted my own little place people could visit. A location, where I could showcase my work to the world. This was my first attempt at creating anything of subtance on my own.

My Personal Website V1


## Project Synopsis

_This second iteration of my site was primarily a redesign of my personal brand to tell a more consistent and streamlined story of myself and my works._

## Tools, Technologies, and Skills

- VS Code text editor
- Github for version control and hosting
- Jekyll for static website templating
- Gulp build system for project resources and tools management
- jQuery

## Planning

There was minimal planning for this project, it didn't require any. I finished the site in about 2 days which included redoing the CSS, throwing some javascript in the site for some dynamic content, and moving all my old works from my previous site to this new one. Below are the only two mockups I created for my site.

![Personal site v2 mockup 1](mockup_1.png)
![Personal site v2 mockup 2](mockup_2.png)

## Challenges, Issues, and their Resolutions

There were no significant "challenges" during this project that impeded my progress.

## Links

- [Source Code](https://github.com/ShabazBadshah/PersonalWebsiteV2)


This is the second iteration of my website. I streamlined the appearance significantly and removed some redundent aspects from the previous version. This site was done completely in CSS, HTML, jQuery, and Jekyll to ultimately keep it very simple.

My Personal Website V2


_This was the [first website](http://shabazbadshah.com/KodeabilityWebsite/) I ever created in order to teach myself the basics of static web development (HTML, CSS) and basics of design (Typography, Images, Color Theory, Layouts); this site took me about 3 weeks to complete. It was initially made for an android app I was working on at the time, but the app sadly never saw the light of day. The links were not implemented, feel free to download and use the project as a template (attribution would be appreciated). (:_

# Tools, Technologies, and Skills

- Atom Text Editor for website creation
- Photoshop for app design/mockups, and other graphics
- Bootstrap CSS for responsive website design (I just thought this would be a cool little addition to implement and learn)
- General Design (Responsive Design, Basic Color Theory, Typography, and Layouts)

# Challenges, Issues, and their Resolutions

Making things look awesome and appealing is difficult, it becomes an even greater challenge when you have to use markup to style everything. Oh boy, was it frustrating at some points when I was trying to lay-out a specific item in a very distinct manner and it just wouldn't work; I definitely wanted to give up at those points. Regardless of the fact, CSS was the most difficult part of the website despite the site's simplicity. In particular, making a website responsive was at times very infuriating because of the inconsistency between devices. Such inconsistencies included things such as images being centered on one device but not another.

My first attempt at a solution was using media queries for popular devices such as iPhones, iPads, Nexus phones, Galaxy S7, etc; this of course was a VERY BAD choice. This attempt was missing all the devices in between the popular ones (I realized later how bad of a design decision this was). The availability of media queries for the mainstream devices made this attempt relatively quick to implement (about 3 days). My second attempt was more sensible, it was to try to use a framework to help me solve all my consistency problems. Using a framework came with many advantages such as making the site easier to maintain, and also easily understandable by other developers. Implementing the Bootstrap CSS framework quickly solved my problem and I was able to finish the website within 3 weeks; not bad for a complete newbie I suppose :P.

![Kodeability site mockup](kodeability-website.webp)

# What did I Learn

Other than improving my web development and design skills to a competent level, after much needed reflection I came to the obvious conclusion that I needed to think out my problems! Don't go brainlessly attempting solutions because you just end up wasting more time. In my case iterating and hard coding all mainstream devices wasn't really a smart idea in the long term and was really poor design. I could've saved about 3 days if I thought through the implementation of my CSS architecture and possibly reached the conclusion of using a framework more quickly. In addition, creating some sort of mockups and pre-planning would've also saved time since it would allow me to really think through the project from a design and architecture point of view. In the future, more planning will be essential in a timely and successful completion of a project.

# Links

- [Source Code](https://github.com/ShabazBadshah/SpaceWars)
- [Demo](http://shabazbadshah.github.io/KodeabilityWebsite/)


This was the first website I ever created to teach myself the basics of static web development (HTML, CSS) and basics of design (Typography, Images, Color Theory, Layouts).

Shabaz Badshah

Let's connect

6 posts tagged with "project"
All Tags

6 posts tagged with "project"