
# 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

4 posts tagged with "web-development"
All Tags

4 posts tagged with "web-development"