7+ JavaScript Resume Templates

This post contains a total of 7+ JavaScript Resume Template Examples with Source Code. All these Resume Templates are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Resume Templates

1. By Naomi Bastian Weatherford

Made by Naomi Bastian Weatherford. Resume with Hover Effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat");
* {
  outline: none;
}

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

html,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: 0.5s;
  background: #ffffff;
  cursor: default;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  transition-duration: 0.3s;
}

ul {
  list-style-type: none;
  padding: 0;
}

h3 {
  color: #ffb300;
  margin: 10px 0;
  text-transform: lowercase;
  font-size: 1.25em;
}

.resume {
  width: 960px;
  background: #1a237e;
  color: #ffffff;
  margin: 20px auto;
  box-shadow: 10px 10px #0e1442;
  position: relative;
  display: flex;
}

.resume .base,
.resume .func {
  box-sizing: border-box;
  float: left;
}

.resume .base > div,
.resume .func > div {
  padding-bottom: 10px;
}

.resume .base > div:last-of-type,
.resume .func > div:last-of-type {
  padding-bottom: 0;
}

.resume .base {
  width: 30%;
  padding: 30px 15px;
  background: #283593;
  color: #ffffff;
}

.resume .base .profile {
  background: #ffb300;
  padding: 30px 15px 40px 15px;
  margin: -30px -15px 45px -15px;
  position: relative;
  z-index: 2;
}

.resume .base .profile::after {
  content: "";
  position: absolute;
  background: #303f9f;
  width: 100%;
  height: 30px;
  bottom: -15px;
  left: 0;
  transform: skewY(-5deg);
  z-index: -1;
}

.resume .base .profile .photo img {
  width: 100%;
  border-radius: 50%;
}

.resume .base .profile .photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.resume .base .profile .fa-rocket {
  font-size: 100px;
  text-align: center;
  margin: auto;
  color: #283593;
}

.resume .base .profile .info {
  text-align: center;
  color: #ffffff;
}

.resume .base .profile .info .name {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 1.75em;
  text-transform: lowercase;
  color: #1a237e;
}

.resume .base .profile .info .job {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 1.5em;
  text-transform: lowercase;
  color: #283593;
}

.resume .base .contact div {
  line-height: 24px;
}

.resume .base .contact div a:hover {
  color: #fdd835;
}

.resume .base .contact div a:hover span::after {
  width: 100%;
}

.resume .base .contact div:hover i {
  color: #fdd835;
}

.resume .base .contact div i {
  color: #ffb300;
  width: 20px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  margin-right: 15px;
  transition-duration: 0.3s;
}

.resume .base .contact div span {
  position: relative;
}

.resume .base .contact div span::after {
  content: "";
  position: absolute;
  background: #fdd835;
  height: 1px;
  width: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.3s;
}

.resume .base .follow .box {
  text-align: center;
  vertical-align: middle;
}

.resume .base .follow .box a {
  display: inline-block;
  vertical-align: text-bottom;
}

.resume .base .follow .box a:hover i {
  background: #fdd835;
  border-radius: 5px;
  transform: rotate(45deg) scale(0.8);
}

.resume .base .follow .box a:hover i::before {
  transform: rotate(-45deg) scale(1.5);
}

.resume .base .follow .box i {
  display: inline-block;
  font-size: 30px;
  background: #ffb300;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  color: #283593;
  margin: 0 10px 10px 10px;
  transition-duration: 0.3s;
}

.resume .base .follow .box i::before {
  transition-duration: 0.3s;
}

.resume .base .follow .box i.fa::before {
  display: block;
}

.resume .func {
  width: 100%;
  padding: 30px;
}

.resume .func:hover > div {
  transition-duration: 0.5s;
}

.resume .func:hover > div:hover h3 i {
  transform: scale(1.25);
}

.resume .func:hover > div:not(:hover) {
  opacity: 0.5;
}

.resume .func h3 {
  transition-duration: 0.3s;
  margin-top: 0;
}

.resume .func h3 i {
  color: #283593;
  background: #ffb300;
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 42px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin-right: 8px;
  transition-duration: 0.3s;
}

.resume .func .work,
.resume .func .edu {
  float: left;
}

.resume .func .work small,
.resume .func .edu small {
  display: block;
  opacity: 0.7;
}

.resume .func .work ul li,
.resume .func .edu ul li {
  position: relative;
  margin-left: 15px;
  padding-left: 25px;
  padding-bottom: 15px;
}

.resume .func .work ul li:hover::before,
.resume .func .edu ul li:hover::before {
  -webkit-animation: circle 1.2s infinite;
          animation: circle 1.2s infinite;
}

.resume .func .work ul li:hover span,
.resume .func .edu ul li:hover span {
  color: #fdd835;
}

