Portfolio sample with Flexbox

index.html

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

  <div id="header">
    <a id="back-to-top" class="logo">myWork</a>
    <a href="#menu" class="menu-link">MENU</a>
  </div>
  <nav id="menu" role="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div id="top" class="container">
    <p class="type-text teletype" title="Hi friend!"><span class="teletype-text">Welcome to my portfolio</span><span class="teletype-cursor" style="opacity: 0.924255107490752;"></span></p>

    <div class="projects">
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
      <div class="item">
        <div class="item-info">
          <h2>Project Title</h2>
          <span>13 december, 2014</span>
        </div>
      </div>
    </div>

  </div>

</body>

Portfolio sample with Flexbox.markdown

Portfolio sample with Flexbox

Forked from Yosu Arrillaga Calviño's Pen Portfolio sample with Flexbox.

A Pen by mori-dev on CodePen.

License.

script.js

$(document).ready(function() {

  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');

  $menulink.click(function() {
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
    toggleButtonText($(this));
    return false;
  });

  function toggleButtonText(element) {
    if (element.html() == 'CLOSE') {
      element.html('MENU');
    } else {
      element.html('CLOSE');
    }
  }

  $('.item-info').hide()

  $('.item').mouseenter(function() {
    $(this).find('.item-info').fadeIn(300);
    $(this).css("cursor", "pointer");
  });

  $('.item').mouseleave(function() {
    $(this).find('.item-info').fadeOut(300)
  });

});
/********* BACK TO TOP ***********/
if ($('#back-to-top').length) {
  var scrollTrigger = 100, // px
    backToTop = function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > scrollTrigger) {
        $('#back-to-top').addClass('show');
      } else {
        $('#back-to-top').removeClass('show');
      }
    };
  backToTop();
  $(window).on('scroll', function() {
    backToTop();
  });
  $('#back-to-top').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
      scrollTop: 0
    }, 700);
  });
}

/********* TEXT TYPING ***********/
$(function() {
  $('.type-text').each(function() {
    var items = $(this).attr('title') + ';' + $(this).text();
    $(this).empty().attr('title', '').teletype({
      text: $.map(items.split(';'), $.trim),
      typeDelay: 10,
      backDelay: 20,
      cursor: '▋',
      delay: 3000,
      preserve: false,
      prefix: '[teletype ~]# ',
      loop: 0
    });
  });
});

/*
 * Teletype jQuery Plugin
 * @version 0.1
 *
 * @author Steve Whiteley
 * @see http://teletype.rocks
 * @see https://github.com/stvwhtly/jquery-teletype-plugin
 *
 * Copyright (c) 2014 Steve Whiteley
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 */
(function($) {
  $.fn.teletype = function(options) {
    var settings = $.extend({}, $.fn.teletype.defaults, options);
    var self = $(this),
      output = null,
      current = {
        string: '',
        index: 0,
        position: 0,
        loop: 0
      };
    var next = function() {
      current.index++;
      if (current.index >= settings.text.length) {
        current.index = 0;
        current.loop++;
        if (settings.loop != false && (settings.loop == current.loop)) {
          return false;
        }
      }
      current.position = 0;
      current.string = settings.text[current.index];
      return true;
    };
    var type = function() {
      if (settings.prefix && current.position == 0) {
        if (current.loop == 0 && current.index == 0) {
          $('<span />').addClass('teletype-prefix').html(settings.prefix).prependTo(self);
        }
      }
      var letters = current.string.split(''),
        letter = letters[current.position];
      if (letter == '^' || letter == '~') {
        var end = current.string.substr(current.position + 1).indexOf(' ');
        var value = current.string.substr(current.position + 1, end);
        if ($.isNumeric(value)) {
          current.string = current.string.replace(letter + value + ' ', '');
          if (letter == '^') {
            window.setTimeout(function() {
              window.setTimeout(type, delay(settings.typeDelay));
            }, value);
          } else {
            var index = current.position - value;
            current.string = current.string.substr(0, index - 1) + current.string.substr(current.position - 1);
            window.setTimeout(function() {
              backspace(Math.max(index, 0));
            }, delay(settings.backDelay));
          }
          return;
        }
      } else if (letter == '\\') {
        var nextChar = current.string.substr(current.position + 1, 1);
        if (nextChar == 'n') {
          current.position++;
          letter = '<br />';
        }
      }
      output.html(output.html() + letter);
      current.position++;
      if (current.position < current.string.length) {
        window.setTimeout(type, delay(settings.typeDelay));
      } else if (settings.preserve == false) {
        window.setTimeout(function() {
          window.setTimeout(backspace, delay(settings.backDelay));
        }, settings.delay);
      } else {
        output.html(output.html() + '<br />' + '<span class="teletype-prefix">' + settings.prefix + '</span>');
        if (next()) {
          window.setTimeout(function() {
            window.setTimeout(type, delay(settings.typeDelay));
          }, settings.delay);
        }
      }
    };
    var backspace = function(stop) {
      if (!stop) {
        stop = 0;
      }
      if (current.position > stop) {
        output.html(output.html().slice(0, -1));
        window.setTimeout(function() {
          backspace(stop);
        }, delay(settings.backDelay));
        current.position--;
      } else {
        if (stop == 0) {
          if (next() == false) {
            return;
          }
        }
        window.setTimeout(type, delay(settings.typeDelay));
      }
    };
    var delay = function(speed) {
      return Math.floor(Math.random() * 200) + speed;
    };
    return this.each(function() {
      current.string = settings.text[current.index];
      self.addClass('teletype').empty();
      output = $('<span />').addClass('teletype-text').appendTo(self);

      if (settings.cursor) {
        var cursor = $('<span />')
          .text(settings.cursor)
          .addClass('teletype-cursor')
          .appendTo(self);
        setInterval(function() {
          cursor.animate({
            opacity: 0
          }).animate({
            opacity: 1
          });
        }, settings.blinkSpeed);
      }
      type();
    });
  };
  $.fn.teletype.defaults = {
    text: ['one', 'two', 'three'],
    typeDelay: 100,
    backDelay: 50,
    blinkSpeed: 1000,
    delay: 2000,
    cursor: '|',
    preserve: false,
    prefix: '',
    loop: 0
  };
}(jQuery));

