<!-- 
not done yet! ... but getting close!

this is a homework assignment for freecodecamp.org

https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage

-->

<!-- 
TODO: 
- skill icons need some work
- reorganize CSS / get rid of unused css
- reorganize JS + refactor some things if needed (there may be some ways to speed up my scroll animations) - pretty choppy for animations when they are big
- social buttons actually need to do something!
- need linked in profile!
-->


<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
  <a class="navbar-brand" href="#top"><div class="small-logo">daniel cook</div></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 mr-auto">
      <li class="nav-item">
        <a class="nav-link" id="nav-about" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="nav-portfolio" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="nav-contact" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>



<!-- TOP HERO -->
<div id="top"></div>
<div class="container-fluid top">
  <div class="top-container d-flex justify-content-center flex-column align-items-center align-content-center">
    <div class="display-1 title-text text-white head">daniel cook</div>
    <div class="text-white head">web developer</div>
    <div class="chevron head"><i class="fa fa-chevron-down text-white" aria-hidden="true"></i></div>
  </div>
</div>

<!-- GREEN DIVIDER -->
<div class="divider-container">
  <div class="divider-green section-divider" id="divider-green"></div>
</div>


<!-- ABOUT SECTION -->
<div id="about" class="nav-offset"></div>
<div class="container-fluid about text-white  ">
  <div class="about-container">
    <h1 class="display-2 text-white">About</h1>
    <div class="text-center mt-5 d-flex justify-content-center flex-column">
      <div class="profile-pic-container">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1525709724/slice2full_greenback_mdsfgr.png" alt="profile picture" class="rounded-circle img-fluid profile-picture">
      </div>
      <h1 class="mt-5 name-text">daniel cook</h1>
      <h6>Web Developer</h6>
    </div>
    <div class="d-flex justify-content-center flex-column">
      <p class="about-text text-justify align-self-center">
        Coding is a relatively new venture in my life that started off as more of a hobby. After deciding to aim for using these skills professionally, I started a course at Free Code Camp. I've learned a variety of web related technologies, and while I like to code and problem solve, one of the reasons I like to do it most is to help people with what they need. I have a wide variety of work related experience, but please peruse this portfolio I've put together to see my experience as it pertains to coding. 
      </p>
      <p class="align-self-center">Skills: <span class="skill-tooltip"></span></p>
    </div>
    <div class="skill-set text-center">
      <i class="icon-html5"></i>
      <i class="icon-css3"></i>
      <i class="icon-javascript"></i>
      <i class="icon-bootstrap"></i>
      <i class="icon-jquery"></i>
      <i class="icon-python"></i>
      <i class="fa fa-github" aria-hidden="true"></i>
    </div>
  </div>
</div>

<!-- BLUE DIVIDER -->
<div class="divider-container">
  <div class="divider-blue section-divider" id="divider-blue"></div>
</div>

<!-- PORTFOLIO SECTION -->
<div id="portfolio" class="nav-offset"></div>
<!-- here to offset the nav click -->
<div class="container-fluid portfolio">
  <h1 class="portfolio-title text-white display-2">Portfolio</h1>
  <div class="row cards d-flex justify-content-center">
    <div class="col-xs-3 m-2">
      <a class="card-link" target="_blank" href="https://codepen.io/dcookwebdev/post/fcc-project-tribute-page">
      <div class="card border border-0">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1525696944/cslewis_square_mvieln.jpg" alt="placeholder image" class="card-img-top">
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
          <h4 class="card-text">Tribute Page</h4>
        </div>
      </div>
      </a>
    </div>

    <div class="col-xs-3 m-2">
      <a class="card-link" href="">
      <div class="card border border-0">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1526300733/functioncodingtrue_oyotvo.png" alt="placeholder image" class="card-img-top">
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
          <h4 class="card-text"></h4>
        </div>
      </div>
      </a>
    </div>
    
    <div class="col-xs-3 m-2">
      <a class="card-link" href="">
      <div class="card border border-0">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1526300733/functioncodingtrue_oyotvo.png" alt="placeholder image" class="card-img-top">
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
          <h4 class="card-text"></h4>
        </div>
      </div>
      </a>
    </div>
    
    <div class="col-xs-3 m-2">
      <a class="card-link" href="">
      <div class="card border border-0">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1526300733/functioncodingtrue_oyotvo.png" alt="placeholder image" class="card-img-top">
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
          <h4 class="card-text"></h4>
        </div>
      </div>
      </a>
    </div>
    
    <div class="col-xs-3 m-2">
      <a class="card-link" href="">
      <div class="card border border-0">
        <img src="http://res.cloudinary.com/dvdfmsjlq/image/upload/v1526300733/functioncodingtrue_oyotvo.png" alt="placeholder image" class="card-img-top">
        <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
          <h4 class="card-text"></h4>
        </div>
      </div>
      </a>
    </div>
    
  </div>
</div>

<!-- YELLOW DIVIDER -->
<div class="divider-container">
  <div class="divider-yellow section-divider" id="divider-yellow"></div>
</div>

<!-- ABOUT SECTION -->
<div id="contact" class="nav-offset"></div>
<!-- here to offset the nav click -->
<div class="container-fluid contact text-white">
  <h1 class="display-2">Contact</h1>
  <div class="d-flex justify-content-center">
    <p class="about-text text-justify">It would be great to hear from you! If you have any questions or you have a project that needs to be done just fill out the form.</p>
  </div>
  <div class="container d-flex justify-content-center">
    <form class="about-text" action="https://formspree.io/cook.r.dan@gmail.com" method="POST">
      <div class="form-group row">
        <label for="inputname" class="form-control-label">Name</label>
        <input type="text" name="name" class="form-control" id="inputname" placeholder="Name">
      </div>
      <div class="form-group row">
        <label for="inputemail" class="form-control-label">Email</label>
        <input type="email" name="_replyto" class="form-control" id="inputemail" placeholder="Email">
      </div>
      <div class="form-group row">
        <label for="formcomment" class="form-control-label">Message:</label>
        <textarea name="comment" id="formcomment" class="form-control" cols="30" rows="10"></textarea>
      </div>
      <div class="form-group row">
        <input type="hidden" name="_subject" value="CodePen Portfolio Form Submitted" />
        <input type="submit" class="btn btn-outline-light">
      </div>
    </form>
  </div>
  <div class="social text-center m-5">
    <h5 class="text-white">Find me around the web:</h5>
  <div class="social-icons text-center">
    <a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-wordpress" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-codepen" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
  </div>
  </div>
</div>

<!-- FOOTER -->
<footer class="container-fluid footer text-center">
  <div class="copyright mt-5">Copyright © Daniel Cook <span id="copyrightYear">2018</span></div>
</footer>

.navbar {
  background-color: #110b11;
  border-bottom: 1px solid white;
  transition: 3s;
}

.title-text, .display-2 {
  font-family: avenir next, helvetica;
  line-height: 80%;
  padding-bottom: 20px;
  letter-spacing: -5px;
  text-shadow: 12px 12px 15px rgba(0,0,0,0.5), 4px 4px 3px rgba(0,0,0,0.1);
  text-align: center;
  z-index: 1;
}

.name-text {
  font-family: avenir next, helvetica;
  font-weight: 100;
  
}

.divider-container {
  height: 200px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  opacity: 0.9;
}

.section-divider {
    transform: skewY(-6deg);
  height: 0px;
}

.divider-blue {
  background-color: #01BAEF;
}

.divider-green {
  background-color: #00DB95;
}

.divider-yellow {
  background-color: #FFC914;
}



.chevron {
  position: absolute;
  bottom: 0;
  height: 50px;
  z-index: 1;
}

.small-logo {
  font-family: avenir next;
  font-weight: 100;
  letter-spacing: -1px;
  padding: 3px 10px;
  border-radius: 2px;
  border: 0.5px solid white;
}

.small-logo:hover {
  background-color: #FFC914;
  border-color: black;
  color: black;
}


.about-text {
  max-width: 560px;
}

.skills-text {
  text-align: left
}

.profile-pic-container {
  max-width: 350px;
  margin: 0 auto; 
}

.profile-picture {
  border: 1px solid #1B998B;
}

.nav-link {
  border-bottom: 2px solid rgba(0,0,0,0); /*fixes jumpy text on hover*/
}

.nav-link:hover {
  border-bottom: 2px solid #FFC914;
}

.nav-link.active {
  border-bottom: 2px solid white;
}