@-webkit-keyframes circle {
  from {
    box-shadow: 0 0 0 0px #fdd835;
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}

@keyframes circle {
  from {
    box-shadow: 0 0 0 0px #fdd835;
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}
.resume .func .work ul li:first-of-type::before,
.resume .func .edu ul li:first-of-type::before {
  width: 10px;
  height: 10px;
  left: 1px;
}

.resume .func .work ul li:last-of-type,
.resume .func .edu ul li:last-of-type {
  padding-bottom: 3px;
}

.resume .func .work ul li:last-of-type::after,
.resume .func .edu ul li:last-of-type::after {
  border-radius: 1.5px;
}

.resume .func .work ul li::before,
.resume .func .work ul li::after,
.resume .func .edu ul li::before,
.resume .func .edu ul li::after {
  content: "";
  display: block;
  position: absolute;
}

.resume .func .work ul li::before,
.resume .func .edu ul li::before {
  width: 7px;
  height: 7px;
  border: 3px solid #ffffff;
  background: #ffb300;
  border-radius: 50%;
  left: 3px;
  z-index: 1;
}

.resume .func .work ul li::after,
.resume .func .edu ul li::after {
  width: 3px;
  height: 100%;
  background: #ffffff;
  left: 5px;
  top: 0;
}

.resume .func .work ul li span,
.resume .func .edu ul li span {
  transition-duration: 0.3s;
}

.resume .func .work {
  width: 48%;
  background: #283593;
  padding: 15px;
  margin: 0 4% 15px 0;
}

.resume .func .edu {
  width: 48%;
  background: #283593;
  padding: 15px;
}

.resume .func .skills-prog {
  clear: both;
  background: #283593;
  padding: 15px;
}

.resume .func .skills-prog ul {
  margin-left: 15px;
}

.resume .func .skills-prog ul li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  transition-duration: 0.3s;
}

.resume .func .skills-prog ul li:hover {
  color: #fdd835;
}

.resume .func .skills-prog ul li:hover .skills-bar .bar {
  background: #fdd835;
  box-shadow: 0 0 0 1px #fdd835;
}

.resume .func .skills-prog ul li span {
  display: block;
  width: 120px;
}

.resume .func .skills-prog ul li .skills-bar {
  background: #ffffff;
  height: 2px;
  width: calc(100% - 120px);
  position: relative;
  border-radius: 2px;
}

.resume .func .skills-prog ul li .skills-bar .bar {
  position: absolute;
  top: -1px;
  height: 4px;
  background: #ffb300;
  box-shadow: 0 0 0 #ffb300;
  border-radius: 5px;
}

.resume .func .skills-soft {
  clear: both;
  background: #283593;
  padding: 15px;
  margin: 15px 0 0;
}

.resume .func .skills-soft ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.resume .func .skills-soft ul li {
  position: relative;
}

.resume .func .skills-soft ul li:hover svg .cbar {
  stroke: #fdd835;
  stroke-width: 4px;
}

.resume .func .skills-soft ul li:hover span,
.resume .func .skills-soft ul li:hover small {
  transform: scale(1.2);
}

.resume .func .skills-soft ul li svg {
  width: 95%;
  fill: transparent;
  transform: rotate(-90deg);
}

.resume .func .skills-soft ul li svg circle {
  stroke-width: 1px;
  stroke: #ffffff;
}

.resume .func .skills-soft ul li svg .cbar {
  stroke-width: 3px;
  stroke: #ffb300;
  stroke-linecap: round;
}

.resume .func .skills-soft ul li span,
.resume .func .skills-soft ul li small {
  position: absolute;
  display: block;
  width: 100%;
  top: 52%;
  transition-duration: 0.3s;
}

.resume .func .skills-soft ul li span {
  top: 40%;
}

.resume .func .interests {
  background: #283593;
  margin: 15px 0 0;
  padding: 15px;
}

.resume .func .interests-items {
  box-sizing: border-box;
  padding: 0 0 15px;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.resume .func .interests-items div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.resume .func .interests-items div:hover i {
  transform: scale(1.2);
}

.resume .func .interests-items div:hover span {
  color: #fdd835;
  transition-duration: 0.3s;
}

.resume .func .interests-items div i {
  font-size: 45px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #ffb300;
  transition-duration: 0.3s;
}

.resume .func .interests-items div span {
  display: block;
}
</style>
</head>
<body>
  <div class="resume">
  <div class="base">
    <div class="profile">
      <div class="photo">
        <!--<img src="" /> -->
        <i class="fas fa-rocket"></i>
      </div>
      <div class="info">
        <h1 class="name">Naomi Weatherford</h1>
        <h2 class="job">Frontend Web Designer</h2>
      </div>
    </div>
    <div class="about">
      <h3>About Me</h3>I'm a web designer for Fiserv, specializing in web design, graphic design, and UX. Experienced with the Adobe Creative Suite, responsive design, social media management, and prototyping.
    </div>
    <div class="contact">
      <h3>Contact Me</h3>
      <div class="call"><a href="#"><i class="fas fa-phone"></i><span>123-456-7890</span></a></div>
      <div class="address"><a href="#"><i class="fas fa-map-marker"></i><span>Provo, Utah</span></a>
      </div>
      <div class="email"><a href="#">Email<i class="fas fa-envelope"></i><span>astronaomical</span></a></div>
      <div class="website"><a href="http://astronaomical.com/" target="_blank"> <i class="fas fa-home"></i><span>astronaomical.com</span></a></div>
    </div>
    <div class="follow">
      <h3>Follow Me</h3>
      <div class="box">
        <a href="https://www.facebook.com/astronaomical/" target="_blank"><i class="fab fa-facebook"></i></a>
        <a href="https://www.instagram.com/astronaomical/" target="_blank"><i class="fab fa-instagram "></i></a>
        <a href="https://www.pinterest.com/astronaomical/" target="_blank"><i class="fab fa-pinterest"></i></a>
        <a href="https://www.linkedin.com/in/naomi-weatherford-758385112/" target="_blank"><i class="fab fa-linkedin"></i></a>
        <a href="https://codepen.io/astronaomical/" target="_blank"><i class="fab fa-codepen"></i></a>
        <a href="https://www.behance.net/astronaomical" target="_blank"><i class="fab fa-behance"></i></a>
      </div>
    </div>
  </div>
  <div class="func">
    <div class="work">
      <h3><i class="fa fa-briefcase"></i>Experience</h3>
      <ul>
        <li><span>Technical Consultant -<br>Web Design</span><small>Fiserv</small><small>Apr 2018 - Now</small></li>
        <li><span>Web Designer</span><small>Lynden</small><small>Jan 2018 - Apr 2018</small></li>
        <li><span>Intern - Web Design</span><small>Lynden</small><small>Aug 2017 - Dec 2017</small></li>
      </ul>
    </div>
    <div class="edu">
      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
      <ul>
        <li><span>Bachelor of Science<br>Web Design and Development</span><small>BYU-Idaho</small><small>Jan. 2016 - Apr. 2018</small></li>
        <li><span>Computer Science</span><small>Edmonds Community College</small><small>Sept. 2014 - Dec. 2015</small></li>
        <li><span>High School</span><small>Henry M. Jackson High School</small><small>Jan. 2013 - Jun. 2015</small></li>
      </ul>
    </div>
    <div class="skills-prog">
      <h3><i class="fas fa-code"></i>Programming Skills</h3>
      <ul>
        <li data-percent="95"><span>HTML5</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="90"><span>CSS3 & SCSS</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="60"><span>JavaScript</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="50"><span>jQuery</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="40"><span>JSON</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="55"><span>PHP</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="40"><span>MySQL</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="skills-soft">
      <h3><i class="fas fa-bezier-curve"></i>Software Skills</h3>
      <ul>
        <li data-percent="90">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Illustrator</span><small></small>
        </li>
        <li data-percent="75">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Photoshop</span><small></small>
        </li>
        <li data-percent="85">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>InDesign</span><small></small>
        </li>
        <li data-percent="65">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Dreamweaver</span><small></small>
        </li>
      </ul>
    </div>
    <div class="interests">
      <h3><i class="fas fa-star"></i>Interests</h3>
      <div class="interests-items">
        <div class="art"><i class="fas fa-palette"></i><span>Art</span></div>
        <div class="art"><i class="fas fa-book"></i><span>Books</span></div>
        <div class="movies"><i class="fas fa-film"></i><span>Movies</span></div>
        <div class="music"><i class="fas fa-headphones"></i><span>Music</span></div>
        <div class="games"><i class="fas fa-gamepad"></i><span>Games</span></div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
      <script>
(function () {
  $(".skills-prog li").
  find(".skills-bar").
  each(function (i) {
    $(this).
    find(".bar").
    delay(i * 150).
    animate(
    {
      width:
      $(this).
      parents().
      attr("data-percent") + "%" },

    1000,
    "linear",
    function () {
      return $(this).css({
        "transition-duration": ".5s" });

    });

  });

  $(".skills-soft li").
  find("svg").
  each(function (i) {
    var c, cbar, circle, percent, r;
    circle = $(this).children(".cbar");
    r = circle.attr("r");
    c = Math.PI * (r * 2);
    percent = $(this).
    parent().
    data("percent");
    cbar = (100 - percent) / 100 * c;
    circle.css({
      "stroke-dashoffset": c,
      "stroke-dasharray": c });

    circle.delay(i * 150).animate(
    {
      strokeDashoffset: cbar },

    1000,
    "linear",
    function () {
      return circle.css({
        "transition-duration": ".3s" });

    });

    $(this).
    siblings("small").
    prop("Counter", 0).
    delay(i * 150).
    animate(
    {
      Counter: percent },

    {
      duration: 1000,
      step: function (now) {
        return $(this).text(Math.ceil(now) + "%");
      } });


  });
}).call(this);
    </script>
</body>
</html>

2. By joshmantis

Made by joshmantis. Resume Design with Darkmode and Popup Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Arimo:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700,200,100,300' rel='stylesheet' type='text/css'>
<style>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

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

body {
  background: #E6E4E7;
  font-family: "Arimo", sans-serif;
  color: #444;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

h2, h3, h4, h5, h6 {
  margin: 0;
  margin-bottom: 12px;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 22px;
}
@media screen and (max-width: 600px) {
  h4 {
    font-size: 16px;
  }
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

a {
  text-decoration: none;
  font-family: inherit;
}

.link--white {
  color: #1FC1AD;
}

.main {
  border-radius: 3px;
  background: white;
  margin: 48px auto;
  /* height:800px; */
  width: 96%;
  box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
  transition: all 250ms ease-in-out;
  transform: translate(0, 0) scale(0.5);
  opacity: 0;
}
@media screen and (min-width: 600px) {
  .main {
    width: 88%;
  }
}
@media screen and (min-width: 1024px) {
  .main {
    width: 70%;
  }
}

.main.in-focus {
  box-shadow: -48px 48px 48px 0px rgba(0, 0, 0, 0.1);
  transition: all 250ms ease-in-out;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

.resume__header {
  overflow: hidden;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #201E21;
  background: linear-gradient(90deg, #232526 10%, #414345 90%);
  padding: 88px 12px;
}
@media screen and (max-width: 600px) {
  .resume__header {
    padding: 72px 12px;
  }
}
.resume__header h2, .resume__header h3, .resume__header h4, .resume__header a {
  color: white;
  /*font-family: 'BenchNine', sans-serif;*/
}
.resume__header h2 {
  font-size: 48px;
  position: absolute;
  top: 64px;
}
@media screen and (max-width: 600px) {
  .resume__header h2 {
    font-size: 24px;
    top: 60px;
  }
}
.resume__header h2 span {
  font-weight: 100;
}
.resume__header h3 {
  position: absolute;
  top: 116px;
  font-weight: 100;
  font-size: 20px;
}
@media screen and (max-width: 600px) {
  .resume__header h3 {
    font-size: 14px;
    top: 90px;
  }
}
.resume__header h4 {
  position: absolute;
  bottom: 14px;
  left: 12px;
  margin: 0;
  font-size: 18px;
}
@media screen and (max-width: 600px) {
  .resume__header h4 {
    font-size: 16px;
    bottom: 16px;
  }
}
.resume__header a {
  font-size: 24px;
}
.resume__body {
  padding: 12px;
}
.resume__section {
  border: 1px solid #999;
  margin-bottom: 24px;
  padding: 24px;
}

.list {
  list-style-type: none;
}
.list--inline-block {
  margin: 0;
}
.list--inline-block__item {
  display: inline-block;
  color: red !important;
  margin-left: 12px;
}

.absolute-b-r {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.relative {
  position: relative;
}

.btn--page {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

.skills {
  /*text-align:center;*/
}
.skills__heading {
  /*text-align:left;*/
}
.skills__item {
  display: inline-block;
  padding: 12px;
  /* height:44px; */
  width: 46%;
  vertical-align: top;
  background: #444444;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  margin-bottom: 24px;
  margin-right: 3%;
  border-radius: 2px;
  cursor: pointer;
  border-left: 4px solid #444444;
  transition: all 250ms ease-in-out;
}
.skills__item:hover {
  border-left: 4px solid #1FC1AD;
  transition: all 250ms ease-in-out;
}
@media screen and (min-width: 470px) {
  .skills__item {
    width: 29%;
  }
}
@media screen and (min-width: 600px) {
  .skills__item {
    width: 29%;
  }
}
.skills__info {
  position: fixed;
  background: #FFF;
  /*border:12px solid #1FC1AD;*/
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 32px 24px;
  font-size: 16px;
  line-height: 1.5;
  transform: scale(0);
  transition: all 250ms ease-in-out;
}
@media screen and (min-width: 600px) {
  .skills__info {
    padding: 48px 96px;
    font-size: 20px;
    line-height: 1.75;
  }
}

.skills__info.is--visible {
  transform: scale(1);
  transition: all 250ms ease-in-out;
  z-index: 100;
}

.skills__dd {
  display: inline;
  width: 0;
  margin: 0;
}

.skills__dd.is--visible {
  width: auto;
}

.education, .experience {
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 24px;
  margin-bottom: 12px;
  position: relative;
}
.education ul, .experience ul {
  line-height: 2;
  list-style-type: initial;
  padding-left: 18px;
}
@media screen and (max-width: 600px) {
  .education ul, .experience ul {
    line-height: 1.4;
  }
}

.experience__more {
  background: #ffffff;
  padding: 12px;
  position: relative;
  line-height: 1.5;
  border-left: 4px solid #FFF;
  max-height: 44px;
  min-height: 44px;
  overflow: hidden;
  transition: all 200ms ease-in-out;
  margin-top: 12px;
}
.experience__more h4, .experience__more p {
  transform: scale(0);
  transition: all 200ms ease-in-out;
}
.experience__more h4 {
  display: inline-block;
  max-width: 70%;
}

.experience__more.is--expanded {
  background: #f1f1f1;
  border-left: 4px solid #1FC1AD;
  max-height: 8888px;
  transition: all 200ms ease-in-out;
}
.experience__more.is--expanded h4, .experience__more.is--expanded p {
  transform: scale(1);
  transition: all 200ms ease-in-out;
}

.heading--section {
  background: #f1f1f1;
  border-left: 6px solid #1FC1AD;
  padding: 6px;
}

.btn--more.is--visible {
  transform: scale(1);
  transition: all 250ms ease-in-out;
}

.btn--more {
  transform: scale(0);
  width: 72px;
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  outline: none;
  border: 1px solid #1FC1AD;
  background: #1FC1AD;
  color: white;
  border-radius: 1px;
  padding: 6px 12px;
  font-size: 12px;
  transition: all 100ms ease-in-out;
  margin-bottom: 12px;
}
.btn--more:hover {
  background: #FFF;
  color: #1FC1AD;
  transition: all 200ms ease-in-out;
}
.btn--close {
  position: fixed;
  top: 24px;
  background: none;
  border: none;
  right: 24px;
  font-size: 32px;
}

.location::before {
  color: #1FC1AD;
}

.cn {
  width: 88px;
  position: absolute;
  bottom: -100%;
  left: 84px;
  transition: all 250ms ease-in-out;
}

.cn.is--visible {
  bottom: 0%;
  transition: all 250ms ease-in-out;
}

.color-change {
  background: #444;
  transition: all 250ms ease-in-out;
}

body {
  transition: all 250ms ease-in-out;
}
</style>
</head>
<body>
<main class="main">
  <article>
    <div class="resume__header relative">
      <h2><span>Joshua </span>Flowers</h2>
      <h3>front-end designer / developer</h3>
      <h4 class="ion-location location"> Toronto</h4>
      <img class="cn" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/39856/toronto.svg" alt="Kiwi standing on oval">
      <div style="    background: #121212;
    box-shadow: 1px 0 #2a2a2a;
    display: inline-block;
    margin: 20px 0;
    vertical-align: middle;
                  width: 1px;"></div>
      <ul class="list--inline-block absolute-b-r"> 
        <li class="list--inline-block__item"><a href="http://www.joshmantis.com" class="ion-ios-email-outline"></a></li>
        <li class="list--inline-block__item"><a href="https://codepen.io/joshmantis/" class="ion-social-codepen-outline"></a></li>
        <li class="list--inline-block__item"><a href="https://twitter.com/joshmantis" class="ion-social-twitter-outline"></a></li>
        <li class="list--inline-block__item"><a href="https://www.linkedin.com/in/joshuaflowers" class="ion-social-linkedin-outline"></a></li>
        <li class="list--inline-block__item"><a href="https://www.instagram.com/joshmantis/" class="ion-social-instagram-outline"></a></li>
      </ul>
    </div>
    <div class="resume__body">
      <div class="resume__section">
        <h4 class="heading--section">Tools:</h4>
        <dl class="skills">
          <dt class="skills__item">HTML</dt>
          <dd class="skills__dd">
            <div class="skills__info">
              <h2>HTML</h2>
              <p>As Jen Simmons has so often stated in her podcast<a href="http://thewebahead.net/" class="link--white"> The Web Ahead</a>, I believe that any web project begins with good content oranized and structured with HTML. This helps to put the emphasis on content. Without it, you risk losing the focus of why users are actually accessing your product.</p>
              <p>Before any design is applied, I always write solid HTML.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          </dd>
          <dt class="skills__item">CSS3</dt>
          <div class="skills__info">
              <h2>CSS3</h2>
            <p>I use CSS every day. It's a great tool because of how well it works with HTML elements. CSS allows me to express my creativity in a way that is clean and intuitive for users on both mobile devices and more traditional desktop computers.</p>
            <h4>The Future?</h4>
            <p>Moving forward, I am excited to learn more about how <a href="https://facebook.github.io/react/" class="link--white">react.js</a> injects styles via javascript directly into HTML elements.</p>
            <p>To hear a balanced panal discussion about this, the guys over at The Shop Talk Show have this great <a href="http://shoptalkshow.com/episodes/180-panel-on-inline-styles/" class="link--white">episode</a> of their podcast.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">SASS</dt>
          <div class="skills__info">
              <h2>SASS</h2>
              <p>Pre-processors in general have been great for CSS and while most have a similar feature set, I have found myself going back to SASS again and again, taking advantage of it's powerful mixins, extends, directives and it's ability to let you write in a nested format without it being compiled into nested CSS. Not having to worry about overly complex specifity, working in nested SASS helps me to visualize and write better modularized code.</p>
              <p>Be sure to checkout out <a href="http://sassmeister.com/" class="link--white">SassMeister</a>, an online text editor that lets you code in SASS and see the direct resulting CSS with no fuss. The more advanced the SASS you write, the more useful this tool is.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">JS / jQuery</dt>
          <div class="skills__info">
              <h2>JS / jQuery</h2>
              <p>To me, jQuery is a great UI and UX prototyping tool. Pair it with CSS animations, transitions or transforms and you can bring your designs to life. All my projects leverage this tool is some capacity.</p>
              <p>I also use Javascript to tag html elements with event tags to then track conversion in Google Analytics.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Ruby on Rails</dt>
          <div class="skills__info">
              <h2>Ruby on Rails</h2>
              <p>I've worked on a couple of Rails projects and am familiar with it's asset pipeline as well as it's erb templating system, and it's where I built my first living style-guide and pattern library.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Wordpress</dt>
          <div class="skills__info">
              <h2>Wordpress</h2>
              <p>I have built a couple of custom wordpress themes by leveraging the power custom post types and custom post fields. While some developers have moved away from it, I find that it's still a viable and smart choice for many web projects that need a full-fledged CMS with a tried and tested admin dashboard.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Sketch 3</dt>
          <div class="skills__info">
              <h2>Sketch 3</h2>
              <p>I like starting in Sketch. Usually, I'll pick one module that needs to be built for a project that I think would look and feel great. Once I have that, I start looking at how I can alter it to make other design patterns and modules, constantly iterating until themes and motifs start to emerge and coalesce into an alpha style guide.</p> 
              <p>The resulting Sketch file then becomes my reference as I streamline and harmonize a style guide by using HTML, SASS and jQuery to design in the browser.</p>  
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Photoshop</dt>
          <div class="skills__info">
              <h2>Photoshop</h2>
              <p>Photoshop is powerful and until the advent of Sketch by Boheiming Coding, it was the go to tool for web design. While I'm greatful for this ability of Photoshop, today in my workflow I leverage it for what it was built to be: a photo editor. I love the power and precision of Photoshop and I use it for all my photos.</p>
            <p>Also, because I have experience in the past with Flash, using Photoshop's timeline and keyframe animation interface, I'm able to make interesting animated Gifs.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Illustrator</dt>
          <div class="skills__info">
              <h2>Illustrator</h2>
              <p>I have been using illustrator for almost a decade, and love the pen tool in Illustrator. I find it's the best tool to use when creating logos and icons that need to be proportioned perfectly and completely symmetrical.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">JIRA</dt>
          <div class="skills__info">
              <h2>JIRA</h2>
              <p>I have used JIRA briefly on a couple of projects and love it. I have used other tools such as Asana and Trello, but for software and web projects, JIRA just makes sense. It has such a feature rich tool box and I love the 3rd party plugins and the ability to tie in JIRA to other applications. I'm definitely looking forward to using JIRA more in the future, especially in place of tools like Redmine.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Git</dt>
          <div class="skills__info">
              <h2>Git</h2>
              <p>I use Git for all my projects. I can use it in the terminal or in a GUI such as Sourcetree, a piece of software I love. I had used SVN in the past, but can't see myself ever giving up Git for it.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
          <dt class="skills__item">Grunt / Gulp</dt>
          <div class="skills__info">
            <h2>Grunt / Gulp</h2>
            <p>Grunt, Gulp and Broccoli are a definite must have for me. I don't need to use all three, but using one is a big tool for me in my workflow.</p>
            <p>Currenly, my go-to features for a Javascript task runner include:</p>
            <ul style="list-style-type:initial; padding:0; margin:0; list-style-position:inside;">
              <li>Compiling SASS or LESS</li>
              <li>Minifiying my scripts</li>
              <li>Adding vendor prefixes for cross-browser compatibility</li>
              <li>Live reload (Broswer refreshes each time I save a Sass or JS file)</li>
            </ul>
            <button type="button" class="ion-ios-close btn--close"></button>
          </div>
        </dl>
        
      </div>
      <div class="resume__section">
        
        <h4 class="heading--section">Professional Experience</h4>
        <div class="experience">
          <h5>JMIR Publications</h5>
          <h6>Designer / Developer<h6>
          <h6>2013.9 - Present</h6>
          <ul>
            <li>Fix front-end related bugs on legacy system</li>
            <li>Designed and Revamped company logo and updated typography</li>
            <li>Used HTML5, CSS3 and JavaScript to construct many interactive prototypes</li>
            <li>Converted high-traffic html templates into html5 with a focus on css3 and responsive design. This resulted in nearly doubling the amount of user sessions and more than doubled page views.</li> 
            <li>Decreased the bounce rate from 70% to 38%.</li>
            <li>Designed all print materials for the company.</li>
            <li>Responsible for the hiring and onboarding of all new technical team members.</li>
          </ul>
          
            <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about JMIR Publications</h4>
              <p>At JMIR Publications, I have to wear many hats. From designing and maintaining the brand identity to dreaming up a new UI and even writing Javasript or attending a conference to promote the company and it's open-access publishing, each day brings a new challenge.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
        
        <div class="experience">
          <h5>MobEnglish</h5>
          <h6>Designer / Developer<h6>
          <h6>2011.8 - Present</h6>
          <ul>
            <li>Design and maintain website Layout</li>
            <li>Design and develop interactive ESL lesson plans</li>
            <li>Upload new blog posts / lesson plans</li>
          </ul>
          
          <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about MobEnglish</h4>
              <p>MobEnglish is a one person show: me.</p>
              <p>This website and it's accompanying ESL lesson plans were created to offer people a fresh look and feel when learning to speak English as a 2nd language.</p>
              <p>All the lessons are interactive and were made in Apple's iWork Keynote, then converted into interactive .MOV files so that people on non-apple devices could play the lessons.</p>
              <p>Currently, I have stopped all development on these lesson plans as I am re-designing and rebuilding the website into a custom WordPress theme that utilizes <a href="http://lab.hakim.se/reveal-js/#/" class="link--white">Reveal.js</a> a powerful Javascript framework that allows developers to create media-rich slide-decks that are responsive, and fast loading.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
        
         
        <div class="experience">
          <h5>The Guy's Colourful Colours (e-book)</h5>
          <h6>Designer / Developer<h6>
          <h6>2011.8</h6>
          <ul>
            <li>Created concept art and storyboards</li>
            <li>Wrote the story about a colourful adventure</li>
            <li>Developed more than ten interactive activities using iWork Keynote</li>
          </ul>
            <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about The Guy's Colourful Colours</h4>
              <p>The Guy's Colourful Colours is an interactive ebook made in iBooks Author, Keynote and Illustrator. I drew all the original artwork on paper and then turned them into vectors in Illustrator.</p>
              <p>Inside the ebook, there is a story that I wrote and along the way, there are mini activities and games made in Keynote and exported as HTML5 canvas elements that I inserted into iBooks Author.</p>
              <p>More than anything, I built this ebook so that kids could see, read, touch and hear while learning English. To learn more about this book, you can check it out in the iTunes store <a href="https://itunes.apple.com/ca/book/the-guys-colorful-colors/id702457041?mt=13" class="link--white">here</a>.</p>
              <p>In my spare time, I'm working on the next book in the series: The Guy's Amazing Alphabet.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
            
            
        <div class="experience">
          <h5>Ningbo Institute of Education</h5>
          <h6>ESL Instructor<h6>
          <h6>2010.7 - 2012.9</h6>
          <ul>
            <li>Taught spoken English to English Language Majors</li>
            <li>Designed and developed interactive ESL lesson plans</li>
          </ul>
          <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about Ningbo Institute of Education</h4>
              <p>At this college, I was the only native English speaker and because of that, not only did I teach English and develop ESL lesson plans, I was also heavily involved in non-academic activites to give students even more chances to use English outside the classroom.</p>
              <p>My time in China was uniquely rewarding and my experience at this college with it's small class sizes will stay with me forever.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
            
        
        <div class="experience">
          <h5>Wanli University</h5>
          <h6>ESL Instructor<h6>
          <h6>2009.7 - 2010.6</h6>
          <ul>
            <li>Taught spoken English to English Language Majors</li>
            <li>Designed and developed interactive ESL lesson plans</li>
            <li>Created and moderated written exams for all English majors.</li>
          </ul>
             <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about Wanli University</h4>
              <p>Wanli is a very big university and had a large team of teachers, with both native English teachers and others who are of Chinese nationality.</p>
              <p>Because of this, I was able to share and learn various teaching techniques and tricks which helped both inside and outside the classroom.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
            
            
      </div>
      <div class="resume__section">
        <h4 class="heading--section">Education</h4>
        <div class="education">
          <h5>Humber College</h5>
          <h6>Certificate in Web Design Development and Maintenance<h6>
          <h6>2013</h6>
          <h6>Areas of Study:</h6>
          <ul>
            <li>HTML and CSS</li>
            <li>Adobe Creative Suite</li>
            <li>Javascript</li>
            <li>PHP</li>
            <li>Wordpress / Joomla</li>
          </ul>
          <div class="experience__more">
              <button type="button" class="btn--more js--btn-more is--visible">MORE</button>
              <button type="button" class="btn--more js--btn-less">LESS</button>
              <h4>More about Humber College</h4>
              <p>My program at Humber College was very intense. It was 9-5 Monday to Friday for 6 months and I learned many things.</p>
              <p>While I had had previous experience with web technologies, the sheer workload of the course helped me to hone these skills and manage tight timelines.</p>
              <p>The result?</p>
              <p>I became stronger and faster in all aspects of web development and it gave me the confidence to keep taking my skills to the next level.</p>
              <p>I am very proud to say that I finished at the top of my class and was offered a chance to come back and join the faculty and teach HTML and CSS to beginner level students.</p>
              <button type="button" class="ion-ios-close btn--close"></button>
            </div>
        </div>
      </div>
    </div>
  </article>
</main>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
      <script>
$(document).ready(function () {
  /* $(".btn--page").click(function(){*/
  $(".main").toggleClass("in-focus");
  /* });*/
  $(".location").hover(function () {
    $(".cn").toggleClass("is--visible");
  });
  $(".skills__item").click(function () {
    $(this).next().toggleClass("is--visible");
    $(this).next().children().toggleClass("is--visible");
    $('body').toggleClass("color-change");
  });
  $(".btn--close").click(function () {
    $(this).parent().toggleClass("is--visible");
    $(this).parent().parent().toggleClass("is--visible");
    $('body').toggleClass("color-change");
  });

  $(".js--btn-more").click(function () {
    $(this).parent().toggleClass("is--expanded");
    $(this).toggleClass("is--visible");
    $(this).next().toggleClass("is--visible");

  });
  $(".js--btn-less").click(function () {
    $(this).parent().toggleClass("is--expanded");
    $(this).toggleClass("is--visible");
    $(this).prev().toggleClass("is--visible");
  });
});
    </script>
</body>
</html>

3. By Kendrick Arnett

Made by Kendrick Arnett. Flexbox Resume with Hover Effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,500italic,400italic,300italic,100italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
html {
  background: linear-gradient(to left, #8e9eab, #efeff0);
  font-size: 1vw;
  font-family: "Roboto";
  font-weight: 300;
  box-sizing: border-box;
}

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

h1, h2, h3, h4 {
  font-family: "Roboto Condensed";
  font-weight: 100;
}

h1, h2, h3 {
  text-transform: uppercase;
}

h1 {
  font-size: 3.0517578125rem;
}

h2 {
  font-size: 1.953125rem;
}

h3 {
  font-size: 1.5625rem;
}

.container {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 2rem auto;
  box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.3);
}

.section {
  padding: 2rem;
}
.section h2:first-of-type {
  margin-top: 0;
}
.section h3:first-of-type {
  margin-top: 0;
}

.row {
  display: flex;
}

.col {
  flex: 1 1 10%;
  min-height: 10vw;
}

.col.col-2 {
  flex: 2 2 20%;
}

.col.col-3 {
  flex: 3 3 30%;
}

.col.col-4 {
  flex: 4 4 40%;
}

.col.col-5 {
  flex: 5 5 50%;
}

.col.col-6 {
  flex: 6 6 60%;
}

.col.col-7 {
  flex: 7 7 70%;
}

.col.col-8 {
  flex: 8 8 80%;
}

.col.col-9 {
  flex: 9 9 90%;
}

.col.col-f {
  flex: 2.25 2.25 22.5%;
}

.avatar {
  background: #fff;
  background-image: url("https://s3.amazonaws.com/uifaces/faces/twitter/felipebsb/128.jpg");
  background-size: cover;
  filter: blur(10px);
  transform: scale(1);
}

.name, .subtitle {
  display: flex;
  align-items: center;
}
.name h1, .name h3, .subtitle h1, .subtitle h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.download, .github {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2f2f2f;
  background: linear-gradient(27deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #313131 0.625rem, transparent 0.625rem), linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737);
  background-color: #292929;
  background-size: 1.25rem 1.25rem;
}
.download svg, .github svg {
  fill: #848484;
  transition: transform 150ms ease-in-out;
  transform: scale(1);
}
.download svg:hover, .github svg:hover {
  transform: scale(1.25);
  transition: transform 150ms ease-in-out;
  z-index: 2;
}

.name {
  background: linear-gradient(27deg, #424242 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #424242 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #4c4c4c 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #484848 0.625rem, transparent 0.625rem), linear-gradient(#484848 25%, #464646 25%, #464646 50%, transparent 50%, transparent 75%, #4e4e4e 75%, #4e4e4e);
  background-color: #404040;
  background-size: 1.25rem 1.25rem;
  color: #efefef;
}

.subtitle {
  background: linear-gradient(27deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #2b2b2b 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #353535 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #353535 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #313131 0.625rem, transparent 0.625rem), linear-gradient(#313131 25%, #2f2f2f 25%, #2f2f2f 50%, transparent 50%, transparent 75%, #373737 75%, #373737);
  background-color: #292929;
  background-size: 1.25rem 1.25rem;
  color: #efefef;
}

.github {
  background: linear-gradient(27deg, #131313 0.3125rem, transparent 0.3125rem) 0 0.3125rem, linear-gradient(207deg, #131313 0.3125rem, transparent 0.3125rem) 0.625rem 0, linear-gradient(27deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0 0.625rem, linear-gradient(207deg, #1f1f1f 0.3125rem, transparent 0.3125rem) 0.625rem 0.3125rem, linear-gradient(90deg, #1a1a1a 0.625rem, transparent 0.625rem), linear-gradient(#1a1a1a 25%, #181818 25%, #181818 50%, transparent 50%, transparent 75%, #212121 75%, #212121);
  background-color: #121212;
  background-size: 1.25rem 1.25rem;
  color: #fff;
}

.wrap-icon {
  width: 4rem;
}

.toc .wrap-icon {
  width: 2.5rem;
  height: 100%;
  margin: 1rem;
}
.toc svg {
  fill: #fff;
}

.toc .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 100ms ease-in-out;
  transform: scale(1);
}
.toc .col svg {
  transform: scale(1);
  transition: transform 100ms ease-in-out;
}
.toc .col:hover {
  transform: scale(1.1);
  transition: transform 100ms ease-in-out;
  z-index: 2;
}
.toc .col:hover svg {
  transform: scale(1.3);
  transition: transform 100ms ease-in-out;
}
.toc .col:after {
  content: attr(data-title);
  color: #fff;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
.toc .col[data-title=home] {
  background-color: #00bd9c;
}
.toc .col[data-title=resume] {
  background-color: #2c97de;
}
.toc .col[data-title=portfolio] {
  background-color: #9c56b8;
}
.toc .col[data-title=contacts] {
  background-color: #e87e03;
}
.toc .col[data-title=feedback] {
  background-color: #e94b35;
}
.toc .col[data-title=blog] {
  background-color: #daa900;
}

.about-me {
  background: #fff;
}
.about-me blockquote {
  border-left: 0.25rem solid #e94b35;
  padding-left: 1rem;
  margin-left: 0;
}
.about-me blockquote .lede {
  color: #e94b35;
  font-weight: 500;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
}
.about-me .soft-skills {
  display: flex;
  justify-content: space-around;
  padding: 0;
  list-style-type: none;
}
.about-me .soft-skills .skill {
  display: flex;
  align-items: top;
  justify-content: center;
  flex-direction: row-reverse;
  width: 30%;
}
.about-me .soft-skills .skill h3 {
  font-weight: 700;
  margin: 0;
}
.about-me .soft-skills .wrap-icon {
  margin: 0;
  margin-right: 1rem;
  width: 3rem;
}

.soft-skills .skill:hover .wrap-icon {
  transform: scale(1);
  fill: #e94b35;
  transition: all 200ms ease;
}

.soft-skills .skill .wrap-icon {
  transform: scale(0.8);
  fill: #a1a1a1;
  transition: all 200ms ease;
}

.the-experienced-roles {
  display: none;
  visibility: hidden;
}

.personal-info {
  background-color: #f3f3f3;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.personal-info .info-lines {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
.personal-info .info-lines ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.personal-info .info-line {
  margin-bottom: 1rem;
}
.personal-info .info-line dt, .personal-info .info-line dd {
  display: inline-block;
  margin: 0;
}
.personal-info .info-line dt {
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 0.5rem;
}

.experience {
  background-color: #9c56b8;
  color: #fff;
}

.jobs, .job-lines {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.jobs .job {
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
}
.jobs .job:before {
  text-transform: none;
  font-weight: 100;
  display: block;
  opacity: 0.6;
  content: attr(data-start-date) " โ€“ " attr(data-end-date);
}
.jobs .job:after {
  text-transform: none;
  font-weight: 100;
  display: block;
  opacity: 0.6;
  content: attr(data-job-title);
}

.professional-skills {
  background-color: #2c97de;
  color: #fff;
}
.professional-skills .skills {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.professional-skills .skills .skill-title {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.professional-skills:hover .outer {
  -webkit-animation: dash 1s ease-in-out forwards;
          animation: dash 1s ease-in-out forwards;
}

.professional-skills .skill {
  display: flex;
  flex-direction: column;
  max-width: 25%;
}
.professional-skills .skill .pie {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.professional-skills .skill svg {
  position: static;
  width: 7rem;
  height: 7rem;
  transform: rotate(-90deg);
  background: transparent;
  border-radius: 50%;
}
.professional-skills .skill circle {
  fill: #fff;
  fill-opacity: 0.2;
  stroke: #fff;
  stroke-width: 32;
}
.professional-skills .skill .outer {
  -webkit-animation: dash 1s ease-in-out forwards;
          animation: dash 1s ease-in-out forwards;
}
.professional-skills .skill .innerCircle {
  fill: #2c97de;
  stroke-width: 0;
  stroke: #2c97de;
  fill-opacity: 1;
}

@-webkit-keyframes dash {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: auto 100;
  }
}

@keyframes dash {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: auto 100;
  }
}
.footer {
  background-color: #424242;
  color: #a1a1a1;
}
.footer .cv ul, .footer .social ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}
.footer .subscribe .input {
  padding: 0.5rem;
  background: transparent;
  border: 2px solid #a1a1a1;
  color: #a1a1a1;
  width: 100%;
}
.footer .subscribe .input:focus {
  outline: 0;
}

.social-icons {
  display: flex;
  justify-content: space-between;
}
.social-icons .social-icon {
  border-radius: 0.125rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #a1a1a1;
}

.typed-cursor {
  font-size: 1.5625rem;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
          animation: blink 0.7s infinite;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col col-3 avatar"></div>
    <div class="col col-6">
      <div class="row">
        <div class="col col-5 name section">
          <h1>Kendrick Arnett</h1>
        </div>
        <div class="col download section">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M14 2v11h2.51L12 18.01 7.49 13H10V2h4zm2-2H8v11H3l9 10 9-10h-5V0zm3 19v3H5v-3H3v5h18v-5h-2z"/>
            </svg>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col col-5 subtitle section">
          <h3>The experienced <span class="the-experienced-role"></span></h3>
          <div class="the-experienced-roles">
            <p>user experience fanatic.</p>
            <p>front-end developer.</p>
            <p>bike commuter.</p>
            <p>A/B tester.</p>
            <p>photographer.</p>
            <p>pattern library enthusiast.</p>
          </div>
        </div>
        <div class="col github section">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.238 1.84 1.238 1.07 1.834 2.806 1.304 3.49.997.108-.776.42-1.306.763-1.605-2.665-.305-5.467-1.334-5.467-5.93 0-1.312.47-2.382 1.236-3.222-.125-.303-.536-1.524.116-3.176 0 0 1.008-.322 3.3 1.23.958-.266 1.984-.4 3.004-.404 1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.236 1.91 1.236 3.22 0 4.61-2.807 5.625-5.48 5.922.43.372.824 1.102.824 2.222v3.293c0 .32.192.694.8.576C20.567 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
            </svg>
          </div>
        </div>
      </div>
      <div class="row toc">
        <div class="col section" data-title="home">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M4 24H2V0h2v24zM22 2H6v12h16l-4-5.97L22 2z"/>
            </svg>
          </div>
        </div>
        <div class="col section" data-title="resume">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="M13.744 8s1.522-8-3.335-8H2v24h20V11c0-3.42-5.247-3.745-8.256-3zM14 19H6v-1h8v1zm4-3H6v-1h12v1zm0-3H6v-1h12v1zM14.568.075C16.77 1.25 20.506 4.958 22 6.955c-1.286-.9-4.044-1.656-6.09-1.178.22-1.468-.186-4.534-1.342-5.702z"/>
            </svg>
          </div>
        </div>
        <div class="col section" data-title="portfolio">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="M12.23 15.5c-6.8 0-10.367-1.22-12.23-2.597V22h24v-8.95c-3.218 2.222-9.422 2.45-11.77 2.45zM14 18.032C14 19.12 13.104 20 12 20s-2-.88-2-1.968V17h4v1.032zM0 9.492V7h24v2.605c0 5.29-24 5.133-24-.114zM9 2c-1.104 0-2 .896-2 2v2h2V4.5c0-.276.224-.5.5-.5h5c.276 0 .5.224.5.5V6h2V4c0-1.104-.896-2-2-2H9z"/>
            </svg>
          </div>
        </div>
        <div class="col section" data-title="contacts">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
               <path d="M17.997 18H6.002L6 17.377c0-1.26.1-1.986 1.588-2.33 1.684-.39 3.344-.736 2.545-2.21C7.767 8.476 9.46 6 12 6c2.49 0 4.225 2.383 1.865 6.84-.775 1.463.826 1.81 2.545 2.208C17.9 15.392 18 16.12 18 17.38l-.003.62zm4.81-2.214c-1.29-.298-2.49-.56-1.908-1.657 1.768-3.343.468-5.13-1.4-5.13-1.266 0-2.25.817-2.25 2.324 0 3.903 2.27 1.77 2.247 6.676h4.5l.003-.463c0-.946-.074-1.493-1.192-1.75zM.003 18h4.5c-.02-4.906 2.247-2.772 2.247-6.676C6.75 9.817 5.765 9 4.5 9c-1.868 0-3.168 1.787-1.398 5.13.58 1.098-.62 1.358-1.91 1.656C.075 16.044 0 16.59 0 17.536L.002 18z"/>
            </svg>
          </div>
        </div>
        <div class="col section" data-title="feedback">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M10.252 23h-3.21c-.612 0-1.157-.427-1.354-1.007L4.098 17H8.71l.918 3.17c.178.553.512 1.042.962 1.41.758.617.27 1.42-.34 1.42zm9.286-21.902c-1.522.617-4.525 3.74-8.252 4.64C10.484 6.835 10 8.617 10 10.582c0 1.86.44 3.553 1.166 4.662 3.94.942 6.303 3.996 8.31 4.67 2.2.743 4.528-3.467 4.524-9.42-.003-5.96-2.47-10.203-4.462-9.397zm1.704 15.472c-.72 1.656-1.987 1.685-2.72 0-.436-1-.73-2.77-.892-3.96h.38c1.174 0 2.125-.954 2.125-2.13s-.95-2.133-2.125-2.133h-.39c.16-1.21.538-2.947.974-3.89.764-1.652 1.94-1.68 2.72 0 1.315 2.837 1.368 8.793-.072 12.113zM8.807 15h-4.37C1.983 15 0 12.953 0 10.5S1.984 6 4.436 6H8.88c-.56 1.3-.876 2.887-.876 4.594 0 1.627.29 3.14.803 4.406z"/>
            </svg>
          </div>
        </div>
        <div class="col section" data-title="blog">
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M12.014 6.54S14.16 2.57 15.49 0L24 8.51c-2.583 1.322-6.556 3.46-6.556 3.46l-5.43-5.43zm-8.517 6.423S2.157 18.217 0 21.567l.827.826 3.967-3.967c.348-.348.57-.8.63-1.288.033-.27.152-.532.36-.74.498-.498 1.306-.498 1.803 0 .498.5.498 1.305 0 1.803-.208.21-.47.33-.74.362-.488.06-.94.28-1.288.63L1.59 23.16l.826.84c3.314-2.133 8.604-3.51 8.604-3.51l4.262-7.838-3.95-3.95-7.837 4.26z"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col col-6 about-me section">
      <h2>About Me</h2>
      <blockquote>
        <p class="lede">Hard-working person on the way to successโ€ฆ</p>
        <p>Customize your website as you want.</p>
      </blockquote>
      <ul class="soft-skills">
        <li class="skill">
          <div>
            <h3>Creative</h3>
            <p>
              Lorem ipsum dolor sit amet
            </p>
          </div>
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M5 8.5C5 7.672 5.672 7 6.5 7S8 7.672 8 8.5c0 .83-.672 1.5-1.5 1.5S5 9.33 5 8.5zm9 .5l-2.52 4L9 11.04 5 17h14l-5-8zm8-4v14H2V5h20zm2-2H0v18h24V3z"/>
            </svg>
          </div>
        </li>
        <li class="skill">
          <div>
            <h3>Self-Motivated</h3>
            <p>
              Lorem ipsum dolor sit amet
            </p>
          </div>
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M5 20v2H3v-2h2zm2-2H1v6h6v-6zm6-1v5h-2v-5h2zm2-2H9v9h6v-9zm6-2v9h-2v-9h2zm2-2h-6v13h6V11zm0-11l-6 1.22 1.716 1.71-6.85 6.732-3-3.002-7.842 7.797 1.41 1.418 6.427-6.39 2.992 2.993 8.28-8.137L21.8 6 23 0z"/>
            </svg>
          </div>
        </li>
        <li class="skill">
          <div>
            <h3>Punctual</h3>
            <p>
              Lorem ipsum dolor sit amet
            </p>
          </div>
          <div class="wrap-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 12V6h-2v8h7v-2h-5z"/>
            </svg>
          </div>
        </li>
      </ul>
    </div>
    <div class="col col-3 personal-info section">
      <h2>Personal Info</h2>
      <dl class="info-lines">
        <ul>
          <li class="info-line">
            <dt>Name:</dt>
            <dd>Kendrick Arnett</dd>
          </li>
          <li class="info-line">
            <dt>Date of Birth:</dt>
            <dd>09/24/1980</dd>
          </li>
          <li class="info-line">
            <dt>Address:</dt>
            <dd>101 Main Street</dd>
          </li>
          <li class="info-line">
            <dt>Phone:</dt>
            <dd>555/555-1234</dd>
          </li>
          <li class="info-line">
            <dt>Email:</dt>
            <dd><a href="#">Email</a></dd>
          </li>
        </ul>
      </dl>
    </div>
  </div>
  <div class="row">
    <div class="col col-3 experience section">
      <h2>Pro. Experience</h2>
      <ul class="jobs">
        <li class="job" data-start-date="12/2010" data-end-date="12/2011" data-job-title="Sr. Awesomeness Engineer">Fancy Company Name</li>
      </ul>
      <ul class="jobs">
        <li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li>
      </ul>
      <ul class="jobs">
        <li class="job" data-start-date="1/2012" data-end-date="12/2012" data-job-title="Ultra Sr. Awesomeness Engineer">Another Fancy Company Name</li>
      </ul>
    </div>
    <div class="col col-6 professional-skills section">
      <h2>Professional Skills</h2>
      <ul class="skills">
        <li class="skill">
          <div class="pie-wrap">
            <div class="pie">90%</div>
          </div>
          <h4 class="skill-title">Prototyping</h4>
          <p>
            Concept of the number one Tunguska event courage of our questions quasar realm of the galaxies. Corpus callosum, Tunguska event, shores of the cosmic ocean rich in mystery the ash of stellar alchemy something incredible is waiting to be known.
          </p>
        </li>
        <li class="skill">
          <div class="pie-wrap">
            <div class="pie">85%</div>
          </div>
          <h4 class="skill-title">Design</h4>
          <p>
            Flatland billions upon billions dispassionate extraterrestrial observer tendrils of gossamer clouds venture, permanence of the stars prime number at the edge of forever explorations, hundreds of thousands star stuff harvesting star light, made in the interiors of collapsing stars?
          </p>
        </li>
        <li class="skill">
          <div class="pie-wrap">
            <div class="pie">70%</div>
          </div>
          <h4 class="skill-title">Development</h4>
          <p>
            Drake Equation Flatland radio telescope quasar, rings of Uranus, something incredible is waiting to be known preserve and cherish that pale blue dot the only home we've ever known realm of the galaxies.
          </p>
        </li>
      </ul>
    </div>
  </div>
  <div class="row footer">
    <div class="col col-f footer-name section">
      <h3>Kendrick Arnett</h3>
      <p>
        Light years inconspicuous motes of rock and gas venture shores of the cosmic ocean brain.
      </p>
    </div>
    <div class="col col-f cv section">
      <h3>CV</h3>
      <ul>
        <li>English</li>
        <li>French</li>
        <li>Spanish</li>
      </ul>
    </div>
    <div class="col col-f subscribe section">
      <h3>Subscribe</h3>
      <input type="text" class="input"/>
    </div>
    <div class="col col-f social section">
      <h3>Follow Me At</h3>
      <ul class="social-icons">
        <li class="social-icon"></li>
        <li class="social-icon"></li>
        <li class="social-icon"></li>
        <li class="social-icon"></li>
        <li class="social-icon"></li>
        <li class="social-icon"></li>
      </ul>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/mattboldt/typed.js/master/dist/typed.min.js'></script>
      <script>
$(function () {
  $('.the-experienced-role').typed({
    stringsElement: $('.the-experienced-roles'),
    loop: true,
    loopCount: false,
    startDelay: 2000,
    backSpeed: 25,
    backDelay: 2000,
    typeSpeed: 25 });

});

function $$(selector, context) {
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
}

$$('.pie').forEach(function (pie) {
  var p = parseFloat(pie.textContent);
  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  var circle = document.createElementNS(NS, "circle");
  var title = document.createElementNS(NS, "title");
  circle.setAttribute("r", 16);
  circle.setAttribute("cx", 16);
  circle.setAttribute("cy", 16);
  circle.setAttribute("stroke-dasharray", p + " 100");
  circle.setAttribute('class', 'outer');
  svg.setAttribute("viewBox", "0 0 32 32");
  title.textContent = pie.textContent;
  pie.textContent = '';
  svg.appendChild(title);
  svg.appendChild(circle);

  var innerCircle = document.createElementNS(NS, "circle");
  innerCircle.setAttribute("class", 'innerCircle');
  innerCircle.setAttribute("r", 14);
  innerCircle.setAttribute("cx", 16);
  innerCircle.setAttribute("cy", 16);
  innerCircle.setAttribute("stroke-dasharray", "100 100");
  svg.appendChild(innerCircle);
  pie.appendChild(svg);
});
    </script>
</body>
</html>
 

4. By David Seyboth

Made by David Seyboth. Personal Resume/Portfolio. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    background-color: #f5f5f5;
}
.wrapper {
  position: relative;
  height: 350px;
  background-color: #f5f5f5;
}
.header {
  height: 300px;
  background-image: url("http://image.dek-d.com/27/0391/4869/119477071");
  background-size: contain;
  transform: rotate(-4deg);
  margin-top: -70px;
  position: absolute;
  top: 0;
  right: -20%;
  left: -20%;
  bottom: 0;
  border: 2px solid #CCD5DB;
}
.round-image{
  border-radius:100%;
  height: 200px; 
  margin: 0 auto;
  top: 150px;
  left: 200px;
  width: 200px; 
  overflow:hidden;
  position: absolute;
  z-index: 1;
  border: 2px solid #CCD5DB;
}
#LineTime{
  position: absolute;
  right: 0;
  width: 60%;
}
.footer{
  margin-left: -64%;
  border-top: 1px solid #E4EAEC;
  width: 160%;
  padding: 10px;
}
.one{
  text-align: center;
  padding: 0px 10px;
}
.Portfolio_title{
  font-size: 30px;
  font-weight: bold;
    width: 300px;
}
.Portfolio_title > p{
  font-weight: lighter;
  font-size: 20px;
  color: #6E6E6E;
}
.portfolio_content{
  padding: 15px 10px;
  width: 300px;
}
#Portfolio{
  padding-left: 25px;
  padding-top: 25px;
  position: absolute;
}
  #centerpixel{
    position: absolute;
    width:100%;
  }
@media screen and (max-width: 990px){
  #centerpixel{
    position: absolute;
    width:100%;
  }
  #Portfolio{
    width: 100%;
  }
  .inner{
    display: table;
    margin: 0 auto;
  }
  .Portfolio_title{
    text-align: center;
  }
  #LineTime{
    margin-top: 300px;
    left: 0;
    width: 100%;
  }
  .footer{
    margin-left: auto;
    font-size: 12px;
    width: 100%;
  }
  .wrapper{
    width: 100%;
  }
  .outer-image{
    width: 50%;
    margin: 0 auto;
  }
  .round-image{
    left: 50%;
    margin-left: -100px;
  }
}
/*Contact form;type=form*/
#mailer{
	height: 320px;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	margin-top: 3px;
}
/*Input name+email;type=text*/
#mailer > .name input, #mailer > .email input{
	max-width: 900px;
	height: 40px;
	width: 100%;
	margin-bottom: 5px;
	border-radius: 5px;
}
/*Input message;type=text*/
#mailer > .text textarea{
	max-width: 900px;
	width: 100%;
	height: 150px;
	margin-bottom: 5px;
	border-radius: 5px;
	resize: none;
}
/*Send button;type=submit*/
#mailer > .submit input{
	width: 150px;
	height: 40px;
	float: right;
	border-radius: 5px;
}
/*Reset button;type=reset*/
#mailer > .reset input{
	width: 150px;
	height: 40px;
	float: left;
	border-radius: 5px;
}
#mailer > .name input, #mailer > .email input, #mailer > .text textarea{
	border: 1px solid #e5e5e5;
}
#mailer > .submit input, #mailer > .reset input{
	color: #6b6b6b;
	border: 1px solid #e5e5e5;
	background-color: #f5f5f5;
 }
 #mailer > .submit input:hover, #mailer > .reset input:hover{
	background-color: #6b6b6b;
	color: #f5f5f5;
 }

