Add videos. Bug still remains : video locked

assets/css/main.css

@@ -782,8 +782,13 @@ a.back-to-top:hover, a.back-to-top:focus {
 }
 
 #portfolios .mix {
-  padding: 0px 10px;
+  padding: 4px;
-	margin: 3px;
+	margin: 0px;
+	height: 200px;
+}
+
+#portfolios .portfolio-item {
+  margin: auto;
 }
 
 #portfolios .portfolio-item .shot-item {
@@ -1185,3 +1190,7 @@ a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
 .full{
   background-color: #00b4d9;
 }
+
+video {
+  padding: 0px 7px;
+}

settings.yml

@@ -2,7 +2,7 @@
  name: "Geoffrey Montel"
  age: "30 ans"
  country: "France"
- city: "Possit, Île de France"
+ city: "Poissy, Île de France"
  mail: "geoffrey.montel@jserv.fr"
  phone: "+ (33) -six- 98 67 44 25"
  cv_url: "https://github.com/moutonjr/CV_LaTeX/releases/latest/download/CV_Montel.pdf"
@@ -61,202 +61,185 @@
   - "network"
   - "bigdata"
   - "security"
-  - "misc"
+  - "business"
+  - "vendors"
 
  skills:
-   Storm: 
+   - name: "Storm" 
-     logo: "assets/img/Storm.jpg"
+     logo: "assets/img/icons/Storm.jpg"
      tags: "opensource bigdata"
      score: 5 
-   Kafka: 
+   - name: "Kafka" 
-     logo: "assets/img/Kafka.jpg"
+     logo: "assets/img/icons/Kafka.jpg"
      tags: "opensource bigdata"
      score: 5 
-   Spark: 
+   - name: "Spark" 
-     logo: "assets/img/Spark.jpg"
+     logo: "assets/img/icons/Spark.png"
      tags: "opensource bigdata"
      score: 2 
-   Metron: 
+   - name: "Metron" 
-     logo: "assets/img/Metron.jpg"
+     logo: "assets/img/icons/Metron.png"
      tags: "opensource bigdata"
      score: 2
-   Elasticsearch: 
+   - name: "Elasticsearch" 
-     logo: "assets/img/Elasticsearch.jpg"
+     logo: "assets/img/icons/Elasticsearch.png"
      tags: "opensource bigdata"
      score: 5 
-   Kibana: 
+   - name: "Kibana" 
-     logo: "assets/img/Kibana.jpg"
+     logo: "assets/img/icons/Kibana.png"
      tags: "opensource bigdata"
      score: 5 
-   Logstash: 
+   - name: "Hadoop" 
-     logo: "assets/img/Logstash.jpg"
+     logo: "assets/img/icons/Hadoop.png"
+     tags: "opensource bigdata"
+     score: 2 
+   - name: "CEPH" 
+     logo: "assets/img/icons/Ceph.png"
      tags: "opensource bigdata"
      score: 3 
-   Zookeeper: 
+   - name: "BlackStratus" 
-     logo: "assets/img/Zookeeper.jpg"
+     logo: "assets/img/icons/Blackstratus.jpg"
-     tags: "opensource bigdata"
+     tags: "security vendor"
-     score: 4
-   Spot: 
-     logo: "assets/img/Spot.jpg"
-     tags: "opensource bigdata"
-     score: 2 
-   Hadoop: 
-     logo: "assets/img/Hadoop.jpg"
-     tags: "opensource bigdata"
-     score: 2 
-   CEPH: 
-     logo: "assets/img/CEPH.jpg"
-     tags: "opensource bigdata"
-     score: 3 
-   BlackStratus: 
-     logo: "assets/img/BlackStratus.jpg"
-     tags: "security"
      score: 5 
-   QRadar: 
+   - name: "QRadar" 
-     logo: "assets/img/QRadar.jpg"
+     logo: "assets/img/icons/Qradar.png"
-     tags: "security"
+     tags: "security vendor"
      score: 2 
-   Maltego: 
+   - name: "Maltego" 
-     logo: "assets/img/Maltego.jpg"
+     logo: "assets/img/icons/Maltego.png"
      tags: "security"
      score: 
