You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.8 KiB
60 lines
1.8 KiB
3 years ago
|
<%
|
||
|
|
// the skills information of theme _config.yml.
|
||
|
|
var mySkills = theme.mySkills.data;
|
||
|
|
var topSkillArr = [];
|
||
|
|
%>
|
||
|
|
<div class="my-skills">
|
||
|
|
<div class="title center-align" data-aos="zoom-in-up">
|
||
|
|
<i class="fas fa-wrench"></i> <%- __('mySkills') %>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<% if (mySkills) { %>
|
||
|
|
<% Object.keys(mySkills).forEach(function(skill) { %>
|
||
|
|
<% topSkillArr.push(skill); %>
|
||
|
|
<div class="col s12 m6 l6" data-aos="fade-up">
|
||
|
|
<div class="skillbar">
|
||
|
|
<div class="skillbar-title"
|
||
|
|
style="background: <%- mySkills[skill].background %>; width: <%- mySkills[skill].percent %>">
|
||
|
|
<span><%- skill %></span>
|
||
|
|
</div>
|
||
|
|
<div class="skill-bar-percent"><%- mySkills[skill].percent %></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% }); %>
|
||
|
|
<% } %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<%
|
||
|
|
/**
|
||
|
|
* Determine if an element is included in the array.
|
||
|
|
*
|
||
|
|
* @param arr array
|
||
|
|
* @param value value
|
||
|
|
*/
|
||
|
|
var isInArray = function (arr, value) {
|
||
|
|
for (var i = 0; i < arr.length; i++) {
|
||
|
|
if (value == arr[i]) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
%>
|
||
|
|
|
||
|
|
<% if (site.tags) { %>
|
||
|
|
<div class="other-skills chip-container" data-aos="zoom-in-up">
|
||
|
|
<div class="sub-title center-align"><i class="fa fa-book"></i> <%- __('otherSkills') %></div>
|
||
|
|
<div class="tag-chips center-align">
|
||
|
|
<% site.tags.map(function(tag) { %>
|
||
|
|
<% if (!isInArray(topSkillArr, tag.name)) { %>
|
||
|
|
<a href="<%- url_for(tag.path) %>">
|
||
|
|
<span class="chip center-align waves-effect waves-light chip-default"><%- tag.name %></span>
|
||
|
|
</a>
|
||
|
|
<% } %>
|
||
|
|
<% }); %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% } %>
|
||
|
|
|
||
|
|
</div>
|