cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body data-spy="scroll" data-target=".navbar" data-offset="15">
  <nav class="navbar navbar-default navbar-fixed-top" data-toggle="collapse" data-target="#navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        <a class="navbar-brand" href="#">Home</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav" id="dropdown-lists">
          <li><a href="#bio-section">About</a></li>
          <li><a href="#bottom-navbar-outer">Contact Me</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
  <div class="jumbo-container">
    <div class="container">
      <div class="jumbotron">
        <div class="text-center">
          <h1 class="jumbo-header-text">Joe Wemyss Software Solutions</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <section id="bio-section" class="text-section">
      <div class="container section-container">
        <div class="well">
          <div class="well-header text-center">
            <h2 id="bio-header">About Me</h2>
          </div>
          <div class="well-body">
            <h3>About me</h3>
            <p>I am currently a student of Software Systems Development at Waterford Institute of Technology in Ireland. I am in the process of obtaining my BSc (Hons.). Currently I am on work placement at SAP SSC Ireland on the Enterprise Portal/Process Integration team. This placement affords me an opportunity
              to see how a large multinational corporation functions, while also gives me experience in mantainence of large, enterprise applications and the performance issues that are inherent in them. </p>
            <h3>Technologies I am comfortable in</h3>
            <p>As part of my college degree program, I am familiar with a large number of technologies. There are also some that I learned of my own volition, to improve my skillset.</p>
            <ul>
              <li>Java</li>
              <li>MySql</li>
              <li>Basic Web Design (HTML, CSS, JavaScript)</li>
              <li>Angular 1.X and Angular 2</li>
              <li>JavaScript Task Runners (Gulp and Grunt)</li>
              <li>The Spring Framework (V3 and V4)</li>
              <li>PHP</li>
              <li>Unity Scripting API and Unity Editor</li>
              <li>C#</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="row" id="main-body">
  </div>
  <div class="row" id="footer">
    <div class="navbar navbar-default navbar-static-bottom" id="bottom-navbar-outer">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottom-navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
           <a class="navbar-brand text-center" href="#bottom-navbar">Contact Me!</a>
        </div>
        <div class="row">
          <nav class="navbar-collapse collapse" id="bottom-navbar">
            
              <div class="bottom-nav-button-group">
                <div class="container-fluid">
                <ul class="nav navbar-nav">
                  <li class="bottom-nav-button-container">
                    <a href="https://github.com/javathenutt" target="_blank" class="nav-button-link">
                      <button class="btn btn-danger navbar-btn bottom-nav-button"><i class="fa fa-github"></i> Github</button></a>
                  </li>
                  <li class="bottom-nav-button-container">
                    <a href="https://www.freecodecamp.com/javathenutt" target="_blank" class="nav-button-link">
                      <button class="btn btn-success navbar-btn bottom-nav-button"><i class="fa fa-fire"></i> FreeCodeCamp</button></a>
                  </li>
                  <li class="bottom-nav-button-container">
                    <a href="https://ie.linkedin.com/in/joe-wemyss-59a386b3" target="_blank" class="nav-button-link">
                      <button class="btn btn-primary navbar-btn bottom-nav-button"><i class="fa fa-linkedin-square"></i> LinkedIn</button></a>
                  </li>
                  <li class="bottom-nav-button-container">
                    <a href="http://stackoverflow.com/users/4108556/kajhiitknight" target="_blank" class="nav-button-link">
                      <button class="btn btn-warning navbar-btn bottom-nav-button btn-block" type="button"><i class="fa fa-stack-overflow"></i> Stack Overflow</button></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="footer-text">
            <p class="navbar-text">Site created by Joe Wemyss. Contact me at <a href="mailto:joewemyss3@gmail.com">joewemyss3@gmail.com</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              body {
  margin: 0px;
  position: relative;
  overflow-y: scroll;
  font-family: 'Alegreya', serif;
}
.jumbo-header-text{
  font-family: 'Lobster', cursive;
}
nav.navbar {
  margin-bottom: 0;
  font-size:1.2em;
}

h3.unfinished-project-header {
  color: red;
}

h3.finished-project-header {
  color: green;
}

section.text-section {
  /*height: 690px;*/
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0px;
  padding-top: 30px;
  font-size: 1.2em;
}

.jumbotron {
  margin-top: 15px;
}

div.well {
  font-size: 1.2em;
}

