New Personal Website [WIP]

index.html

<div class="vertical-menu">
  <div class="menu-close-cont">
    <svg class="menu-close" data-src="http://jonathano.com/img/close.svg"></svg>
  </div>
  <ul class="vertical-links">
    <li class="vertical-link"><a href="#">About</a></li>
    <li class="vertical-link"><a href="#">Skills</a></li>
    <li class="vertical-link"><a href="#">Work</a></li>
    <li class="vertical-link"><a href="#">Open Source</a></li>
    <li class="vertical-link"><a href="#">Contact</a></li>
  </ul>
</div>
<div class="shadow"></div>
<header>
  <svg data-src="http://jonathano.com/img/menu.svg" class="menu-icon"></svg>
  <a href="#welcome" class="brand">
    Jonathan Ohayon
  </a>
  <ul class="links">
     <li class="link"><a href="#about">About</a></li>
     <li class="link"><a href="#skills">Skills</a></li>
     <li class="link"><a href="#work">Work</a></li>
     <li class="link"><a href="#opensource">Open Source</a></li>
     <li class="link"><a href="#contact">Contact</a></li>
  </ul>
</header>
<section id="welcome" class="parallax container">
  <div class="parallax-inner">
    <img src="http://s3.jonathano.com/profile.jpg" class="profile" />
    <h1>Hello.<br />I <span class="stuff">build</span> awesome <span class="txt"></span>.</h1>
  </div>
</section>
<section id="about">
  <h1>Hi!</h1>
  <div class="border"></div>
  <p>Hello! My name is Jonathan Ohayon, and I'm a mobile and web developer based in Tel Aviv, Israel. I'm currently 13 y/o, but don't let my age mislead you, because I can (and have) create super-awesome apps and websites.<br /><br />I have knowledge in web development (both front-end and back-end), iOS apps, and I learn Android development at the moment.<br /><br />Last summer (July - August, 2015) I was a summer intern at a Bitcoin startup, Colu, where I have helped developing some features and building a PoC smart lock (which I have presented on stage in the Money20/20 conference).<br /><br />I have also organized a hackathon named HackTheWeb together with Iddan Aharonson and HackGenY (You can check it out <a href="http://hackgeny.com/hacktheweb" target="_blank">here</a>) last year, and I was the youngest ever FabAcademy (a global digital fabrication course by MIT) graduate two years ago when I was 11 and a half years old (you can check my documentation website <a href="http://www.fabacademy.org/archives/2014/students/ohayon.yonathan/index.html" target="_blank">here</a>. It's not the best website ever created, but hey, it was my first website and it was awesome creating it back then).</p>
</section>
<blockquote class="parallax">
  <div class="parallax-inner quote-inner">
    <h1 class="caption">"Age is only an Int"</h1>
    <h3 class="credit"> - Michael Matias, founder of HackGenY</h3>
  </div>
</blockquote>
<section id="skills">
  <h1>My Skills</h1>
  <div class="border"></div>
  <div class="skills-cont">
    <article class="skill">
      <h1>Front-end Skills</h1>
      <ul class="skills-list frontend"></ul>
    </article>
    <article class="skill">
      <h1>Back-end Skills</h1>
      <ul class="skills-list backend"></ul>
    </article>
    <article class="skill">
      <h1>Mobile Skills</h1>
      <ul class="skills-list mobile"></ul>
    </article>
  </div>
</section>
<section id="work">
  <h1>My Work</h1>
  <div class="border"></div>
</section>

new-personal-website-wip.markdown

New Personal Website [WIP]

A WIP version of my website.

A Pen by Matthew Bott on CodePen.

License.

script.js

var isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i)
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i)
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i)
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera Mini/i)
  },
  Windows: function () {
    return navigator.userAgent.match(/IEMobile/i)
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
}

var strings = {
  first: [
    'iOS apps',
    'websites',
    'backend software',
    'stuff'
  ],
  second: [
    'hackathons',
    'events'
  ],
  third: ['stuff']
}

$('.txt').typed({
  strings: strings.first,
  typeSpeed: 100,
  backDelay: 1500,
  callback: function () {
    $('.typed-cursor').fadeOut()
  }
})