-   Qualys: 
+   - name: "Qualys" 
-     logo: "assets/img/Qualys.jpg"
+     logo: "assets/img/icons/Qualys.png"
-     tags: "security"
+     tags: "security vendor"
      score: 2
-   Checkmarx: 
+   - name: "Checkmarx" 
-     logo: "assets/img/Checkmarx.jpg"
+     logo: "assets/img/icons/Checkmarx.png"
+     tags: "security vendor"
+     score: 2 
+   - name: "TheHive" 
+     logo: "assets/img/icons/TheHive.png"
      tags: "security"
      score: 2 
-   TheHive: 
+   - name: "Wireguard" 
-     logo: "assets/img/Hive.jpg"
+     logo: "assets/img/icons/Wireguard.png"
-     tags: "security"
+     tags: "infrastructure network opensource"
-     score: 2 
+     score: 4 
-   Metasploit: 
+   - name: "Yunohost" 
-     logo: "assets/img/Metasploit.jpg"
+     logo: "assets/img/icons/Yunohost.png"
-     tags: "security"
-     score: 2
-   KVM: 
-     logo: "assets/img/KVM.jpg"
      tags: "infrastructure opensource"
      score: 5 
-   Docker: 
+   - name: "NetData" 
-     logo: "assets/img/Docker.jpg"
+     logo: "assets/img/icons/NetData.png"
+     tags: "infrastructure opensource"
+     score: 2 
+   - name: "KVM" 
+     logo: "assets/img/icons/KVM.png"
+     tags: "infrastructure opensource"
+     score: 5 
+   - name: "Docker" 
+     logo: "assets/img/icons/Docker.png"
      tags: "infrastructure opensource"
      score: 3 
-   LXC: 
+   - name: "Openstack" 
-     logo: "assets/img/LXC.jpg"
+     logo: "assets/img/icons/Openstack.png"
-     tags: "infrastructure opensource"
-     score: 5 
-   Openstack: 
-     logo: "assets/img/Openstack.jpg"
      tags: "infrastructure opensource"
      score: 3
-   Ansible: 
+   - name: "Ansible" 
-     logo: "assets/img/Ansible.jpg"
+     logo: "assets/img/icons/Ansible.png"
      tags: "infrastructure opensource"
      score: 5 
-   Chef: 
+   - name: "Chef" 
-     logo: "assets/img/Chef.jpg"
+     logo: "assets/img/icons/Chef"
      tags: "infrastructure opensource"
      score: 2 
-   Puppet: 
+   - name: "Puppet" 
-     logo: "assets/img/Puppet.jpg"
+     logo: "assets/img/icons/Puppet.png"
      tags: "infrastructure opensource"
      score: 4 
-   Saltstack: 
+   - name: "Linux" 
-     logo: "assets/img/Saltstack.jpg"
+     logo: "assets/img/icons/Linux.png"
-     tags: "infrastructure opensource"
-     score: 1
-   Linux: 
-     logo: "assets/img/Linux.jpg"
      tags: "infrastructure opensource"
      score: 5 
-   Windows: 
+   - name: "Windows" 
-     logo: "assets/img/Windows.jpg"
+     logo: "assets/img/icons/Windows.png"
      tags: "infrastructure"
      score: 3 
-   BSD: 
+   - name: "BSD" 
-     logo: "assets/img/BSD.jpg"
+     logo: "assets/img/icons/FreeBSD.png"
      tags: "infrastructure opensource"
      score: 3 
-   BIND9: 
+   - name: "Bind9"
-     logo: "assets/img/BIND9.jpg"
+     logo: "assets/img/icons/Bind9.png"
      tags: "infrastructure opensource"
      score: 5
-   OpenLDAP: 
+   - name: "OpenLDAP" 
-     logo: "assets/img/OpenLDAP.jpg"
+     logo: "assets/img/icons/OpenLDAP.gif"
      tags: "infrastructure opensource"
      score: 5 
-   Postfix: 
+   - name: "Postfix" 
-     logo: "assets/img/Postfix.jpg"
+     logo: "assets/img/icons/Postfix.png"
      tags: "infrastructure opensource"
      score: 5 
