Add category filter for skills (#979)

Co-authored-by: Emruz Hossain <[email protected]>

assets/scripts/sections/index.js

@@ -4,4 +4,5 @@ import './sidebar'
 import './education'
 import './achievements'
 import './projects'
+import './skills'
 import './publications'

assets/scripts/sections/skills.js

@@ -0,0 +1,15 @@
+import Filterizr from 'filterizr'
+
+document.addEventListener('DOMContentLoaded', () => {
+  // ================== Skill cards =====================
+
+  // setup skill filter buttons
+  const skillCardHolder = document.getElementById('skill-card-holder')
+  if (skillCardHolder != null && skillCardHolder.children.length !== 0) {
+    // eslint-disable-next-line no-new
+    new Filterizr('.filtr-skills', {
+      layout: 'sameWidth',
+      controlsSelector: '.skill-filtr-control'
+    })
+  }
+})

layouts/partials/cards/skill.html

@@ -1,4 +1,6 @@
-<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2 filtr-item"
+  data-category='all, {{ with .categories }}{{ delimit . ","}}{{ end }}'
+>
   <a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
     <div class="card">
       <div class="card-head d-flex">
@@ -18,7 +20,7 @@ <h5 class="card-title"><span class="{{ $iconName }}"> {{ .name }}</span></h5>
           <h5 class="card-title">{{ .name }}</h5>
         {{ end }}
       </div>
-      <div class="card-body">
+      <div class="card-body text-justify pt-1 pb-1">
         <p class="card-text">{{ .summary | markdownify }}</p>
       </div>
     </div>

layouts/partials/sections/skills.html

@@ -3,19 +3,33 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 skills-section">
+<div class="container-fluid anchor pb-5 skills-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ else }}
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
+  {{ if .section.filter }}
+  <div class="container ms-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="skill-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark skill-filtr-control" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container d-flex-block filtr-skills">
+    <div class="row" id="skill-card-holder" style="margin-left:unset">
+  {{ else }}
   <div class="container d-flex-block">
     <div class="row" id="primary-skills">
+  {{ end }}
       {{ range .skills }}
-        {{ partial "cards/skill.html" . }}
-      {{ end }}
+      {{ partial "cards/skill.html" . }}
+    {{ end }}
     </div>
   </div>
 </div>