style.css

* {
  padding: 0;
  margin: 0;
  font-family: 'Montserrat';
  font-weight: 500;
  color: #333333;
}

body{
  padding-bottom:65px;
}

p {
  color: #333333;
}

#header {
  z-index:100;
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;
  flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
  justify-content: space-between; -webkit-justify-content: space-between;
  align-items: center; -webkit-align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #bfbfbf;
  bottom: 0;
  position: fixed;
  width: 100%;
}

a.logo{
  text-decoration:none;
  font-size: 1.3em;
  font-weight: 900;
  padding: 20px 30px;
}

a.logo:hover{cursor:pointer;}

a.menu-link {
  font-weight: 900;
  font-size: 0.9em;
  padding: 20px 30px;
  text-decoration: none;
}

a.menu-link:hover {
  cursor: pointer;
}

#menu {
  overflow: hidden;
  max-height: 0;
  right: 0;
  position: fixed;
  width: 100%;
  bottom: 65px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#menu.active {
  max-height: 306px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#menu ul {
  list-style-type: none;
}

#menu ul li a {
  text-align: right;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #222222;
  color:#ffffff;
  display: block;
  padding: 20px 30px;
  font-size:0.9em;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#menu ul li a:hover{
  background-color:#111111;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.js nav[role=navigation] {
  overflow: hidden;
  max-height: 0;
}

/* TEXT TYPING */
.teletype-prefix{display:none;}

.type-text{
  text-align:center;
  padding:50px 0;
}

.type-text span{
  font-size:3em;
  font-weight:900;
}

/* PORTFOLIO GRID */
.projects{
  display: flex; display: -webkit-flex;
  flex-direction: row; -webkit-flex-direction: row;
  flex-wrap: wrap; -webkit-flex-wrap: wrap;
  justify-content: center; -webkit-justify-content: center;
  width:100%;
  margin:0 auto;
}

.projects .item{
  background-image:url('https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052');
  background-size:cover;
  background-position:center center;
  min-height:400px;
  min-width:400px;
}

.item-info{
  background:rgba(0,0,0,0.6);
  display: flex; display: -webkit-flex;
  flex-direction: column; -webkit-flex-direction: column;
  flex-wrap: wrap; -webkit-flex-wrap: wrap;
  justify-content: center; -webkit-justify-content: center;
  align-items: center; -webkit-align-items: center;
  min-width:400px;
  min-height:400px;
}

.item-info h2{
  font-weight:900;
  color:#ffffff;
}

.item-info span{
  color:#cfcfcf;
  font-family:Arial;
  font-style:italic;
  font-size:0.9em;
  padding-top:5px;
}