Free Code Camp - Portofolio

Free Code Camp - Portofolio.markdown

Free Code Camp - Portofolio

A Pen by aifrak on CodePen.

License.

index.html

<!-- navbar -->
<nav class="navbar-container navbar navbar-default navbar-fixed-top">
  <div class="hidden-xs col-sm-6 col-md-4 text-right navbar-title">
    Franklin Rakotomalala
  </div>
  <div class="hidden-xs col-sm-6 col-md-7 text-right">
    <a class="outlined link-top js-scrollTo" href="#about">About</a>
    <a class="outlined link-top js-scrollTo" href="#portfolio">Portfolio</a>
    <a class="outlined link-top js-scrollTo" href="#contact">Contact</a>
  </div>
  <div class="visible-xs col-xs-4 text-right navbar-title-xs">
    Rakotomalala
  </div>
  <div class="visible-xs col-xs-8 text-right">
    <a class="outlined link-top-xs js-scrollTo" href="#about">About</a>
    <a class="outlined link-top-xs js-scrollTo" href="#portfolio">Portfolio</a>
    <a class="outlined link-top-xs js-scrollTo" href="#contact">Contact</a>
  </div>
</nav>

<!-- main content -->
<div class="container-fluid">
  <div class="col-xs-12 middle-container img-rounded">

    <!-- About section -->
    <h1 class="text-center section-title">About</h1>
    <a id="about" class="anchor"></a>

    <div class="row-fluid">
      <div class="col-sm-offset-1">
        <div class="col-xd-12 col-sm-4 col-sm-push-7">
          <img class="img-circle img-responsive" src="https://dl.dropboxusercontent.com/u/18019619/profil.jpg" width="250" height="250">
        </div>
        <div class="col-xd-12 col-sm-7 col-sm-pull-4">
          <p class="about-description">
            My name is Franklin and I am a Software Engineer based in Frankfurt, Germany.
            <br><br> Currently working in a startup with technologies such as PHP, Propel, MySQL, JavaScript / jQuery and Foundation, I also worked previously in France on multiple J2EE projects using Spring, Hibernate, Struts2, JSF and Oracle.
          </p>
        </div>
      </div>
    </div>

    <!-- Separator -->
    <div class="row-fluid">
      <div class="col-xs-10 col-xs-offset-1">
        <hr>
      </div>
      <div style="clear: both;"></div>

      <!-- Portfolio section -->
      <h1 class="text-center section-title">Portfolio</h1>
      <a id="portfolio" class="anchor"></a>

      <div class="row-fluid">
        <div class="col-xs-12 col-sm-6">
          <div class="img-thumbnail img-block">
            <a class="text-center" href="https://codepen.io/aifrak/pen/xVMmPO" target="_blank">
              <img class="img-responsive" src="https://dl.dropboxusercontent.com/u/18019619/tribute-page.jpg" alt="Tribute page">
              <p class="img-description text-center">Free Code Camp - "Tribute page"</p>
            </a>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6">
          <div class="img-thumbnail img-block">
            <a class="text-center" href="https://codepen.io/aifrak/pen/pbyboy" target="_blank">
              <img class="img-responsive" src="https://dl.dropboxusercontent.com/u/18019619/random-quote-machine.jpg" alt="Random quote machine">
              <p class="img-description text-center">Free Code Camp - "Random quote machine"</p>
            </a>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="img-thumbnail img-block">
          <a class="text-center" href="https://codepen.io/aifrak/pen/NrdXBq" target="_blank">
          <img class="img-responsive" src="https://dl.dropboxusercontent.com/u/18019619/local-weather.jpg" alt="Coming soon">
          <p class="img-description text-center">Free Code Camp - "Show the Local Weather"</p>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="img-thumbnail img-block">
          <img class="img-responsive" src="https://dl.dropboxusercontent.com/u/18019619/coming-soon.jpg" alt="Coming soon">
          <p class="img-description text-center">Coming soon</p>
        </div>
      </div>
    </div>

    <!-- Separator -->
    <div class="row-fluid">
      <div class="col-xs-10 col-xs-offset-1">
        <hr>
      </div>
      <div style="clear: both;"></div>

      <!-- Contact form -->
      <h1 class="text-center section-title">Contact</h1>
      <a id="contact" class="anchor"></a>

      <div class="row-fluid">
        <form action="" class="form-horizontal">
          <div class="form-group">
            <label for="name" class="col-sm-3 control-label">Name</label>
            <div class="col-sm-6">
              <input id="name" type="text" class="form-control" placeholder="Name" required>
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="col-sm-3 control-label">Email</label>
            <div class="col-sm-6">
              <input id="email" type="email" class="form-control" placeholder="[email protected]" required>
            </div>
          </div>
          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">Phone number</label>
            <div class="col-sm-6">
              <input id="phone" type="tel" class="form-control" placeholder="(+33)123456789" required>
            </div>
          </div>
          <div class="form-group">
            <label for="phone" class="col-sm-3 control-label">Message</label>
            <div class="col-sm-6">
              <textarea id="message" type="tel" class="form-control" placeholder="Your message" rows="5" required></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 text-center">
              <button type="submit" class="btn btn-lg outlined btn-submit">Send</button>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
</div>

