JERMS portfolio page

In this example below you will see how to do a JERMS portfolio page with some HTML / CSS and Javascript

CREDITS to Gwen Salabao, a pen of his named "CV card" is a part of this pen's design.!!This pen is for public view so I hid most of the information that is not needed.!!

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>JERMS portfolio page</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.0/semantic.min.css">
  <link rel="stylesheet" href="styles/app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en" ng-app="portfolioPage" ng-controller="themeCtrl" md-theme="{{theme}}" md-theme-watch="true">

<head>
  <meta charset="UTF-8">

  <title>Portfolio Page</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  
</head>

<body ng-cloak ng-controller="appCtrl">
  <md-content flex>
    
<md-content class="md-padding" layout-xs="column" layout="row">
  <div flex layout="column">

    <md-card>
      <md-card-avatar align="center" class="banner">
        <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965823/banner_qkopkk.png" class="img-responsive center-block md-card-image">
      </md-card-avatar>
      <md-card-header md-colors="::{backgroundColor: 'primary-800'}">
        <md-card-avatar>
          <img class="md-user-avatar profile_size" src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_yz7jth.jpg">
        </md-card-avatar>

        <md-card-header-text>

          <span class="md-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{info.first_name}} {{info.middle_name.charAt(0)}}. {{info.last_name}}</span>
          <span class="md-subhead">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{info.title}}</span>
        </md-card-header-text>
      </md-card-header>

    </md-card>
  </div>
</md-content>

  </md-content>
  <div class="front">
    <div class="list">
				<ul>
					<li><a><i class="fa fa-user"></i>&nbsp;Profile</a></li>
          <li><a><i class="fa fa-graduation-cap"></i>&nbsp;Educational Background</a></li>
					<li><a><i class="fa fa-bar-chart"></i>&nbsp;Skills</a></li>
          <li><a><i class="fa fa-briefcase"></i>&nbsp;Work Experience</a></li>
					<li><a><i class="fa fa-at"></i>&nbsp;Emails</a></li>

				</ul>
		</div>
  </div>
  <div class="list-content profile">
			<h2>Profile</h2>
			<div align="center" class="img-rounded">
				<img src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_2_zprna5.jpg" alt="image">
			</div>

				<div>
  <md-card>
    <md-card-header>
      <md-card-header-text>
        <h3 align="center">Information</h3>
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
      <md-list-item class="md-3-line" ng-click="null">
        <div class="md-list-item-text">
          <p><h3>Firstname : {{info.first_name}}</p>
          <p><h3>Surname : {{info.last_name}}</p>
          <p><h3>Middlename : {{info.middle_name}}</p>
          <p><h3>Birthday : {{info.bday}}</p>
          <p><h3>Age : {{info.age}}</p>
          <p><h3>Address : {{info.location}}</p>
          <p><h3>Contact #: {{info.mobile}}</p>
          <p><h3>E-mail : {{info.email}}</p>
        </div>
      </md-list-item>
    </md-card-content>
  <md-card>
</div>

			<h3>You might not think that programmers are artists, but programming is an extremely creative profession. It's logic based creativity -John Romero</h3>
			<a class="btn-close"><i class="fa fa-times"></i></a>
	</div>
  <div class="list-content skills">
			<h2>Skills</h2>
			<div align="center" class="img-rounded">
				<img src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_2_zprna5.jpg" alt="image">
			</div>

				<div>
  <md-card>
    <md-card-header>
      <md-card-header-text>
        <h3 align="center">Languages</h3>
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
      <md-card-content class="form-search" ng-controller="skillsCtrl">
        <md-list>
          <md-list-item class="animate" ng-repeat="skill in skills | filter:search">
            <a href={{skill.url}} target="blank" md-colors="::{color: 'primary'}"><h3>{{skill.name}}</h3></a>
            <md-divider></md-divider>
          </md-list-item>
        </md-list>
      </md-card-content>
        <div class="base" align="center">

          <section class="model-1">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/html5_exmmkb.png" class="size md-user-avatar">
            </md-card-avatar>

            <div class="graph">HTML5</div><span tooltip="90%" class="tooltip">HTML5</span>
          </section>
          <section class="model-2">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/css3_uqv6gd.png" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">CSS3</div><span tooltip="60%" class="tooltip">CSS3</span>
          </section>
          <section class="model-3">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/JQuery_dj5ytl.jpg" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">JQuery</div><span tooltip="70%" class="tooltip">JQuery</span>
          </section>
          <section class="model-4">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/JS_oqoly8.png" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">Javascript</div><span tooltip="50%" class="tooltip">JavaScript</span>
          </section>
          <section class="model-5">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965823/angularjs_z2xm6f.png" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">AngularJS</div><span tooltip="60%" class="tooltip">AngularJS</span>
          </section>
          <section class="model-6">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/php_sw4prw.png" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">PHP</div><span tooltip="70%" class="tooltip">PHP</span>
          </section>
          <section class="model-7">
            <md-card-avatar align="center">
              <img ng-src="https://res.cloudinary.com/exiege/image/upload/v1493965824/java_gp5tnf.png" class="size md-user-avatar">
            </md-card-avatar>
            <div class="graph">JAVA</div><span tooltip="80%" class="tooltip">JAVA</span>
          </section>
        </div>
      </md-list-item>
    </md-card-content>
  <md-card>
