Portfolio

index.html

<div class="header">
  <div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button id="nav-toggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-collapse" aria-expanded="false">
            <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="#Home">Sean Alvarez</a>
        </div>

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

<div id="home" class="page-section">
  <div class="container">
    <h2>Sean Alvarez</h2>
    <p class="sub-head text-center">Full stack developer of web and native applications</p>
    <hr />
    <div class="text-center">
      <button type="button" class="btn btn-primary btn-lg">
        <a href="https://www.twitter.com/SeanPAlvarez" target="_blank">
          <i class="fa fa-twitter"></i> Twitter
        </a>
      </button>
      <button type="button" class="btn btn-primary btn-lg">
        <a href="https://www.github.com/spalvarez" target="_blank">
          <i class="fa fa-github"></i> GitHub
        </a>
      </button>
      <button type="button" class="btn btn-primary btn-lg">
        <a href="https://www.linkedin.com/pub/sean-p-alvarez/11/468/610" target="_blank">
          <i class="fa fa-linkedin-square"></i> LinkedIn
        </a>
      </button>
      <button type="button" class="btn btn-primary btn-lg">
        <a href="http://www.freecodecamp.com/salvarez" target="_blank">
          <i class="fa fa-fire fa-fw"></i> FreeCodeCamp
        </a>
      </button>
      <!-- text-center -->
    </div>
    <!-- .container -->
  </div>
  <!-- .page-decion -->
</div>

<div id="about" class="page-section">
  <div class="container col col-md-12">
    <h2>A Little About Me</h2>
    <div class="col-sm-6 well about-well">
      <p class="caption">I've got a Master's degree in computer science, which I've used to develop some great applications, routines and procedures. I'm currently a Sr. Software Engineer with a financial company, and I've led the architecture of and developed some cutting
        edge applications on the Microsoft stack there.
        <br/> Much of my professional work is proprietary, but I've also done some open source and personal work that I'm showcasing here! Ultimately, my goal is to solve problems where holes exist in current technology and applications. If you'd like, take
        a look at my <a href="http://http://www.seanpalvarez.com/docs/RES-Sean%20Alvarez.pdf">resume!</a> But in the meantime, my core competencies are in:
      </p>
      <ul>
        <li>Languages: C#, Java, JavaScript, CSS, SQL</li>
        <li>Frameworks: .NET, MVC</li>
        <li>Tools: TFS, Visual Studio, Eclipse, IntelliJ, BizTalk</li>
      </ul>
      <!-- .col-md-5 .well -->
    </div>
    <div class="col-sm-offset-1 col-sm-4 col-md-offset-2 col-md-3">
      <div class="hidden-xs circle-picture"></div>
      <!-- col-sm-offset-2 -->
    </div>
    <!-- .container -->
  </div>
  <!-- .page-section -->
</div>

<div id="portfolio" class="page-section">
  <div class="container">
    <h2>Portfolio of Awesome Ideas and Projects</h2>
    <div class="row">
      <div class="col-sm-6 col-md-4 portfolio-entry">
        <a href="" target="_blank" class="portfolio-link">
          <div class="portfolio-caption">
            <div class="portfolio-caption-content">
              <h3>Under Construction</h3>
              <p>Something cool is coming!!</p>
              <!-- .portfolio-caption-content -->
            </div>
            <!-- .portfolio-caption -->
          </div>
          <div class="portfolio-thumbnail">
            <img src="https://placehold.it/350x250?text=Coming+Soon" alt="Coming Soon">

            <!-- .portfolio-thumbnail-->
          </div>
        </a>
        <!-- .portfolio-entry -->
      </div>
      <div class="col-sm-6 col-md-4 portfolio-entry">
        <a href="" target="_blank" class="portfolio-link">
          <div class="portfolio-caption">
            <div class="portfolio-caption-content">
              <h3>Under Construction</h3>
              <p>Something awesome is coming!!</p>
              <!-- .portfolio-caption-content -->
            </div>
            <!-- .portfolio-caption -->
          </div>
          <div class="portfolio-thumbnail">
            <img src="https://placehold.it/350x250?text=Coming+Soon" alt="Coming Soon">

            <!-- .portfolio-thumbnail-->
          </div>
        </a>
        <!-- .portfolio-entry -->
      </div>
      <div class="col-sm-6 col-md-4 portfolio-entry">
        <a href="" target="_blank" class="portfolio-link">
          <div class="portfolio-caption">
            <div class="portfolio-caption-content">
              <h3>Under Construction</h3>
              <p>Something amazing is coming!!</p>
              <!-- .portfolio-caption-content -->
            </div>
            <!-- .portfolio-caption -->
          </div>
          <div class="portfolio-thumbnail">
            <img src="https://placehold.it/350x250?text=Coming+Soon" alt="Coming Soon">

            <!-- .portfolio-thumbnail-->
          </div>
        </a>
        <!-- .portfolio-entry -->
      </div>
      <div class="col-sm-6 col-md-4 portfolio-entry">
        <a href="" target="_blank" class="portfolio-link">
          <div class="portfolio-caption">
            <div class="portfolio-caption-content">
              <h3>Under Construction</h3>
              <p>Something unbelieveable is coming!!</p>
              <!-- .portfolio-caption-content -->
            </div>
            <!-- .portfolio-caption -->
          </div>
          <div class="portfolio-thumbnail">
            <img src="https://placehold.it/350x250?text=Coming+Soon" alt="Coming Soon">

            <!-- .portfolio-thumbnail-->
          </div>
        </a>
        <!-- .portfolio-entry -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- .page-section -->
