A. Alexander Portfolio Site

A. Alexander Portfolio Site.markdown

A. Alexander Portfolio Site

A portfolio site using Bootstrap 3 and JQuery.

A Pen by Andre on CodePen.

License.

index.html

<!-- Fixed Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container">
    <!-- Brand and toggle grouping for Mobile viewing -->
    <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="#">A. Alexander <small>- Web Developer</small></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">About Me</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact Me</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

<!-- Home Page -->
<div id="home" class="jumbotron">
  <div class="container">
    <!-- Main Header and tagline -->
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h1>A. Alexander</h1>
        <p>Functional web development fueled by coffee. <span class="glyphicon glyphicon-fire"></span></p>
      </div>
    </div>
    <!-- Social media buttons on a new row -->
    <div class="row">
      <div class="text-center">
        <a href="http://github.com/awalx" class="btn btn-default btn-primary btn-lg"><i class="fa fa-github-square"></i> GitHub</a>
      </div>
    </div>
  </div>
</div>

<!-- About Me content -->
<div id="about" class="container-fluid">
  <div class="row">
    <div class="center-block">
      <img src="http://placehold.it/200x200" alt="profile picture" class="img-responsive img-circle center-block" />
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia est in elit iaculis aliquam. Pellentesque malesuada rutrum magna, non tincidunt leo. Etiam iaculis ultrices auctor. Aliquam erat volutpat. Cras ut pellentesque ante. Donec
          eu lobortis augue, eu semper mi. Aliquam a eros id sapien sagittis tincidunt sed a odio.</p>
      </div>
    </div>
  </div>
</div>

<!--</div>
-->
<div id="portfolio" class="container-fluid">
  <!-- Portfolio description -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p>Vivamus dignissim posuere erat, nec congue tellus laoreet nec. Cras interdum vitae elit ac dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a ante sapien. Integer cursus est metus, ut aliquam
          nibh dictum vitae. Aliquam non enim auctor ex ultrices ultricies ac at massa. Nullam dapibus ultrices aliquam. Nunc nec diam turpis.</p>
      </div>
    </div>
    <!-- thumbnail gallery -->
    <div class="row">
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
    </div>

    <div class="row">
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
      <div class="col-md-3 col-xs-6">
        <img src="http://placehold.it/210x140" alt="gallery thumbnail" class="img-thumbnail img-responsive" />
      </div>
    </div>
  </div>
</div>
<div id="contact" class="container-fluid">
  <!--Contact Info -->
</div>

<!-- Footer -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy 2015 <a href="http://awalx.github.io">AwalX</a></p>
      </div>
      <div class="col-md-6">
        <ul id="footerNav" class="nav navbar-right">
          <li><a href="#about">About Me</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact Me</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

html,
body {
  height: 100%;
}

#home,
#about,
#portfolio {
  overflow-y: auto;
  min-height: 100%;
  padding-top: 60px;
}

#home {
  background-image: url("https://dl.dropboxusercontent.com/u/2275776/FCC%20Assets/drink_up.jpg");
  background-color: #666666;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: black;
}

#home .container{
  margin-top: 100px;
}

#portfolio {
  background-color: #f5f5f5;
}

#portfolio .row {
  padding-top: 15px;
}

#contact {
  height: 90%;
}

.footer {
  position: relative;
  bottom: 0;
  padding-top: 10px;
  width: 100%;
  background-color: #f5f5f5;
}

#footerNav li {
  display: inline-block;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />