Add skill bars

index.html

@@ -37,6 +37,102 @@
           tatii.oxo@gmail.com
         </p>
       </div>
+
+      <div class="sidebar-section">
+        <h5>Skills</h5>
+
+        <h6 class="skill-class">Languages</h6>
+        <div class="skill">
+          <span>Javascript</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 90%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>HTML5</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 90%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>CSS3</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 90%"></div>
+          </div>
+        </div>
+
+        <h6 class="skill-class">Frameworks</h6>
+
+        <div class="skill">
+          <span>AngularJS</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 90%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>Angular 2</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 40%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>React</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 75%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>React Native</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 40%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>Ionic</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 40%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>Bootstrap</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 100%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>SASS</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 80%"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sidebar-section">
+        <h5>Languages</h5>
+        <h6 class="skill-class">The other ones</h6>
+
+        <div class="skill">
+          <span>Spanish</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 100%"></div>
+          </div>
+        </div>
+
+        <div class="skill">
+          <span>English</span>
+          <div class="skill-bar">
+            <div class="skill-knowledge" style="width: 90%"></div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="main-wrapper">
       <h2>Experience</h2>
@@ -44,7 +140,7 @@
       <div class="experience-wrapper">
         <h3>Jampp</h3>
         <h6>
-          Contributor Fullstack Javascript developer<br>
+          Fullstack Javascript developer<br>
           August 2017 - Current
         </h6>
         <p>

styles.css

@@ -113,3 +113,23 @@ ul.technology-list li {
   border-radius: 4px;
 }
 
+.skill {
+  width: 60%;
+  margin-bottom: 10px;
+}
+
+.skill-bar {
+  width: 100%;
+  height: 15px;
+  background-color: #eee;
+}
+
+.skill-knowledge {
+  background-color: #555;
+  height: 15px;
+}
+
+h6.skill-class {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}