-   NetFilter: 
+   - name: "NetFilter" 
-     logo: "assets/img/NetFilter.jpg"
+     logo: "assets/img/icons/Netfilter.png"
      tags: "infrastructure opensource"
      score: 5
-   Nginx: 
+   - name: "Nginx" 
-     logo: "assets/img/Nginx.jpg"
+     logo: "assets/img/icons/Nginx.png"
      tags: "infrastructure opensource"
      score: 5 
-   HAProxy: 
+   - name: "Nagios" 
-     logo: "assets/img/HAProxy.jpg"
+     logo: "assets/img/icons/Nagios.jpg"
      tags: "infrastructure opensource"
      score: 5 
-   Nagios: 
+   - name: "Juniper" 
-     logo: "assets/img/Nagios.jpg"
+     logo: "assets/img/icons/Juniper.png"
-     tags: "infrastructure opensource"
-     score: 5 
-   Pacemaker: 
-     logo: "assets/img/Pacemaker.jpg"
-     tags: "infrastructure opensource"
-     score: 5
-   Juniper: 
-     logo: "assets/img/Juniper.jpg"
      tags: "infrastructure network"
      score: 5 
-   ForcePoint: 
+   - name: "ForcePoint" 
-     logo: "assets/img/ForcePoint.jpg"
+     logo: "assets/img/icons/Forcepoint.png"
      tags: "nfrastructure network"
      score: 4 
-   Cisco: 
+   - name: "StormShield" 
-     logo: "assets/img/Cisco.jpg"
+     logo: "assets/img/icons/Stormshield.jpg"
-     tags: "infrastructure network"
-     score: 3 
-   StormShield: 
-     logo: "assets/img/StormShield.jpg"
      tags: "infrastructure network"
      score: 4
-   SourceFire: 
+   - name: "SourceFire" 
-     logo: "assets/img/SourceFire.jpg"
+     logo: "assets/img/icons/Sourcefire.png"
      tags: "infrastructure network"
      score: 2
-   DenyAll: 
+   - name: "DenyAll" 
-     logo: "assets/img/DenyAll.jpg"
+     logo: "assets/img/icons/DenyAll.png"
      tags: "infrastructure network"
      score: 2 
-   Infoblox: 
+   - name: "Infoblox" 
-     logo: "assets/img/Infoblox.jpg"
+     logo: "assets/img/icons/Infoblox.png"
      tags: "infrastructure network"
      score: 2
-   Bash: 
+   - name: "Bash" 
-     logo: "assets/img/Bash.jpg"
+     logo: "assets/img/icons/Bash.jpg"
      tags: "opensource languages"
      score: 5 
-   Powershell: 
+   - name: "Powershell" 
-     logo: "assets/img/Powershell.jpg"
+     logo: "assets/img/icons/Powershell.png"
      tags: "languages"
      score: 3 
-   Python: 
+   - name: "Python" 
-     logo: "assets/img/Python.jpg"
+     logo: "assets/img/icons/Python.png"
      tags: "opensource languages"
      score: 2 
-   Java: 
+   - name: "Java" 
-     logo: "assets/img/Java.jpg"
+     logo: "assets/img/icons/Java.png"
      tags: "languages"
      score: 3 
-   LaTeX: 
+   - name: "LaTeX" 
-     logo: "assets/img/LaTeX.jpg"
+     logo: "assets/img/icons/LaTeX.png"
      tags: "opensource languages"
      score: 4
+ videos:
+   - path: "assets/videos/Découvrez le métier d'Ingénieur Sécurité chez Thales.mp4"
+     type: "video/mp4"
+   - path: "assets/videos/SCAN FIR.mp4"
+     type: "video/mp4"
+

templates/index.njk

@@ -252,7 +252,7 @@
               <a class="filter active btn btn-common" data-filter="all">
                 All 
               </a>
-							{% for skill_tag in skill_tags %}
+							{% for skill_tag in skill_tags%}
 							<a class="filter btn btn-common" data-filter=".{{ skill_tag }}">
 								{{ skill_tag }} 
               </a>
@@ -270,127 +270,38 @@
 								  empty
 								{%- endif -%}
 								{%- endmacro %}
