
The source of truth for all of my personal websites is my Github repository. You can find the source code for all of my personal sites <u>[**here**](https://github.com/ShabazBadshah/shabazbadshah.com)</u>.

Each version of my personal site has been a learning experience, and I have documented each one in detail.

**You can find each version (v1-v5) in their own branches. Their READMES break down the tech stack and the reasoning/features behind each upgrade**

Below is a visual gallery of all the iterations of my personal sites, along with links to their respective articles.

# 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. There's 4 prior versions (excluding this one).

A Visual Gallery of My Personal Sites


## 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


## V1 video demo

[See video link here](https://youtu.be/3LHxRnozRJo)

## Marketing site

![Syftable website v1](syftable-site-v1.png)


Syftable v1 is shutting down as I pivot towards other ideas.

Syftable V1 Shutting Down


## What is GraphRAG

GraphRAG (Graph-based Retrieval-Augmented Generation) is a technique used to enhance LLM user-query responses by utilizing data from external knowledge graphs in addition to the trained dataset to generate more accurate and relevant responses.

GraphRAGs help in solving LLMs most common limitation being that the trained data might be outdated and may return responses that are inaccurate. GraphRAG is an enhancement to RAG (Retrieval-Augmented Generation) as it queries a knowledge graph instead of a vector text database which is then fed into the LLM. Using a graph allows for better querying for relationships between data rather than for just the data itself.

## GraphRAG vs Alternative Approaches

The approach of technology depends on what the customer aims to accomplish with the integration. If the customer’s goal is to have a more detailed and semantic-based search and find code within a large codebase, then a semantic-based search might be more relevant.

In contrast, if the customer wants to understand the dependencies of a piece of code, a graph-based approach where relationships are mapped between functions may be more relevant.

The customer might also want to train their own model if their codebase is large and is a part of a legacy system where core functions are not updated as frequently (for example a banking system or airline guidance-systems).

The table below summarizes findings between other approaches that may be taken depending on the use-case.

<br/>

| Approach                 | Strength                                                                                                                                                                     | Weaknesses                                                                                                                                                      |
| :------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| GraphRAG                 | Understands relationships between different entities and can connect them together for more complex, conceptual-based queries                                                | Might take longer to query since the context window is very large. Might struggle more on unstructured data since relationships cannot be mapped as explicitly. |
| Vector-based Text Search | Better at handling text-based queries where there exist different ways to say the same thing. Can infer “meaning” of a query better. Would be more useful to search for text | Is not able to efficiently determine relationships between entities. Only look for content that is “similar”. Better at querying unstructured data.             |
| Prompting                | Most easily accessible by users                                                                                                                                              | Does not contain the whole context of the query. Very cumbersome to add a plethora of background information for a query.                                       |


Quick breakdown of what GraphRAG is explained quickly, and simply.

Graph RAG Primer


# Objective

This article describes common, free, and open-source alternatives to many closed-source or privacy breaching products

# Alternatives

## Google Products

- Google Search: [DuckDuckGo](https://duckduckgo.com/)
- Google Chrome: [Firefox](https://www.mozilla.org/en-US/firefox/new/)
- Google Messages: [Pulse Messenger](https://messenger.klinkerapps.com/) - An E2E encrypted SMS/MMS messenger
- Google Authenticator: [Aegis 2FA for Android](https://getaegis.app/)
- Google Passwords/Lastpass: [KeepassXC for Mac](https://keepassxc.org) and [Keepass2Android for Android](https://github.com/PhilippC/keepass2android) - An offline password manager

## Other Software

- [VeraCrypt](https://www.veracrypt.fr/code/VeraCrypt/) - A cross-platform disk encryption tool
- SimpleLogin - Self-hosted/cloud based email alias service
- WhatsApp/Facebook Messenger: [Signal](https://www.signal.org/) for Android and iOS - An E2E encrypted messaging app


Free and open source (FOSS) alternatives to products that focus on maintaining your privacy while providing similar functionality as their closed source counterparts

FOSS Alternatives to Popular Products


_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


_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).

The Kodeability App Website


_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


_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.

Shabaz Badshah

Let's connect

Pinned Posts

All Posts