/*Mail was sent*/
#wraptheform{
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 910px;
    margin: 0 auto;
    margin-left: -37%;
    margin-bottom: 50px;
    margin-top: -200px;
}
@media screen and (max-width: 990px){
	#wraptheform{
		margin-top: -100px;
		margin-left: 2.5% !important;
		width: 95%;
	}
}
#contactwas{
	color: #a0a0a0;
	display: none;
	font-weight: bold;
	font-size: 30px;
	z-index: 1;
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -172px;
}
#contactform{
	text-align: center;
	color: #6E6E6E;
}
body {
  color: #768390;
  background: #F5F5F5;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3D4351;
  margin-top: 0;
}

a {
  color: #FF6B6B;
}
a:hover {
  color: #ff9a9a;
  text-decoration: none;
}

.container-fluid .row {
  padding: 0 0 4em 0;
}
.container-fluid .row:nth-child(even) {
  background: #F1F4F5;
}

.timelineMAIN-title {
  text-align: center;
  margin-bottom: 60px;
  padding: 3em 0;
  /*border-bottom: 1px solid #E4EAEC;*/
}
.timelineMAIN-title p {
  margin: 0 auto;
  font-size: 16px;
  max-width: 400px;
}

/*==================================
    TIMELINE
==================================*/
/*-- GENERAL STYLES
    ------------------------------*/
