Single Page portfolio website

Question

I have finished and launched my first website and would love some feedback/ideas for improvement. This is a single page website for the purpose of displaying my finished projects. I know that I have used a lot of !important declarations to make things work properly. I have also used many media queries to have things be positioned where I want them. Any help is greatly appreciated. Thank you. Here is the website

HTML:

<!DOCTYPE html>
<html >
  <head>





<!--Meta -->
<title>Goode Development</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

   <script src="js/index.js"></script>
<!--Meta -->

 </head>


  <body>

    <!DOCTYPE html>
<html lang="en">


<!--Navbar-->

<body>
<div class ="wrappers">
  <div class="home">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button id="btnCollapse" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
          <h1 class="navbar-brand">Goode Development</h1>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-left">
            <li><a class="a" href="#homey">Home</a></li>
            <li><a class="a" href="#abou">About</a></li>
            <li><a class="a" href="#porty">Portfolio</a></li>
            <li><a class="a" href="#conty">Contact</a></li>
          </ul>
        </div>
      </div>

    </nav>

    <!--End Navbar-->


    <!--header -->
    <div id="intro">
      <a name="homey"> </a>
      <div class="jumbotron">
        <h1 class="text-center" id="head">Kyle Goode</h1>
        <p class="text-center" id="header">Full Stack Web Developer</p>
      </div>
    </div>
  </div>
  <!-- End header-->
  <!--End home-->

  <!-- About -->
  <a name="abou"> </a>
  <div class="wrapper" id="box">
    <div class="about">
      <h1 class="text-center">About</h1>
      <p class="text-center" id="myth">The man...The myth...The legend</p>
      <article>
        <div class="img-wrap">
          <img id="pic" src="http://i725.photobucket.com/albums/ww259/kgoode517/IMG_6189_zpsxtlvi4iq.jpg" alt="IMG_6189">
        </div>
        <p>
          Kyle Goode is a young, caffeine dependent, Nashville local. He went to school in a small town just West of Nashville where he met and married his high school sweetheart. It is in that small town that Kyle's passion for technology began.Kyle has been amazed
          with technology and programming even as a child,from trying to read code and quickly realizing he couldn't read the long "words" it was making to taking apart the family computers, much to the chagrin of his parents. Though his adult life has
          been spent in the medical field, Kyle is excited to begin transitioning his hobby and passion to his profession.
        </p>
      </article>
      <div class="container" id="mine">
        <h1 class="text-center" id="kyle">Kyle Goode-the man in bullet points</h1>
        <ul class="text-left" id="profile">
          <li>Good Samaritan</li>
          <li>Prefers puns intended</li>
          <li>Especially gifted napper</li>
          <li>Devoted to both programming and Game of Thrones</li>
          <li>Codes for fun</li>
          <li>Making History</li>
          <li>Goes into survival mode if tickled</li>
          <li>Anxiously awaiting you to connect with him for projects.</li>
        </ul>
      </div>
    </div>
    <!--skills-->
    <div class="skills">
      <h1 class="text-center">Skills</h1>
      <ul id="list">
        <li>Html5</li>
        <li>CSS3</li>
        <li>Javascript</li>
        <li>Ruby</li>
        <li>Bootstrap</li>
        <li>Jquery</li>
        <li>Rails</li>
        <li>Git</li>
      </ul>
    </div>
    <!--end Skills-->
    <!--end About-->

    <!-- Begin Portfolio -->
  </div>
  <a name="porty"></a>
  <div class="portfolio">
    <div class="container">
      <h1 class="text-center">My Work</h1>
      <div class="row">


        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <a href="http://codepen.io/kgoode517/full/WwjNqp/"><i class="fa fa-codepen fa-5x fa-fw" id="first"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/Bernie_zps19tpxug7.png" class="img-responsive" alt="tribute">
          </div>
          <legend>Tribute page</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
              <a href="http://codepen.io/kgoode517/full/yYddbb/"><i class="fa fa-codepen fa-5x fa-fw" id ="second"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/google_zpsxa3kemaw.png" class="img-responsive" alt="google">
          </div>
          <legend>Google homepage</legend>
        </div>

        <div class="col-md-4">
          <div class="thumbnail">
            <div class="caption">
              <h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
              <a href="http://codepen.io/kgoode517/full/LNdxKE/"><i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i> </a>
            </div>
            <img src="http://i725.photobucket.com/albums/ww259/kgoode517/cannon_zpsoqkqkueg.png" class="img-responsive" alt="cannon">
          </div>
          <legend>Cannon game</legend>
        </div>
      </div>
      <!--/row -->

    </div>
    <!-- end container -->
  </div>

  <!-- End Portfolio-->

  <!-- Footer -->
  <div class="foot">
    <h2 class="text-center">Contact me</h2>
    <div class="text-center">
      <div class="icons">
          <a name="conty"></a>
        <a href="https://www.facebook.com/goodedevelopment/" target="_blank"><i class="fa fa-facebook-official fa-5x fa-fw"></i> </a>
        <a href="https://github.com/kgoode517" target="_blank"><i class="fa fa-github-square fa-5x fa-fw"></i> </a>
        <a href="http://codepen.io/kgoode517/" target="_blank"><i class="fa fa-codepen fa-5x fa-fw"></i> </a>
        <a href="https://www.linkedin.com/in/kyle-goode-08b80b104" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-fw"></i></a>
        <a href="mailto:Goodedevelopment@yahoo.com"><i class="fa fa-envelope fa-5x fa-fw"></i></a>
      </div>
    </div>


    <!--copyright -->
    <footer class="text-center">
      <small> &reg Goode Development 2016. All Rights Reserved</small>
    </footer>
  </div>
  <!-- end copyright-->
  <!--End Footer-->
  </div>
