steamgeek7/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Hello World!</title>
    <!-- Bootstrap core CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    <!-- Custom styles for this template go here -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

<body data-spy="scroll" data-target=".navbar">

     <!-- Main jumbotron for a primary marketing message or call to action -->
<!-- <div class="jumbotron jumbotron-fluid"> -->
 <div class="container">
   <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/carosel1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/carosel2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/carosel3.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <div class="carousel-caption d-none d-md-block">
    <h5>Welcome</h5>
    <p>How can I help?</p>
  </div><!-- end carousel-->
</div><!-- end main carosel-->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">CareerFoundry</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#work">work</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">about</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#FAQ">FAQ</a>
      </li>
    </ul>
  </div><!--end collapse navbar-->
</nav> <!-- end nav container -->


   <h1 class="display-4"> Jefferson Ross</h1>
   <p class="lead">Eager to Learn and to Serve. I am one who takes pride in his work, and does not settle for half-rate work. I may not know much, but I am eager to learn and become the best I can be.</p>
</div><!-- /container -->

<!--Three Column Grid-->
<div class="container content">
  <div class="row">
    <div class="col-sm">
      <h2> Protfolio Concept</h2>
      <p> I don't really have any web development experience, but I've been programing CNC macines for about two years now. I will include any projects I make during this class here.</p>
      <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details &raquo;</button>
    </div><!--/col-->
    <div class="col-sm">
      <h2> Project Goals</h2>
      <p>I hope to complete this course by the time I get married in June. I work full-time, but I hope to put about 15 to 20 hours a week into this course.</p>
      <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details &raquo;</button>
    </div><!-- end 2nd col sm-->
    <div class="col-sm">
      <h2> Course Goals</h2>
      <p>I'm looking to change careers. I am hoping to find a job as an entry-level web development position here in New Mexico.<p>
        <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details &raquo;</button>
    </div><!-- end 3rd col sm-->
    <div class="container content" id="work">
      <h2>Work</h2>
    </div><!--end work-->
  </div><!-- end row-->
</div><!-- end container-fluid-->
<div class="container content" id="about">
  <div class="header">
    <h1>About Me</h1>
  </div> <!--end header-->

<div class="container-fluid">
  <div class="row" id="about-row">
    <div class = "col-md-6" id="image_tent"><img src="img/tent.jpg" alt="tent"></div>
    <div class = "col-md-3" id="about-introduction">
      <h2>Introduction</h2>
        <p> I am a motivated man, who is looking to broaden his horizons.</p>
    </div><!-- end 2nd col md 3-->

    <div class = "col-md-3" id="skills">
      <h3>My skills</h3>
        <ul id="skills-list">
          <li> 2 years of G code experiance</li>
          <li> Enrolled in Career Foundry Web development program</li>
          <li> Attention to detail</li>
        </ul>
    </div><!-- end 3rd col md-->
  </div><!-- end row-->
</div><!--end container-fluid-->

<div class="Main-text">
  <h3>More about me</h3>
    <p>I have attended university for 3 years, as well as trade school for a year and am now working in a trade.
        I studied Biology and Chemistry at the University of New Mexico and Machine tools Technologies at the Central
      New Mexico community college. I currently work as a machinist and am currently trying to find what I would
      like to do with my life. I am very interested in learning computor sciences, and web development to find a passion.
      I want to work hard for the sake of working hard, and be the best I can be wherever I am placed.
</div><!--end mainText-->
<div class="container content" id="contact">
  <div class="jumbotron-jumbotron-fluid">
    <h1> Let's Talk </h1>
  </div> <!--end jumbotron-jumbotron-fluid-->
  <div id="map"></div>
  <div class="row">
    <div class="col-sm-12 col-md-5">
      <h3> Contact Info </h3>
        <h2> <i class="fas fa-envelope"></i> Email: jross0995@gmail.com</h2>
        <h2> <i class="fas fa-phone"></i> Phone: (505)688-8645</h2>
        <h2> <i class="fas fa-location-arrow"></i> Write me: 6208 Jeffery Ave. NE 87109</h2>
    </div><!--end column-->

    <div class="col-sm-12 col-md-7">
      <form>
        <div class="form-group">
          <label for="name">Name</label>
            <input type="name" class="form-control name" id="name" placeholder="Enter your name..." / name="name">
        </div>
        <div class="form-group">
          <label for="email">Email Address*</label>
            <input type="email" class="form-control email" id="email" required placeholder="Enter your Email address..." / name="emial">
        </div>
        <textarea style="resize:none" cols="40" rows="5" class="form-control" id="message-area" placeholder="Your message..." name="message" required ></textarea>
          <p id="visible-comment"></p>
          <p id="char-count"></p>
        <button type="submit" class="btn btn-secondary" id="button">Submit</button>
      </form>
    </div> <!--end column-->
  </div> <!--end row-->