.timeline {
  line-height: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.timeline h1,
.timeline h2,
.timeline h3,
.timeline h4,
.timeline h5,
.timeline h6 {
  line-height: inherit;
}
.timeline h3{
  margin-top: 0px;
}

/*----- TIMELINE ITEM -----*/
.timeline-item {
  padding-left: 40px;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}

/*----- TIMELINE INFO -----*/
.timeline-info {
  font-size: 12px;
  font-weight: 350;
  letter-spacing: 3px;
  margin: 0 0 .5em 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: #768390;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}
.timeline-marker:before {
  background: #4AA6C7;
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 3px;
  background: #CCD5DB;
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 3px solid #4AA6C7;
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
  padding-bottom: 40px;
}
.timeline-content p:last-child {
  margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
  padding: 0;
}
.period .timeline-info {
  display: none;
}
.period .timeline-marker:before {
  background: transparent;
  content: "";
  width: 15px;
  height: auto;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: 30px;
  position: absolute;
  border-top: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
  content: "";
  height: 32px;
  top: auto;
}
.period .timeline-content {
  padding: 40px 0 70px;
}
.period .timeline-title {
  margin: 0;
}

/*----------------------------------------------
        MOD: TIMELINE CENTERED
    ----------------------------------------------*/
@media (min-width: 992px) {
  .timeline-centered, .timeline-centered .timeline-item, .timeline-centered .timeline-info, .timeline-centered .timeline-marker, .timeline-centered .timeline-content {
    display: block;
    margin: 0;
    padding: 0;
  }
  .timeline-centered .timeline-item {
    padding-bottom: 40px;
    overflow: hidden;
  }
  .timeline-centered .timeline-marker {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
  }
  .timeline-centered .timeline-info,
  .timeline-centered .timeline-content {
    width: 50%;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item.period .timeline-content {
    float: none;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .timeline-centered .timeline-item.period {
    padding: 50px 0 90px;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 30px;
    bottom: 0;
    top: auto;
  }
  .timeline-centered .period .timeline-title {
    left: auto;
  }
}

/*----------------------------------------------
        MOD: MARKER OUTLINE
    ----------------------------------------------*/
.marker-outline .timeline-marker:before {
  background: transparent;
  border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
  background: #FF6B6B;
}
</style>
</head>
<body>
  <div class="wrapper">
    <div class="outer-image"><img class="round-image" src="https://yt3.ggpht.com/-GhFCaSPC3Ns/AAAAAAAAAAI/AAAAAAAAAAA/lyBDET_Q8lo/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" height="100%"></div>
    <div class="header"></div>
</div>
<div id="centerpixel">
<div id="Portfolio">
<div class="inner">
    <div class="Portfolio_title">
        Max Mustermann <br />
        <p>(Informatik Kaufmann)</p>
    </div>
    <table class="portfolio_content">
        <tr>
            <td>Alter</td>
            <td class="one">:</td>
            <td>37</td>
        </tr>
        <tr>
            <td>Abschluss</td>
            <td class="one">:</td>
            <td>Master of Computer Science</td>
        </tr>
        <tr>
            <td>Schule</td>
            <td class="one">:</td>
            <td>Universit&auml;t Rostock</td>
        </tr>
        <tr>
            <td>Skills</td>
            <td class="one">:</td>
            <td>Photoshop, PHP, JS</td>
        </tr>
        <tr>
            <td>Erfahrung mit</td>
            <td class="one">:</td>
            <td>Management, Gro&szlig;en-Teams</td>
        </tr>
        <tr>
            <td>St&auml;rken</td>
            <td class="one">:</td>
            <td>Team Arbeit, Auge f&uuml;rs Detail</td>
        </tr>
        <tr>
            <td>Schw&auml;chen</td>
            <td class="one">:</td>
            <td>Auge f&uuml;rs Detail, Kaffee</td>
        </tr>
    </table>
</div>
</div>
</div>
<div id="LineTime">
    <div class="container-fluid">

        <div class="row timeline-centered">
            <div class="col-md-12 timelineMAIN-title">
                <ul class="timeline timeline-centered">
                    <li class="timeline-item">
                        <div class="timeline-info">
                            <span>2017</span>
                        </div>
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">MusterFirma</h3>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco..."</p>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <div class="timeline-info">
                            <span>2015</span>
                        </div>
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">MusterFirma</h3>
                            <p>"Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                                eu pede mollis pretium. Pellentesque ut neque."</p>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <div class="timeline-info">
                            <span>2009</span>
                        </div>
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">MusterFirma</h3>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco..."</p>
                        </div>
                    </li>
                    <li class="timeline-item">
                        <div class="timeline-info">
                            <span>2001</span>
                        </div>
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">MusterFirma</h3>
                            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco..."</p>
                        </div>
                    </li>
                    <li class="timeline-item period">
                        <div class="timeline-marker"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<div id="wraptheform">
<div id="contactform"><h4>Thanks for visiting! Leave me a message:</h4><br /></div>    
    <div id="contactwas"><center>Thanks for contacting me!<br/><br/>I will stay in touch.</center></div>

    <form method="post" id="mailer">
        
        <p class="name">
            <input name="name" type="text" placeholder="Name" />
        </p>
        <p class="email">
            <input name="email" type="text" placeholder="Email" />
        </p>
        <p class="text">
            <textarea name="message" placeholder="Comment"></textarea>
        </p>
        <div class="reset">
            <input type="reset" value="RESET" />
        </div>
        <div class="submit">
            <input type="submit" value="SEND" />
        </div>
    </form>
</div>

<div class="footer"><center>This website was designed and developed by <a href="https://daylight.media/" target="_blank">daylight.media</a></center></div>
</div>
  <script src='https://use.typekit.net/bkt6ydm.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
try {Typekit.load({ async: true });} catch (e) {}

$(function () {
  function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
  if (getParameterByName('email') == "success") {
    //make message permanent
    // alert("Contact was made!\nWe will get back to you as soon as possible.");
    document.getElementById("mailer").style.pointerEvents = "none";
    document.getElementById("mailer").style.filter = "blur(2px)";
    document.getElementById("contactwas").style.display = "block";
    //clear url

  }
});
    </script>
</body>
</html>

5. By Lindeun

Made by Lindeun. Resume with Dropmdown Animation. Source

<!DOCTYPE html>
<html lang="en" >

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Share+Tech|Share+Tech+Mono" rel="stylesheet" />
  <title></title>
<style>
body {
    margin: 0;
    font-family: 'Share Tech', sans-serif;
    font-size:16px;
    color: #505050;
    background:#eee;
    overflow-x:hidden;
}

main {
    position:relative;
    padding:7vh 0 10vh;
    opacity:0;
    margin-top:-5px;
}

@media all and (min-width:670px) {
    main { 
        width: 570px;
        margin-left: 10vw;
    }
}

@media all and (max-width:670px) {
    main { margin:0 15px }
}

.wave {
    width:100vw;
    height:150px;
    position:fixed;
    bottom:0;
    fill:#1b7477;
    z-index:-1;
}

#one {
    height:180px;
    fill:#8adbd3;
    width:120vw;
    left:-10vw;
}

h1, h2 {
    position:relative;
    display:flex;
    align-items:center;
    font-family:'Share Tech Mono', monospace;
    line-height: 1em;
    word-spacing:-.1em;
    letter-spacing:-.05em;
    transition:.2s all ease;
    margin-left:10px;
    margin-bottom:15px;
}

h1 span, h2 span { 
    background:rgba(238,238,238,.7);
    padding:5px 7px;
    border-radius:10px;
    box-sizing:border-box;
}
h1, h2:active { color:#51b5ac; }
h1 { font-size:2.2em }
h2 { cursor:pointer }
p:first-child { margin-top:0 }
p:last-child { margin-bottom:0 }

.subtext {
    position:relative;
    border-radius:10px;
    background: white;
    border:1px solid;
    padding:13px;
    line-height:1.5em;
}

.subtext:not(#main) {
    display:none;
}

.subtext ul { margin:0; padding:0 25px; }

.subtext a { 
    color:#0a9; 
    text-decoration:underline;
    cursor:pointer;
    transition:.2s all ease;
}

.subtext a:hover, h2:hover {
    color:#777;
}

.subtext:before {
    content:'';
    position:absolute;
    width:1px;
    background:#bbb;
    left:1.2em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.subtext.coll:before {
    left:1em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.hex:hover {
    transform:rotate(30deg);
}

.hex, .hex:before, .hex:after {
    height:1em;
    width:.59em;
    border:solid;
    border-width:1px 0;
    border-radius:2px;
    box-sizing:border-box;
}

main .hex { 
    position:relative;
    display:inline-block;
    margin-right:.5em;
    transition:.4s all ease;
}

.hex:before, .hex:after {
    content:'';
    position:absolute;
    margin-top:-1px;
    margin-left:;
/*     color:#ccc; */
}

.hex:before { transform:rotate(60deg); }
.hex:after { transform:rotate(-60deg); }

.hex, .hex:before, .hex:after, .subtext {
    border-color:#bbb;
}

.hex.moved {
    transform:rotate(30deg);
}

#hex-holder {
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    z-index:-1;
    pointer-events:none;
    font-size:60px;
}

#hex-holder .hex {
    position:fixed;
}

#uno {
    border-radius:4px;
    border:none;
    background:#5b8b8c;
    transform:rotate(-12deg);
    bottom:30vh;
    left:30px;
}

#uno:before, #uno:after {
    margin-top:0;
}

#hex-holder .hex:before, #hex-holder .hex:after {
    border:inherit;
    border-radius:inherit;
    background:inherit;
}

#dos {
    border-color:#1B7477;
    border-radius:3px;
    border-width:5px 0;
    font-size:100px;
    bottom:12vh;
    right:-20px;
    transform:rotate(7deg);
}