<div class="row-fluid footer">
  <div class="row-fluid">
    <div class="col-xs-4 col-xs-offset-1 text-center">
      <h1 class="text-center section-title">About this page</h1> Made by Franklin
    </div>
    <div class="col-xs-7 text-center">
      <div class="col-xs-5 col-sm-1 col-sm-offset-1">
        <a class="icon-link" href="http://www.linkedin.com/in/afrakoto/en" target="_blank">
          <i class="fa fa-linkedin fa-2x outlined icon-outlined icon-linkedin" aria-hidden="true"></i>
        </a>
      </div>
      <div class="col-xs-5 col-sm-1 col-sm-offset-1">
        <a class="icon-link" href="http://www.xing.to/afrakoto" target="_blank">
          <i class="fa fa-xing fa-2x outlined icon-outlined icon-xing" aria-hidden="true"></i>
        </a>
      </div>
      <div class="col-xs-5 col-sm-1 col-sm-offset-1">
        <a class="icon-link" href="http://github.com/aifrak" target="_blank">
          <i class="fa fa-github fa-2x outlined icon-outlined icon-github" aria-hidden="true"></i>
        </a>
      </div>
    </div>
  </div>

  <div style="clear: both;"></div>

  <div class="row-fluid">
    <h4 class="text-center">Franklin Rakotomalala © 2016 All rights reserved</h4>
  </div>
</div>

script.js

$(document).ready(function() {
  initScrollTo();
});

function initScrollTo() {
  $('.js-scrollTo').on('click', function() {
    var page = $(this).attr('href'); // Target page
    var speed = 750;
    $('html, body').animate({
      scrollTop: $(page).offset().top
    }, speed);
    return false;
  });
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

style.css

body {
  /* background gradient effect */
  background: #cdffc9;
  background: -moz-linear-gradient(top, #cdffc9 0%, #93cede 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #cdffc9), color-stop(100%, #93cede));
  background: -webkit-linear-gradient(top, #cdffc9 0%, #93cede 100%);
  background: -o-linear-gradient(top, #cdffc9 0%, #93cede 100%);
  background: -ms-linear-gradient(top, #cdffc9 0%, #93cede 100%);
  background: linear-gradient(to bottom, #cdffc9 0%, #93cede 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#cdffc9', endColorstr='#93cede', GradientType=0);
  font-family: Raleway;
}

p {
  font-size: 18px;
}

.anchor {
  display: block;
  position: relative;
  top: -160px;
  visibility: hidden;
}

.img-block {
  background-color: #22313F;
  color: white;
  margin-bottom: 20px;
  padding: 2px;
}

.img-block a {
  text-decoration: none;
}

.img-description {
  color: #FFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 15px 10px 0 10px;
}

.navbar-title {
  font-family: Montserrat;
  font-size: 1.50em;
  margin-top: 7px;
}

.navbar-title-xs {
  font-family: Montserrat;
  font-size: 1.15em;
  margin-top: 6px;
}

.navbar-container {
  background-color: #FFFFFF;
  padding-bottom: 10px;
  padding-top: 10px;
  /* shadow effect */
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.middle-container {
  background-color: #FFFFFF;
  margin-bottom: 55px;
  margin-top: 100px;
  padding-bottom: 20px;
  padding-top: 20px;
  /* shadow effect */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.section-title {
  padding-bottom: 25px;
}

.footer {
  background-color: white;
  padding-top: 50px;
  padding-bottom: 20px;
  /* shadow effect */
  box-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.5);
}

.copyright {
  padding-top: 20px;
}

.about-description {
  padding-top: 25px;
}


/* BEGIN Overridden classes from Bootstrap */

.container-fluid {
  margin-top: 20px;
  /* limit the width */
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.form-control {
  border-radius: 0;
}

.img-responsive {
  margin: 0 auto;
}


/* END */


/* BEGIN Adapted snippet from http://bootsnipp.com/snippets/featured/outline-square-buttons */

.outlined {
  border-radius: 0;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  text-decoration: none;
  transition: all 0.3s;
}

nav a {
  background-color: transparent;
  color: #738D70;
}

.link-top {
  font-size: 18px;
  line-height: 250%;
  padding: 10px 16px;
}

.link-top-xs {
  font-size: 14px;
  line-height: 250%;
  padding: 7px 7px;
}

.link-top:active,
.link-top:hover,
.link-top-xs:active,
.link-top-xs:hover {
  background: #90b18d;
  border-color: #90b18d;
  color: #FFF;
  text-decoration: none;
}

.btn-submit {
  background-color: transparent;
  border: 2px solid #93cede;
  color: #93cede;
}

.btn-submit:hover,
.btn-submit:active {
  color: #FFF;
  background: #93cede;
  border-color: #93cede;
}

.icon-outlined {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  margin: 5px;
  padding: 17px 20px;
}

.icon-link {
  display: inline-block;
  text-decoration: none;
}

.icon-linkedin {
  background-color: transparent;
  border: 2px solid #217eff;
  color: #217eff;
}

.icon-linkedin:hover,
.icon-linkedin:active {
  background: #217eff;
  border-color: #217eff;
  color: #FFF;
}

.icon-github {
  background-color: transparent;
  border: 2px solid #000;
  color: #000;
}

.icon-github:hover,
.icon-github:active {
  background: #000;
  border-color: #000;
  color: #FFF;
}

.icon-xing {
  background-color: transparent;
  border: 2px solid #18513f;
  color: #18513f;
}

.icon-xing:active,
.icon-xing:hover {
  background: #18513f;
  border-color: #18513f;
  color: #FFF;
}


/* END */

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway:700,400" rel="stylesheet" />