That's Me

index.html

<header>
  <nav>
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#work">My Work</a></li>
      <li><a href="#contact">Contact Me</a></li>
    </ul>
  </nav>
</header>
<section id="about" class="content about">
  <div class="container">
    <h1 class="title">About Me</h1>
    <h2 class="subtitle">Hello. I'm Jeannie.<br>
    I am a front end web developer.</h2>
    <div class="row">
      <div class="col-sm-6">
        <p>I love to build things out of code, paper, yarn, blocks, blankets ... almost anything I get my hands on.</p>
        <p>I attended Graphic Design School at <a href="https://www.lanecc.edu/" target="_target">Lane Community College</a>. It was intensely rewarding and fulfilling. I am currently studying JavaScript with <a href="http://freecodecamp.com" target="_blank">Free Code Camp</a>. I will finish the Front End Development Certification in June, 2016.</p>
        <p>I am married. We have two kids who are very weird. We have lived a few places and Portland is, hands down, our favorite city.</p>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-xs-6 col-sm-12 col-md-6">
            <div class="img-box">
              <img src="http://jsdesign.me/zipline-portfolio/images/riley.png" alt="Riley" class="kids">
            </div>
          </div>
          <div class="col-xs-6 col-sm-12 col-md-6">
            <div class="img-box">
              <img src="http://jsdesign.me/zipline-portfolio/images/cassidy.png" alt="Cassidy" class="kids">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="work" class="content work">
  <div class="container">
    <h1 class="title">My Work</h1>
    <h2 class="subtitle">I work for a digital marketing company.<br>
    I write HTML, CSS, and JavaScript for apps we use internally as well as market to our clients.</h2>  
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <figure>
          <img src="http://jsdesign.me/images/cre8tool-shot.jpg" alt="Cre8tool Website Builder" class="work-img">
          <figcaption>
            This is a Laravel/Ember hybrid application we developed for our clients to build their own websites. My role was to build the front end of the app using HTML, CSS (on top of Bootstrap), JavaScript, jQuery, and git. We continue to maintain the app with improvements and bug fixes while planning the next version.
          </figcaption>
        </figure>
      </div>
      <div class="col-md-4">
        <figure>
          <img src="http://jsdesign.me/images/socal-shot.jpg" alt="SoCal Property Search App" class="work-img">
          <figcaption>
            This is a property listing search application and marketing website for realtors. It connects multiple Internet Data Exchange (IDX) APIs to deliver real-time search results in a customized site. This was built with Laravel and my role here was to build the user interface using HTML, CSS (on top of Bootstrap), JavaScript, jQuery, and git.
          </figcaption>
        </figure>
      </div>
      <div class="col-md-4">
        <figure>
          <img src="http://jsdesign.me/images/smmart-shot.jpg" alt="Facebook Page Management App" class="work-img">
          <figcaption>
            This is a Facebook page management tool that is used internally to streamline building new pages and publishing relevant content for our clients. This is also a Laravel application. My role was to build the user interface on top of a pre-fab HTML and Bootstrap CSS admin template.
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>
<section id="contact" class="content contact">
  <div class="container">
    <h1 class="title">Contact Me</h1>
    <h2 class="subtitle">Hey I'm in Portland. Hit me up.</h2>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <form action="lol" method="lols">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control">
          </div>
          <div class="form-group">
            <label for="message">Message</label>
            <textarea name="text" id="message" class="form-control"></textarea>
          </div>
          <div>
            <button type="submit" class="btn" class="form-control">Send</button>
          </div>
        </form>
      </div>
      <div class="col-sm-8 col-md-3">
        <div class="social-media">
          <ul>
            <li><a href="https://twitter.com/stevensons" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://github.com/JSDesign" target="_blank"><i class="fa fa-github-alt"></i></a></li>
            <li><a href="http://codepen.io/thatjeannie/" target="_blank"><i class="fa fa-codepen"></i></a></li>
            <li><a href="https://www.instagram.com/jeanniestevenson/" target="_blank"><i class="fa fa-instagram"></i></a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4 col-md-3">
        <div class="jeannie-box">
          <img src="http://jsdesign.me/images/jeannie.jpg" alt="That's me. Jeannie" class="jeannie">
        </div>
      </div>
    </div>
  </div>