#dos:before, #dos:after {
    margin-top:-5px;
}

#tres { display:none }

#bg {
/*     z-index:100; */
    position:fixed;
    top:0;
    height:100vh;
    width:100vw;
    box-sizing:border-box;
    border:5px solid black;
}
</style>
</head>
<body onload="draw()">
    <canvas id="bg"></canvas>
    <main id="content">
        <h1>
            <div class="hex moved"></div><span>About the Dev</span></h1>
        <div class="subtext" id="main">
            <p>The name's Lin (which is short for Lindeun or Laighlin, depending on where you know me from). I'm a 24-year-old South Asian design student with a tech sort of background and a lot to say about the trends and direction of the contemporary design
                world.</p>
            <p>I wanted to be an engineer for most of my life. By the time I changed my mind about that, my liaison with the applied sciences had drastically altered my worldview already. This still informs much of my work and work ethic - design is no less
                of a science in my eyes than physics or computing. (In other words, I like design as long as I can be a nerd about it.)</p>
        </div>
        <h2>
            <div class="hex"></div><span>Skills</span></h2>
        <div class="subtext coll">
            A good grasp of object-oriented programming and computing-related math as a whole. Proficient in CSS3 and HTML5; making significant inroads into JavaScript and JQuery. Adobe Illustrator is both enjoyable for me and putty in my hands. <i>Putty.</i>            In addition to my knowledge of coding, I also speak five human languages and am in the process of learning a few more.
        </div>
        <h2>
            <div class="hex"></div><span>Hobbies & Interests</span></h2>
        <div class="subtext coll">
            Small indie coding projects (semi-professionally). Music (unprofessionally). Massively multiplayer online games (clumsily). Cooking (hungrily).
        </div>
        <h2>
            <div class="hex"></div><span>Currently Working On</span></h2>
        <div class="subtext coll">
            An accessibility app for Android, a couple of desktop themes for a blogging platform I casually use, and a photography project detailing the interplay of natural and artifical in urban environments.
        </div>
        
        <h2>
            <div class="hex"></div><span>Find Me</span></h2>
        <div class="subtext coll">
            <a>Twitter</a> | <a>Tumblr</a> | <a>Codepen</a> | <a>Behance</a>
        </div>
        
        <h2>
            <div class="hex"></div><span>Contact Me</span></h2>
        <div class="subtext coll">
            <ul>
                <li>Phone: +12 345 678 90</li>
                <li>E-mail: <a><span class="#">Email</a></li>
                <li>Discord: <a>Laighlin#0371</a></li>
            </ul>
        </div>
    </main>
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" class="wave" id="one"><path d="M-13.36,88.98 C168.85,182.73 276.72,-73.84 506.31,79.10 L500.00,150.00 L0.00,150.00 Z"></path></svg>
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" class="wave" id="two"><path d="M-13.36,88.98 C168.85,182.73 276.72,-73.84 506.31,79.10 L500.00,150.00 L0.00,150.00 Z"></path></svg>
    <div id="hex-holder">
        <div class="hex" id="uno"></div>
        <div class="hex" id="dos"></div>
        <div class="hex" id="tres"></div>
    </div>
      <script>
function draw() {
  var canvas = $('canvas')[0];
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(200, 0, 0)';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
    ctx.fillRect(30, 30, 50, 50);
  }
}

$(document).ready(function () {
  // $(document).draw();
  $('#content').animate({
    opacity: 1,
    marginTop: '0' },
  800);
  $('h2').click(function () {
    $(this).next('.subtext').slideToggle('fast');
    $(this).children('.hex').toggleClass('moved');
  });
});
    </script>
</body>
</html>
 

6. By Brian Phillips

Made by Brian Phillips. Modern Resume Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);
body {
  background-color: #1f2426;
  color: #b4dad7;
  font-family: "Bitter", Helvetica;
}

ul li {
  padding-top: .5em;
}

p {
  line-height: 1.8em;
}

h2 {
  border: 2px solid #b4dad7;
  padding: .5em;
  display: inline-block;
}

h3 {
  line-height: .3em;
}

header {
  overflow: hidden;
}
header #twitter {
  float: right;
  margin-top: 45px;
}

.wrap {
  padding: 2em;
}

section {
  width: 950px;
  margin: 0 auto;
}

hr {
  border: 1px solid #b4dad7;
}

.full-qual {
  width: 100%;
  margin: 0 auto;
}

.third-qual {
  width: 70%;
  float: left;
  margin-right: 5%;
}

.quarter-qual {
  width: 25%;
  float: left;
}

.qual {
  margin-bottom: 40px;
}
.qual hr {
  margin: 0 auto;
  width: 100%;
}

.data {
  height: 200px;
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.data .data-item {
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
}
.data .data-item h5 {
  position: absolute;
  bottom: 10px;
  white-space: nowrap;
  border-bottom: 2px solid #b4dad7;
}
.data .data-item span {
  position: absolute;
  bottom: 13px;
  border-left: 2px solid #b4dad7;
}

#item1 {
  z-index: 1;
  right: 0;
  border-left: 400px solid transparent;
  border-right: 400px solid transparent;
  border-bottom: 0px solid #2196a7;
}

#item2 {
  z-index: 5;
  right: 50px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  opacity: .5;
  border-bottom: 0px solid #b4dad7;
}

#item3 {
  z-index: 5;
  left: 60px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 0px solid #2196a7;
}
#item3 h5 {
  position: absolute;
  left: -65px;
}

#item4 {
  z-index: 5;
  left: 150px;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  opacity: .5;
  border-bottom: 0px solid #b4dad7;
}
#item4 h5 {
  position: absolute;
  left: -65px;
}

#item5 {
  z-index: 5;
  left: 300px;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  opacity: .5;
  border-bottom: 0px solid #b4dad7;
}
#item5 h5 {
  text-align: right;
  position: absolute;
  left: -65px;
  bottom: 70px;
}
#item5 span {
  line-height: 80px;
}

#item6 {
  z-index: 5;
  left: 400px;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  opacity: .5;
  border-bottom: 0px solid #b4dad7;
}
#item6 h5 {
  position: absolute;
  bottom: 70px;
}
#item6 span {
  line-height: 80px;
}

#item7 {
  z-index: 10;
  left: 450px;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-bottom: 0px solid #b4dad7;
}
#item7 h5 {
  text-align: right;
  position: absolute;
  left: -67px;
  bottom: 30px;
}
#item7 span {
  line-height: 40px;
}

.years {
  text-align: justify;
}
.years .middot {
  margin: 0 auto;
  font-size: 58px;
  color: #4b5859;
  line-height: 20px;
}
.years .year-list {
  margin-top: -18px;
}
.years * {
  list-style-position: outside;
  padding: 0;
  display: inline;
}
.years span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

.edu .highschool {
  color: #4b5859;
  margin-left: 1em;
}
.edu .schools {
  position: relative;
  height: 100px;
  margin-bottom: .5em;
}
.edu .schools .school-item h5 {
  position: absolute;
  bottom: 10px;
  white-space: nowrap;
  border-bottom: 2px solid #b4dad7;
}
.edu .schools .school-item span {
  position: absolute;
  bottom: 13px;
  border-left: 2px solid #b4dad7;
}

#school1 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-bottom: 62.5px solid #2196a7;
}

#school2 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 250px;
  width: 0;
  height: 0;
  border-left: 175px solid transparent;
  border-right: 175px solid transparent;
  border-bottom: 87.5px solid #b4dad7;
}

.hna {
  position: relative;
}
.hna ul {
  list-style-position: inside;
  padding: 0;
  color: #4b5859;
}
.hna ul ul {
  padding-left: 1em;
}

.sknex {
  clear: both;
  margin-bottom: 2em;
}

.sknex {
  overflow: hidden;
}
.sknex .skills-text {
  float: left;
  width: 28%;
  margin-right: 2%;
  color: #4b5859;
}

.skills-vis {
  float: left;
  width: 70%;
}

#skill1 {
  width: 45%;
  margin-right: 5%;
  float: left;
}
#skill1 #puters .pie {
  background-color: #b4dad7;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}
#skill1 #puters4 {
  background-color: #215961;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}
#skill1 #movies {
  background-color: #307982;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -o-transform: rotate(170deg);
  transform: rotate(170deg);
}
#skill1 #games {
  background-color: #2196a7;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  transform: rotate(160deg);
}
#skill1 #music {
  background-color: #519ca4;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  transform: rotate(110deg);
}
#skill1 #music2 {
  background-color: #519ca4;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

#skill2 {
  width: 45%;
  float: left;
}
#skill2 #puters .pie {
  background-color: #b4dad7;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}
#skill2 #puters4 {
  background-color: #215961;
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}
#skill2 #movies {
  background-color: #307982;
  -webkit-transform: rotate(170deg);
  -moz-transform: rotate(170deg);
  -o-transform: rotate(170deg);
  transform: rotate(170deg);
}
#skill2 #games {
  background-color: #2196a7;
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  transform: rotate(160deg);
}
#skill2 #music {
  background-color: #519ca4;
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  transform: rotate(110deg);
}
#skill2 #music2 {
  background-color: #519ca4;
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}

.skill-breakdown {
  overflow: hidden;
}
.skill-breakdown .pie-container {
  position: relative;
  height: 150px;
  width: 150px;
  margin-right: 10px;
  float: left;
}
.skill-breakdown .pie-container .center {
  position: absolute;
  z-index: 50;
  width: 75px;
  height: 75px;
  top: 25%;
  left: 25%;
  background-color: #1f2426;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.skill-breakdown .pie-container .pie-back {
  background-color: #1f2426;
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.skill-breakdown .pie-container .pie {
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 0px);
}
.skill-breakdown .pie-container .hold {
  position: absolute;
  width: 150px;
  height: 150px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  clip: rect(0px, 150px, 75px, 75px);
}
.skill-breakdown ul {
  margin-left: 150px;
}
</style>
</head>
<body>
  <section>
  <header>
    <h3 id="twitter">@bphillips201</h3>
    <h1>brian phillips</h1>
  </header>
  
  <hr/>
  
  <div class="xp qual full-qual">
    <h2>Experience</h2>
    
    <div class="data">
      <div class="up-arrow data-item" id="item1">
        <h5>Awesome Place</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item2">
        <h5>Awesome Creation</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item3">
        <h5>Cool Place</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item4">
        <h5>Cool Place</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item5">
        <h5>Cool Place</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item6">
        <h5>Cool Place</h5>
        <span>&nbsp;</span>
      </div>
      
      <div class="data-item" id="item7">
        <h5>Major Cool<br/>Place</h5>
        <span>&nbsp;</span>
      </div>
    </div>
    
    <hr/>
    <div class="years">
      
      <ul class="middot">
        <li>&#183;</li>
        <li>&#183;</li>
        <li>&#183;</li>
        <li>&#183;</li>
        <li>&#183;</li>
      </ul>
      <span></span>
      <ul class="year-list">
        <li>2010</li>
        <li>2011</li>
        <li>2012</li>
        <li>2013</li>
        <li>2014</li>
      </ul>
      
      <span></span>
    </div>
  </div> <!-- end first qual -->
  
  <div class="edu qual third-qual">
    <h2>Education</h2>
    <span class="highschool">
       A Really Cool Place - Grad 2006
    </span>

    <div class="wrap">    
      
      
      <div class="schools">
        <div class="up-arrow school-item" id="school1">
          <h5>Awesome School</h5>
          <span>&nbsp;</span>
        </div>
        
        <div class="up-arrow school-item" id="school2">
          <h5>Awesomer School</h5>
          <span>&nbsp;</span>
        </div>
      </div>
      
      <hr/>
      <div class="years"> 
        <ul class="middot">
          <li>&#183;</li>
          <li>&#183;</li>
          <li>&#183;</li>
          <li>&#183;</li>
          <li>&#183;</li>
        </ul>
        <span></span>
        <ul>
          <li>2006</li>
          <li>2008</li>
          <li>2010</li>
        </ul>
      
        <span></span>
      </div>
    </div>
  </div>
  
  <div class="hna qual quarter-qual">
    <h2>Awards &amp; Honors</h2>
      <ul>
        <li>Here's something cool I did
          <ul>
            <li>Here's a bit more info</li>
            <li>...And a bit more</li>
          </ul>
        </li>
        <br/>
        <li>I also did this</li>
      </ul>
  </div>
    
  </div>
  
  <div class="sknex">
    <h2>Skills &amp; Expertise</h2>
    <br/>
    <div class="skills-text">
      <br/>
      <p>
        Here's a basic explaination of the cool things that I can do, including:
      </p>
      
      <ul>
        <li>Make cool stuff</li>
        <li>Make more cool stuff</li>
        <li>That's all</li>
      </ul>
    </div>
    
    <div class="skills-vis">
      <div id="skill1">
        <h3>Adobe Software</h3>
        <hr/>
        <br/>
        <div class="skill-breakdown">
          <div class="pie-container">
            <div class="center"></div>
            <div class="pie-back"></div>
            <div class="hold" id="puters"><div class="pie"></div></div>
            <div class="hold" id="puters4"><div class="pie"></div></div>
            
            <div class="hold" id="movies"><div class="pie"></div></div>
            
            <div class="hold" id="games"><div class="pie"></div></div>
            
            <div class="hold" id="music"><div class="pie"></div></div>
            <div class="hold" id="music2"><div class="pie"></div></div>
            
            <div class="hold" id="tv"><div class="pie"></div></div>
          </div>          
          <div class="pie-legend">
            <ul>
              <li>Testing</li>
            </ul>
          </div>
        </div>
      </div>
      
      <div id="skill2">
        <h3>Tech</h3>
        <hr/>
        <br/>
        
        <div class="skill-breakdown">
          <div class="pie-container">
            <div class="center"></div>
            <div class="pie-back"></div>
            <div class="hold" id="puters"><div class="pie"></div></div>
            <div class="hold" id="puters4"><div class="pie"></div></div>
            
            <div class="hold" id="movies"><div class="pie"></div></div>
            
            <div class="hold" id="games"><div class="pie"></div></div>
            
            <div class="hold" id="music"><div class="pie"></div></div>
            <div class="hold" id="music2"><div class="pie"></div></div>
            
            <div class="hold" id="tv"><div class="pie"></div></div>
          </div>          
          <div class="pie-legend">
            <ul>
              <li>Testing</li>
            </ul>
          </div>
        </div>
      </div>
   </div>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>

$(document).ready(function () {
  $('#item1').animate({
    borderBottomWidth: '200px' }, 1000);
  $('#item2').animate({
    borderBottomWidth: '50px' }, 1000);
  $('#item3').animate({
    borderBottomWidth: '15px' }, 1000);
  $('#item4').animate({
    borderBottomWidth: '37.5px' }, 1000);
  $('#item5').animate({
    borderBottomWidth: '37.5px' }, 1000);
  $('#item6').animate({
    borderBottomWidth: '100px' }, 1000);
  $('#item7').animate({
    borderBottomWidth: '62.5px' }, 1000);
});
    </script>
</body>
</html>
 

7. By XiChen

Made by XiChen. Simple JavaScript Resume. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'>
<link rel='stylesheet' href='https://s.plurk.com/0e89357f530f0a843c68440a020d4eb5.css'>
<style>
@charset "UTF-8";
* {
  outline: none;
}

body, html {
  margin: 0;
  background: #eee;
  font-family: "Ubuntu", "ๅพฎ่ปŸๆญฃ้ป‘้ซ”", sans-serif;
  letter-spacing: 0.65px;
  font-size: 15px;
  color: #555;
  cursor: default;
}

a {
  text-decoration: none;
  color: #555;
  display: block;
  transition-duration: 0.3s;
}

ul {
  list-style-type: none;
  padding: 0;
}

h3 {
  color: #3d405b;
  margin: 10px 0;
  text-transform: uppercase;
  font-size: 18px;
}

.resume {
  width: 870px;
  background: #fbfbfb;
  margin: 20px auto;
  border: 1px solid #bbb;
  box-shadow: 0 0 20px -3px #bbb;
  position: relative;
  display: flex;
}
.resume::before {
  content: "";
  width: 100%;
  height: 6px;
  background: #8d9e78;
  position: absolute;
  bottom: 0;
  left: 0;
}
.resume::after {
  content: "";
  display: block;
  clear: both;
}
.resume .base, .resume .func {
  box-sizing: border-box;
  float: left;
}
.resume .base > div, .resume .func > div {
  padding-bottom: 10px;
}
.resume .base > div:last-of-type, .resume .func > div:last-of-type {
  padding-bottom: 0;
}
.resume .base {
  width: 225px;
  padding: 30px 15px;
  background: rgba(238, 238, 238, 0.6);
}
.resume .base .profile {
  background: #8d9e78;
  padding: 30px 15px 5px 15px;
  margin: -30px -15px 45px -15px;
  position: relative;
  z-index: 2;
}
.resume .base .profile::after {
  content: "";
  position: absolute;
  background: #8d9e78;
  width: 100%;
  height: 30px;
  bottom: -15px;
  left: 0;
  transform: skewY(-5deg);
  z-index: -1;
}
.resume .base .profile .photo img {
  width: 100%;
  border-radius: 50%;
}
.resume .base .profile .info {
  text-align: center;
  color: #fcfcfc;
}
.resume .base .profile .info .name {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: normal;
}
.resume .base .contact div {
  line-height: 24px;
}
.resume .base .contact div a:hover {
  color: #e07a5f;
}
.resume .base .contact div a:hover span::after {
  width: 100%;
}
.resume .base .contact div:hover i {
  color: #e07a5f;
}
.resume .base .contact div i {
  color: #8d9e78;
  width: 20px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  margin-right: 15px;
  transition-duration: 0.3s;
}
.resume .base .contact div span {
  position: relative;
}
.resume .base .contact div span::after {
  content: "";
  position: absolute;
  background: #e07a5f;
  height: 1px;
  width: 0;
  bottom: 0;
  left: 0;
  transition-duration: 0.3s;
}
.resume .base .follow .box {
  text-align: center;
  vertical-align: middle;
}
.resume .base .follow .box a {
  display: inline-block;
  vertical-align: text-bottom;
}
.resume .base .follow .box a:hover i {
  background: #e07a5f;
  border-radius: 5px;
  transform: rotate(45deg) scale(0.8);
}
.resume .base .follow .box a:hover i::before {
  transform: rotate(-45deg) scale(1.5);
}
.resume .base .follow .box i {
  display: inline-block;
  font-size: 30px;
  background: #8d9e78;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  color: #fcfcfc;
  margin: 0 10px 10px 10px;
  transition-duration: 0.3s;
}
.resume .base .follow .box i::before {
  transition-duration: 0.3s;
}
.resume .base .follow .box i.fa::before {
  display: block;
}
.resume .func {
  width: 645px;
  padding: 30px 25px;
}
.resume .func:hover > div {
  transition-duration: 0.3s;
}
.resume .func:hover > div:hover h3 {
  letter-spacing: 1.6px;
}
.resume .func:hover > div:hover h3 i {
  transform: scale(1.2);
}
.resume .func:hover > div:not(:hover) {
  opacity: 0.5;
}
.resume .func h3 {
  transition-duration: 0.3s;
  margin-top: 0;
}
.resume .func h3 i {
  color: #fcfcfc;
  background: #8d9e78;
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 42px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin-right: 8px;
  transition-duration: 0.3s;
}
.resume .func .work, .resume .func .edu {
  float: left;
}
.resume .func .work small, .resume .func .edu small {
  display: block;
  opacity: 0.7;
}
.resume .func .work ul li, .resume .func .edu ul li {
  position: relative;
  margin-left: 15px;
  padding-left: 25px;
  padding-bottom: 15px;
}
.resume .func .work ul li:hover::before, .resume .func .edu ul li:hover::before {
  animation: circle 1.2s infinite;
}
.resume .func .work ul li:hover span, .resume .func .edu ul li:hover span {
  color: #e07a5f;
}
@keyframes circle {
  from {
    box-shadow: 0 0 0 0px #3d405b;
  }
  to {
    box-shadow: 0 0 0 6px rgba(61, 64, 91, 0);
  }
}
.resume .func .work ul li:first-of-type::before, .resume .func .edu ul li:first-of-type::before {
  width: 10px;
  height: 10px;
  left: -2px;
}
.resume .func .work ul li:last-of-type, .resume .func .edu ul li:last-of-type {
  padding-bottom: 3px;
}
.resume .func .work ul li:last-of-type::after, .resume .func .edu ul li:last-of-type::after {
  border-radius: 1.5px;
}
.resume .func .work ul li::before, .resume .func .work ul li::after, .resume .func .edu ul li::before, .resume .func .edu ul li::after {
  content: "";
  display: block;
  position: absolute;
}
.resume .func .work ul li::before, .resume .func .edu ul li::before {
  width: 7px;
  height: 7px;
  border: 3px solid #3d405b;
  background: #fcfcfc;
  border-radius: 50%;
  left: 0;
  z-index: 1;
}
.resume .func .work ul li::after, .resume .func .edu ul li::after {
  width: 3px;
  height: 100%;
  background: #3d405b;
  left: 5px;
  top: 0;
}
.resume .func .work ul li span, .resume .func .edu ul li span {
  transition-duration: 0.3s;
}
.resume .func .work {
  width: 42%;
}
.resume .func .edu {
  width: 58%;
}
.resume .func .skills-prog {
  clear: both;
}
.resume .func .skills-prog ul {
  margin-left: 15px;
}
.resume .func .skills-prog ul li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  transition-duration: 0.3s;
}
.resume .func .skills-prog ul li:hover {
  color: #e07a5f;
}
.resume .func .skills-prog ul li:hover .skills-bar .bar {
  background: #e07a5f;
  box-shadow: 0 0 0 1px #e07a5f;
}
.resume .func .skills-prog ul li span {
  display: block;
  width: 120px;
}
.resume .func .skills-prog ul li .skills-bar {
  background: #cdcdcd;
  height: 2px;
  width: calc(100% - 120px);
  position: relative;
  border-radius: 2px;
}
.resume .func .skills-prog ul li .skills-bar .bar {
  position: absolute;
  top: -1px;
  height: 4px;
  background: #8d9e78;
  box-shadow: 0 0 0 #8d9e78;
  border-radius: 5px;
}
.resume .func .skills-soft ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.resume .func .skills-soft ul li {
  position: relative;
}
.resume .func .skills-soft ul li:hover svg .cbar {
  stroke: #e07a5f;
  stroke-width: 4px;
}
.resume .func .skills-soft ul li:hover span, .resume .func .skills-soft ul li:hover small {
  transform: scale(1.2);
}
.resume .func .skills-soft ul li svg {
  width: 95%;
  fill: transparent;
  transform: rotate(-90deg);
}
.resume .func .skills-soft ul li svg circle {
  stroke-width: 1px;
  stroke: #cdcdcd;
}
.resume .func .skills-soft ul li svg .cbar {
  stroke-width: 3px;
  stroke: #8d9e78;
  stroke-linecap: round;
}
.resume .func .skills-soft ul li span, .resume .func .skills-soft ul li small {
  position: absolute;
  display: block;
  width: 100%;
  top: 52%;
  transition-duration: 0.3s;
}
.resume .func .skills-soft ul li span {
  top: 40%;
}
.resume .func .interests-items {
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  border: 1px solid #cdcdcd;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.resume .func .interests-items div {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.resume .func .interests-items div:hover i {
  transform: scale(1.2);
}
.resume .func .interests-items div:hover span {
  color: #e07a5f;
  transition-duration: 0.3s;
}
.resume .func .interests-items div i {
  font-size: 45px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #8d9e78;
  transition-duration: 0.3s;
}
.resume .func .interests-items div i.guitar {
  display: block;
  margin: 0 auto;
}
.resume .func .interests-items div i.guitar svg {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  fill: #8d9e78;
}
.resume .func .interests-items div span {
  display: block;
}
</style>
</head>
<body>
  <div class="resume">
  <div class="base">
    <div class="profile">
      <div class="photo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg"/></div>
      <div class="info">
        <h4 class="name">Kelly Chen</h4><small class="job">Front-end Web Designer</small>
      </div>
    </div>
    <div class="about">
      <h3>About me</h3>Lorem
    </div>
    <div class="contact">
      <h3>Contact</h3>
      <div class="call"><i class="fa fa-phone"></i><span>(+886)900-000-000</span></div>
      <div class="address"><i class="fa fa-map-marker"></i><span>Taipei, Taiwan</span></div>
      <div class="email"><i class="fa fa-envelope"></i><span>[email protected]</span></div>
      <div class="website"><a href="https://codepen.io/xichen" target="_blank"> <i class="fa fa-home"></i><span>codepen.io/xichen</span></a></div>
    </div>
    <div class="follow">
      <h3>Follow</h3>
      <div class="box"><a href="javascript:void(0);"><i class="fa fa-facebook"></i></a><a href="javascript:void(0);"><i class="pif-plurkapp"></i></a><a href="javascript:void(0);"><i class="fa fa-twitter"></i></a><a href="javascript:void(0);"><i class="fa fa-pinterest-p"></i></a><a href="javascript:void(0);"><i class="fa fa-tumblr"></i></a><a href="https://codepen.io/xichen/" target="_blank"><i class="fa fa-codepen"></i></a></div>
    </div>
  </div>
  <div class="func">
    <div class="work">
      <h3><i class="fa fa-briefcase"></i>Work Exrerience</h3>
      <ul>
        <li><span>Front-end Web Designer</span><small>Apr 2016 - Now</small></li>
        <li><span>Design Assistant</span><small>Mar 2015 - Dec 2015</small></li>
        <li><span>Design Assistant (Part-time)</span><small>Oct 2014 - Jul 2015</small></li>
      </ul>
    </div>
    <div class="edu">
      <h3><i class="fa fa-graduation-cap"></i>Education</h3>
      <ul>
        <li><span>Department of Information Management</span><small>Set 2010 - Jun 2014</small></li>
        <li><span>Department of Data Processing</span><small>Set 2007 - Jun 2010</small></li>
      </ul>
    </div>
    <div class="skills-prog">
      <h3><i class="fa fa-code"></i>Programming Skills</h3>
      <ul>
        <li data-percent="92"><span>HTML5 & PUG</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="96"><span>CSS3 & SASS</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="40"><span>JavaScript</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="60"><span>jQuery</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="33"><span>NodeJS</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="52"><span>VueJS</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
        <li data-percent="20"><span>PHP</span>
          <div class="skills-bar">
            <div class="bar"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="skills-soft">
      <h3><i class="fa fa-th-list"></i>Software Skills</h3>
      <ul>
        <li data-percent="94">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Photoshop</span><small></small>
        </li>
        <li data-percent="80">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Illustrator</span><small></small>
        </li>
        <li data-percent="89">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Sublime Text</span><small></small>
        </li>
        <li data-percent="55">
          <svg viewbox="0 0 100 100">
            <circle cx="50" cy="50" r="45"></circle>
            <circle class="cbar" cx="50" cy="50" r="45"></circle>
          </svg><span>Dreamweaver</span><small></small>
        </li>
      </ul>
    </div>
    <div class="interests">
      <h3><i class="fa fa-star"></i>Interests</h3>
      <div class="interests-items">
        <div class="draw"><i class="fa fa-paint-brush"></i><span>Draw</span></div>
        <div class="guitar"><i class="guitar">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 53.858 53.858">
              <path d="M6.901,37.275l9.621,9.62l4.185-4.184l-9.622-9.624L6.901,37.275z M11.085,36.64l6.019,6.019l-0.593,0.618l-6.059-6.003L11.085,36.64z"></path>
              <path d="M36.868,26.667c-0.353-0.705-0.856-1.542-1.346-2.242l-0.366-0.523l-0.088,0.06L50.797,8.235L49.02,6.461L27.277,28.204l0.252,0.754c0.543,1.579,0.152,3.29-1.022,4.464c-1.669,1.668-4.34,1.669-6.009-0.001c-0.784-0.782-1.232-1.9-1.232-3.067c0-1.143,0.438-2.21,1.232-3.005c1.124-1.123,2.881-1.546,4.408-1.018l0.748,0.25L47.396,4.839l-1.836-1.837L29.236,19.276l0.504-0.856l-0.705-0.473c-0.6-0.375-1.231-0.742-1.753-0.872c-0.72-0.227-1.862-0.498-3.213-0.498c-2.318,0-4.399,0.822-6.015,2.377c-1.597,1.533-2.323,3.29-2.875,4.812l-0.069,0.186c-0.09,0.246-0.268,0.732-0.365,0.901c-0.359,0.105-1.264,0.299-1.836,0.366c-2.677,0.509-6.723,1.279-9.691,4.248c-1.125,1.125-3.021,3.529-3.092,7.005c0,3.62,1.996,7.452,5.934,11.39c3.979,3.979,7.791,5.997,11.329,5.997c2.581,0,4.889-1.009,7.066-3.093c2.968-2.968,3.738-7.01,4.247-9.689c0.05-0.199,0.109-0.512,0.171-0.838c0.05-0.26,0.125-0.657,0.176-0.874c0.246-0.135,0.703-0.342,1.166-0.496c1.475-0.536,3.184-1.245,4.818-2.88c3.178-3.372,2.371-7.568,1.879-9.216L36.868,26.667zM24.847,23.653c-2.265-0.469-4.627,0.241-6.185,1.86c-2.652,2.652-2.652,6.967,0,9.621c1.259,1.259,3.001,1.981,4.78,1.981c1.778,0,3.52-0.723,4.779-1.981c1.623-1.621,2.318-3.96,1.86-6.184l3.281-3.282l0.108,0.162c0.365,0.545,0.758,1.166,0.907,1.616c0.554,1.884,0.782,4.579-1.271,6.727c-1.141,1.197-2.512,1.787-3.826,2.248c-1.058,0.377-1.802,0.715-2.28,1.264l-0.095,0.123c-0.237,0.396-0.427,1.125-0.699,2.692c-0.359,2.051-1.027,5.867-3.528,8.429c-1.555,1.556-3.305,2.344-5.2,2.344c-2.856,0.001-6.192-1.793-9.645-5.185c-3.499-3.497-5.244-6.729-5.188-9.615c0-2.383,1.275-4.16,2.345-5.229c2.489-2.488,6.207-3.139,8.424-3.527c1.591-0.265,2.321-0.47,2.786-0.782l0.122-0.106c0.477-0.407,0.74-1.046,1.046-1.786l0.279-0.68c0.464-1.169,0.99-2.494,2.163-3.612c1.147-1.097,2.573-1.652,4.237-1.652c1.184,0,2.166,0.288,2.466,0.376c0.149,0.05,0.391,0.183,0.625,0.312c0.214,0.118,0.432,0.236,0.628,0.324l0.381,0.254L24.847,23.653z"></path>
              <path d="M23.458,26.252c-1.04,0.075-2.044,0.525-2.757,1.238c-0.762,0.762-1.174,1.772-1.161,2.844c0.013,1.041,0.429,2.003,1.161,2.699c0.77,0.771,1.739,1.178,2.804,1.178c1.035,0,2.056-0.43,2.803-1.177c0.77-0.769,1.177-1.739,1.177-2.802c0-1.034-0.43-2.056-1.177-2.802c-0.768-0.77-1.735-1.178-2.842-1.178C23.462,26.252,23.46,26.252,23.458,26.252z M22.477,29.327c0.265-0.265,0.659-0.43,1.027-0.43c0.409,0,0.735,0.136,1.07,0.468c0.198,0.166,0.326,0.529,0.326,0.928c0,0.408-0.137,0.735-0.43,1.028c-0.521,0.518-1.489,0.546-1.993,0C21.927,30.771,21.927,29.876,22.477,29.327z"></path>
              <path d="M53.605,8.544l-0.002,0c-0.109-0.623-0.848-3.106-3.078-5.336c-2.085-2.084-4.648-2.96-5.332-3.079L44.546,0l-0.491,0.491c0,0-5.991,5.991-6.301,6.3l-0.457,0.455l1.775,1.776L45.295,2.8c0.867,0.332,2.211,0.988,3.455,2.184c1.186,1.185,1.848,2.562,2.184,3.455l-6.221,6.223l1.773,1.774l7.248-7.246L53.605,8.544z"></path>
            </svg></i><span>Guitar</span></div>
        <div class="movie"><i class="fa fa-film"></i><span>Movie</span></div>
        <div class="music"><i class="fa fa-headphones"></i><span>Music</span></div>
        <div class="game"><i class="fa fa-gamepad"></i><span>Game</span></div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
      <script>
