Coming Soon Landing Page

coming-soon-landing-page.markdown

Coming Soon Landing Page

I got the evening off and I decided to rebuild my personal page. Will probably be adding some things to it, but I will try to keep it as clean as possible.

A Pen by Yahia Refaiea on CodePen.

License.

index.pug

.wrap
  canvas#nodes
  img#me(src="https://yahiarefaiea.com/codepen/coming-soon-landing-page/yahiarefaiea.png")
  #container
    #social
      div: a(href='mailto:hello@yahiarefaiea.com' title="hello@yahiarefaiea.com") hello@yahiarefaiea.com
      div: a(href='http://yahiarefaiea.com/Yahia_Refaiea_Resume.pdf' title="PDF Résumé") Download my Résumé
      div: a(href='http://facebook.com/YahiaRefaiea' title="Facebook (@YahiaRefaiea)") Facebook
      div: a(href='http://twitter.com/YahiaRefaiea' title="Twitter (@YahiaRefaiea)") Twitter
      div: a(href='http://codepen.io/YahiaRefaiea' title="Codepen (@YahiaRefaiea)") Codepen
      div: a(href='http://github.com/YahiaRefaiea' title="GitHub (@YahiaRefaiea)") GitHub
    #brief
      div A #[span 21 years] old
      div interaction designer

script.js

//  The canvas in the background made by emma
//  in her Pen Canvas Particles & Cubic Bezier.
//  https://codepen.io/boltaway/pen/PwGxNX/

$(function() {
  var canvas = document.getElementById('nodes'),
      ctx = canvas.getContext('2d'),
      color = 'rgba(255, 255, 255, .5)'
      width = window.innerWidth,
      height = window.innerHeight;
  
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = color;
  
  var dots = {
    num: 100,
    distance: 200,
    d_radius: 200,
    velocity: -.9,
    array: []
  };
  
  function Dot(){
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    
    this.vx = dots.velocity + Math.random();
    this.vy = dots.velocity + Math.random();
    
    this.radius = Math.random() * 2;
  }
  
  Dot.prototype = {
    create: function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fill();
    },
    
    animate: function() {
      for(var i = 0; i < dots.num; i++) {
        
        var dot = dots.array[i];
        
        if(dot.x < 0 || dot.x > width) {
          dot.vx = - dot.vx;
          dot.vy = dot.vy;
        } else if(dot.y < 0 || dot.y > height) {
          dot.vx = dot.vx;
          dot.vy = - dot.vy;
        }
        dot.x += dot.vx;
        dot.y += dot.vy;
      }
    }
  };
  
  function createDots() {
    ctx.clearRect(0, 0, width, height);
    for(var i = 0; i < dots.num; i++) {
      dots.array.push(new Dot());
      dot = dots.array[i];
      dot.create();
    }
    dot.animate();
  }
  
  setInterval(createDots, 1000/30);
  
  $(document).on('resize', function() {
    canvas.width = width;
    canvas.height = height;
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.stylus

//  This pen built to use as a coming soon
//  page on my website
//  http://yahiarefaiea.com

green= #419d78
greenAlpha= rgba(65, 157, 120, .14)
background= #171a19

loadDelay= 1.5s

step= .03
pattern= 1.16
duration= .8s
easing= cubic-bezier(0.190,1.000,0.220,1.000)

//  basic layout
html, body, .wrap
  width: 100%
  height: 100%
body
  overflow: hidden
  background: background
.wrap
  position: relative
canvas
  position: absolute
  top: 0
  left: 0
#me
  position: absolute
  top: 50%
  left: 50%
  height: 100%
  max-height: 656px
  transform: translate(-50%, -50%)

//  container
#container
  position: absolute
  top: 0
  bottom: 0
  left: 50%
  width: 100%
  max-width: 1056px
  transform: translate(-50%)

//  anchor
a
  display: inline-block
  position: relative
  cursor: pointer
  color: #ddd
  transition: all duration easing
  &, &:hover, &:focus
    outline: none
    text-decoration: none
  &:before
    content: ''
    z-index: -1
    display: block
    position: absolute
    bottom: 15%
    left: -28px
    right: 100%
    height: 10px
    transition: all duration easing
  //  on hover
  &:hover, &:focus
    color: green
    &:before
      left: -2px
      right: -2px
      background-color: greenAlpha

//  get in animation
getInAnimation(i, duration, delay, d)
  animation: get+i (duration+d) easing unit(delay+d, 's') forwards
  @keyframes get{i}
    100%
      opacity: 1
      transform: translateY(0)
getIn(min, max, last=false, delay=loadDelay)
  d= 0
  for i in min..max
    d= (d+step)*pattern
    if(last!=true)
      &:nth-child({i})
        getInAnimation(i, duration, delay, d)
    if(last==true)
      &:nth-last-child({i})
        getInAnimation(i, duration, delay, d)

//  social
#social
  position: absolute
  top: 35px
  left: 28px
  font-family: 'Montserrat', sans-serif;
  font-size: 14px
  line-height: 28px
  div
    opacity: 0
    transform: translateY(-28px) rotate(-5deg)
    getIn: 1 6 true

//  brief
#brief
  position: absolute
  bottom: 63px
  left: 28px
  font-family: 'Roboto Slab', serif;
  font-weight: 700
  font-size: 48px
  line-height: 63px
  color: #fff
  div
    transform: translateY(63px) rotate(5deg)
    opacity: 0
    getIn: 1 2
    span
      position: relative
      color: green
      &:before
        content: ''
        z-index: -1
        display: block
        position: absolute
        bottom: 0
        left: 0
        right: 100%
        height: (63px/2)
        background-color: greenAlpha
        animation: years duration*2 easing (loadDelay+(duration/2)) forwards
        @keyframes years
          100%
            right: 0

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet" />