</body>

</html>






  </body>
</html>

CSS:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.wrappers{
  overflow-x: hidden;
}

/*Navbar*/

.navbar {
  height: 125px;
}

.navbar-brand {
  position: relative!important;
  left: 45px!important;
  bottom: 10px!important;
  font-size: 4em!important;
  color: white!important;
  font-family: "Montserrat", sans-serif !important;
  white-space:nowrap;
}

.nav.navbar-nav.navbar-left li a {
  color: white;
  position: relative;
  right: 475px;
  top: 66px;
  font-family: "Montserrat", sans-serif !important;
}

.nav.navbar-nav.navbar-left li a:hover {
  color: orange;
}

@media screen and (max-width: 990px) {
  .navbar-header {
    float: none !important;
  }
  .navbar-brand {
    left: 0 !important;
  }
  .nav li a {
    padding: 5px;
    margin-right: 50px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: white;
    right: 0px;
    top: 0px;
  }
}

@media screen and (max-width: 767px) {
  .navbar-brand {
    font-size: 40px !important;
    position: relative !important;
    top: -20px !important;
    left: -10px !important;
  }
  .navbar {
    height: 70px;
  }
  .nav.navbar-nav.navbar-left li a {
    color: black;
    right: 0;
    top: 0;
  }
  .collapsing,
  .in {
    background-color: #222222;
    position: relative;
    top: -30px;
  }
  .collapsing ul li a,
  .in ul li a {
    color: white!important;
  }
  .collapsing ul li a:hover,
  .in ul li a:hover {
    color: orange!important;
  }
}

@media screen and (max-width: 568px) {
  .navbar-brand {
    font-size: 30px !important;
    position: relative !important;
    bottom: 20px !important;
    left: -3px !important;
    !important;
  }
  .navbar {
    height: 50px;
  }
}

@media screen and (max-width: 420px) {
  .navbar-brand {
    font-size: 25px !important;
  }
}

