make skill image configurable

exampleSite/data/skillSection.yml

@@ -3,6 +3,7 @@ enable: true
 topTitle: My Skills
 title: Why hire me for your next project?
 subtitle: My goal is to build a strong supportive professional network among all freelancers and startups in order to improve their performance.
+image: images/skill/skill_image.jpg
 
 skill:
   - title: HTML

layouts/partials/skillSection.html

@@ -1,16 +1,17 @@
 {{ with .Site.Data.skillSection }}
-    {{ if .enable }}
+{{ if .enable }}
-        <section class="section skill">
+<section class="section skill">
     <div class="skill__background_shape">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 600 600">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
             <defs>
                 <linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox">
-                        <stop offset="0" stop-color="#f1f6f9"/>
+                    <stop offset="0" stop-color="#f1f6f9" />
-                        <stop offset="1" stop-color="#f1f6f9" stop-opacity="0"/>
+                    <stop offset="1" stop-color="#f1f6f9" stop-opacity="0" />
                 </linearGradient>
             </defs>
             <g data-name="blob-shape (3)">
-                        <path class="blob" fill="url(#d)" d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z"/>
+                <path class="blob" fill="url(#d)"
+                    d="M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z" />
             </g>
         </svg>
     </div>
@@ -25,14 +26,12 @@
                         <img src="images/hero/figure-svg.svg" alt="figure-svg">
                     </div>
                     <div class="skill__thumb_image">
-                                <img src="images/skill/skill_image.jpg" alt="skill-img"
+                        <img src="{{ .image | absURL }}" alt="skill-img" style='
-                                    style='
                                         -webkit-mask: url({{"images/skill/skill-mask-svg.svg" | absURL}});
                                         -webkit-mask-repeat: no-repeat;
                                         -webkit-mask-size: contain;
                                         -webkit-mask-position: center center;
-                                    '
+                                    '>
-                                >
                     </div>
                 </div>
             </div>
@@ -49,7 +48,8 @@
                         <h6> {{ .title }} </h6>
                         <div class="progress-value"><span>{{ .percent }}</span>%</div>
                         <div class="progress">
-                                    <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0" aria-valuemax="{{ .percent }}"></div>
+                            <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0"
+                                aria-valuemax="{{ .percent }}"></div>
                         </div>
                     </div>
                     {{ end }}
@@ -57,6 +57,6 @@
             </div>
         </div>
     </div>
-        </section>
+</section>
-    {{ end }}
+{{ end }}
 {{ end }}