template.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<!--link href="template.css" rel="stylesheet"-->
	<style>
		html {
		  height: 100%;
		}

		body {
		  overflow: hidden;
	  
		{{#theme.background-color}}
			background-color: {{theme.background-color}};
		{{/theme.background-color}}
		{{^theme.background-color}}
			background-color: #277185;
		{{/theme.background-color}}
	
		  background-size: cover;
		  position: fixed;
		  padding: 0px;
		  margin: 0px;
		  width: 100%;
		  height: 100%;
		  font: normal 14px/1.618em "Roboto", sans-serif;
		  -webkit-font-smoothing: antialiased;
		}

		body:before {
		  content: "";
		  height: 0px;
		  padding: 0px;
		  border: 130em solid #313440;
		  position: absolute;
		  left: 50%;
		  top: 100%;
		  z-index: 2;
		  display: block;
		  -webkit-border-radius: 50%;
		  border-radius: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
		  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
		}

		h1,
		h2 {
		  font-weight: 500;
		  margin: 0px 0px 5px 0px;
		}

		h1 {
		  font-size: 24px;
		}

		h2 {
		  font-size: 16px;
		}

		p {
		  margin: 0px;
		}

		.profile-card {
		  background: #FFB300;
		  width: 56px;
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  z-index: 2;
		  overflow: inherit;
		  opacity: 0;
		  margin-top: 70px;
		  -webkit-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		  -webkit-border-radius: 50%;
		  border-radius: 50%;
   		 -webkit-box-shadow: 0px 0px 28px 3px rgba(0,0,0,0.75);
		 -moz-box-shadow: 0px 0px 28px 3px rgba(0,0,0,0.75);
		  box-shadow: 0px 0px 28px 3px rgba(0,0,0,0.75);		  
		  -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
		  animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
		}

		.profile-card header {
		  width: 179px;
		  height: 280px;
		  padding: 40px 20px 30px 20px;
		  display: inline-block;
		  float: left;
		  border-right: 2px dashed #EEEEEE;
		  background: #FFFFFF;
		  color: #000000;
		  margin-top: 50px;
		  opacity: 0;
		  text-align: center;
		  -webkit-animation: moveIn 1s 3.1s ease forwards;
		  animation: moveIn 1s 3.1s ease forwards;
		}

		.profile-card header h1 {
		  color: #FF5722;
		}

		.profile-card header a {
		  display: inline-block;
		  text-align: center;
		  position: relative;
		  margin: 25px 30px;
		}

		.profile-card header a > img {
		  width: 120px;
		  max-width: 100%;
		  -webkit-border-radius: 50%;
		  border-radius: 50%;
		  -webkit-transition: -webkit-box-shadow 0.3s ease;
		  transition: box-shadow 0.3s ease;
		  -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
		  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
		}

		.profile-card header a:hover > img {
		  -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
		  box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
		}

		.profile-card .profile-bio {
		  width: 175px;
		  height: 180px;
		  display: inline-block;
		  float: right;
		  padding: 50px 20px 30px 20px;
		  background: #FFFFFF;
		  color: #333333;
		  margin-top: 50px;
		  text-align: center;
		  opacity: 0;
		  -webkit-animation: moveIn 1s 3.1s ease forwards;
		  animation: moveIn 1s 3.1s ease forwards;
		}

		.profile-social-links {
		  width: 218px;
		  display: flex;
		  justify-content:space-around;
		  float: right;
		  margin: 0px;
		  padding: 15px 20px;
		  background: #FFFFFF;
		  margin-top: 50px;
		  text-align: center;
		  opacity: 0;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-animation: moveIn 1s 3.1s ease forwards;
		  animation: moveIn 1s 3.1s ease forwards;
		}

		.profile-social-links li {
		  list-style: none;
		  margin: 0px 0px 0px 0px;
		  padding: 0px;
		  float: left;
		  width: 25%;
		  text-align: center;
		}

		.profile-social-links li a {
		  display: inline-block;
		  font-size:1.4rem;
		  color: #0067ff;
		  width: 24px;
		  height: 24px;
		  padding: 6px;
		  position: relative;
		  overflow: hidden!
			ant;
		  -webkit-border-radius: 50%;
		  border-radius: 50%;
		}
		.profile-social-links li a:hover {
		  color: hotpink;
		}

		.profile-social-links li a i {
		  position: relative;
		  z-index: 1;
		}

		.profile-social-links li a img,
		.profile-social-links li a svg {
		  width: 24px;
		}

		@-webkit-keyframes init {
		  0% {
			width: 0px;
			height: 0px;
		  }
		  100% {
			width: 56px;
			margin-top: 0px;
			opacity: 1;
		  }
		}

		@keyframes init {
		  0% {
			width: 0px;
			height: 0px;
		  }
		  100% {
			width: 56px;
			margin-top: 0px;
			opacity: 1;
		  }
		}

		@-webkit-keyframes puff {
		  0% {
			top: 100%;
			height: 0px;
			padding: 0px;
		  }
		  100% {
			top: 50%;
			height: 100%;
			padding: 0px 100%;
		  }
		}

		@keyframes puff {
		  0% {
			top: 100%;
			height: 0px;
			padding: 0px;
		  }
		  100% {
			top: 50%;
			height: 100%;
			padding: 0px 100%;
		  }
		}

		@-webkit-keyframes borderRadius {
		  0% {
			-webkit-border-radius: 50%;
		  }
		  100% {
			-webkit-border-radius: 0px;
		  }
		}

		@keyframes borderRadius {
		  0% {
			-webkit-border-radius: 50%;
		  }
		  100% {
			border-radius: 0px;
		  }
		}

		@-webkit-keyframes moveDown {
		  0% {
			top: 50%;
		  }
		  50% {
			top: 40%;
		  }
		  100% {
			top: 100%;
		  }
		}

		@keyframes moveDown {
		  0% {
			top: 50%;
		  }
		  50% {
			top: 40%;
		  }
		  100% {
			top: 100%;
		  }
		}

		@-webkit-keyframes moveUp {
		  0% {
			background: #FFB300;
			top: 100%;
		  }
		  50% {
			top: 40%;
		  }
		  100% {
			top: 50%;
			background: #E0E0E0;
		  }
		}

		@keyframes moveUp {
		  0% {
			background: #FFB300;
			top: 100%;
		  }
		  50% {
			top: 40%;
		  }
		  100% {
			top: 50%;
			background: #E0E0E0;
		  }
		}

		@-webkit-keyframes materia {
		  0% {
			background: #E0E0E0;
		  }
		  50% {
			-webkit-border-radius: 4px;
		  }
		  100% {
			width: 440px;
			height: 280px;
			background: #FFFFFF;
			-webkit-border-radius: 4px;
		  }
		}

		@keyframes materia {
		  0% {
			background: #E0E0E0;
		  }
		  50% {
			border-radius: 4px;
		  }
		  100% {
			width: 440px;
			height: 280px;
			background: #FFFFFF;
			border-radius: 4px;
		  }
		}

		@-webkit-keyframes moveIn {
		  0% {
			margin-top: 50px;
			opacity: 0;
		  }
		  100% {
			opacity: 1;
			margin-top: -20px;
		  }
		}

		@keyframes moveIn {
		  0% {
			margin-top: 50px;
			opacity: 0;
		  }
		  100% {
			opacity: 1;
			margin-top: -20px;
		  }
		}

		@-webkit-keyframes scaleIn {
		  0% {
			-webkit-transform: scale(0);
		  }
		  100% {
			-webkit-transform: scale(1);
		  }
		}

		@keyframes scaleIn {
		  0% {
			transform: scale(0);
		  }
		  100% {
			transform: scale(1);
		  }
		}

		@-webkit-keyframes ripple {
		  0% {
			transform: scale3d(0, 0, 0);
		  }
		  50%,
		  100% {
			-webkit-transform: scale3d(1, 1, 1);
		  }
		  100% {
			opacity: 0;
		  }
		}

		@keyframes ripple {
		  0% {
			transform: scale3d(0, 0, 0);
		  }
		  50%,
		  100% {
			transform: scale3d(1, 1, 1);
		  }
		  100% {
			opacity: 0;
		  }
		}

		@media screen and (min-aspect-ratio: 4/3) {
		  body {
			background-size: cover;
		  }
		  body:before {
			width: 0px;
		  }
		  @ -webkit-keyframes puff {
			0% {
			  top: 100%;
			  width: 0px;
			  padding-bottom: 0px;
			}
			100% {
			  top: 50%;
			  width: 100%;
			  padding-bottom: 100%;
			}
		  }
		  @keyframes puff {
			0% {
			  top: 100%;
			  width: 0px;
			  padding-bottom: 0px;
			}
			100% {
			  top: 50%;
			  width: 100%;
			  padding-bottom: 100%;
			}
		  }
		}

		@media screen and (min-height: 480px) {
		  .profile-card header {
			width: auto;
			height: auto;
			padding: 30px 20px;
			display: block;
			float: none;
			border-right: none;
		  }
		  .profile-card .profile-bio {
			width: auto;
			height: auto;
			padding: 15px 20px 30px 20px;
			display: block;
			float: none;
		  }
		  .profile-social-links {
			width: 100%;
			display: flex;
			float: none;
		  }
		  @ -webkit-keyframes materia {
			0% {
			  background: #E0E0E0;
			}
			50% {
			  -webkit-border-radius: 4px;
			}
			100% {
			  width: 280px;
			  height: 440px;
			  background: #FFFFFF;
			  -webkit-border-radius: 4px;
			}
		  }
		  @keyframes materia {
			0% {
			  background: #E0E0E0;
			}
			50% {
			  border-radius: 4px;
			}
			100% {
			  width: 280px;
			  /*height: 440px;*/
			  background: #FFFFFF;
			  border-radius: 4px;
			}
		  }
		}
	</style>
<aside class="profile-card">
  <header>
    <!-- here’s the avatar -->
    <a target="_blank" href="#">
      <img src="{{basics.picture_fullpath}}" class="hoverZoomLink">
    </a>

    <!-- the username -->
    <h1>{{basics.name}}</h1>
    <!-- and role or location -->
    <h2>{{basics.label}}</h2>

  </header>

  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">

    <p>{{&basics.summary}}</p>

  </div>

  <!-- some social links to show off -->
  <ul class="profile-social-links">
{{#basics.facebook}}
    <li>
      <a target="_blank" href="{{basics.facebook}}">
        <i class="fa fa-facebook"></i>
      </a>
    </li>
{{/basics.facebook}}
{{#basics.twitter}}
    <li>
      <a target="_blank" href="{{basics.twitter}}">
        <i class="fa fa-twitter"></i>
      </a>
    </li>
{{/basics.twitter}}
{{#basics.github}}
    <li>
      <a target="_blank" href="{{basics.github}}">
        <i class="fa fa-github"></i>
      </a>
    </li>
{{/basics.github}}
  </ul>
</aside>