Untitled

<!DOCTYPE html>
<html lang="en" ng-app="portfolio" class="no-js">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>portfolio</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- Inject header -->
  <div ng-include='"header.html"'></div>
  <!-- Website Content -->
  <div ng-view></div>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- AngularJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-touch.js"></script>

  <!-- Angular app and controllers custom file -->
  <script src="script.js"></script>
</body>

</html>

// Code goes here

var portfolio = angular.module('portfolio', ['ngRoute']);

portfolio.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    // Home
    .when("/", {templateUrl: "summary.html", controller: "PageCtrl"})
    // Pages
    .when("/summary", {templateUrl: "summary.html", controller: "PageCtrl"})
    .when("/experience", {templateUrl: "pages/experience.html", controller: "PageCtrl"})
    .when("/projects", {templateUrl: "pages/projects.html", controller: "PageCtrl"})
    .when("/skills", {templateUrl: "pages/skills.html", controller: "PageCtrl"})
    .when("/education", {templateUrl: "pages/education.html", controller: "PageCtrl"})
    }]);

portfolio.controller('PageCtrl', function (/* $scope */) {
  console.log("PageCtrl active");
});

/* Styles go here */

body {
  margin: 0;
  background: #131119;
  color: #ffffff;
}

.wrapper {
  margin-left: 12em;
  margin-top: 5em;
}
nav:hover .wrapper {
  margin-left:25em;
  transition: all 0.5s;
}

h1 {
  text-align: center;
}

p {
  margin-top: 3em;
  font-size: 1.5em;
}

nav {
  width: 106px;
  height: 100vh;
  box-sizing: border-box;
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow-X: hidden;
  overflow-Y: hidden;
  background: #242128;
  border-right: 12px solid #009cef;
  transition: all 0.5s;
}
nav > span {
  display: block;
  padding: 2em;
  font-size: 16px;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0 0;
  color: rgba(255,255,255,0);
  font-weight: 600;
  transition: all 0.5s;
}
nav:hover {
  width: 320px;
  overflow-X: auto;
  overflow-Y: auto;
}
nav:hover span {
  color: rgba(255,255,255,0.5);
  transition: all 1s 0.25s;
}

<nav>
      <span>Portfolio</span>
      <a class="navitem" href="#/summary">Summary</a>
      <a class="navitem" href="#/experience">Experience</a>
      <a class="navitem" href="#/projects">Projects</a>
      <a class="navitem" href="#/skills">Skills</a>
      <a class="navitem" href="#/education">Education</a>
</nav>

<div class="wrapper">
<h1>Summary</h1>
<p>TESTESTEST</p>
</div>