jQuery Erro

scripts.js

// Twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

$(document).ready(function(){
  // Smooth scrolling
  var $root = $('html, body');
  $('.navbar-nav a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
      scrollTop: $(href).offset().top
    }, 500, function () {
      window.location.hash = href;
    });
    return false;
  });
  // Tooltips
  $(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
  $("#button").on('click', function(){
    var comment = $('#message-area').val();
    $('#visible-comment').html(comment);
    $('#message-area').hide();
    return false;
    if (messageArea="") {
      $('#message-area').css("border", "red");
    }else{
      $('#visible-comment').html(comment);
      $('#message-area').hide();
    };
  });
    $('#message-area').on("keyup",function(){
      console.log("keyup happened");
      var nameName = 3;
      var name = "string";
      var charCount = $('#message-area').val().length;

    console.log(charCount);
      $("#char-count").html(charCount);

      if(charCount > 50) {
        $("#char-count").css("color", "red");
      } else {
        $("char-count").css("color","black");
      };
    });
  //work section
  for (var i = 0; i < works.length; ++i) {
    $("#work").append("\
      <div class='col-sm-3 col-md-3'>\
        <a href='#' class='work-img'>\
          <img class='img-responsive' src='" + works[i].pic + "'>\
        </a>\
      </div>\
    ");
    <a href='#' class='work-img'>
      <img class='img-responsive' src='" + works[i].pic + "'>
        <span class='info'><p class='proj-title'>Title:</p> [WORK TITLE] </span>
    </a>\
  };

});

I cant see the creation of works object so i assume it is on another js file.
Without read it i cant be sure this will work.

The error you were facing is because you were trying to parse the html content outside the append()
Syntax is tricky with js. really tricky.

If you face any difficulties with this project, better create a new repository on https://github.com/new
Repositories are like gists but save your entire project, all files, so i can clone it to my server and test it as you have it.

Below is the method you should use from line 49 to 59. Meaning the whole $("#work").append(); part.
With this we are appending html code to the element $("#work"). The lines you have from 56-59 are therefore wrong.

Note that the entire html code is inside the brackets ()
I also noticed that you had some parts written recursively, same code appearing twice.

    $("#work").append("\
      <div class='col-sm-3 col-md-3'>\
        <a href='#' class='work-img'>\
          <img class='img-responsive' src='" + works[i].pic + "'>\
          <span class='info'><p class='proj-title'>Title:</p> [WORK TITLE] </span>\
        </a>\
      </div>\
    ");

Hope it can help.
Best regards.