$(window).scroll(function () {
  var $w = $('#welcome')
  var $d = $(document)
  if ($w.height() - $d.scrollTop() <= 50) {
    $('header').css('background-color', '#4CBA76')
    if (isMobile.any()) {
      $('.brand').css('marginLeft', '45px')
      $('.menu-icon').fadeIn(550)
      $('.brand').fadeIn(550)
    }
  } else {
    $('header').css('background-color', 'transparent')
    $('.active').css('background-color', 'transparent')
    if (isMobile.any()) {
      $('.menu-icon').fadeOut(550)
      $('.brand').fadeOut(550)
    }
  }
})

function remoteSVG (selector, c, onload) {
  var $mi = $(selector)
  var getUrl = $mi.data('src')
  $.get(getUrl, function (data) {
    data = (new XMLSerializer()).serializeToString(data)
    var $s = $(data)
    $s.attr('class', c)
    if (/close\.svg/.test(getUrl)) {
      $s.attr('width', '47')
      $s.attr('height', '47')
    }
    onload()
    $mi.replaceWith($s)
  })
}

var skills = {
  frontend: [
    'jQuery',
    'AngularJS',
    'HTML5',
    'CSS3',
    'JS',
    'Riot.JS',
    'ES2015',
    'WebRTC',
    'A-Frame',
    'AJAX',
    'SVG',
    'Jade',
    'SCSS',
    'Bootstrap',
    'JWT',
    'SocketIO',
    'Materialize.css',
    'Material Design Lite',
    'RegExp'
  ],
  backend: [
    'NodeJS',
    'MongoDB',
    'Mongoose',
    'Express.js',
    'MEAN Stack',
    'PHP',
    'MySQL',
    'REST API',
    'Meteor',
    'SocketIO',
    'Ruby',
    'Python',
    'Electron',
    'Mocha',
    'Unit Tests',
    'Passport',
    'Browserify',
    'BabelJS',
    'Mustache Templating',
    'BitcoinJS'
  ],
  mobile: [
    'Swift',
    'iOS',
    'Ionic',
    'Apache Cordova',
    'PhoneGap',
    'APNs',
    'GCM',
    'iOS Facebook Login',
    'Google Analytics',
    'Fabric.io',
    'CFNetworking',
    'Alamofire',
    'JBChartView',
    'CoreMotion',
    'Firebase'
  ]
}

Object.keys(skills).forEach(function (key) {
  skills[key].forEach(function (s) {
    $('.' + key).append('<li class="skill-item">' + s + '</li>')
  })
})

remoteSVG('svg.menu-icon', 'menu-icon', function () {
  $('.menu-icon').on('click', function () {
    console.log('click')
    $('.shadow').fadeIn()
    $('.vertical-menu').addClass('animated slideInLeft')
  })
})
remoteSVG('svg.menu-close', 'menu-close')

$('a[href*=#]').on('click', function(event) {
  $('.active').removeClass('active')
  $(this).parent().addClass('active')
  var href = $(this).attr("href")
  if ( /(#.*)/.test(href) ) {
    var hash = href.match(/(#.*)/)[0]
    var path = href.match(/([^#]*)/)[0]
    if (window.location.pathname == path || path.length == 0) {
      event.preventDefault()
      $('html, body').animate({ scrollTop: $(this.hash).offset().top }, 1500, $.easie(0.47,0.22,0,1))
    }
  }
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mattboldt/typed.js/master/dist/typed.min.js"></script>
<script src="https://jaukia.github.io/easie/js/jquery.easie.js"></script>

style.scss

$font: 'uni_sansheavy_caps';
$font-italic: 'uni_sansheavy_italic_caps';
$primaryColor: #4CBA76;
$darkColor: darken($primaryColor, 10%);

body {
  margin: 0;
  padding-top: 800px;
}

div.vertical-menu {
  z-index: 999999999999;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 85%;
  background-color: #ededed;
  display: none;
}

div.vertical-menu > .menu-close-cont {
  height: 16.6%;
  width: 100%;
}

div.vertical-menu > .menu-close-cont > .menu-close {
  margin-left: 22px;
  margin-top: 22px;
}

div.vertical-menu > .vertical-links {
  font-family: $font, sans-serif;
  height: 83.4%;
}

div.vertical-menu > .vertical-links > .vertical-link {
  height: 16.6%;
  position: relative;
  margin-left: 25px;
}

div.vertical-menu > .vertical-links > .vertical-link > a {
  text-decoration: none;
  color: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 37px;
}

div.shadow {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999999;
  display: none;
}

h1 {
  font-size: 37px;
  line-height: 1.2;
}

.container-fluid {
  margin-right: 5%;
  margin-left: 5%;
}

.container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 99999999;
}

header > a {
  text-decoration: none;
  color: #fff;
  line-height: 50px;
  font-family: $font, sans-serif;
}

header > .links {
  float: right;
}

header > .links > .link {
  float: left;
}

header > .links > .link > a {
  text-decoration: none;
  color: #fff;
  line-height: 50px;
  font-family: $font, sans-serif;
  padding-left: 9px;
  padding-right: 9px;
}

.active {
  background-color: $darkColor;
}

header > a.brand {
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-left: 15px;
}

header > .menu-icon {
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  fill: #fff;
  display: none;
  margin-left: 10px;
  cursor: pointer;
}

section {
  font-family: $font, sans-serif;
  color: #000;
}

section#about {
  padding: 50px;
}

section#about > h1 {
  text-align: center;
  font-size: 42px;
}

section#about > p {
  max-width: 450px;
  margin: 25px auto;
  font-size: 17px;
  line-height: 1.3;
}

section#about > p > a {
  color: #000;
}

section#about > p > a:hover {
  color: #7f8c8d;
}

.border {
  height: 6px;
  background-color: #000;
  width: 70px;
  margin: 8px auto;
}

section#skills {
  padding: 50px;
}

section#skills > h1 {
  text-align: center;
  font-size: 42px;
}

