Add skills_build macro

Author: benjy8001

templates/cv.html.twig

@@ -125,77 +125,10 @@
         <!-- Title -->
         <h2 class="deep-orange-text text-accent-3">Savoir Faire</h2>
         <!-- # Title End # -->
+
+        {{ macros.skills_build() }}
+
         <div class="skills">
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_cicd.png') }}" class="circle" alt="Git Lab CI/CD">
-                <div class="title_value">Git Lab CI/CD
-                    <span class="value">95%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate pink darken-4" style="width: 95%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_10.png') }}" class="circle" alt="Docker">
-                <div class="title_value">Docker
-                    <span class="value">90%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate purple darken-4" style="width: 90%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_sf.png') }}" class="circle" alt="Symfony 2.8">
-                <div class="title_value">Symfony 2.8
-                    <span class="value">85%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate pink darken-4" style="width: 85%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_sf.png') }}" class="circle" alt="Symfony 4.3">
-                <div class="title_value">Symfony 4.3
-                    <span class="value">85%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate pink darken-4" style="width: 85%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_1.png') }}" class="circle" alt="PHP">
-                <div class="title_value">PHP (5 / 7.2)
-                    <span class="value">95%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate pink darken-4" style="width: 95%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_2.png') }}" class="circle" alt="MySQL">
-                <div class="title_value">MySQL
-                    <span class="value">95%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate blue darken-3" style="width: 95%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
-            <!-- Skill Item -->
-            <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_3.png') }}" class="circle" alt="GIT">
-                <div class="title_value">GIT
-                    <span class="value">90%</span>
-                </div>
-                <div class="progress">
-                    <div class="determinate amber darken-4" style="width: 90%;"></div>
-                </div>
-            </div>
-            <!-- # Skill Item End # -->
             <!-- Skill Item -->
             <div class="skill-item"> <img src="{{ asset('build/images/Skills/Skill_Logo_4.png') }}" class="circle" alt="Linux">
                 <div class="title_value">Linux

templates/macros.twig

@@ -1,3 +1,30 @@
+{#
+Skills part
+#}
+{% macro skills_build() %}
+<div id="skills">
+    {{ _self.skills_item_build('Git Lab CI/CD', '95', 'build/images/Skills/Skill_Logo_cicd.png', 'Git Lab CI/CD', 'determinate pink darken-4') }}
+    {{ _self.skills_item_build('Docker', '90', 'build/images/Skills/Skill_Logo_10.png', 'Docker', 'determinate purple darken-4') }}
+    {{ _self.skills_item_build('Symfony 2.8', '85', 'build/images/Skills/Skill_Logo_sf.png', 'Symfony 2.8', 'determinate pink darken-4') }}
+    {{ _self.skills_item_build('Symfony 4.3', '85', 'build/images/Skills/Skill_Logo_sf.png', 'Symfony 4.3', 'determinate pink darken-4') }}
+    {{ _self.skills_item_build('PHP 7', '95', 'build/images/Skills/Skill_Logo_1.png', 'PHP 7', 'determinate pink darken-4') }}
+    {{ _self.skills_item_build('MySQL', '95', 'build/images/Skills/Skill_Logo_2.png', 'MySQL', 'determinate blue darken-3') }}
+</div>
+{% endmacro %}
+
+{% macro skills_item_build(name, pourc, img_path, img_alt, color_class) %}
+    <!-- Skill Item -->
+    <div class="skill-item"> <img src="{{ asset(img_path) }}" class="circle" alt="{{ img_alt }}">
+        <div class="title_value">{{ name }}
+            <span class="value">{{ pourc }}%</span>
+        </div>
+        <div class="progress">
+            <div class="{{ color_class }}" style="width: {{ pourc }}%;"></div>
+        </div>
+    </div>
+    <!-- # Skill Item End # -->
+{% endmacro %}
+
 {#
 References part
 #}