body {
  /* thanks to http://www.heropatterns.com */
background-color: #110b11;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236761a8' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}




.container-fluid {
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}


.top {
  height: 100vh;
  max-height: 100vh;
}


.top-container {
  min-height: 85vh;
  padding: 10px;
}

.nav-offset {
  /* so the sections aren't cut off by the nav bar */
  height: 2em;
}


.card {
  overflow: hidden; /*needed because border-radius from bootstrap not working properly with the image*/
  background-color: black;
}

.card-text {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.cards > div {
  /* This gives the portfolio cards some appropriate sizing */
  max-width: 250px;
  min-width: 230px;
}
.card-img-top {
  width: 250px; /*need to keep it smaller! */
}

.card-link {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.card-link > div {
  transition: transform .4s;
}

.card-link:hover > div {
  color: white;
  transform: scale(1.03); 
}

.skill-set > i {
  font-size: 2em;
  margin: 0.3em;
}

.social-icons > a {
  color: white;
  margin: 0.5em;
  font-size: 1.7em;
}

.copyright {
  color: white;
  font-size: 0.7em;
}

/* was here for use the JS to show/hide nav bar based on scrolling. taking it out for now.
.navbar {
  opacity: 0;
  transition: opacity 0.4s;
}

.navbar:hover {
  opacity: 1;
}
*/

// always up to date copyright year:
document.getElementById("copyrightYear").innerHTML = new Date().getFullYear();

// This is for nav click events and setting/removing the nav-links active status
$(".nav-link").click(function() {
  $(".nav-link.active").removeClass("active");
  $(this).addClass("active");
});

//let navbarHidden = true; // not needed for now



//TODO: all of the variables in the below function need to be declared outside so I'm not constantly searching the DOM for them! (offsettop is a static value)


// This is to change the nav buttons active status based on scroll
$(window).on("scroll", function() {
  let aboutTop = document.getElementById("about").offsetTop;
  let portfolioTop = document.getElementById("portfolio").offsetTop;
  let contactTop = document.getElementById("contact").offsetTop;
  let blueDivTop = document.getElementById("divider-blue").offsetTop;
  let greenDivTop = document.getElementById("divider-green").offsetTop;
  let yellowDivTop = document.getElementById("divider-yellow").offsetTop;
  let winScroll = $(this).scrollTop();
  let winBottom = winScroll + $(this).height(); // bottom position of frame
  let navHeight = 32; // for offsetting winScroll for visual changes to navbar

  /* this code was for showing the navbar as user scrolls but keeping it hidden at the top. Going to take it out for now.
  if (winScroll > 150 && navbarHidden) {
    // show navbar
    if ($(".navbar").css("opacity") !== "1") {
      $(".navbar").css("opacity", "1");
      navbarHidden = false;
    }
  }
  
  if (winScroll < 150 && !navbarHidden) {
    // hide navbar
    if ($(".navbar").css("opacity") !== "0") {
      $(".navbar").css("opacity", ""); // setting to nothing "" so it doesn't override the default CSS behavior for hover and opacity
      navbarHidden = true;
      
    }
  }*/
  
  // for animating the colored dividers while scrolling
  let bluePos = blueDivTop - winBottom;
  if ( bluePos < 0 ) {
    // expand or contract based on scrolling up or down
    $("#divider-blue").css("height", (Math.abs(bluePos) / 3.5)); 
  }
  
  let greenPos = greenDivTop - winBottom;
  if ( greenPos < 0 ) {
    // expand or contract based on scrolling up or down
    $("#divider-green").css("height", (Math.abs(greenPos) / 3.5)); 
  }
  
  let yellowPos = yellowDivTop - winBottom;
  if ( yellowPos < 0 ) {
    // expand or contract based on scrolling up or down
    $("#divider-yellow").css("height", (Math.abs(yellowPos) / 3.5)); 
  }
  
  
  // this is for changing the active section in the nav
  if (winScroll < aboutTop) {
    // nothing should be active
    $(".nav-link.active").removeClass("active");
    $(".navbar").css("border-bottom-color", "white")

    
  }

  if (aboutTop < winScroll + navHeight) {
    $(".nav-link.active").removeClass("active");
    $("#nav-about").addClass("active");
    $(".navbar").css("border-bottom-color", "#00DB95")  // green

  }

  if (portfolioTop < winScroll + navHeight) {
    $(".nav-link.active").removeClass("active");
    $("#nav-portfolio").addClass("active");
    $(".navbar").css("border-bottom-color", "#01BAEF") // blue


  }

  if (contactTop < winScroll + navHeight) {
    $(".nav-link.active").removeClass("active");
    $("#nav-contact").addClass("active");
    $(".navbar").css("border-bottom-color", "#FFC914") // yellow

  }
});