Adding ompetencies CSS

To be refined

assets/css/main.css

@@ -1134,3 +1134,43 @@ a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
 .navbar-name {
 	color: #ccc;
 }
+/* SECTION FOR COMPETENCIES*/
+.competency-item {
+  border: solid 2px #aaa;
+  border-radius: 20px;
+  width:200px;
+  height:40px;
+  display: flex; /* contexte sur le parent */
+}
+
+.competency-item .image {
+  height:70%;
+  width: 35%;
+  margin: auto 0px;
+  display: flex;
+  overflow:hidden;
+}
+
+.competency-item .image img{
+  height: 100%;
+  overflow:hidden;
+  margin: 0px auto;
+}
+.score{
+  height:70%;
+  width: auto;
+  margin: auto 0px;
+  display: inline flex;
+}
+
+.score-dot{
+  border: solid 3px #7b7b7b;
+  width: 15px;
+  height: 15px;
+  margin: auto 2px;
+  border-radius: 10px;
+}
+
+.full{
+  background-color: #00b4d9;
+}

assets/js/main.js

@@ -7,7 +7,11 @@
     /* 
    MixitUp
    ========================================================================== */
-  $('#portfolio').mixItUp();
+  $('#portfolio').mixItUp({
+		    layout: {
+					        display: 'flex'
+					    }
+	});
 
   /* 
    One Page Navigation & wow js
@@ -91,4 +95,4 @@
 
   });      
 
-}(jQuery));
+}(jQuery));

index.html

@@ -320,7 +320,7 @@
     <section id="portfolios" class="section-padding">
       <!-- Container Starts -->
       <div class="container">        
-        <h2 class="section-title wow flipInX" data-wow-delay="0.4s">My Remarkable Works</h2>
+        <h2 class="section-title wow flipInX" data-wow-delay="0.4s">Panel de compétences</h2>
         <div class="row">          
           <div class="col-md-12">
             <!-- Portfolio Controller/Buttons -->
@@ -343,6 +343,19 @@
 
           <!-- Portfolio Recent Projects -->
           <div id="portfolio" class="row wow fadeInDown" data-wow-delay="0.4s">
+            <div class="competency-item mix print development">
+              <div class="image">
+                <img alt="Splunk" src="https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" />
+              </div>
+              <div class="score">
+                <span class="score-dot full"></span>
+                <span class="score-dot full"></span>
+                <span class="score-dot full"></span>
+                <span class="score-dot full"></span>
+                <span class="score-dot empty"></span>
+              </div>
+            </div>
+						<!--
             <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development print">
               <div class="portfolio-item">
                 <div class="shot-item">
@@ -447,6 +460,7 @@
             </div>
           </div>
         </div>
+						-->
       </div>
       <!-- Container Ends -->
     </section>