</div>

			<h3>You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. -Steve Jobs</h3>
			<a class="btn-close"><i class="fa fa-times"></i></a>
	</div>
  <div class="list-content social">
			<h2>Social</h2>
			<div align="center" class="img-rounded">
				<img src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_2_zprna5.jpg" alt="image">
			</div>

				<div>
  <md-card>
    <md-card-header>
      <md-card-header-text>
        <h3 align="center">Accounts</h3>
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
      <div class="contact">
        <div class="row">
        <a class="btn btn-primary" href='#'>
          <i class="fa fa-4x fa-codepen" aria-hidden='true'></i></a>
        <a class="btn btn-primary" href='#'>
          <i class="fa fa-4x fa-slack" aria-hidden='true'></i></a>
        <a class="btn btn-primary" href='#'>
          <i class="fa fa-4x fa-trello" aria-hidden='true'></i></a>
        <a class="btn btn-primary" href='#'>
          <i class="fa fa-4x fa-github" aria-hidden='true'></i></a>
        <a class="btn btn-primary" href='#'>
          <i class="fa fa-4x fa-google-plus-square" aria-hidden='true'></i></a>
        </div>
      </div>
    </md-card-content>
  <md-card>
</div>

			<h3>A programmer is a person who fix a problem that you don't know you have, in a way you don't understand</h3>
			<a class="btn-close"><i class="fa fa-times"></i></a>
	</div>
  <div class="list-content educ">
			<h2>Educational Background</h2>
			<div align="center" class="img-rounded">
				<img src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_2_zprna5.jpg" alt="image">
			</div>

				<div>
  <md-card>
    <md-card-header>
      <md-card-header-text>
        <h3 align="center"></h3>
      </md-card-header-text>
    </md-card-header>
      <md-card-content class="form-search" ng-controller="schoolsCtrl">
        <md-list>
          <md-list-item class="animate" ng-repeat="school in schools">
            <md-card-avatar>
              <img src="{{school.icon}}" class="size">
            </md-card-avatar>
            <h3>{{school.name}}</h3>
            <h5>S.Y.{{school.sy}}</h5>
            <md-divider></md-divider>
          </md-list-item>
        </md-list>
      </md-card-content>
  <md-card>
</div>

			<h3>Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program. -Linus Torvalds</h3>
			<a class="btn-close"><i class="fa fa-times"></i></a>
	</div>
  <div class="list-content workexp">
			<h2>Work Experience</h2>
			<div align="center" class="img-rounded">
				<img src="https://res.cloudinary.com/exiege/image/upload/v1493965825/profile_2_zprna5.jpg" alt="image">
			</div>

				<div>
  <md-card>
    <md-card-header>
      <md-card-header-text>
        <h3 align="center">Information</h3>
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
      <md-list-item class="md-3-line" ng-click="null">
        <div class="md-list-item-text">

            <div align="center">
      				<img src="{{work.icon}}">
      			</div>
            <h2>Company:      {{work.company}}</h2>
            <pre>
            <h5>Location:     {{work.company_location}}</h5>
            <h5>title:        {{work.company_title}}</h5>
            <h5>period:       {{work.period}}</h5>
          </pre>
        </div>
      </md-list-item>
    </md-card-content>
  <md-card>
</div>

			<h3>Everybody should learn how to program a computer because it teaches you how to think. -Steve Jobs</h3>
			<a class="btn-close"><i class="fa fa-times"></i></a>
	</div>
</body>