</section>
<footer>
  <p>Thanks. I've been Jeannie.</p>
</footer>

script.js

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Montserrat|Muli);

body {
  font-size: 1.4rem;
  color: #454545;
  transition: all 300ms ease;
  font-family: 'Montserrat', sans-serif;
}

a {
  transition: all 300ms ease;
}
a:hover,
a:focus,
a:active,
a.active {
  text-decoration: none;
}

@media (min-width: 768px) {
  .container.trim,
  .container-fluid.trim,
  [class^="col-"].trim {
    padding-left: 0;
    padding-right: 0;
  }
  .row.trim {
    margin-left: 0;
    margin-right: 0;
  }
}

header {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  color: #fff;
  background-color: #222;
}

nav {
  text-align: center;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  height: 5rem;
  line-height: 4.8rem;
  padding: 0 1rem;
  margin: 0 1rem;
  color: #fff;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li a.active {
  color: #999;
  text-decoration: none;
}

.content {
  padding-top: 4rem;
}
.content:first-of-type {
  padding-top: 8rem;
}
.content:last-of-type {
  padding-bottom: 8rem;
}
@media (min-width: 768px) {
  .content {
    padding-top: 6rem;
  }
  .content:first-of-type {
    padding-top: 10rem;
  }
}
@media (min-width: 1024px) {
  .content {
    padding-top: 8rem;
  }
  .content:first-of-type {
    padding-top: 12rem;
  }
}

.content p {
  font-size: 2rem;
  font-family: 'Muli', sans-serif;
}

.title {
  font-size: 4rem;
  margin: 0;
  text-transform: uppercase;
}

.subtitle {
  font-size: 3rem;
  margin-top: 0.6rem;
  margin-bottom: 4rem;
  color: #999;
}

.about .title {
  color: #2bbf87;
}

.work .title {
  color: #bf2b69;
}

.contact .title {
  color: #9abf2b;
}

.about .img-box {
  margin-bottom: 2rem;
}

.kids {
  max-width: 100%;
}

@media (max-width: 992px) {
  .work .subtitle {
    margin-bottom: 0;
  }
  figure {
    margin-top: 4rem;
  }
}

figcaption {
  font-size: 2rem;
  color: #666;
  margin-top: 1rem;
  font-family: 'Muli', sans-serif;
}
@media (min-width: 992px) {
  margin-top: 2rem;
}

.work-img {
  display: block;
  max-width: 100%;
  border: 1px solid #999;
}

.form-group {
  margin-bottom: 2.2rem;
}

label {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: 'Muli', sans-serif;
  font-weight: normal;
  color: #999;
}

.form-control {
  height: 5rem;
  font-size: 1.8rem;
  color: #454545;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
}

textarea.form-control {
  max-width: 100%;
}

.btn {
  padding: 6px 12px;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #fff;
  background-color: #666;
  border: 1px solid transparent;
  border-radius: 0;
  transition: all 300ms ease;
}
.btn:hover,
.btn:focus,
.btn:active {
  color: #fff;
  background-color: #337ab7;
}

.social-media {
  font-size: 8rem;
  text-align: center;
}
.social-media ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.social-media ul li {
  display: inline-block;
}
@media (min-width: 769px) {
  .social-media {
    text-align: left;
  }
}
@media (min-width: 992px) {
  .social-media {
    text-align: center;
  }
}

.jeannie-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}
.jeannie {
  width: 240px;
  margin-top: -40px;
}
@media (max-width: 768px) {
  .jeannie-box {
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .jeannie-box {
    float: right;
  }
}

footer {
  padding: 2rem 4rem;
  text-align: center;
  color: #999;
  background-color: #ccc;
}
footer p {
  margin: 0;
}

styles

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

That's Me.markdown

That's Me

Free Code Camp Zipline: Build a Personal Portfolio Webpage

A Pen by Jeannie Stevenson on CodePen.

License.