@media screen and (max-width: 370px) {
  .navbar-brand {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 325px) {
  .navbar-brand {
    font-size: 15px !important;
  }
}


/*End Navbar*/


/*Home Page*/

.jumbotron {
  background: transparent !important;
  color: white !important;
  font-family: "Roboto", sans-serif !important;
  position: relative;
  top: 300px;
}

.jumbotron h1 {
  font-size: 6.5em !important;
}

.home {
  background: url(http://mrg.bz/VN5LDd) no-repeat center;
  background-size: cover !important;
  z-index: -1;
  height: 1000px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
 background-position: center center !important;
}

@media screen and (max-width: 768px) {
  .home {
    height: 1050px;
  }
  .jumbotron {
    top: 250px;
  }
  .jumbotron h1 {
    font-size: 5.5em !important;
  }
}
@media screen and (max-width: 700px){
  .home{
  background-size:cover !important;
  }
 .home {
    height: 800px;
  }

}


@media screen and (max-width: 568px) {
  .jumbotron h1 {
    font-size: 4.5em !important;
  }
}

@media screen and (max-width: 370px) {
  .jumbotron {
    top: 225px;
  }
.home {
    height: 700px;
  }
}

@media screen and (max-width: 325px) {
  .jumbotron {
    top: 175px;
  }
  .jumbotron h1 {
    font-size: 3.5em !important;
  }
  .jumbotron p {
    font-size: 1em !important;
  }
.home {
    height: 600px;
  }
}


/*End Home Page */


/*About Page*/

.about {
  background: linear-gradient(180deg, darkgrey, grey);
  background-size: cover;
  background-attachment: fixed;
  display: inline-block;
  width: 100%;
  height: 900px;
  font-size: 25px;
  font-family: "Roboto", sans-serif !important;
  word-wrap: break-word;
}

.about:after {
  clear: both;
  visibility: hidden;
}

.about h1 {
  font-size: 55px;
  font-family: "Montserrat" ,serif !important;
  position: relative;
  top: 15px;
  color: black;
}

#myth {
  color: black;
  padding-top: 15px;
  position: relative;
  left: 15px;
  font-size: 28px;
}

#pic {
  width: 255%;
  height: 255%;
  position: relative;
  top: 10px;
  right: 385px;
}

.img-wrap {
  float: left;
  height: 200px;
  width: 200px;
  position: relative;
}

.img-wrap img {
  width: 100%;
}

article {
  width: 40em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 1em;
  left: 200px;
  color: black;
}

#mine {
  position: relative;
  left: 200px;
}

article p {
  overflow: hidden;
  font-size: 20px;
}

#kyle {
  font-size: 25px;
  position: relative;
  top: 35px;
  right: 71px;
}

#profile li {
  font-size: 22px;
  position: relative;
  top: 40px;
  left: 250px;
  color: black;
}

.skills {
  width: 100%;
  height: 225px;
  /*background-color: #dbdbdb*/
  background: linear-gradient(180deg, white, #dbdbdb);
  white-space: normal;
  background-attachment: fixed;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 30px;
}

.skills h1 {
  font-size: 55px;
  color: black;
  font-family: "Montserrat",serif !important;
}

.skills li {
  font-size: 25px;
}

#list li {
  margin-right: 2em;
  position: relative;
  bottom: -25px;
  color: black;
  font-family: 'Roboto',serif !important;
}

#list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  list-style-type: none;
}

@media screen and (max-width: 1450px) {
  article {
    width: 35em;
  }
  #mine {
    position: relative;
    left: 260px;
  }
  #pic {
    width: 270%;
    height: 270%;
  }
}

@media screen and (max-width: 1300px) {
  article {
    width: 30em;
  }
  #pic {
    width: 285%;
    height: 285%;
    position: relative;
    right: 415px;
  }
  #mine {
    position: relative;
    left: 320px;
  }
  #kyle {
    font-size: 22px;
    position: relative;
    right: 100px;
  }
  #profile li {
    font-size: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .about h1 {
    font-size: 45px;
  }
  .skills h1 {
    font-size: 45px;
  }
  #myth {
    font-size: 25px;
  }
  #pic {
    width: 280%;
    height: 280%;
    position: relative;
    right: 425px;
  }
  article {
    width: 25em;
  }
  article p {
    font-size: 18px;
    position: relative;
    right: 45px;
  }
  #kyle {
    font-size: 20px;
  }
  #profile li {
    font-size: 18px;
    position: relative;
    left: 170px;
  }
}