</div>

<div id="contact" class="page-section">
  <div class="container">
    <h2>Contact Information</h2>
    <hr />
    <div class="row">
      <div class="col-lg-4 col-sm-5 contact-email">
        <div class="contact-text">
          <h3>Email me!</h3>
          <a href="mailto:alvie0818@gmail.com">alvie0818@gmail.com</a>
          <!-- contact-text -->
        </div>
        <div class="contact-text">
          <h3>Where Am I Located?</h3>
          <span id='opener'>Near Boston, MA</span>
          <div id="dialog" title="Basic dialog">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d188822.97299194895!2d-71.19724173545637!3d42.31354209552374!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e3652d0d3d311b%3A0x787cbf240162e8a0!2sBoston%2C+MA!5e0!3m2!1sen!2sus!4v1444433765024"
            width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
            <!-- dialog -->
          </div>
          <!-- contact-text -->
        </div>
        <!-- .contact-email -->
      </div>
      <!-- .row -->
    </div>
    <div class="row">
      <div class="col-lg-12 btn-group contact-btns">
        <button type="button" class="btn btn-primary">
          <a href="https://www.twitter.com/SeanPAlvarez" target="_blank">
            <i class="fa fa-twitter"></i> Twitter
          </a>
        </button>
        <button type="button" class="btn btn-primary">
          <a href="https://www.github.com/spalvarez" target="_blank">
            <i class="fa fa-github"></i> GitHub
          </a>
        </button>
        <button type="button" class="btn btn-primary">
          <a href="https://www.linkedin.com/pub/sean-p-alvarez/11/468/610" target="_blank">
            <i class="fa fa-linkedin-square"></i> LinkedIn
          </a>
        </button>
        <button type="button" class="btn btn-primary">
          <a href="http://www.freecodecamp.com/salvarez" target="_blank">
            <i class="fa fa-fire fa-fw"></i> FreeCodeCamp
          </a>
        </button>
        <!-- button-group-vertical -->
      </div>
      <!-- row -->
    </div>

    <!-- .container -->
  </div>
  <!-- .page-section -->
</div>

<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li><a href="#home">Home</a></li>
          <li>&sdot;</li>
          <li><a href="#about">About</a></li>
          <li>&sdot;</li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li>&sdot;</li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <!-- .col-lg-12 -->
      </div>
      <div class="col=lg-4">
        <p>
          Copyright &copy;Sean P. Alvarez 2015. All Rights Reserved.
        </p>
        <p>
          Or is it........
        </p>
        <!-- .col-lg-4 -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
    <div>
</footer>

Portfolio.markdown

Portfolio

My online portfolio

A Pen by Sean on CodePen.

License.

script.js

$(function() {
    $('#dialog' ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $('#opener' ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });

$(document).ready(function() {  
  // mobile nav toggle
  $('#nav-toggle').on('click', function (event) {
    event.preventDefault();
    $('#header-collapse').toggleClass("collapsed");
  });
});

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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

.header {
  background: #222;
}

.header .navbar-brand {
  font-weight: 900;
  color: #006dcc;
}

.header .navbar {
  margin: 0px;
  padding-left: 3%;
  border: none;
}

.header .navbar ul a {
  color: #006dcc;
}

.page-section {
  width: 100%;
  min-height: 800px;
  margin: 0;
  padding-top: 50px;
  border: none;
}

.page-section#home h2 {
  font-size: 3em;
  font-weight: 900;
  color: #006dcc;
  margin: 0;
  text-shadow: 1px 1px 1px #fff;
  text-align: center;
}

.page-section#about h2 {
  color: #000
  font-size: 2em;
  font-weight: 900;
  font-family: "arial-black";"
}

.page-section p {
  color: #000;
  font-family: "arial-black";
  font-size: 1.2em;
  padding: 0px;
}

.page-section p.sub-head {
  color: #fff;
}