</div> <!--end container content-->

<div class="container content" id="FAQ">
    <h1>FAQs</h1>
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Why did you decide to become a web developer?
          </button>
        </h5>
      </div><!--end headingOne-->
      <div id="collapseOne" class="why collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
        I've decided to pursue Web development because I wish to be a capable employee, and be able to provide
        a much needed service to employers as well as clients. I am also looking to change my careers, from
        a machining trade to a different career.
        </div><!--end card body-->
      </div><!--end Why?-->
    </div><!--end card-->
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          What education do you have?
          </button>
        </h5>
      </div><!--end heading 2-->
      <div id="collapseTwo" class="education collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
      I attended the University of New Mexico for 3 and 1/2 years pursuing biology and chemistry with the hope
      of atneding Dental school. Afterward I decided the career choice was not the right one, so I attended Central new Mexico
      Community college and completed my Machine Tools Technology certification, as well as earned my  associates degree
      in Applied Sciences. After working in the field for a years now I am finding that machining is not what I
      want to do. Now after much research and introspection I think Web development would be a much needed change.
        </div><!--end card body-->
      </div><!--end education-->
    </div><!--end card-->
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          What work experiance do you have?
          </button>
        </h5>
      </div><!--end heading 3-->
      <div id="collapseThree" class="work collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
        I've worked as a page in a local bookstore for about five years while I attended high school. In college I worked
        as a janitor for a company called <a href="https://www.environmentcontrol.com/" title="More information" id="item1">Enviroment Control</a> for about a 1 and 1/2 years. Now I work as a machinist for
        Ideal Vacuum Products for about a year now.
        </div><!--end card body-->
      </div><!--end work-->
    </div><!--end card-->
  </div><!-- end accordian-->
</div><!-- end container-->
<div class="container" id="learn-more">
  <div class="row">
    <h2>Learn More</h2>
  <div class="col-sm">
    <button type="button" class="btn btn-primary" class="modal-button" data-toggle="modal" data-target=".bd-example-modal">Modal</button>
  </div><!--end column-->
 </div><!--end row-->
</div><!-- end learn more-->
<!-- Modal -->
<div class="modal fade bd-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Resume</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!--end modal header-->
      <div class="modal-body">
        <embed id="Resume" src="js/resume.pdf">
        <h6>Education:</h6>
        <ul>
          <li> University of New Mexico from 07-2014 to 12-2016</li>
          <li> Central New Mexico Community College from 01-2017 to 12-2017<li>
        </ul>
        <h6>Work Experiance:</h6>
        <ul>
          <li> Page at Don's Paperback Book Exchange from 05-2012 to 03-2015</li>
          <li> Janitor for Enviroment Control from 12-2015 to 10-2017 </li>
          <li> Machinist with Ideal Vacuum Products from 10-2017 to current </li>
        </ul>
      </div><!--end modal body-->
    </div><!--end modal content-->
  </div><!-- end modal dialog-->
</div><!-- end modal fade--->

</div><!-- end about-->
    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="js/work.js"></script>
    <script src="js/scripts.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1B8alLrl1ne0Mh539tS2ZqlcfmMGjVN0&callback=initMap"
    async defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <!-- <script src="js/jquery.stellar.min.js"></script> -->

<footer>
  &copy;Jefferson Ross
  <a href="https://twitter.com/JeffersonRoss16?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @JeffersonRoss16</a>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjeff.ross.503092&width=60px&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=155352086005" width="60px" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media">
    </iframe>
  <div class="embed-responsive embed-responsive-16by9" id="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UR_yCO7-aIU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div><!--end video-->

</footer>

</body>
</html>

## 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}'>
        <span class='info'><p class='proj-title'>Title:</p> ${works[i].title} </span>\
        </a>
      </div>`);
    };

    $(".work-img").mouseenter( function() {
      $(".work-img").mouseenter(function(){
        $(".info", this).show();
      }).mouseleave(function(){
        $(".info", this).hide();
      });
    });

});

var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 35.1473722, lng:-106.6049332},
      zoom: 12
    });
    var position = {lat: 35.1473722, lng:-106.6049332};
    var marker = new google.maps.Marker({position: position, map: map});
  };

## styles.css
selector{
  position:relative;
  }

body{
  position: relative;
  background-color: #fffeea;
  color: #34495e;
  }

.image img{
  margin-top: 25px;
  width:300px;
  }

.img-responsive{
  max-height: 300px;
  float: left;
  padding: 50px;
}


.card-header{
  background:#F6E293;
  }

.card-header button{
  color:#000000;

  }

/* contact */
#contact{
  margin: 0 auto;
  margin-top: 3em;
  width: 100%;
  padding: 20px;
  text-align: center;
  background-image: url("../img/valley.jpg"); /*Add a background image*/
  background-attachment: fixed; /*Give the background a fixed position does it not scroll when you scroll*/
  background-size: cover; /*Have the background cover the entire div section*/
  color: white; /*Change the color of the text on top so it is readable and adjust the padding as needed.*/
  }

body{
  background-color: #fffeea;
  color: #34495e;
  }

.jumbotron-jumbotron-fluid{
  padding-top: 50px
  }

#carouselExampleIndicators{
  padding-top: 75px;
  }

.carousel img{
  height: 600px;
  }

.navbar-brand{text-transform: uppercase;}

a.navbar-brand{color: steelblue !important}

.header{
  padding-top: 100px;
  }

#about {
  margin: 0 auto;
  width: 100%;
  padding: 20px;
  }

#work h2{
  text-align: center;
  padding-top:100px;
  }

.Main-text {
    padding-top: 60px;
    clear: both;
  }

#skills h3{
  padding-left: 25px;
  }

#video{
  display: block;
  margin: 0 auto;
  width:50%;
  }

  .form-group{
    margin-top: 2em;
  }

  #Resume {
    height: 500px;
    width: 100%;
  }

  /* Works */
  .work-img {
    display: block; /* needed to center the element with margin */
    margin: auto; /* center the image inside the column if it's smaller */
    max-width: 200px; /* needs to be set to the width of your image files if they are relatively small */
    position: relative; /* is needed for .info position: absolute to work */
  }

  .info {
    position: absolute; /* let's us move the text around and not worry about the image */
    top: 15%; /* position the text 15% away from the top */
    display: none;
  }

  .proj-title {
    font-weight: 100;
  }

  .info {
    position: absolute;
    top: 15%;
    left: 22%;
    color: #fff;
    font-family: Futura;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5em;
    line-height: 1.6;
  }
  /* Map */

  #map {
    height: 300px;
    width: 80%;
    margin: 0 auto;
  }

  /* fonts */

h1,
h2,
h3 {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

p,
li{
font-family: Georgia, Arial, serif;
}

#about-introduction p {
  -webkit-margin-before: 0;
  }

#contact h2{
  font-size: 1em;
  text-align: left;
  }

.card{
  font-family: 'Roboto Condensed', sans-serif;}

/*media queries*/

@media (min-width: 768px) {
  .modal-button button {float: right;}
  }

## works.js
var works = [
  {
    title: "First Project",
    pic: "img/engagment.jpg"
  },
  {
    title: "Second Project",
    pic: "img/meetup.jpeg"
  },
  {
    title: "Third Project",
    pic: "img/mill_1.jpg"
  },
];
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<title>Hello World!</title>
	<!-- Bootstrap core CSS -->

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
	<!-- Custom styles for this template go here -->
	<link rel="stylesheet" href="css/styles.css">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body data-spy="scroll" data-target=".navbar">

	<!-- Main jumbotron for a primary marketing message or call to action -->
	<!-- <div class="jumbotron jumbotron-fluid"> -->
	<div class="container">
	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
	<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
	<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
	<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
	<div class="carousel-item active">
	<img class="d-block w-100" src="img/carosel1.jpg" alt="First slide">
	</div>
	<div class="carousel-item">
	<img class="d-block w-100" src="img/carosel2.jpg" alt="Second slide">
	</div>
	<div class="carousel-item">
	<img class="d-block w-100" src="img/carosel3.jpg" alt="Third slide">
	</div>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
	<span class="carousel-control-next-icon" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
	</a>
	<div class="carousel-caption d-none d-md-block">
	<h5>Welcome</h5>
	<p>How can I help?</p>
	</div><!-- end carousel-->
	</div><!-- end main carosel-->

	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
	<a class="navbar-brand" href="#">CareerFoundry</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav ml-auto">
	<li class="nav-item active">
	<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#work">work</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#about">about</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#contact">contact</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#FAQ">FAQ</a>
	</li>
	</ul>
	</div><!--end collapse navbar-->
	</nav> <!-- end nav container -->


	<h1 class="display-4"> Jefferson Ross</h1>
	<p class="lead">Eager to Learn and to Serve. I am one who takes pride in his work, and does not settle for half-rate work. I may not know much, but I am eager to learn and become the best I can be.</p>
	</div><!-- /container -->

	<!--Three Column Grid-->
	<div class="container content">
	<div class="row">
	<div class="col-sm">
	<h2> Protfolio Concept</h2>
	<p> I don't really have any web development experience, but I've been programing CNC macines for about two years now. I will include any projects I make during this class here.</p>
	<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details »</button>
	</div><!--/col-->
	<div class="col-sm">
	<h2> Project Goals</h2>
	<p>I hope to complete this course by the time I get married in June. I work full-time, but I hope to put about 15 to 20 hours a week into this course.</p>
	<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details »</button>
	</div><!-- end 2nd col sm-->
	<div class="col-sm">
	<h2> Course Goals</h2>
	<p>I'm looking to change careers. I am hoping to find a job as an entry-level web development position here in New Mexico.<p>
	<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details »</button>
	</div><!-- end 3rd col sm-->
	<div class="container content" id="work">
	<h2>Work</h2>
	</div><!--end work-->
	</div><!-- end row-->
	</div><!-- end container-fluid-->
	<div class="container content" id="about">
	<div class="header">
	<h1>About Me</h1>
	</div> <!--end header-->

	<div class="container-fluid">
	<div class="row" id="about-row">
	<div class = "col-md-6" id="image_tent"><img src="img/tent.jpg" alt="tent"></div>
	<div class = "col-md-3" id="about-introduction">
	<h2>Introduction</h2>
	<p> I am a motivated man, who is looking to broaden his horizons.</p>
	</div><!-- end 2nd col md 3-->

	<div class = "col-md-3" id="skills">
	<h3>My skills</h3>
	<ul id="skills-list">
	<li> 2 years of G code experiance</li>
	<li> Enrolled in Career Foundry Web development program</li>
	<li> Attention to detail</li>
	</ul>
	</div><!-- end 3rd col md-->
	</div><!-- end row-->
	</div><!--end container-fluid-->

	<div class="Main-text">
	<h3>More about me</h3>
	<p>I have attended university for 3 years, as well as trade school for a year and am now working in a trade.
	I studied Biology and Chemistry at the University of New Mexico and Machine tools Technologies at the Central
	New Mexico community college. I currently work as a machinist and am currently trying to find what I would
	like to do with my life. I am very interested in learning computor sciences, and web development to find a passion.
	I want to work hard for the sake of working hard, and be the best I can be wherever I am placed.
	</div><!--end mainText-->
	<div class="container content" id="contact">
	<div class="jumbotron-jumbotron-fluid">
	<h1> Let's Talk </h1>
	</div> <!--end jumbotron-jumbotron-fluid-->
	<div id="map"></div>
	<div class="row">
	<div class="col-sm-12 col-md-5">
	<h3> Contact Info </h3>
	<h2> <i class="fas fa-envelope"></i> Email: jross0995@gmail.com</h2>
	<h2> <i class="fas fa-phone"></i> Phone: (505)688-8645</h2>
	<h2> <i class="fas fa-location-arrow"></i> Write me: 6208 Jeffery Ave. NE 87109</h2>
	</div><!--end column-->

	<div class="col-sm-12 col-md-7">
	<form>
	<div class="form-group">
	<label for="name">Name</label>
	<input type="name" class="form-control name" id="name" placeholder="Enter your name..." / name="name">
	</div>
	<div class="form-group">
	<label for="email">Email Address*</label>
	<input type="email" class="form-control email" id="email" required placeholder="Enter your Email address..." / name="emial">
	</div>
	<textarea style="resize:none" cols="40" rows="5" class="form-control" id="message-area" placeholder="Your message..." name="message" required ></textarea>
	<p id="visible-comment"></p>
	<p id="char-count"></p>
	<button type="submit" class="btn btn-secondary" id="button">Submit</button>
	</form>
	</div> <!--end column-->
	</div> <!--end row-->
	</div> <!--end container content-->

	<div class="container content" id="FAQ">
	<h1>FAQs</h1>
	<div id="accordion">
	<div class="card">
	<div class="card-header" id="headingOne">
	<h5 class="mb-0">
	<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	Why did you decide to become a web developer?
	</button>
	</h5>
	</div><!--end headingOne-->
	<div id="collapseOne" class="why collapse" aria-labelledby="headingOne" data-parent="#accordion">
	<div class="card-body">
	I've decided to pursue Web development because I wish to be a capable employee, and be able to provide
	a much needed service to employers as well as clients. I am also looking to change my careers, from
	a machining trade to a different career.
	</div><!--end card body-->
	</div><!--end Why?-->
	</div><!--end card-->
	<div class="card">
	<div class="card-header" id="headingTwo">
	<h5 class="mb-0">
	<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	What education do you have?
	</button>
	</h5>
	</div><!--end heading 2-->
	<div id="collapseTwo" class="education collapse" aria-labelledby="headingTwo" data-parent="#accordion">
	<div class="card-body">
	I attended the University of New Mexico for 3 and 1/2 years pursuing biology and chemistry with the hope
	of atneding Dental school. Afterward I decided the career choice was not the right one, so I attended Central new Mexico
	Community college and completed my Machine Tools Technology certification, as well as earned my associates degree
	in Applied Sciences. After working in the field for a years now I am finding that machining is not what I
	want to do. Now after much research and introspection I think Web development would be a much needed change.
	</div><!--end card body-->
	</div><!--end education-->
	</div><!--end card-->
	<div class="card">
	<div class="card-header" id="headingThree">
	<h5 class="mb-0">
	<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	What work experiance do you have?
	</button>
	</h5>
	</div><!--end heading 3-->
	<div id="collapseThree" class="work collapse" aria-labelledby="headingThree" data-parent="#accordion">
	<div class="card-body">
	I've worked as a page in a local bookstore for about five years while I attended high school. In college I worked
	as a janitor for a company called <a href="https://www.environmentcontrol.com/" title="More information" id="item1">Enviroment Control</a> for about a 1 and 1/2 years. Now I work as a machinist for
	Ideal Vacuum Products for about a year now.
	</div><!--end card body-->
	</div><!--end work-->
	</div><!--end card-->
	</div><!-- end accordian-->
	</div><!-- end container-->
	<div class="container" id="learn-more">
	<div class="row">
	<h2>Learn More</h2>
	<div class="col-sm">
	<button type="button" class="btn btn-primary" class="modal-button" data-toggle="modal" data-target=".bd-example-modal">Modal</button>
	</div><!--end column-->
	</div><!--end row-->
	</div><!-- end learn more-->
	<!-- Modal -->
	<div class="modal fade bd-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title" id="exampleModalLabel">Resume</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div><!--end modal header-->
	<div class="modal-body">
	<embed id="Resume" src="js/resume.pdf">
	<h6>Education:</h6>
	<ul>
	<li> University of New Mexico from 07-2014 to 12-2016</li>
	<li> Central New Mexico Community College from 01-2017 to 12-2017<li>
	</ul>
	<h6>Work Experiance:</h6>
	<ul>
	<li> Page at Don's Paperback Book Exchange from 05-2012 to 03-2015</li>
	<li> Janitor for Enviroment Control from 12-2015 to 10-2017 </li>
	<li> Machinist with Ideal Vacuum Products from 10-2017 to current </li>
	</ul>
	</div><!--end modal body-->
	</div><!--end modal content-->
	</div><!-- end modal dialog-->
	</div><!-- end modal fade--->

	</div><!-- end about-->
	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="js/work.js"></script>
	<script src="js/scripts.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1B8alLrl1ne0Mh539tS2ZqlcfmMGjVN0&callback=initMap"
	async defer></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<!-- <script src="js/jquery.stellar.min.js"></script> -->

	<footer>
	©Jefferson Ross
	<a href="https://twitter.com/JeffersonRoss16?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @JeffersonRoss16</a>
	<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fjeff.ross.503092&width=60px&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=155352086005" width="60px" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media">
	</iframe>
	<div class="embed-responsive embed-responsive-16by9" id="video">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/UR_yCO7-aIU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div><!--end video-->

	</footer>

	</body>
	</html>
	// 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}'>
	<span class='info'><p class='proj-title'>Title:</p> ${works[i].title} </span>\
	</a>
	</div>`);
	};

	$(".work-img").mouseenter( function() {
	$(".work-img").mouseenter(function(){
	$(".info", this).show();
	}).mouseleave(function(){
	$(".info", this).hide();
	});
	});

	});

	var map;
	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 35.1473722, lng:-106.6049332},
	zoom: 12
	});
	var position = {lat: 35.1473722, lng:-106.6049332};
	var marker = new google.maps.Marker({position: position, map: map});
	};
	selector{
	position:relative;
	}

	body{
	position: relative;
	background-color: #fffeea;
	color: #34495e;
	}

	.image img{
	margin-top: 25px;
	width:300px;
	}

	.img-responsive{
	max-height: 300px;
	float: left;
	padding: 50px;
	}


	.card-header{
	background:#F6E293;
	}

	.card-header button{
	color:#000000;

	}

	/* contact */
	#contact{
	margin: 0 auto;
	margin-top: 3em;
	width: 100%;
	padding: 20px;
	text-align: center;
	background-image: url("../img/valley.jpg"); /Add a background image/
	background-attachment: fixed; /Give the background a fixed position does it not scroll when you scroll/
	background-size: cover; /Have the background cover the entire div section/
	color: white; /Change the color of the text on top so it is readable and adjust the padding as needed./
	}

	body{
	background-color: #fffeea;
	color: #34495e;
	}

	.jumbotron-jumbotron-fluid{
	padding-top: 50px
	}

	#carouselExampleIndicators{
	padding-top: 75px;
	}

	.carousel img{
	height: 600px;
	}

	.navbar-brand{text-transform: uppercase;}

	a.navbar-brand{color: steelblue !important}

	.header{
	padding-top: 100px;
	}

	#about {
	margin: 0 auto;
	width: 100%;
	padding: 20px;
	}

	#work h2{
	text-align: center;
	padding-top:100px;
	}

	.Main-text {
	padding-top: 60px;
	clear: both;
	}

	#skills h3{
	padding-left: 25px;
	}

	#video{
	display: block;
	margin: 0 auto;
	width:50%;
	}

	.form-group{
	margin-top: 2em;
	}

	#Resume {
	height: 500px;
	width: 100%;
	}

	/* Works */
	.work-img {
	display: block; /* needed to center the element with margin */
	margin: auto; /* center the image inside the column if it's smaller */
	max-width: 200px; /* needs to be set to the width of your image files if they are relatively small */
	position: relative; /* is needed for .info position: absolute to work */
	}

	.info {
	position: absolute; /* let's us move the text around and not worry about the image */
	top: 15%; /* position the text 15% away from the top */
	display: none;
	}

	.proj-title {
	font-weight: 100;
	}

	.info {
	position: absolute;
	top: 15%;
	left: 22%;
	color: #fff;
	font-family: Futura;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5em;
	line-height: 1.6;
	}
	/* Map */

	#map {
	height: 300px;
	width: 80%;
	margin: 0 auto;
	}

	/* fonts */

	h1,
	h2,
	h3 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	}

	p,
	li{
	font-family: Georgia, Arial, serif;
	}

	#about-introduction p {
	-webkit-margin-before: 0;
	}

	#contact h2{
	font-size: 1em;
	text-align: left;
	}

	.card{
	font-family: 'Roboto Condensed', sans-serif;}

	/media queries/

	@media (min-width: 768px) {
	.modal-button button {float: right;}
	}
	var works = [
	{
	title: "First Project",
	pic: "img/engagment.jpg"
	},
	{
	title: "Second Project",
	pic: "img/meetup.jpeg"
	},
	{
	title: "Third Project",
	pic: "img/mill_1.jpg"
	},
	];