-						{% for skill,item in skills %}
+						{% for skill in skills|sort(true, false, 'score') %}
-						<div class="competency-item mix {{ item.tags }}">
+						<!--<div class="competency-item mix {{ skill.tags }}"
               <div class="image">
-							<!--<img alt="item.logo" src="{{ item.logo }}" />-->
+								<img alt="{{skill.name}}" src="{{ skill.logo }}" />
-							<p>{{skill}}</p>
+							<p>{{skill.name}}</p>
               </div>
-							<div class="score"><!--debug: {{item.score}}-->
+							<div class="score">
-								<span class="score-dot {{dotnodot(item.score,1)}}"></span>
+								<span class="score-dot {{dotnodot(skill.score,1)}}"></span>
-								<span class="score-dot {{dotnodot(item.score,2)}}"></span>
+								<span class="score-dot {{dotnodot(skill.score,2)}}"></span>
-								<span class="score-dot {{dotnodot(item.score,3)}}"></span>
+								<span class="score-dot {{dotnodot(skill.score,3)}}"></span>
-								<span class="score-dot {{dotnodot(item.score,4)}}"></span>
+								<span class="score-dot {{dotnodot(skill.score,4)}}"></span>
-								<span class="score-dot {{dotnodot(item.score,5)}}"></span>
+								<span class="score-dot {{dotnodot(skill.score,5)}}"></span>
+              </div>
+						</div>-->
+						<div class="embed-responsive-1by1 col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xl-2 mix {{ skill.tags }}">
+              <div class="text-center portfolio-item">
+                <div class="shot-item">
+									<img src="{{ skill.logo }}" alt="" />
+                  <div class="overlay">
+                    <div class="icons">
+											<a class="lightbox preview" href="{{ skill.logo }}">
+                        <i class="icon-eye"></i>
+                      </a>
+                      <a class="link" href="#">
+                        <i class="icon-link"></i>
+                      </a>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
 						{% endfor %}
-						<!--
-            <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">
-                  <img src="assets/img/gallery/img-1.jpg" alt="" />  
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-1.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix design print">
-              <div class="portfolio-item">
-                <div class="shot-item">
-                  <img src="assets/img/gallery/img-2.jpg" alt=""/> 
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-2.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development">
-              <div class="portfolio-item">
-                <div class="shot-item">
-                  <img src="assets/img/gallery/img-3.jpg" alt=""/> 
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-3.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development design">
-              <div class="portfolio-item">
-                <div class="shot-item">
-                  <img src="assets/img/gallery/img-4.jpg" alt="" /> 
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-4.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix development">
-              <div class="portfolio-item">
-                <div class="shot-item">
-                  <img src="assets/img/gallery/img-5.jpg" alt="" /> 
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-5.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 mix print design">
-              <div class="portfolio-item">
-                <div class="shot-item">
-                  <img src="assets/img/gallery/img-6.jpg" alt=""/>
-                  <div class="overlay">
-                    <div class="icons">
-                      <a class="lightbox preview" href="assets/img/gallery/img-6.jpg">
-                        <i class="icon-eye"></i>
-                      </a>
-                      <a class="link" href="#">
-                        <i class="icon-link"></i>
-                      </a>
-                    </div>
-                  </div>
-                </div>               
-              </div>
-            </div>
-          </div>
-        </div>
-						-->
       </div>
       <!-- Container Ends -->
     </section>
@@ -402,8 +313,14 @@
         <div class="row">
 					<div id="centered-vids">
 					</div>
+						{% for video in videos %}
+						<video height="400" controls>
+							<source src="{{video.path}}" type="{{video.type}}">
+								  Your browser does not support HTML video.
+						</video>
+						{% endfor %}
 					<!-- TODO ajouter ici les recos clients -->
-					<iframe class="scoop-video" width="560" height="315" src="https://www.youtube.com/embed/xlpEFaUlAgs?start=6&end=164&modestbranding=1&rel=0&color=white&showinfo=0&color=blue" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+					<!--<iframe class="scoop-video" width="560" height="315" src="https://www.youtube.com/embed/xlpEFaUlAgs?start=6&end=164&modestbranding=1&rel=0&color=white&showinfo=0&color=blue" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>-->
 					</iframe>
         </div>
       </div>