New Personal Website [WIP]

In this example below you will see how to do a New Personal Website [WIP] with some HTML / CSS and Javascript

A WIP version of my website.

Thumbnail
This awesome code was written by Jonathan Ohayon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jonathan Ohayon ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>New Personal Website [WIP]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://meyerweb.com/eric/tools/css/reset/reset.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css'>
<link rel='stylesheet prefetch' href='http://jonathano.com/unisans/stylesheet.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='http://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>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jonohayon/new-personal-website-wip-EPZyro */
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: "uni_sansheavy_caps", 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%;
  -webkit-transform: translateY(-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: "uni_sansheavy_caps", 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: "uni_sansheavy_caps", sans-serif;
  padding-left: 9px;
  padding-right: 9px;
}

.active {
  background-color: #3b985e;
}

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

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

section {
  font-family: "uni_sansheavy_caps", 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 {
  -webkit-column-count: 3;
          column-count: 3;
  -webkit-column-width: 350px;
          column-width: 350px;
  -webkit-column-fill: auto;
          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: "uni_sansheavy_italic_caps", 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;
  -webkit-animation: blink 0.7s infinite;
          animation: blink 0.7s infinite;
}

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

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
section#work > h1 {
  text-align: center;
  font-size: 42px;
}

section#work > .works-cont {
  -webkit-column-count: 4;
          column-count: 4;
  -webkit-column-width: 250px;
          column-width: 250px;
  -webkit-column-fill: auto;
          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 {
    -webkit-columns: 0;
            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;
  }
}


/*Downloaded from https://www.codeseek.co/jonohayon/new-personal-website-wip-EPZyro */
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))
    }
  }
})

Comments