@media screen and (max-width: 1100px) {
  article p {
    font-size: 16px;
  }
  #kyle {
    font-size: 18px;
  }
  #profile li {
    font-size: 16px;
    position: relative;
    left: 185px;
  }
  #pic {
    width: 230%;
    height: 230%;
    position: relative;
    right: 345px;
    top: 6px;
  }
  .about {
    height: 725px;
  }
}

@media screen and (max-width: 991px) {
  #profile {
    position: relative !important;
    left: -110px;
  }
}

@media screen and (max-width: 965px) {
  .img-wrap {
    float: none;
  }
  #pic {
    height: 110%;
    width: 110%;
    position: relative;
    right: 220px;
    top: 150px;
  }
  article p {
    width: 46em;
    position: relative;
    bottom: 220px;
    right: 220px;
  }
  #kyle {
    position: relative;
    top: -190px;
    right: 175px;
  }
  #profile {
    position: relative;
    bottom: 230px;
    left: -185px;
  }
  .about {
    height: 600px;
  }
  .skills {
    position: relative;
    bottom: 120px;
  }
}

@media screen and (max-width: 815px) {
  article p {
    width: 40em;
    position: relative;
    right: 175px;
  }
  #pic {
    position: relative;
    right: 175px;
    top: 160px;
  }
  #kyle {
    position: relative;
    top: -195px;
    right: 195px;
  }
  .skills {
    position: relative;
    bottom: 140px;
  }
  #profile li {
    position: relative;
    left: 165px;
    top: 35px;
  }
}

@media screen and (max-width: 767px) {
  article p {
    width: 30em;
    position: relative;
    right: 20px;
    font-size: 15px;
  }
  .about {
    height: 655px;
  }
  #pic {
    position: relative;
    right: 225px;
    top: -15px;
    height: 90%;
    width: 90%;
  }
  #kyle {
    position: relative;
    right: 300px;
  }
  #profile {
    position: relative;
    left: -290px;
  }
  #list li {
    font-size: 20px;
  }
}

@media screen and (max-width: 695px) {
  article p {
    width: 40em;
    position: relative;
    bottom: 0px;
    right: 175px;
    padding-top:15px;
    padding-bottom:5px;
  }
  .about {
    height: 950px;
  }
  #pic {
    position: relative;
    right: -35px;
    height:100%;
    width: 100%;
  }
  #kyle {
    position: relative;
    top: 10px;
  }
  #profile {
    position: relative;
    top: -10px;
    left: -325px;
  }
}

@media screen and (max-width: 650px) {
  article p {
    width: 35em;
    right: 145px;
  }
}

@media screen and (max-width: 601px) {
  #pic {
    right: 0px;
  }
}

@media screen and (max-width: 615px) {
  article p {
    right: 160px;
  }
  #kyle {
    right: 300px;
  }
  #profile {
    left: -370px;
  }
}

@media screen and (max-width: 580px) {
  article p {
    right: 180px;
  }
}

@media screen and (max-width: 570px) {
  article p {
    width: 30em;
    right: 150px;
  }
  #kyle {
    right: 380px;
  }
  #profile {
    left: -470px;
  }
  .about {
    height: 1000px;
  }
}

@media screen and (max-width: 568px) {
  #myth {
    font-size: 22px;
  }
}

@media screen and (max-width: 560px) {
  #kyle {
    positon: fixed;
    right: 375px;
  }
}

@media screen and (max-width: 535px) {
  #pic {
    right: 20px;
  }
}

@media screen and (max-width: 515px) {
  article p {
    width: 25em;
    right: 135px;
  }
  .about {
    height: 1050px;
  }
  #kyle {
    right: 350px;
  }
  #pic {
    right: 45px;
  }
}

@media screen and (max-width: 475px) {
  #pic {
    right: 45px;
  }
  article p {
    right: 155px;
  }
}

@media screen and (max-width: 468px) {
  .about {
    height: 1025px;
  }
  #pic {
    right: 55px;
  }
}

