Metatorial Services, inc.

Tools used

• HTML • CSS • Javascript • jQuery • Bootstrap • Gimp

My contribution

This site was made from scratch to highlight the learning systems development from a long time teacher and business owner in the field of information technology. I designed a responsive template system for the content from his old sit, utilizing fontAwesome icons and custom flex components. This system takes advantage of AJAX technologies, reducing the amount of code to be loaded when you switch pages. Additionally, I filmed and editted an intro video for new visitors who don't know Bob.

Visit Site » responsive site preview - across device sizes

Highlighted design elements

Main Flow-chart Background Image

I was able to design a background for my client's site, by taking a flow chart that he used to teach his students with, and coloring the different cells with the colors in his logo. Together, the images create a relational effect.

Coreyborg designed custom banner design

Highlighted Code

Query string redirect code

I created a javascript system which reads query string parameters, and uses AJAX to display them in the site's main page wrapper, and the url of the new page is subsequently updated. The system automatically creates new pages, given an iframe url, which is inserted into a template, and displayed in the page wrapper.


    //variable needed in order to listen for query string variables
        var startURL = window.location.href;
        var exceptedQueryVars = ["pageName"];

function queryStringRedirect(){	

    //check if query string is present
    if(startURL.indexOf("?") > -1){
            var	currURL = startURL;
                queryString = currURL.split("?"),
                queryStringSepVals = queryString[1].split("&");
                for(i = 0; i < queryStringSepVals.length; i++){
                    var currQueryKeyValPair = queryStringSepVals[i].split("="),
                //check if queryString[1] exists	
                        if(currQueryKeyValPair[0] && currQueryKeyValPair[1]){
                            currQueryKey = currQueryKeyValPair[0];
                            currQueryVal = currQueryKeyValPair[1];
                            //STILL NEED - quit function
                            //set currQueryVal to a blank str
                            currQueryVal = startURL + "?pageName" + "=" + "home";
                //check if pageName var was included in query string
                    if(Object.values(exceptedQueryVars).indexOf(currQueryKey) > -1){
                        //switch statement used to accept only certain values into the code from query string on front end 
                        //VIP cases are as follows:
                                    +set pageId inside templateInfoJson
                                inside switch
                                    +set caseId => (8 <concept>{[(number of objects inside pageInfoJson)++ ] per case }</concept> 8)
                                    +set pageId within pageInfoJson
                                    +set iframeURL
                                    +set targetLocation
                                post Switch conditional
                                    -read pageId
                                    -reset iframeHTML with adjusted values
                                        -use iframeURL and targetLocation
                                inside switch
                                    +set caseId
                                    +overwrite pageId with JSON
                                    +overwrite pagePath with JSON
                                    +overwrite pageType with JSON
                                    +overwrite leadHTML with JSON
                                post switch conditional
                                    +load correct html into main content column
                                    +load lead html into jumbotron
                        //set query string to ?pageName=home
                        //console.log("BOB and corey editting - no pageName var in query string onload");
                            window.history.pushState("", "Home - Metatorial Serivices, inc.", startURL + "?pageName" + "=" + "home");
                            document.location.href = startURL + "?pageName" + "=" + "home";
            //page does not have a query string 
            //set page to home
                    //edit url without reload if option available, else reload
                    window.history.pushState("", "Home - Metatorial Serivices, inc.", startURL + "?pageName" + "=" + "home");
                    document.location.href = startURL + "?pageName" + "=" + "home";
function loadPageInfo(pageTitle){
    //default case template var overwrites
        var caseId = -1;
        var pageId = pageInfoJson.iframeTemplate.pageId,
            pagePath = pageInfoJson.iframeTemplate.pagePath,
            pageType = pageInfoJson.iframeTemplate.pageType,
            leadHTML = pageInfoJson.iframeTemplate.leadHTML,
            iframeURL = pageInfoJson.iframeTemplate.iframeURL,
            targetLocation = pageInfoJson.iframeTemplate.targetLocation,
            iframeHTML = 
                '<div class="html-content-page iframe-template">' +
                '<p>Default template html remains, ooh no, did it not change in the big switch statement? Please let the site owner know there is a problem!</p>' +
    //handle full page content cases first
        case "home":
            console.log("queryString read - home");
                caseID	 = 0;
                pageId   = pageInfoJson.home.pageId;
                pagePath = pageInfoJson.home.pagePath;
                pageType = pageInfoJson.home.pageType;
                leadHTML = pageInfoJson.home.leadHTML;

        //(removed other cases, to demonstrate code for, 
        //however you can follow  this template for any other pages you want.
        if(pageType == "iframeTemplate"){
            //default case - iframe load in
            //console.log("pageId inside iframeTemplate post switch conditional: " + pageId);
            for(i = 0; i <= countJsonKeys(templateInfoJson); i++){
                if(pageInfoJson.iframeTemplate.pageId == templateInfoJson[templateInfoJsonIndex[i]].pageId){
                    //set local pageId from templateInfoJson
                        pageId = templateInfoJson[templateInfoJsonIndex[i]].pageId;
                    //set local leadHTML from templateInfoJson
                        leadHTML = templateInfoJson[templateInfoJsonIndex[i]].leadHTML;
                    //set local IframeURL from templateInfoJson
                        iframeURL = templateInfoJson[templateInfoJsonIndex[i]].iframeURL;
                    //set local targetLocation from templateInfoJson
                        targetLocation = templateInfoJson[templateInfoJsonIndex[i]].targetLocation;
                    console.log("iframe url = " + iframeURL + "\ntarget location = " + targetLocation);
            function buildIframeTemplate(){
                /*add class with iframe page custom class on container inside template html
                    var htmlContentPageCustomClass = templateInfoJson[templateInfoJsonIndex[pageId - countJsonKeys(pageInfoJson)]];
                    iframeHTML = 
                        '<div class="' + 'customClassWillGoHere' + ' iframe-template">' +
                        '<iframe id="template_iframe"  ' +
                        'scrolling="no" src="' + iframeURL + '" '
                    targetLocation = pageInfoJson.iframeTemplate.targetLocation;
                    if(targetLocation !== "#side-content .video-load-container"){
                        $("#main-content .lead").html(leadHTML);
                        iframeHTML +=
                            'style="width:100%; height:800px;" ' +
                            ' allowfullscreen/></div>' ;
                        //youtube video case
                        iframeHTML +=
                            'frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ' +
                            'style="height:200px; " ' +
                            ' allowfullscreen/></div>' ;
                //console.log($("#main-content .page-load-container").html());
        }else if(pageType == "fullPageContent"){
            //full content of page available
            //console.log("pagetype is fullPageContent - full content available switch");
            //insert data from json case onto master page
            $("#main-content .lead").html(leadHTML);
            $("#main-content .page-load-container").load(pagePath);