.jumbo-container {
  margin-top: 0;
  background-image: url("http://wallpapercave.com/wp/2wIZaSj.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 60px;
}

#main-body {
  margin: 0px;
}
#bio-section{
  background-image: url("https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2491206/file_2491206.jpg");
}
.navbar-static-bottom{
  font-size: 1.2em;
  margin-bottom: 0;
}
.bottom-nav-button{
  margin: 0;
}
a.nav-button-link{
  padding:0;
  display:inline;
}
a.nav-button-link:link, a.nav-button-link:visited{
  color: white;
  text-decoration:none;
  padding:0;
}
.footer-text{
  margin-left: 30px;
}
.bottom-nav-button-group{
  margin-left:30px;
  display: inline-block;
}
.bottom-nav-button-container{
  margin: 5px;
}
@media (max-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }
    
    .navbar .navbar-collapse {
        text-align: center;
    }
  .navbar-btn{
    display: inline-block;
  }
  li.bottom-nav-button-container{
    width: 100%;
  }
}

            
          
!
            
              /**
 * This will be the function that will call the API for the data from the database
 *
 */
function getAllProjects() {

}

/**
 * This function will add css classes to a tag and then return the tag.
 *  @param tag the tag that the classes will be added to
 *  @param classes the array of classes to be added to the tag.
 *  @return the modified tag
 */
function addClassesToTag(tag, classes) {
  tag += 'class="'
  classes.forEach(function(elem) {
    tag += elem + " ";
  });
  tag = tag.trim();
  tag += '" ';
  return tag;
}
/**
* this function will generate a single tag
  @param type the type of tag
  @param classes the array of classes, if any, to be added to the tag
  @id the id, if any, of the tag
  @return an object containing the opening and closing tags
*
*/
function generateSingleTag(type, classes, id, content) {
  var openTag = '<' + type + " ";
  var closeTag = '</' + type + '>';
  if (id) {
    openTag += 'id="' + id + '" ';
  }
  if (classes && classes.length > 0) {
    openTag = addClassesToTag(openTag, classes);
  }
  if (content) {
    for (var key in content) {
      openTag += key + '="' + content[key] + '" ';
    }
  }
  openTag = openTag.trim();
  openTag += '>';
  return {
    'open': openTag,
    'close': closeTag
  }
}