@media screen and (max-width: 445px) {
  .about {
    height: 1100px;
  }
}

@media screen and (max-width: 440px) {
  article p {
    width: 22em;
    text-align: left;
    right: 150px;
  }
}

@media screen and (max-width: 425px) {
  #pic {
    right: 65px;
  }
}

@media screen and (max-width: 405px) {
  #kyle {
    right: 320px;
  }
}

@media screen and (max-width: 400px) {
  article p {
    right: 170px;
  }
  #pic {
    right: 85px;
  }
  #profile {
    left: -500px;
  }
}

@media screen and (max-width: 375px) {
  article p {
    right: 180px;
  }
  .about {
    height: 1150px;
  }
  #pic {
    right: 100px;
  }
}

@media screen and (max-width: 366px) {
  #myth {
    font-size: 20px;
  }
  #list li {
    bottom: 10px;
  }
}

@media screen and (max-width: 350px) {
  article p {
    width: 19em;
  }
  #pic {
    right: 105px;
  }
  .about {
    height: 1200px;
  }
}

@media screen and (max-width: 350px) @media screen and (max-width: 325px) {
  article p {
    width: 18em;
  }
  #pic {
    right: 125px;
  }
}

@media screen and (max-width: 330px) {
  #myth {
    left: -5px;
  }
#pic {
    right: 130px;
  }
}

@media screen and (max-width: 315px) {
  #pic {
    right: 14px;
  }
}

@media screen and (max-width: 305px) {
  article p {
    width: 16em;
  }
  .about {
    height: 1250px;
  }
  #pic {
    right: 145px;
  }
}

@media screen and (max-width: 295px) {
  .about {
    height: 1300px;
  }
}

@media screen and (max-width: 275px) {
  #pic {
    right: 155px;
  }
}


/*End About*/


/*Portfolio*/

.portfolio {
  padding-top: 50px;
  padding-bottom: 100px;
  background-size: cover;
  background-attachment: fixed;
  display: inline-block;
  width: 100%;
  height: 700px;
}

.portfolio h1 {
  font-size: 55px;
  font-family: "Montserrat",serif !important;
  color: black !important;
}

.row {
  padding-top: 50px;
}

.thumbnail {
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid black !important;
}

.caption img {
  flex-shrink: 0;
  max-width 100%;
  max-height: 100%;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(128, 128, 128, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  font-family: "Montserrat",serif !important;
}

.caption a {
  text-decoration: none;
  color: white;
}

.caption h4 {
  position: relative;
  left: 5px;
  bottom: 10px;
  font-size: 25px;
}

.caption i:hover {
  color: orange !important;
}

legend {
  font-family: "Montserrat",serif !important;
  border-bottom: none !important;
  color: black;
}

#first {
  position: relative !important;
  bottom: -35px !important;
}

#second {
  position: relative !important;
  bottom: -35px !important;
}

#icon {
  position: relative;
  top: 30px;
}

@media screen and (min-width:767px) and (max-width:1199px) {
  #first {
    position: relative;
    bottom: 20px;
  }
  #icon {
    top: 50px !important;
  }
  .caption h4 {
    font-size: 20px;
  }
  .caption .fa {
    font-size: 70px !important;
  }
}

@media screen and (min-width:767px) and (max-width:991px) {
  #first {
    position: relative;
    top: 50px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
  .caption i {
    position: relative;
    top: 50px;
  }
  #icon {
    position: relative;
    top: 65px !important;
  }
  .caption .fa {
    font-size: 50px;
  }
}

@media screen and (max-width: 965px) {
  .portfolio {
    margin-top: -150px !important;
  }
}

@media screen and (max-width:767px) {
  #first {
    position: relative;
    top: 25px;
  }
  .caption h4 {
    font-size: 30px;
  }
  .caption {
    font-size: 15px;
  }
}

@media screen and (max-width: 1200px) {
  .portfolio h1 {
    font-size: 45px;
  }
}


@media screen and (max-width: 965px) {
  .portfolio {
    margin-top: -150px !important;
  }
}