<footer>
  <md-content layout="row" layout-align="center center" layout-margin md-colors="::{color: 'primary'}">
  <span class="md-caption">Built by</span>
  <span class="md-subhead" md-colors="::{color: 'accent'}">
    Jeremy Bañagale
  </span>
  <span class="md-caption">2017</span>
</md-content>
</ng-include>
</footer>





<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/exiege/jerms-portfolio-page-ybzXKJ */
@keyframes load {
    0% {
        stroke-dashoffset: 0;
    }
}

/* ----- GLOBAL -------- */

html {
    background: #353434;
}

body {
    line-height: 1.4;
    max-width: 700px;
    margin: 20px auto;
}
.size{
  max-height: 70px;
  max-width: 70px;
}
.profile_size{
  height: 50px;
  width: 50px;
}
.company_size{
  height: 100px;
  width: 100px;
}
.banner{
  background-image: url("https://res.cloudinary.com/exiege/image/upload/v1493965823/background_wmxph4.jpg");


}
.center{
  margin: auto;
}
.gray
{
    background: #9e9e9e;
}
.contact{
    text-align: center;
}
a{
  margin: 10;
}
/* ----- navigation ----- */
h1{
  text-align: center;
  color: #D1B57C;
  font-variant: small-caps;
  font-size: 28px;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  animation: fadeInDown .4s ease-in-out;
}
h2{
  padding: 15px 10px;
  text-align: center;
  color: #D1B57C;
  font-size:26px;
  font-variant: small-caps;
  background: rgba(255,255,255,10); /*rgba(146, 147, 147, .8)*/
  text-shadow: 0 2px 3px rgba(0,0,0,.3);
  animation: fadeInOnly .5s ease-in-out;
  box-shadow: 0 3px 2px rgba(0,0,0,.1);
  -webkit-animation: fadeInOnly .8s linear ease-in-out;
}
h3{
  font-size: 25px;
  text-align: center;
  padding: 15px 10px;
  color: #D1B57C;/*rgba(75,75,75,.8)*/
  background: #FFF;
  font-weight: 600;
  font-variant: small-caps;
  border-bottom: 1px solid rgba(146,147,147,.2);
}
h4{
  font-variant: small-caps;
  font-weight: 200;
  color: #D1B57C;
}
h5{
  font-size: 18px;
  font-weight: 200;
  color: #D1B57C;
}
h6{
  font-variant: small-caps;
  font-size: 16px;
  color: #777;
}
a{
  cursor: pointer;
}
.card{
			position: relative;
			width: 350px;
			height: auto;
			/*border: 1px solid #CCC;*/
			box-shadow: 0 2px 3px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.23);
			margin: 20px auto;
			background: #EEE;
}
		.top{
			padding-bottom: 150px;
		}
		.img-container img{
			height: 150px;
			width: 150px;
			left: 50px;
			top:50px;
			position: relative;
			overflow: hidden;
			border: 1px solid #DDD;
			padding: 5px;
			background: #FFF;
			border-radius: 50%;
			box-shadow: 0 1px 3px 0 rgba(75,75,75,0.5);
			animation: fadeInOnly .8s ease-in-out;
		}
		@keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-moz-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-o-keyframes fadeInOnly{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		.img-rounded img{
		    position: relative;
		    border-radius: 50%;
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			border: 1px solid rgba(203,202,202,.2);
		    top:20px;
		    left: 0;
		    width: 100px;
		    height: 100px;
		    z-index: 10;

		    animation: fadeIn .8s ease-in-out;
		    margin-bottom: 20px;
		    background: rgba(0,0,0,.10);
		}
		.description{
			padding: 15px;
			position: absolute;
			line-height: 1.6em;
			top:260px;
			/*background: rgba(255,255,255,.9);
			top:380px;*/
			width: 100%;
		}
		.description p{
			animation: fadeInDown .6s ease-in-out;
			font-size: 15px;
			color: #888;
			text-align: center;
			text-shadow: 0 1px 1px rgba(0,0,0,.020);
		}
		@-webkit-keyframes fadeInDown {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, -100%, 0);
		    transform: translate3d(0, -100%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@keyframes fadeInDown {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, -100%, 0);
		    -o-transform: translate3d(0, -100%, 0);
		    transform: translate3d(0, -100%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
.list li{
			list-style: none;
			background: rgba(255,255,255,10);
			display: block;
			border-bottom: 1px solid rgba(75,75,75,.080);
			font-size: 17px;
		}
		.list li a{
			display: block;
			text-decoration: none;
			padding: 15px 10px;
			color: #888;
			font-variant: small-caps;
			font-weight: 500;
			text-shadow: 0 1px 2px rgba(75, 75, 75, .1);
		}
.list li a i{
  color:#D1B57C;
  padding-right:5px;
}
		.list li:first-child{
			animation: slideInLeft .2s ease-in-out;
		}
		.list li:nth-child(2){
			animation: slideInLeft .4s ease-in-out;
		}
		.list li:nth-child(3){
			animation: slideInLeft .6s ease-in-out;
		}
		.list li:nth-child(4){
			animation: slideInLeft .8s ease-in-out;
		}
		.list li:last-child{
			animation: slideInLeft 1s ease-in-out;
			border: 0;
		}
		/*.list li:nth-child(2n+1){
			background: #FAFAFA;
		}*/
		.list li a:hover{
			background: rgba(0,0,0,.4);
			color: #FFF !important;
		}
		.list li span i{
			display: block;
		}
    @keyframes slideInLeft {
		  from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		@-webkit-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		@-moz-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		@-o-keyframes slideInLeft{
		   from {
		    -webkit-transform: translate3d(-25%, 0, 0);
		    transform: translate3d(-25%, 0, 0);
		    visibility: visible;
		  }

		  to {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}
		.list-content{
			background: #F5F5F5;
			position: absolute;
			top:0;
			bottom: 0;
			height: auto;
			z-index: 10;
			display: none;
			animation: fadeIn .5s ease-in-out;
			overflow: scroll;
      overflow-x:hidden;
		}
		.list-border li{
			list-style: none;
			padding: 10px;
			padding-bottom: 10px;
			color: #888;
			margin: 10px 15px 10px 15px;
			background: #FFF;
			border: 1px solid rgba(203,202,202,.4);
			border-radius: 4px;
			animation: fadeInUp .8s ease-in-out;
		}
		@keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-moz-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@-o-keyframes fadeIn{
			from{
				opacity: 0;
				transform: rotateY(180deg);
				transform-style: preserve-3d;
			}
			to{
				opacity: 1;
			}
		}
		@keyframes fadeInUp {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-webkit-keyframes fadeInUp{
		   from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-moz-keyframes fadeInUp{
			from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		@-o-keyframes fadeInUp{
			from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 50%, 0);
		    transform: translate3d(0, 50%, 0);
		  }

		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
		}
		.profile ul{
			margin-top: 20px;
		}
		.profile li strong{
			color: #56b880;
			font-weight: 200;
		}
		.profile p{
			margin: 10px;
			padding: 10px;
			color: #777;
		}
		.movies p{
			padding: 10px;
			margin: 10px;
			color: #888;
		}
		.movies li a{
			text-decoration: none;
		}
		.movies li span{
			color: rgba(75,75,75,.8);
		}
		::-webkit-scrollbar{
			width: 8px;
		}
		::-webkit-scrollbar-track{
			background: #EEE;
		}
		::-webkit-scrollbar-thumb{
			background: #000;
		}
		::-webkit-scrollbar-button{
			background: #CCC;
		}
		::-webkit-scrollbar-corner{
			background: #EEE;
		}
		.trivia p{
			padding: 10px;
			margin: 10px;
		}
		.awards p{
			padding: 10px;
			margin: 10px;
		}
		.btn-close{
			font-size: 20px;
			position: absolute;
			top:10px;
			left:5px;
			cursor: pointer;
			text-align: center;
			/*background: #92C7C7;
			border-radius: 50%;*/
			-moz-border-radius:50%;
			-webkit-border-radius:50%;
			line-height: 35px;
			width: 35px;
			height: 35px;
			-webkit-transition: all 0.3s;
		    -moz-transition: all 0.3s;
		    -ms-transition: all 0.3s;
		    -o-transition: all 0.3s;
		    transition: all 0.3s;
		}
		a.btn-close i{
			color: rgba(0, 0, 0, .4);
		}
		.btn-close:hover{
			animation: fa-spin-fast .5s ease-in-out;
			-moz-animation:fa-spin-fast .5s ease-in-out;
			-webkit-animation: fa-spin-fast .5s ease-in-out;
		}
		@-webkit-keyframes fa-spin-fast {
		    0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@-moz-keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		@-o-keyframes fa-spin-fast{
			 0% {
		        -webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		    }
		    100% {
		        -webkit-transform: rotate(359deg);
		        transform: rotate(359deg);
		    }
		}
		.fa-lg{
			font-size: 20px;
			color: #878;
		}
		.fa-times{
			color: #888;
		}
		.gallery li{
			margin: 10px 10px 10px 15px;
		}
		.quotes p{
			color: rgba(203,202,202,.8);
			padding: 10px;
			margin: 10px 10px 0 10px;
			animation: fadeInUp .8s ease-in-out;
		}

/* ----- bar graph ----- */

section {
  display: inline-block;
  width: 10%;
  margin: 50px 0;
  text-align: center;
  min-width: 320px;
  position: relative;
}

.tooltip {
  position: absolute;
  background: #eee;
  padding: 3px;
  font-weight: 100;
  font-size: 12px;
  border-radius: 2px;
  border: 1px solid  #ddd;
  bottom: 100%;
  left: 50%;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #e86210;
}
.tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #e86210;
  display: inline-block;
  margin-right: 5px;
}
.model-2 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #2DABD8;
}
.model-2 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #2DABD8;
  display: inline-block;
  margin-right: 5px;
}
.model-3 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #3C3C3C;
}
.model-3 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #3C3C3C;
  display: inline-block;
  margin-right: 5px;
}
.model-4 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #FFBF00;
}
.model-4 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #FFBF00;
  display: inline-block;
  margin-right: 5px;
}
.model-5 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #930801;
}
.model-5 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #930801;
  display: inline-block;
  margin-right: 5px;
}
.model-6 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #9c88f7;
}
.model-6 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #9c88f7;
  display: inline-block;
  margin-right: 5px;
}
.model-7 .tooltip:after {
  content: "" attr(tooltip) "";
  margin-left: 3px;
  color: #9B9B9B;
}
.model-7 .tooltip:before {
  content: '';
  width: 8px;
  height: 8px;
  background: #9B9B9B;
  display: inline-block;
  margin-right: 5px;
}
.graph {
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 22px;
  line-height: 280px;
  font-weight: 600;
  border-radius: 150px 150px 0 0;
  overflow: hidden;
  color: #0ff;
}
.graph:before, .graph:after {
  content: '';
  width: 300px;
  height: 150px;
  border: 50px solid #0ff;
  border-top: none;
  position: absolute;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  border-radius: 0 0 300px 300px;
  -webkit-animation: demo 2s;
  animation: demo 2s;
  left: 0;
  top: 100%;
  z-index: 5;
}
.graph:after {
  z-index: 3;
  border-color: rgba(0, 0, 0, 0.15);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.graph:hover:before {
  opacity: .8;
  cursor: pointer;
}
.graph:hover + .tooltip {
  bottom: 105%;
  opacity: 1;
}

/*.multi-graph {
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  color: #fff;
  font-size: 22px;
  line-height: 280px;
  font-weight: 600;
}
.multi-graph:before {
  content: '';
  width: 300px;
  height: 150px;
  border: 50px solid rgba(0, 0, 0, 0.15);
  border-bottom: none;
  position: absolute;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  border-radius: 300px 300px 0 0;
  left: 0;
  top: 0;
}
.multi-graph .graph {
  position: absolute;
  top: 0;
  left: 0;
}
.multi-graph .graph:after {
  background: #eee;
  border: medium none;
  border-radius: 2px;
  color: #333;
  font-weight: 200;
  content: "" attr(data-name) "";
  display: inline-block;
  font-size: 12px;
  height: 20px;
  left: 50%;
  line-height: 20px;
  padding: 0 5px;
  top: 50px;
  z-index: 0;
  -ms-transform: rotate(0deg) translateX(-50%);
  -webkit-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
  width: auto;
  opacity: 0;
}
.multi-graph .graph:hover:after {
  opacity: 1;
  top: 70px;
}*/

.model-1 .graph {
  color: #e86210;
}
.model-1 .graph:before {
  -ms-transform: rotate(162deg);
  -webkit-transform: rotate(162deg);
  transform: rotate(162deg);
  border-color: #e86210;
}

section.model-2 .graph {
  color: #2DABD8;
}
section.model-2 .graph:before {
  -ms-transform: rotate(108deg);
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  border-color: #2DABD8;
}
section.model-3 .graph {
  color: #3C3C3C;
}
section.model-3 .graph:before {
  -ms-transform: rotate(126deg);
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
  border-color: #3C3C3C;
}
section.model-4 .graph {
  color: #FFBF00;
}
section.model-4 .graph:before {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  border-color: #FFBF00;
}
section.model-5 .graph {
  color: #930801;
}
section.model-5 .graph:before {
  -ms-transform: rotate(108deg);
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  border-color: #930801;
}
section.model-6 .graph {
  color: #9c88f7;
}
section.model-6 .graph:before {
  -ms-transform: rotate(126deg);
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
  border-color: #9c88f7;
}
section.model-7 .graph {
  color: #9B9B9B;
}
section.model-7 .graph:before {
  -ms-transform: rotate(144deg);
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
  border-color: #9B9B9B;
}
/*section.model-3 .javaScript:before {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  border-color: #FEDA3E;
}
section.model-3 .jQuery:before {
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(1200deg);
  transform: rotate(1200deg);
  border-color: #0669AD;
}

section.model-3 .graph {
  color: #2DABD8;
}

section.model-4 .graph {
  color: #2DABD8;
}
section.model-4 .graph:before {
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  border-color: #2DABD8;
}*/

@-webkit-keyframes demo {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes demo {
  0% {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}


/*Downloaded from https://www.codeseek.co/exiege/jerms-portfolio-page-ybzXKJ */
var profile = {
  info: {
    first_name: "Jeremy Earl",
    middle_name: "Aclan",
    last_name: "Bañagale",
    title: "Web Developer",
    bday: "March 10 1997",
    age: "20",
    location: "**********************",
    mobile: "+639**********",
    email: "************@gmail.com"

  },
  work: {
    company: "Big Outsource",
    company_location: "***********",
    company_title: '*************',
    period: '*************',
    icon: 'https://res.cloudinary.com/exiege/image/upload/v1493965823/BOS_jnjevp.png'
  }
};

var skills = [{
  name: "Git",
  url: 'https://git-scm.com/'
}, {
  name: "Pug.js",
  url: 'https://pugjs.org/api/getting-started.html'
}, {
  name: "Express.js",
  url: 'https://expressjs.com/'
}, {
  name: "Node.js",
  url: 'https://expressjs.com/'
}, {
  name: "Angular.js",
  url: 'https://angularjs.org/'
}, {
  name: "SASS",
  url: 'http://sass-lang.com/'
}, {
  name: "Stylus",
  url: 'http://stylus-lang.com/'
}];

var schools = [{
  name: "Laguna State Polytechnic University",
  icon: 'https://res.cloudinary.com/exiege/image/upload/v1493965826/lspu_gk8adj.jpg',
  sy: "2013-2017"
}, {
  name: "CREST Christian School",
  icon: '',
  sy: "2009-2013"
}, {
  name: "Don Enrique Bautista Elementary School",
  icon: 'https://res.cloudinary.com/exiege/image/upload/v1493965824/debes_yhf0mw.jpg',
  sy: "2006-2009"
}, {
  name: "San Pablo Central School",
  icon: 'https://res.cloudinary.com/exiege/image/upload/v1493965824/central_iyhcen.png',
  sy: "2006-2009"
}];

$(function(){
		$('.list li:first-child').click(function(){
			 window.setTimeout(function() {
           $('.profile').slideToggle();
                }, 300);
		});
		$('.list li:nth-child(2)').click(function(){
			 window.setTimeout(function(){
			$('.educ').slideToggle();
					},300);
		});
		$('.list li:nth-child(3)').click(function(){
			 window.setTimeout(function(){
			$('.skills').slideToggle();
					},300);
		});
		$('.list li:nth-child(4)').click(function(){
			 window.setTimeout(function(){
			$('.workexp').slideToggle();
				}, 300);
		});
		$('.list li:nth-child(5)').click(function(){
			 window.setTimeout(function(){
			$('.social').slideToggle();
				}, 300);
		});
		$('.btn-close').click(function(){
			$('.list-content').hide(300);
		});
	});

angular.module("portfolioPage", ["ngMaterial", "ngResource", "ngAnimate", "ui.router"])
  .controller('appCtrl', function($scope, $mdDialog) {
    $scope.info = profile.info;
    $scope.work = profile.work;
  })

  .controller('themeCtrl', function($scope) {
    $scope.theme = 'default';
  })

  .controller('skillsCtrl', function($scope) {
    $scope.skills = skills;
  })
	.controller('schoolsCtrl', function($scope) {
    $scope.schools = schools;
  })

  .controller('languageCtrl', function($scope) {
    $scope.languages = languages;
  })

  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('amber')
      .accentPalette('blue-grey');
    $mdThemingProvider.alwaysWatchTheme(true);
  });

Comments