/**
* this function will generate the html for a single project.
  @param project a single project
  @param number the number of the project in the list of projects
  @return the complete html for a single project
*/
function generateOneProjectHtml(project, number) {
  var tmpHtml = generateSingleTag('section', ['text-section'], 'section' + number, null); //opening section tag
  var openHtml = tmpHtml['open'];
  var closeHtml = tmpHtml['close'];
  var projectStatusClass = project['projectUnderConstruction'] ? "unfinished-project-header" : 'finished-project-header';
  var projectStatusText = project['projectUnderConstruction'] ? 'This project is currently under construction' : 'This project is no longer being constructed';

  /**
  * This function will generate the list of technologies used in the project
    @param technologies the list of technologies 
    @return the list formatted with hyperlinks
  */
  function generateTechnologyList(technologies) {
    var techHtml = '';
    technologies.forEach(function(elem) {
      techHtml += '<li><a href="' + elem['link'] + '" target="_blank">' + elem['techName'] + '</li>';
    });
    return techHtml;
  }
  /**
  * this function will generate a tag that contains content. By content, it is meant that there is some text inside, but no lower nested tags. Does not return anything, but modifies the existing open/close tags. In this case the closing tag is not modified, but appended straight to the opening tag, as there will be no lower nested tags.
    @param data an object which contains the data required to generate a tag
  */
  function generateWithContent(data) {
    tmpHtml = generateSingleTag(data['type'], data['classes'], data['id']);
    openHtml += tmpHtml['open'] + data['content'] + tmpHtml['close'];
  }
  /**
  * this function will generate a tag which contains no content, but may contain lower nested tags. 
    @param data the data object required to generate the tags
  */
  function generateWithoutContent(data) {
    tmpHtml = generateSingleTag(data['type'], data['classes'], data['id']);
    openHtml += tmpHtml['open'];
    if (data['subTags']) {
      var tmpTags = data['subTags'];
      tmpTags.forEach(function(elem) {
        var newTmpHtml = generateSingleTag(elem['type'], elem['classes'], elem['id']);
        openHtml += newTmpHtml['open'] + elem['content'] + newTmpHtml['close'];
      })
      openHtml += tmpHtml['close'];
    } else {
      closeHtml = tmpHtml['close'] + closeHtml;
    }

  }
  generateWithoutContent({
    'type': 'div',
    'classes': ['container', 'section-container']
  })
  generateWithoutContent({
    'type': 'div',
    'classes': ['well']
  });
  generateWithoutContent({
    'type': 'div',
    'classes': ['well-header', 'text-center'],
    'subTags': [{
      'type': 'h2',
      'classes': null,
      'id': 'text-section' + number,
      'content': project['projectHeading']
    }, {
      'type': 'h3',
      'classes': [projectStatusClass],
      'id': null,
      'content': projectStatusText
    }]
  });
  generateWithoutContent({
    'type': 'div',
    'classes': ['well-body'],
    'subTags': [{
      'type': 'p',
      'content': '<strong>URL to clone project:</strong><br>' + project['projectLink'] + '.git'
    }, {
      'type': 'h3',
      'content': 'Technical Details'
    }, {
      'type': 'p',
      'content': project['technicalDetails'] + 'The full source of the project can be found <a href="' + project['projectLink'] + '" target="_blank">here</a>.'
    }, {
      'type': 'h3',
      'content': 'Business Process Overview'
    }, {
      'type': 'p',
      'content': project['businessProcessOverview']
    }]
  });

  generateWithoutContent({
    'type': 'div',
    'subTags': [{
      'type': 'strong',
      'content': 'Technologies Used:'
    }, {
      'type': 'ul',
      'content': generateTechnologyList(project['technologies'])
    }]
  })
  openHtml += closeHtml;
  return openHtml;
}
/**
* Test function to return sample data
  @return an array of projects
*/
function stubProjects() {
  var projects = [{
    "projectId": 1,
    "projectHeading": "Java REST API",
    "projectType": "backend",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": true,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }, {
    "projectId": 2,
    "projectHeading": "Angular Frontend",
    "projectType": "frontend",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": false,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }, {
    "projectId": 1,
    "projectHeading": "Ruby Backend",
    "projectType": "backend",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": true,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }, {
    "projectId": 1,
    "projectHeading": "Jquery forntend",
    "projectType": "fullstack",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": true,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }, {
    "projectId": 1,
    "projectHeading": "spring backend",
    "projectType": "backend",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": true,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }, {
    "projectId": 1,
    "projectHeading": "react frontend",
    "projectType": "frontend",
    "projectLink": "https://github.com/JavaTheNutt/ttown_utd_backend",
    "technicalDetails": "This Representational State Transfer (REST) API is built using Spring Boot 4, Spring REST and Spring Security. This API is secured using signed JSON Web Tokens (JWS). This API acts as CRUD application for a traditional relational database built using MySql.",
    "businessProcessOverview": "This REST API is designed as a CRUD (Create Read Update Delete) Application for an underage soccer club. The API is designed to hold details required for the smooth operation of the club. The API is designed to return the details from the database in JSON (JavaScript Object Notation) format to a frontend system. I have not designed the frontend system yet, as I want to finish this API first, but I imagine it will be designed in Angular 2.",
    "projectUnderConstruction": false,
    "technologies": [{
      "techId": 1,
      "techName": "Spring Boot",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 2,
      "techName": "Spring REST",
      "version": "4",
      "link": "http://spring.io"
    }, {
      "techId": 3,
      "techName": "Java Persistance API (JPA)",
      "version": "8",
      "link": "https://docs.oracle.com/javaee/7/api/javax/persistence/package-summary.html"
    }, {
      "techId": 4,
      "techName": "MySQL",
      "version": "7",
      "link": "https://www.mysql.com/"
    }]
  }]
  return projects;
}

/**
* This function will generate the html for the dropdown menus
  @param headings the list of names to be used for the dropdown menus
  @return an array of the html for each dropdown menu required
*/
function generateNavHeadings(headings) {
  var headingsHtml = [];
  var aContent = {
    'href': '#',
    'data-toggle': 'dropdown',
    'role': 'button',
    'aria-haspopup': 'true',
    'aria-expanded': 'false'
  };
  headings.forEach(function(elem) {
    var elemAsHeading = elem[0].toUpperCase() + elem.slice(1) + ' Projects';
    var tmpOpen = '';
    var tmpClose = '';
    var tmpHtml = generateSingleTag('li', ['dropdown']);
    tmpOpen += tmpHtml['open'];
    tmpClose += tmpHtml['close'];
    tmpHtml = generateSingleTag('a', ['dropdown-toggle'], null, aContent);
    tmpOpen += tmpHtml['open'] + elemAsHeading + '<span class="caret"></span>' + tmpHtml['close'];
    tmpHtml = generateSingleTag('ul', ['dropdown-menu'], elem + '-menu');
    tmpOpen += tmpHtml['open'] + tmpHtml['close'];
    tmpOpen += tmpClose;
    headingsHtml.push(tmpOpen)
  });
  return headingsHtml;
}
/**
 * This function will generate the navigation content.
    @param data the data required to create the navigation 
    @return an object which will contain arrays with the required html 
 */