section#skills > .skills-cont {
  column-count: 3;
  column-width: 350px;
  column-fill: auto;
  margin-top: 25px;
}

section#skills > .skills-cont > .skill {
  border: 6px solid #000;
  min-height: 250px;
  padding: 25px;
  margin-bottom: 15px;
}

section#skills > .skills-cont > .skill > .skills-list {
  height: 50%;
  margin-top: 10px;
}

section#skills > .skills-cont > .skill > .skills-list > .skill-item {
  padding: 3px 7.5px;
  margin: 3px 7px 3px 0;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  float: left;
}

section#welcome {
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  right: 0;
  height: 800px;
  background-image: url(http://jonathano.com/img/background.jpeg);
}

section#welcome > * {
  color: #FFFFFF;
}

section#welcome > .parallax > .parallax-inner {
  text-align: center;
}


section#welcome:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0.83;
  background: linear-gradient(#f1c40f 0%, #27ae60 100%);
}

.parallax {
  display: table;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
  height: 100%;
}

.parallax > .parallax-inner {
  position: relative;
  z-index: 9999;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

blockquote.parallax {
  height: 100px;
  width: calc(100% - 60px);
  padding: 30px;
  background-image: url(http://www.playbyplay.io/wp-content/uploads/2015/11/IMG_3016-1024x682.jpg);
  background-position: center top;
  margin-bottom: 20px;
}

blockquote > * {
  color: #000;
  text-align: left;
  font-family: $font-italic, sans-serif;
}

blockquote > .parallax-inner > h1 {
  font-size: 35px;
}

blockquote > .quote-inner {
  background-color: #fff;
}

.profile {
  width: 175px;
  margin-bottom: 25px;
  border-radius: 50%;
}

.typed-cursor{
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

section#work {
  // padding: 50px;
}

section#work > h1 {
  text-align: center;
  font-size: 42px;
}

section#work > .works-cont {
  column-count: 4;
  column-width: 250px;
  column-fill: auto;
  margin-top: 25px;
}

section#work > .works-cont > .work {
  border: 6px solid #000;
  min-height: 250px;
  margin-bottom: 15px;
}

section#work > .works-cont > .work > .no-image {
  padding: 25px;
}

section#work > .works-cont > .work > .skills {
  height: 50%;
  margin-top: 10px;
}

section#work > .works-cont > .work > .skills > .work-skill {
  padding: 3px 7.5px;
  margin: 3px 7px 3px 0;
  border-radius: 4px;
  background-color: #000;
  color: #fff;
  float: left;
}

section#work > .works-cont > .work > .thumb {
  width: 100%;
}

@media (max-width: 800px) {
  section#skills > .skills-cont {
    columns: 0;
  }
}

@media (max-width: 768px) {
  section#welcome {
    height: 600px;
  }
  
  section#skills > .skills-cont > .skill {
    height: 430px;
  }
  
  body {
    padding-top: 600px;
  }
  
  .links, .brand {
    display: none;
  }
}

styles

<link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet" />
<link href="http://jonathano.com/unisans/stylesheet.css" rel="stylesheet" />