Personal site mockup

index.html

<div class="page-division page-left">
  <div class="hamb-wrap">
    <div class="hamb"></div>
  </div>
  <h1 class="name">
    <span class="name-inner">Annalise</span>
    <span class="name-inner">Mabe</span>
  </h1>
  <nav class="main-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">CV</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</div>

<div class="page-division page-right">
<h1>About Me</h1>
<p>
Superiority fearful justice play ubermensch ideal faithful decieve morality ultimate gains salvation depths aversion. Inexpedient gains disgust fearful depths deceptions grandeur of spirit strong merciful pious. Salvation philosophy faith depths ultimate.
</p>
<p>
Mountains pinnacle strong value hope decrepit oneself oneself moral convictions dead burying. Ubermensch abstract good holiest self salvation against burying endless. Sea justice ubermensch marvelous selfish hatred superiority faith good society decieve marvelous.
</p>
<p>
Disgust value good justice sea chaos faithful joy spirit grandeur value oneself decieve. Salvation depths fearful mountains abstract eternal-return play moral. Truth truth madness snare ideal suicide overcome.
</p>
<p>
Pious overcome contradict justice spirit. Sexuality philosophy joy grandeur chaos christianity battle.
</p>
<p>
Hope law holiest ideal play faith transvaluation gains aversion decieve joy moral justice free. Depths war ultimate eternal-return transvaluation. Ideal enlightenment decieve christianity faithful self enlightenment insofar. Madness deceptions abstract enlightenment good fearful deceptions inexpedient. Good god ascetic chaos ultimate ultimate zarathustra against transvaluation free.
</p>
  
<p>
Decieve burying of snare good noble. Morality mountains pinnacle ultimate convictions decieve inexpedient sea zarathustra. Gains justice chaos love selfish chaos deceptions moral faith sexuality fearful joy. Decrepit victorious right grandeur truth dead.
</p>
  
<p>Morality.</p>
</div>

Personal-site-mockup.markdown

Personal site mockup

Made this quick mockup for a friend

Forked from Travis's Pen Personal site mockup.

A Pen by Mike Quatrani on CodePen.

License.

script.js

var Model = Backbone.Model.extend({
	defaults: {
		nav: 'closed'
  }  
});

var View = Backbone.View.extend({
  el: 'body',
  
  $pageLeft: $('.page-left'),
  $pageRight: $('.page-right'),
  
  duration: 500,
  
  events: {
  	'click .hamb-wrap': 'updateNav'
	},
  
  initialize: function() {
    this.render(); 
    this.listenTo(
      this.model, 'change:nav', this.navigation
    );
    
    return this;
  },
  
  render: function() {
    var self = this;
    
    
    
    this.$pageLeft.velocity({
      width: '30%'
    }, {
      duration: this.duration
    })
    
    this.$pageRight.velocity({
      width: '70%',
      marginLeft: '30%'
    }, {
      duration: this.duration
    });
    
    this.$pageLeft.find('.name')
    	.velocity({
  			translateX: [0, -50]
	    }, { 
      	duration: this.duration
	    });

    this.$pageRight.find('h1, p')
    	.delay(this.duration)
    	.velocity('transition.slideUpIn');
  },
  
  updateNav: function() {
    var state = this.model.get('nav');
    
    this.model.set('nav', 
			state === 'open' ? 'closed' : 'open'
		)
  },
  
  navigation: function() {
		this.$('.hamb').toggleClass('active');
    
    if (this.model.get('nav') === 'open') {
      // animate nav in
      this.$pageLeft.velocity({
        width: '100%'
      }, {
        duration: this.duration * .75
      })

      this.$pageLeft.find('.name')
      	.delay(this.duration / 2)
        .velocity({
          width: 0
        }, {
          duration: this.duration * .75
        })

      this.$pageLeft.find('.name-inner')
        .velocity({ 
          top: '100%'
        }, {
          duration: this.duration * .75
        });

      this.$pageLeft.find('.main-nav li')
        .delay(this.duration)
        .velocity('transition.slideUpIn', {
          stagger: 100    
        });
    } else {
      // put everything back to how it was
      this.$pageLeft.velocity('reverse');
      
      this.$pageLeft.find('.name-inner')
      	.delay(this.duration / 1.75)
        .velocity('reverse');
      
      this.$pageLeft.find('.main-nav li')
        .css({ display: 'none' });
      
      this.$pageLeft.find('.name')
        .velocity('reverse');
    }
  }
}); 

var view = new View({
  model: new Model()
});

style.scss

// fonts
$serif: 'Slabo 27px', arial, sans-serif;
$sans-serif: 'open sans', arial, sans-serif;
$script: 'Dancing Script', arial, sans-serif;

// colors
$primary-color: #DA5300;

//navigation
$hamWidth: 35px;
$hamHeight: 3px;
$hamSpacing: 8px;
$menuTransition: .2s;

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  min-width: 100%;
  font-family: $serif;
}

h1 {
  font-family: $sans-serif;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.page-division {
  float: left;
  position: relative;
}

.page-left {
  width: 0;
  min-height: 100%;
  overflow: hidden;
  position: fixed;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40447/seeds-641520_1920.jpg), #fff;
  background-size: 100vw auto ;
  z-index: 2;
  color: white;
}

.page-right {
  width: 100%;
  height: 100%;
  padding: 30px;
  font-size: 2vw;
}

.page-right h1 {
  display: none;
  text-align: right;
}

.page-right p {
  display: none;
}

.hamb-wrap {
  height: 30px;
  width: $hamWidth + 5;
  position: absolute;
  top: 25px;
  left: 25px;
  cursor: pointer;
  z-index: 2;
}
.hamb {
  height: $hamHeight;
  width: $hamWidth;
  background: $primary-color;
  position: absolute;
  top: 10px;
  left: 0;
  transition: $menuTransition;
  border-radius: 10% 10% 10% 10% / 40% 40% 40% 40%;
  &:before,
  &:after {
    content: '';
    position: absolute;
    background: $primary-color;
    height: $hamHeight;
    width: 100%;
    transition: $menuTransition;
    border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  } 
  &:before {
    top: $hamSpacing;
  }
  &:after {
    top: -$hamSpacing;
  }
}
.active {
background: none;
transition: $menuTransition;
  &:before, &:after {
    transition: $menuTransition;
    top: 0;
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg); 
  } 
}

.name {
  font-size: 5.75vw;
  font-weight: normal;
  text-shadow: 2px 2px 0 white;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 2vw;
  height: 12vw;
  overflow: hidden;
  border-bottom: 3px solid $primary-color;
  font-family: $script;
  text-transform: none;
  color: $primary-color;
}

.name-inner {
  position: relative;
  display: block;
  width: 100%;
}

.main-nav {
  width: 100%;
  margin-top: 10vw;
}

.main-nav li  {
  text-align: center;
  list-style-type: none;
  font-size: 5vw;
  display: none;
  margin-top: 1vw;
  font-family: $sans-serif;
  font-weight: 800;
  width: 100%;
  &:hover { }
}

.main-nav li a {
  color: $primary-color;
  text-shadow: 2px 2px 0 #fff;
  text-decoration: none;
  text-transform: uppercase;
}