@media screen and (max-width: 454px){
  .caption h4{
  font-size:25px;
  }
  #first{
   top:15px;
  }
  #second{
   top:15px;
  }
}



@media screen and (max-width:400px) {
  #icon {
    position: relative;
    bottom: 20px;
  }
}

@media screen and (max-width:397px) {
  #icon {
    position: relative;
    top: 0px;
  }
}
@media screen and (max-width:390px) {
  #first{
  top:5px;
  }
  }
@media screen and (max-width:325px) {
  .caption .fa {
  font-size:60px;
  }
  }
@media screen and (max-width:307px) {
  #first{
   top:-5px; 
  }
  }

/*End Portfolio*/


/*Footer*/

.foot i {
  color: white !important;
  margin-right: 0.16em;
  width: 90px;
}

.icons i:hover {
  color: orange !important;
  position: relative;
  bottom: 5px !important;
}

.foot {
  width: 100%;
  background-color: black;
  color: white;
  padding-top: 20px;
  float: left;
  border-top: 1px solid black;
}

.foot h2 {
  font-family: 'Roboto', sans-serif !important;
  position: relative;
  bottom: 15px;
}

footer small {
  font-family: 'Roboto', sans-serif !important;
}

footer {
  background-color: black;
  color: white;
}

.icons {
  display: inline-block;
  padding-bottom: 10px;
}

.icons a {
  text-decoration: none !important;
}

@media screen and (max-width: 1200px) {
  .foot .fa {
    font-size: 50px;
  }
  .foot i {
    margin-right: -10;
  }
}

@media screen and (max-width: 992px) {
  .foot {
    margin-top: 100px !important;
  }
}
@media screen and (max-width: 530px) {
  .foot i {
    display: inline !important;
    font-size: 25px;
  }
}

@media screen and (max-width: 330px) {
  .foot i {
    font-size: 38px !important;
  }
}


/*End Footer*/

JavaScript:

//Navbar 

$(".a").click(function() {
  if ($("#btnCollapse").css('display') != 'none')
    $("#btnCollapse").click();
});

//Captions

$('.thumbnail').hover(
  function() {
    $(this).find('.caption').slideDown(250); //.fadeIn(250)
  },
  function() {
    $(this).find('.caption').slideUp(250); //.fadeOut(205)
  }
);

//Smooth Scroll

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

It could just be me, but I think your code might be broken. When I click on Portfolio or Contact in the menu I get the same page. Something else to think about is that using a Content Management System such as WordPress or Drupal would enable you to get a lot more done in the same amount of effort. — pacmaninbw, Jul 6 '16 at 18:14
Not broken I just designed it poorly! Thanks for taking a look. — kgoode517, Jul 6 '16 at 19:42
The check " if (target.length) { " is unnecessary. Because in the line above it you make sure that target gets a value in any case. — michael.zech, Jul 7 '16 at 6:39

konijn · Accepted Answer · 2016-07-06 19:28:13Z

Some review items

Your photo is stretched, the original is not 510 by 510, does not look right at all
You have a <!DOCTYPE html> in your <body>, that's wrong
You have a <html lang="en"> in your <body>, that's wrong
You have a <body> in your <body>, that's Inceptional ;)
I like your integrity values, I learned something new
On the whole, use this: https://html5.validator.nu/?doc=http%3A%2F%2Fgoodedevelopment.com%2F Your site should pass the validation flawlessly
You probably want to cache $("#btnCollapse") and $(this).find('.caption')
You probably want to capture 250 in a single constant
You are wrapping the last click handler in a $() call but not the first 2, I would put them all in the wrapper

You have 3 lines of comments, but none of them cover the least obvious code:

$('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

I would probably replace that long if statement with a well document boolean-returning function
As you know the use !important is not considered good form, you should get rid of that.

Stack Exchange Network

current community

your communities

more stack exchange communities

Single Page portfolio website

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript html css or ask your own question.

Hot Network Questions

Single Page portfolio website

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript html css or ask your own question.

Related

Hot Network Questions