function generateNavigation(data) {
  var navigationHtml = {};
  var linkElems = [];
  var headings = data['headings'];
  var projects = data['projects'];
  headings.forEach(function(elem) {
    navigationHtml[elem] = []; //create an array for each heading
  })
  for (var projectType in projects) { //iterate through each element of the project object
    projects[projectType].forEach(function(elem) { //iterate
      var id = (elem['name'].split(" ").join("") + elem['number']).toLowerCase();
      var tmpHtml = '<li id="' + id + '"><a href="#section' + elem['number'] + '">' + elem['name'] + '</a></li>';
      navigationHtml[projectType].push(tmpHtml);
    })
  }
  return navigationHtml;
}
/**
* This function will push all of the html formatted projects to an array to be appended to the body
  @return an array contianing all of the projects in html string format
*/
function generateAllProjectsHtml() {
  var returnedProjects = [];
  var navObject = {};
  var navProjects = {};
  var navHeadings = [];
  var projects = stubProjects(); //replace with a call to api
  projects.forEach(function(elem, index) {
    if (navHeadings.indexOf(elem['projectType']) === -1) {
      navHeadings.push(elem['projectType']);
      navProjects[elem['projectType']] = [];
    }
    var html = generateOneProjectHtml(elem, index + 1);
    navProjects[elem['projectType']].push({
      'name': elem['projectHeading'],
      'number': index + 1
    });
    navObject['headings'] = navHeadings;
    navObject['projects'] = navProjects;
    returnedProjects.push(html);
  });
  var navHeadingHtml = generateNavHeadings(navHeadings);
  var navHtml = generateNavigation(navObject);
  var htmlStrings = {
    'projects': returnedProjects,
    'nav': {
      'headings': navHeadingHtml,
      'body': navHtml
    }
  }
  return htmlStrings;
}

function getBackgroundImgUrls() {
  var urls = [
    "http://www.discovertheforest.org/images/hero/home/6.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/4/49/Rocky_desert_scene_in_Wadi_Rum.jpg",
    "http://bsnscb.com/data/out/80/39031636-free-scenic-wallpapers.jpg",
    "http://i.jootix.com/o/unnamed--c8063b5875.jpg"
  ];
  return urls;
}
$(document).ready(function() {
  /**
   * This function will cycle through the sections that have been appended to the page and set a background image to them. This if there are more sections than backgrounds, it will begin again at the first image once the last has been used
   @param sections the number of projects that are displayed
   @param urls the array of image urls
   */
  function setBackgrounds(sections, urls) {
    var imageCounter = 0;
    for (var i = 1; i <= sections; i++) {
      if (imageCounter >= urls.length) {
        imageCounter = 0;
      }
      $('#section' + i).css('background-image', 'url(' + urls[imageCounter] + ')');
      imageCounter++;
    }
  }
  /**
  * this function will append each required dropdown to the menu, and then append each link to each dropdown
    @param navData an object which contains the html for the headings and the body of the dropdowns
  */
  function addNavigation(navData) {
    var headings = navData['headings']; //an array of strings that matches the keys in the body object
    var body = navData['body']; //an object with the keys matching the names of the dropdown, and an array of html strings for each list element
    headings.forEach(function(elem) { //iterate through the headings to create the dropdown header
      $('#dropdown-lists').append(elem); //append the header to the <ul> element
    });
    for (var key in body) { //iterate through the body object
      var current = body[key]; //get the current array of strings
      var elemToBeAppendedTo = $('#' + key + '-menu'); //cache the DOM element created above
      current.forEach(function(elem) { //iterate through the list elements
        elemToBeAppendedTo.append(elem); //append the element 
      });
    }
  }
  var html = generateAllProjectsHtml();
  var projectHtml = html['projects'];
  projectHtml.forEach(function(elem) {
    $('#main-body').append(elem);
  });
  addNavigation(html['nav']);
  var numberOfSections = $('#main-body').children().length;
  var urls = getBackgroundImgUrls();
//   if ($(window).width() < 480) {
//     $('.bottom-nav-button').addClass('btn-block');
//   } else {

//        $('.bottom-nav-button').removeClass('btn-block');

//   }
  setBackgrounds(numberOfSections, urls);
});
            
          
!
999px
Loading ..................

Console