#about .about-well {
  background-color: rgba(255,255,255,0.5);
}

#about .about-well li {
   font-weight: 600;  
}

#about .about-well a {
    color: #00f;
}

.page-section ul {
  font-size: 1.1em;
  margin: 0;
  padding: 0;
  padding-left: 2%;
  color: #000;
}

.circle-picture {
  height: 300px;
  width: 300px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
	-moz-border-radius: 150px;
  background: url("http://www.seanpalvarez.com/images/me.jpg") no-repeat;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

#portfolio h2 {
   font-weight: 900;
   font-family: "arial-black";
   font-color: #000;
}

#portfolio div[class^="col"] {
  padding-left: 0;
  padding-right: 0;
}

#portfolio .portfolio-entry {
  margin: 0 0 15px;
  right: 0;
  border: 1px outset rgba(255, 255, 255, 0.6);
}

#portfolio .portfolio-entry:hover {
  transition: all 0.25s linear;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  box-shadow: 5px 10px 5px rgba(0,0,0,0.8);
  -webkit-box-shadow: 5px 10px 5px rgba(0, 0, 0,0.8);
	-moz-box-shadow: 5px 10px 5px rgba(0,0, 0,0.8);
}

#portfolio .portfolio-entry .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  padding-left: 3%;
  padding-right: 3%;
  margin: 0 auto;
}

#portfolio .portfolio-entry .portfolio-link .portfolio-caption {
  background: rgba(0,0,0,0.7);
  position: absolute;
  width: 95%;
  height: 100%;
  opacity: 0;
  transition: all ease .5s;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s,
}

#portfolio .portfolio-entry .portfolio-link .portfolio-caption:hover {
  opacity: 1;
}

#portfolio .portfolio-entry .portfolio-link .portfolio-caption .portfolio-caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: #fff;
}

#portfolio .portfolio-entry .portfolio-link .portfolio-caption .portfolio-caption-content h3 {
  margin-top: -12px;
  font-family: "Helvetica";
  margin-bottom: 0;
  text-decoration: none;
}

#portfolio .portfolio-entry .portfolio-link .portfolio-caption .portfolio-caption-content p {
  margin-top: -12px;
  font-size: 1em;
  font-style: italic;
  font-family: "Helvetica";
  text-align: center;
  text-decoration: none;
  margin-top: 0;
  padding-top: 0;
  color: #fff;
}

.portfolio-thumbnail img{
  padding: 0;
  margin: 0;
  width: 100%;
}

#contact .contact-email {
  text-align: center;
}

#contact .contact-text {
  background-color: rgba(0,0,0,0.4); 
  margin-top: 10%;
}

#contact .contact-text h3 {
  font-size: 3em;
  color: #fff;
}
#contact .contact-email a {
  font-size: 2em;
  color: #fff
}

#contact .contact-text #opener {
  color: #fff;
  font-size: 2em;
}

#contact .contact-text #opener:hover {
  cursor: pointer;
}

#contact .contact-btns {
  margin-top: 5%;
}

#contact .contact-btns button {
   border-color: #fff;
}

#contact .contact-btns a {
  color: #fff;
  font-size: 1.2em;
  text-decoration: none;
}

hr {
  color: #000;
  opacity: 25%;
  height: 3px;
  margin: 5px 0 20px 0;
}

.page-section#home {
  background: /*url("http://www.seanpalvarez.com/images/homeBack.jpg") bottom center no-repeat;*/
  url("http://www.seanpalvarez.com/images/homeBack.jpg") bottom center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding-top: 275px;
}

.page-section#about {
  background: url("http://www.seanpalvarez.com/images/aboutBack.jpg") bottom center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.page-section#portfolio {
  background: url("http://www.seanpalvarez.com/images/portfolioBack.jpg") bottom center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.page-section#contact {
  background: url("http://www.seanpalvarez.com/images/contactBack.jpg") bottom center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#home .btn-primary > a {
  color: #fff;
  font-weight: 200;
  font-family: "arial-black";
  text-decoration:none;
}

@media (min-width: 768px) {
  .header .navbar-brand {
    padding-left: 0;
  }
  .navbar-nav {
    float: right;
  }
}
@media (max-width: 480px) {
  .page-section h2 {
    font-size: 2em;
  }
  .page-section p {
    font-size: 1em;
    margin: 0 0 20px;
  }
}

footer {
  background: lightgrey;
  min-height: 150px;
}

footer ul {
  padding-top: 5%;
  font-size: 1.2em;
}

footer p {
  font-weight: 900;
  font-size: 0.8em;
  font-family: "Helvetica";
  color: grey;
  margin-left: 15px;
  margin-bottom: 0;
}

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" />
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />