mayor updates for cv

src/scss/main.scss

@@ -1,5 +1,5 @@
 $primary: #fea500;
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 $icomoon-font-path: "../font";
 @import "icons/style";
 
@@ -30,8 +30,8 @@ header {
   }
 
   .profile-thumb {
-    height: 200px;
-    width: 200px;
+    height: 300px;
+    width: 300px;
     margin: 0 auto;
     border-radius: 50%;
     background-color: #fff;
@@ -88,7 +88,7 @@ section {
     }
 
     .first-block {
-      width: 40%;
+      width: 30%;
       display: inline-block;
       float: left;
       color: #000;
@@ -96,7 +96,7 @@ section {
     }
 
     .second-block {
-      width: 60%;
+      width: 70%;
       display: inline-block;
       color: rgba(0, 0, 0, 0.5);
     }
@@ -155,8 +155,22 @@ section {
       position: relative;
       border-radius: 4px;
 
+      .duration {
+        display: block;
+        font-size: 16px;
+        font-weight: normal;
+        color: #aaaaaa;
+      }
+
       .timeline-title {
         margin-top: 0;
+
+        .degree {
+          display: block;
+          font-size: 20px;
+          font-weight: bold;
+          color: $primary;
+        }
       }
 
       .company {
@@ -194,12 +208,17 @@ section {
   border-radius: 4px;
 }
 
+.feature-left {
+  color: #000 !important;
+  text-decoration: none !important;
+}
+
 .icon {
   display: flex;
   text-align: center;
   width: 100px;
   height: 100px;
-  background: #000;
+  background: #fff;
   margin: 0 auto 20px;
   border-radius: 50%;
 }
@@ -228,8 +247,6 @@ section {
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
-    //font-size: 18px;
-    //font-weight: 500;
     color: #000;
     display: flex;
     flex-direction: column;
@@ -255,31 +272,53 @@ section {
   }
 
   .circle .left .progress {
+    transform: rotate(180deg);
     z-index: 1;
-    animation: left 200ms linear both;
-  }
-
-  @keyframes left {
-    100% {
-      transform: rotate(180deg);
-    }
   }
 
   .circle .right {
     transform: rotate(180deg);
     z-index: 3;
-
   }
 
-  .circle .right .progress {
-    animation: right 160ms linear both;
-    animation-delay: 200ms;
+  .circle .right .progress-95 {
+    transform: rotate(162deg);
   }
 
-  @keyframes right {
-    100% {
-      transform: rotate(144deg);
-    }
+  .circle .right .progress-90 {
+    transform: rotate(144deg);
+  }
+
+  .circle .right .progress-85 {
+    transform: rotate(126deg);
+  }
+
+  .circle .right .progress-80 {
+    transform: rotate(108deg);
+  }
+
+  .circle .right .progress-75 {
+    transform: rotate(90deg);
+  }
+
+  .circle .right .progress-70 {
+    transform: rotate(72deg);
+  }
+
+  .circle .right .progress-65 {
+    transform: rotate(54deg);
+  }
+
+  .circle .right .progress-60 {
+    transform: rotate(36deg);
+  }
+
+  .circle .right .progress-55 {
+    transform: rotate(18deg);
+  }
+
+  .circle .right .progress-50 {
+    transform: rotate(0deg);
   }
 }
 
@@ -301,6 +340,54 @@ section {
       height: 5px;
       display: block;
       box-shadow: none;
+
+      &.progress-95 {
+        width: 95%;
+      }
+
+      &.progress-90 {
+        width: 90%;
+      }
+
+      &.progress-85 {
+        width: 85%;
+      }
+
+      &.progress-80 {
+        width: 80%;
+      }
+
+      &.progress-75 {
+        width: 75%;
+      }
+
+      &.progress-70 {
+        width: 70%;
+      }
+
+      &.progress-65 {
+        width: 65%;
+      }
+
+      &.progress-60 {
+        width: 60%;
+      }
+
+      &.progress-55 {
+        width: 55%;
+      }
+
+      &.progress-50 {
+        width: 50%;
+      }
+
+      &.progress-45 {
+        width: 45%;
+      }
+
+      &.progress-40 {
+        width: 40%;
+      }
     }
   }
 }
@@ -346,14 +433,17 @@ section {
       transform: translate3d(0, 15px, 0);
     }
   }
-  &:hover{
-    .desc{
+
+  &:hover {
+    .desc {
       opacity: 1;
-      h3{
+
+      h3 {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
       }
-      span{
+
+      span {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
       }