(function() {
  $('.skills-prog li').find('.skills-bar').each(function(i) {
    $(this).find('.bar').delay(i * 150).animate({
      width: $(this).parents().attr('data-percent') + '%'
    }, 1000, 'linear', function() {
      return $(this).css({
        'transition-duration': '.5s'
      });
    });
  });

  $('.skills-soft li').find('svg').each(function(i) {
    var c, cbar, circle, percent, r;
    circle = $(this).children('.cbar');
    r = circle.attr('r');
    c = Math.PI * (r * 2);
    percent = $(this).parent().data('percent');
    cbar = ((100 - percent) / 100) * c;
    circle.css({
      'stroke-dashoffset': c,
      'stroke-dasharray': c
    });
    circle.delay(i * 150).animate({
      strokeDashoffset: cbar
    }, 1000, 'linear', function() {
      return circle.css({
        'transition-duration': '.3s'
      });
    });
    $(this).siblings('small').prop('Counter', 0).delay(i * 150).animate({
      Counter: percent
    }, {
      duration: 1000,
      step: function(now) {
        return $(this).text(Math.ceil(now) + '%');
      }
    });
  });

}).call(this);
    </script>
</body>
</html>

8. By rajeshdn

Made by rajeshdn. Resume/CV Design with Tabs. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Trade+Winds&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Montserrat';
}

body{
  background: #e7f1ff;
  font-size: 14px;
  color: #a0acb5;
  letter-spacing: 1px;
}

.wrapper{
  width: 100%;
  height: 100%;
}

.wrapper .resume{
  width: 450px;
  margin: 5px auto;
  background: #fff;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.125), -1px -1px 2px rgba(0,0,0,0.125);
}

.resume .profile_info {
  text-align: center;
}

.resume .profile_info .profile_img {
  width: 100px;
  margin: 0 auto 5px;
}

.resume .profile_info .profile_img img {
  width: 100%;
  display: block;
}

.resume .profile_info .profile_data .name {
  font-size: 20px;
  margin-bottom: 5px;
  font-family: 'Trade Winds';
}

.resume .profile_info .profile_data span {
  display: inline-block;
  color: #697c8e;
}

.resume .view_more_btn a{
    display: block;
    background: #5558c9;
    color: #fff;
    padding: 10px 15px;
    width: 125px;
  margin: 10px auto;
  border-radius: 3px;
}

.resume .view_more_btn a:hover {
    background: #7377ff;
}

.resume .title{
    font-size: 16px;
    font-weight: 700;
    color: #5558c9;
    margin-bottom: 15px;
}

.skills ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.skills ul li{
  padding: 0 5px 10px;
  width: 33.32%;
  height: 85px;
}

.skills ul li .skill_item{
  background: #f2f4f5;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  text-align: center;
  padding: 15px 10px;
}

.skills ul li .skill_item .icon{
  background: url("https://i.imgur.com/mDkWgya.png") no-repeat -1px 0;
  width: 20px;
  height: 22px;
  margin: 0 auto 5px;
}

.skills ul li .skill_item.css .icon{
  background-position: 0 -26px;
}

.skills ul li .skill_item.js .icon{
  background-position: 0 -52px;
   height: 24px;
}

.skills ul li .skill_item.photoshop .icon{
  background-position: -1px -79px;
}

.skills ul li .skill_item.angular .icon{
  background-position: -1px -101px;
}

.skills ul li .skill_item.react .icon{
  background-position: -1px -125px;
}

.full_info_wrap .tabs ul{
  display: flex;
  width: 100%;
  height: 36px;
  border: 1px solid #dfe4e6;
  border-radius: 3px;
}

.full_info_wrap .tabs ul li{
  padding: 10px 15px;
  width: 33.34%;
  height: 34px;
  text-align: center;
  border-right: 1px solid #dfe4e6;
  background: #f2f4f5;
  color: #a0acb5;
  font-weight: 600;
  cursor: pointer;
}

.full_info_wrap .tabs ul li:last-child{
  border-right: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.full_info_wrap .tabs ul li.active,
.full_info_wrap .tabs ul li:hover{
  background: #fff;
  color: #5558c9;
}

.full_info{
  padding-top: 15px;
  height: 295px;
  overflow: auto;
}

.info_wrap{
  padding-left: 5px;
}

.info_wrap ul li{
  margin-bottom: 10px;
}

.info_wrap ul li:last-child{
  margin-bottom: 0;
}

.info_wrap .sub_title{
  font-size: 16px;
  font-weight: 600;
  color: #7377ff;
}

.info_wrap .info_item{
  padding-top: 10px;
  padding-left: 15px;
}

.info_wrap .info_item .info_title{
  font-weight: 600;
  margin-bottom: 5px;
}

.info_wrap .info_item .data{
  font-size: 12px;
}

.contact .info_wrap ul li span{
  display: inline-block;
}

.contact .info_wrap ul li span.info_q{
  width: 150px;
}

.contact .info_wrap ul li span.info_a{
  font-weight: 600;
}
</style>
</head>
<body>
  <div class="wrapper">
   <div class="resume">
      
       <div class="profile_info">
            <div class="profile_img">
              <img src="https://i.imgur.com/2QKIaJ5.png" alt="profile_img">
            </div>
            <div class="profile_data">
                <p class="name">Scarlett Rosey</p>
                <span><i class="fas fa-map-marker-alt"></i> Texas, USA</span>
            </div>
            <div class="view_more_btn">
              <a href="#">View More</a>
            </div>
        </div>  
      
       <div class="skills">
	       <div class="title">
	          Skills
	       </div>
	       <ul>
	         <li>
	           <div class="skill_item html">
	             <div class="icon"></div>
	             <div class="text">HTML</div>
	           </div>
	         </li>
	         <li>
	           <div class="skill_item css">
	             <div class="icon"></div>
	             <div class="text">CSS</div>
	           </div>
	         </li>
	         <li>
	           <div class="skill_item js">
	             <div class="icon"></div>
	             <div class="text">Javascript</div>
	           </div>
	         </li>
	         <li>
	           <div class="skill_item photoshop">
	             <div class="icon"></div>
	             <div class="text">Photoshop</div>
	           </div>
	         </li>
	         <li>
	           <div class="skill_item angular">
	             <div class="icon"></div>
	             <div class="text">AngularJS</div>
	           </div>
	         </li>
	         <li>
	           <div class="skill_item react">
	             <div class="icon"></div>
	             <div class="text">ReactJS</div>
	           </div>
	         </li>
	       </ul>
	    </div>
     
        <div class="full_info_wrap">
            <div class="tabs">
                <ul>
                    <li data-li="experience" class="active">Experience</li>
                    <li data-li="education">Education</li>
                    <li data-li="contact">Contact</li>  
                </ul>  
            </div>  
            
            <div class="full_info">
                <div class="full_info_item experience">
                    <div class="title">WORK EXPERIENCE</div>

                    <div class="info_wrap">
                    	<ul>
                    		<li>
                    			<div class="sub_title">
                    				2013 - 2015
                    			</div>
								
								<div class="info_item">
									<div class="info_title">
										Facebook
									</div>
									<div class="data">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aliquam nesciunt tempora fugit, doloremque pariatur.
									</div>
								</div>
                    		</li>
                    		<li>
                    			<div class="sub_title">
                    				2015 - 2017
                    			</div>
								
								<div class="info_item">
									<div class="info_title">
										Amazon Pvt Limited
									</div>
									<div class="data">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aliquam nesciunt tempora fugit, doloremque pariatur.
									</div>
								</div>
                    		</li>
                    		<li>
                    			<div class="sub_title">
                    				2017 - Present
                    			</div>
								
								<div class="info_item">
									<div class="info_title">
										Google
									</div>
									<div class="data">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aliquam nesciunt tempora fugit, doloremque pariatur.
									</div>
								</div>
                    		</li>
                    	</ul>
                    </div>
                </div>  
                <div class="full_info_item education" style="display: none;">
                  <div class="title">EDUCATION</div>

                  <div class="info_wrap">
                    	<ul>
                    		<li>
                    			<div class="sub_title">
                    				2010 - 2013
                    			</div>
								
								<div class="info_item">
									<div class="info_title">
										Web Designing (Texas University)
									</div>
									<div class="data">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
									</div>
								</div>
                    		</li>
                    		<li>
                    			<div class="sub_title">
                    				2000 - 2010 	
                    			</div>
								
								<div class="info_item">
									<div class="info_title">
										Texas International School
									</div>
									<div class="data">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit.
									</div>
								</div>
                    		</li>
                    	</ul>
                    </div>
                </div>  
                <div class="full_info_item contact" style="display: none;">
                  <div class="title">CONTACT</div>

                  <div class="info_wrap">
                  	<ul>
                  		<li>
                  			<span class="info_q">Email</span>
                  			<span class="info_a"><a href="#">Email</a></span>
                  		</li>
                  		<li>
                  			<span class="info_q">Website</span>
                  			<span class="info_a"><a href="#">Email</a></span>
                  		</li>
                  		<li>
                  			<span class="info_q">Phone</span>
                  			<span class="info_a"><a href="#">Phone</a></span>
                  		</li>
                  		<li>
                  			<span class="info_q">Linkedin</span>
                  			<span class="info_a">linkedin.com/rosey1</span>
                  		</li>
                  		<li>
                  			<span class="info_q">Facebook</span>
                  			<span class="info_a">facebook.com/scarlett</span>
                  		</li>
                  		<li>
                  			<span class="info_q">Twitter</span>
                  			<span class="info_a">twitter.com/Srosey</span>
                  		</li>
                  		<li>
                  			<span class="info_q">Instagram</span>
                  			<span class="info_a">instagram.com/rosey124</span>
                  		</li>
                  		<li>
                  			<span class="info_q">Reddit</span>
                  			<span class="info_a">reddit.com/Srosey</span>
                  		</li>
                  	</ul>
                  </div>
                </div>  
            </div> 
        </div>
     
   </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
$(".full_info_wrap .tabs ul li").click(function () {
  $(".full_info_wrap .tabs ul li").removeClass("active");
  $(this).addClass("active");

  var datali = $(this).attr("data-li");

  $(".full_info_item").hide();

  if (datali == "experience") {
    $(".experience").show();
  } else
  if (datali == "education") {
    $(".education").show();
  } else
  if (datali == "contact") {
    $(".contact").show();
  } else
  {
    console.log("Loding...");
  }
});
    </script>
</body>
</html>