JonasFranzDEV
/
portio-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #3 from AaronNBrock/make-skill-image-configurable

Browse Source 
Make skill image configurable
master
Kausar Ahmed 4 years ago committed by GitHub
parent 26b3db8b4b 2bc39646b2
commit 85a2c273e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 51 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      exampleSite/data/skillSection.yml
  2. 102
      layouts/partials/skillSection.html

1
exampleSite/data/skillSection.yml
Unescape View File

@ -3,6 +3,7 @@ enable: true
topTitle: My Skills topTitle: My Skills
title: Why hire me for your next project? 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. 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: skill:
- title: HTML - title: HTML

102
layouts/partials/skillSection.html
Unescape View File

@ -1,62 +1,62 @@
{{ with .Site.Data.skillSection }} {{ with .Site.Data.skillSection }}
{{ if .enable }} {{ if .enable }}
<section class="section skill"> <section class="section skill">
<div class="skill__background_shape"> <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> <defs>
<linearGradient id="d" x1="0.929" y1="0.111" x2="0.263" y2="0.935" gradientUnits="objectBoundingBox"> <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> </linearGradient>
</defs> </defs>
<g data-name="blob-shape (3)"> <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)"
</g> 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" />
</svg> </g>
</div> </svg>
<div class="skill__background_pattern"> </div>
<img src="images/service/background-pattern.svg" alt="background-shape"> <div class="skill__background_pattern">
</div> <img src="images/service/background-pattern.svg" alt="background-shape">
<div class="container"> </div>
<div class="row align-items-center"> <div class="container">
<div class="col-lg-6"> <div class="row align-items-center">
<div class="skill__thumb"> <div class="col-lg-6">
<div class="skill__thumb_pattern"> <div class="skill__thumb">
<img src="images/hero/figure-svg.svg" alt="figure-svg"> <div class="skill__thumb_pattern">
</div> <img src="images/hero/figure-svg.svg" alt="figure-svg">
<div class="skill__thumb_image"> </div>
<img src="images/skill/skill_image.jpg" alt="skill-img" <div class="skill__thumb_image">
style=' <img src="{{ .image | absURL }}" alt="skill-img" style='
-webkit-mask: url({{"images/skill/skill-mask-svg.svg" | absURL}}); -webkit-mask: url({{"images/skill/skill-mask-svg.svg" | absURL}});
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain; -webkit-mask-size: contain;
-webkit-mask-position: center center; -webkit-mask-position: center center;
' '>
> </div>
</div> </div>
</div> </div>
<div class="col-lg-6">
<div class="skill__progress">
<div class="skill__progress_heading">
<span>{{ .topTitle }}</span>
<h1> {{ .title }} </h1>
<p> {{ .subtitle }} </p>
</div> </div>
<div class="col-lg-6"> {{ $section := .skill }}
<div class="skill__progress"> {{ range $section }}
<div class="skill__progress_heading"> <div class="skill__progress_item">
<span>{{ .topTitle }}</span> <h6> {{ .title }} </h6>
<h1> {{ .title }} </h1> <div class="progress-value"><span>{{ .percent }}</span>%</div>
<p> {{ .subtitle }} </p> <div class="progress">
</div> <div class="progress-bar" style="width:{{ .percent }}%;" aria-valuemin="0"
{{ $section := .skill }} aria-valuemax="{{ .percent }}"></div>
{{ range $section }}
<div class="skill__progress_item">
<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>
</div>
{{ end }}
</div> </div>
</div> </div>
{{ end }}
</div> </div>
</div> </div>
</section> </div>
{{ end }} </div>
</section>
{{ end }}
{{ end }} {{ end }}
Write Preview
Loading…
Cancel
Save