Update and run autoprefixer (#653)

Co-authored-by: kodiakhq[bot] <kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/feature_request.md

@@ -6,8 +6,8 @@ title: 'Feature Request'
 
 <!---
 Before filing an issue, please review the following:
-  Existing Features: https://github.com/hossainemruz/toha#features
+  Existing Features: https://github.com/hugo-toha/toha#features
-  Project Roadmap: https://github.com/hossainemruz/toha#project-roadmap
+  Project Roadmap: https://github.com/hugo-toha/toha#project-roadmap
 -->
 
 ### Describe the solution you'd like

.github/workflows/autoprefixer.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout to latest commit
-        uses: actions/checkout@v3
+        uses: actions/checkout@v3.1.0
 
       - name: Setup Node
         uses: actions/setup-node@v3

.github/workflows/build.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-18.04
     steps:
     # checkout to the commit that has been pushed
-    - uses: actions/checkout@v2.4.0
+    - uses: actions/checkout@v3.1.0
       with:
         submodules: true  # Fetch Hugo themes (true OR recursive)
         fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

.github/workflows/codeql-analysis.yml

@@ -39,7 +39,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3
+      uses: actions/checkout@v3.1.0
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/draft-release.yml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # Create/Update release draft
-    - uses: release-drafter/release-drafter@v5.20.0
+    - uses: release-drafter/release-drafter@v5.21.0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/md-link-checker.yml

@@ -8,6 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     # checkout to latest commit
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v3.1.0
     # run markdown linter
     - uses: gaurav-nelson/github-action-markdown-link-check@1.0.14

README.md

@@ -34,6 +34,7 @@ A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist desi
   - GoatCounter
   - counter.dev
   - Google Analytics
+  - Matomo/Piwik
 - Comment Support
   - [Disqus](https://disqus.com/)
   - [Valine](https://valine.js.org/)
@@ -58,6 +59,8 @@ For more details about the features please visit [here](https://toha-guides.netl
 - русский
 - suomi
 - Tiếng Việt
+- Turkish
+- Arabic (العربية)
 
 To know more about how to translate your site, please visit [here](https://toha-guides.netlify.app/posts/translation/). Follow, the data and post format from this [example site](https://hugo-toha.github.io).
 
@@ -145,6 +148,9 @@ params:
   # specify whether you want to show Table of Contents in reading page
   enableTOC: true
 
+  # specify whether you want the language flags to be displayed. 
+  showFlags: true
+
   # Provide newsletter configuration. 
   # This feature has been implemented for Mailchimp only for now.
   # You can also hide it from the footer.
@@ -240,12 +246,13 @@ Here is the check list for portfolio mode,
 
 - [ ] **Publications**
 
-  - [ ] Category Filter
+  - [x] Category Filter
-  - [ ] Card
+  - [x] Card
+  - [x] Tags
+  - [x] Links
+  - [ ] Dedicated Page
     - [ ] Abstract
     - [ ] Authors
-  - [ ] Tags
-  - [ ] Links
     - [ ] Gallery
 
 - [x] **Accomplishment / Courses**

i18n/ar.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "الصفحة الرئيسية"
+
+[posts]
+other = "المنشورات"
+
+[toc_heading]
+other = "قائمة المحتويات"
+
+[tags]
+other = "الوسوم"
+
+[categories]
+other = "الأقسام"
+
+[at]
+other = "at"
+
+[resume]
+other = "سيرتي الذاتية"
+
+[navigation]
+other = "التصفح"
+
+[contact_me]
+other = "اتصل بي:"
+
+[email]
+other = "البريد الإلكتروني"
+
+[phone]
+other = "الهاتف"
+
+[newsletter_text]
+other = "ابق على اتصال من خلال القائمة البريدية"
+
+[newsletter_input_placeholder]
+other = "ادخل بريدك الالكتروني"
+
+[newsletter_warning]
+other = "بإدخال بريدك الإلكتروني، أنت توافق على تلقي رسائل إلكترونية دورية من هذا الموقع."
+
+[submit]
+other = "إرسال"
+
+[hugoAttributionText]
+other = "صنع باستخدام"
+
+[prev]
+other = "السابق"
+
+[next]
+other = "التالي"
+
+[share_on]
+other = "المشاركة على"
+
+[improve_this_page]
+other = "ساعد في تحسين هذه الصفحة"
+
+[out_of]
+other = "من"
+
+[publications]
+other = "المنشورات"
+
+[taken_courses]
+other = "الدروس"
+
+[course_name]
+other = "اسم المادة"
+
+[total_credit]
+other = "العلامة العامة"
+
+[obtained_credit]
+other = "العلامة"
+
+[extracurricular_activities]
+other = "نشاطات خارجية"
+
+[show_more]
+other = "إظهار المزيد"
+
+[show_less]
+other = "إخفاء"
+
+[responsibilities]
+other = "المسؤوليات:"
+
+[present]
+other = "حاليا"
+
+[comments_javascript]
+other = "من فضلك قم بتفعيل جافاسكريب لإظهار"
+
+[comments_by]
+other = "التعليقات موفرة بواسطة"
+
+[read]
+other = "قراءة"
+
+[project_star]
+other = "نجمة"
+
+[project_details]
+other = "التفاصيل"
+
+[err_404]
+other = "الصفحة التي تبحث عنها ليست بعد هناك."
+
+[more]
+other = "المزيد"
+
+[view_certificate]
+other = "إظهار الشهادة"
+
+[notes]
+other = "ملاحظات"
+
+[disclaimer_text]
+other = "إشعار بالمسؤولية"
+
+[search]
+other = "بحث"

i18n/nl.toml

@@ -1,11 +1,11 @@
 [home]
-other = "Startseite"
+other = "Hoofdpagina"
 
 [posts]
-other = "Beiträge"
+other = "Posts"
 
 [toc_heading]
-other = "Inhaltsverzeichnis"
+other = "Inhoudsopgave"
 
 [tags]
 other = "Tags"
@@ -14,49 +14,49 @@ other = "Tags"
 other = "Categorieën"
 
 [at]
-other = "bei"
+other = "bij"
 
 [resume]
-other = "Mein Lebenslauf"
+other = "Curriculum Vitae"
 
 [navigation]
-other = "Navigation"
+other = "Navigatie"
 
 [contact_me]
-other = "Kontakt aufnehmen"
+other = "Contactgegevens"
 
 [email]
 other = "E-Mail"
 
 [phone]
-other = "Telefon"
+other = "Telefoon"
 
 [newsletter_text]
-other = "Mit dem Newsletter auf dem neuesten Stand bleiben"
+other = "Ontvang updates via email"
 
 [newsletter_input_placeholder]
-other = "E-Mail-Adresse eingeben"
+other = "Email ingeven"
 
 [newsletter_warning]
 other = "Door uw e-mailadres in te voeren, gaat u akkoord met het ontvangen van de nieuwsbrief van deze website."
 
 [submit]
-other = "Absenden"
+other = "Opslaan"
 
 [hugoAttributionText]
-other = "Unterstützt von"
+other = "Mogelijk gemaakt met"
 
 [prev]
-other = "Vorherige"
+other = "Vorige"
 
 [next]
-other = "Nächste"
+other = "Volgende"
 
-# [share_on]
+[share_on]
-# other = "Share on"
+other = "Delen op"
 
 [improve_this_page]
-other = "Diese Seite verbessern"
+other = "Deze pagina verbeteren"
 
 [out_of]
 other = "van de"
@@ -65,7 +65,7 @@ other = "van de"
 other = "Publicaties"
 
 [taken_courses]
-other = "Cursussen gevolgd"
+other = "Gevolgde cursussen"
 
 [course_name]
 other = "Cursus naam"
@@ -85,11 +85,11 @@ other = "Bekijk meer"
 [show_less]
 other = "Laat minder zien"
 
-# [responsibilities]
+[responsibilities]
-# other = "Responsibilities:"
+other = "Verantwoordelijkheden:"
 
-# [present]
+[present]
-# other = "Present"
+other = "Heden"
 
 # [comments_javascript]
 # other = "Please enable JavaScript to view the"
@@ -103,11 +103,11 @@ other = "Laat minder zien"
 # [project_star]
 # other = "Star"
 
-# [project_details]
+[project_details]
-# other = "Details"
+other = "Details"
 
-# [err_404]
+[err_404]
-# other = "The page you are looking for is not there yet."
+other = "De pagina waar je voor zoekt bestaat nog niet."
 
 [more]
 other = "Meer"
@@ -119,6 +119,7 @@ other = "Bekijk certificaat"
 other = "Opmerkingen"
 
 [disclaimer_text]
-other = "Haftungshinweis"
+other = "Aansprakelijkheidsverklaring"
+
 [search]
-other = "Zoekopdracht"
+other = "Zoek"

i18n/tr.toml

@@ -0,0 +1,126 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Anasayfa"
+
+[posts]
+other = "Gönderiler"
+
+[toc_heading]
+other = "İçerik Tablous"
+
+[tags]
+other = "Etiketler"
+
+[categories]
+other = "Kategoriler"
+
+[at]
+other = ","
+
+[resume]
+other = "Özgeçmişim"
+
+[navigation]
+other = "Menü"
+
+[contact_me]
+other = "İletişime geç:"
+
+[email]
+other = "E-Posta"
+
+[phone]
+other = "Telefon"
+
+[newsletter_text]
+other = "Yeni içeriklerden haberdar olmak için E-Posta adresinizi giriniz."
+
+[newsletter_input_placeholder]
+other = "E-Posta adresi giriniz."
+
+[newsletter_warning]
+other = "E-Posta adresini girerseniz, bu web sitesinin haber bültenini almayı kabul ediyorsunuz."
+
+[submit]
+other = "Onayla"
+
+[hugoAttributionText]
+other = ""
+
+[prev]
+other = "Önceki"
+
+[next]
+other = "Sonraki"
+
+[share_on]
+other = "Paylaş"
+
+[improve_this_page]
+other = "Bu sayfaya katkıda bulunun"
+
+[out_of]
+other = "/"
+
+[publications]
+other = "Akademik Yayınlar"
+
+[taken_courses]
+other = "Alınan Dersler"
+
+[course_name]
+other = "Ders Adı"
+
+[total_credit]
+other = "Üzerinden"
+
+[obtained_credit]
+other = "Alınan Not"
+
+[extracurricular_activities]
+other = "Ders Dışı Aktiviteler"
+
+[show_more]
+other = "Devamını Göster"
+
+[show_less]
+other = "Gizle"
+
+[responsibilities]
+other = "Sorumluluklar:"
+
+[present]
+other = "Halen"
+
+[comments_javascript]
+other = "Görüntüleyebilmek için lüften Javascript etkinleştirin"
+
+[comments_by]
+other = "comments powered by"
+
+[read]
+other = "Oku"
+
+[project_star]
+other = "Star"
+
+[project_details]
+other = "Detaylar"
+
+[err_404]
+other = "Aradığınız sayfa bulunmamakta."
+
+[more]
+other = "Devamını Göster"
+
+[view_certificate]
+other = "Sertifikayı Görüntüle"
+
+[notes]
+other = "Notlar"
+
+[disclaimer_text]
+other = "Yükümlülük Bildirisi"
+
+[search]
+other = "Ara"

layouts/_default/single.html

@@ -40,7 +40,7 @@
   <div class="content">
     <div class="container p-0 read-area">
       <!--Hero Area-->
-      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
+      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
       </div>
 
       <!--Content Start-->

layouts/index.html

@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
+    <link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/>
 
     <!--================= custom style overrides =========================-->
     <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>

layouts/partials/analytics.html

@@ -40,6 +40,24 @@
             src="//gc.zgo.at/count.js"
             ></script>
         {{ end }}
+
+        <!-- Piwik/Matomo -->
+        {{ with .matomo }}
+        <!-- Matomo -->
+            <script>
+            var _paq = window._paq = window._paq || [];
+            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            (function() {
+                var u="//{{ .instance }}/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '{{ .siteId }}']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+            })();
+            </script>
+        {{ end }}
     {{ end }}
 {{ end }}
 

layouts/partials/cards/publication.html

@@ -0,0 +1,39 @@
+{{ $dataCategories:= slice "pub-all"}}
+{{ range .categories}}
+  {{ $dataCategories = $dataCategories | append (printf "pub-%s" .)}}
+{{end}}
+
+<div
+  class="col-12 p-2 pub-filtr-item"
+  data-category='{{ delimit $dataCategories ","}}'
+>
+  <div class="card mt-3">
+    <div class="card-header">
+      <h5 class="card-title mb-0">{{ .title }}</h5>
+      <div class="sub-title">
+        <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
+        <span class="ml-2">{{ .publishedIn.date }}</span>
+      </div>
+      <div class="authors">
+        {{ range $index,$author:= .authors }}
+          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+        {{ end }}
+      </div>
+    </div>
+    <div class="card-body">
+      <p>{{ .paper.summary | markdownify }}</p>
+    </div>
+    <div class="card-footer">
+      <div class="tags">
+        {{ range $index,$tag:= .tags }}
+            <span class="btn badge btn-info ml-1 p-2">
+              {{ $tag }}
+            </span>
+        {{ end }}
+      </div>
+      <div class="details-btn">
+        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -115,6 +115,20 @@
                 <li><a href={{ printf "https://github.com/%s" $value }} target="_blank" rel="noopener">
                   <span><i class="fab fa-github"></i></span> <span>{{ $value }}</span>
                 </a></li>
+              {{ else if reflect.IsMap $value }}
+                <li>
+                  {{ if (and (isset $value "url") (isset $value "icon"))}}
+                  <a href={{ $value.url }} target="_blank" rel="noopener">
+                    <span><i class={{ printf "fab fa-%s" $value.icon }}></i></span> <span>{{ $value.text }}</span>
+                  </a>
+                  {{ else if isset $value "icon" }}
+                    <span><i class={{ printf "fab fa-%s" $value.icon }}></i></span> <span>{{ $value.text }}</span>
+                  {{ else }}
+                    <a href={{ $value.url }} target="_blank" rel="noopener">
+                      <span>{{ title $key }}: </span> <span>{{ $value.text }}</span>
+                    </a>
+                  {{ end }}
+                </li>
               {{ else }}
                 <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
               {{ end }}
@@ -177,7 +191,7 @@
     <div class="container">
       <div class="row text-left">
         <div class="col-md-4">
-          <a id="theme" href="https://github.com/hossainemruz/toha" target="_blank" rel="noopener">
+          <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
             <img src="{{ $themeLogo }}" alt="Toha Theme Logo">
             Toha
           </a>

layouts/partials/header.html

@@ -10,7 +10,7 @@
 <link rel="stylesheet" href="{{ "/css/flag-icon.min.css" | relURL }}"/>
 
 <!--=================== fonts ==============================-->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600">
+<link rel="stylesheet" href="{{ "/google-fonts/Mulish/mulish.css" | relURL }}"/>
 
 <!--=================== icons ==============================-->
 <link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>

layouts/partials/navigators/floating-lang-selector.html

@@ -5,15 +5,19 @@
 
 <div class="dropdown languageSelector">
     <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ if ne site.Params.showFlags false }}
             {{ $countryCode := partial "helpers/country-code.html" . }}
             <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+        {{ end }}
         {{ site.Language.LanguageName }}
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
         {{ range .Translations }}
         <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
+            {{ if ne site.Params.showFlags false }}
                 {{ $countryCode := partial "helpers/country-code.html" . }}
                 <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+            {{ end }}
             {{ .Language.LanguageName }}
         </a>
         {{ end }}

layouts/partials/navigators/lang-selector-2.html

@@ -5,15 +5,19 @@
 
 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ if ne site.Params.showFlags false }}
         {{ $countryCode := partial "helpers/country-code.html" . }}
         <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+      {{ end }}
       {{ site.Language.LanguageName }}
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
       {{ range .Translations }}
         <a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
+          {{ if ne site.Params.showFlags false }}
             {{ $countryCode := partial "helpers/country-code.html" . }}
             <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+          {{ end }}
           {{ .Language.LanguageName }}
         </a>
       {{ end }}

layouts/partials/navigators/lang-selector.html

@@ -1,14 +1,18 @@
 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ if ne site.Params.showFlags false }}
             {{ $countryCode := partial "helpers/country-code.html" . }}
             <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+        {{ end }}
         {{ site.Language.LanguageName }}
     </a>
     <div class="dropdown-menu" aria-labelledby="languageSelector">
         {{ range site.Home.AllTranslations }}
         <a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}">
+            {{ if ne site.Params.showFlags false }}
                 {{ $countryCode := partial "helpers/country-code.html" . }}
                 <span class="flag-icon flag-icon-{{$countryCode}}"></span>
+            {{ end }}
             {{ .Language.LanguageName }}
         </a>
         {{ end }}

layouts/partials/sections/about.html

@@ -45,6 +45,11 @@
         ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
       >
       {{ end }}
+      {{ range .resourceLinks }}
+      <a href="{{ .url | relURL }}" title="{{ .title }}" target="#"
+        ><button class="btn btn-dark">{{ .title }}</button></a
+      >
+      {{ end }}
     </div>
     <!-- soft skills circular-progressbar -->
     <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">

layouts/partials/sections/achievements/entry.html

@@ -12,14 +12,17 @@
 {{/*  don't use "background-image: url('{{ $achievementImageSm }}');" Otherwise the images won't show in https://themes.gohugo.io/ */}}
 <div 
   class="achievement-entry text-center"
-  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');"
+  style="background-image: url('{{ $achievementImageSm }}');"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>
   <div class="caption hidden col-lg-6 text-left" id="caption">
     <h4>{{ .title }}</h4>
     <p>{{ .summary | markdownify }}</p>
+    {{ if .url }}
+      <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+    {{ end }}
   </div>
-  <span style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
+  <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
-<span  style="background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
+<span  style="background-image: url('{{ $achievementImageLg }}');" class="d-none" id="LargeImage"></span>
 </div>

layouts/partials/sections/home.html

@@ -77,28 +77,27 @@
   <style>
     /* 0 to 299 */
     #homePageBackgroundImageDivStyled {
-      /*background-image: url('{{ $tiny.RelPermalink }}'); This does not work on https://themes.gohugo.io/ */
+      background-image: url('{{ $tiny.RelPermalink }}');
-      background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}');
     }
     /* 300 to X */
     @media (min-width: 500px) and (max-width: 800px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $small.RelPermalink }}');
+          background-image: url('{{ $small.RelPermalink }}');
         }
     }
     @media (min-width: 801px) and (max-width: 1200px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $medium.RelPermalink }}');
+          background-image: url('{{ $medium.RelPermalink }}');
         }
     }
     @media (min-width: 1201px) and (max-width: 1500px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $large.RelPermalink }}');
+          background-image: url('{{ $large.RelPermalink }}');
         }
     }
     @media (min-width: 1501px) { /* or 301 if you want really the same as previously.  */
       #homePageBackgroundImageDivStyled {   
-          background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}');
+          background-image: url('{{ $src.RelPermalink }}');
         }
     }
     </style>

layouts/partials/sections/projects.html

@@ -14,7 +14,7 @@
   <div class="container ml-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
-      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+      <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">
         {{ .name }}
       </button>
       {{ end }}

layouts/partials/sections/publications.html

@@ -0,0 +1,30 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 publications-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 }}
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container filtr-publications">
+    <div class="row" id="publication-card-holder">
+      {{ range .publications }}
+        {{ partial "cards/publication" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

package-lock.json

@@ -8,8 +8,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
-        "autoprefixer": "^10.4.7",
+        "autoprefixer": "^10.4.12",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.17",
         "postcss-cli": "^8.3.1"
       }
     },
@@ -104,9 +104,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.7",
+      "version": "10.4.12",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "integrity": "sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==",
       "dev": true,
       "funding": [
         {
@@ -119,8 +119,8 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
-        "caniuse-lite": "^1.0.30001335",
+        "caniuse-lite": "^1.0.30001407",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -158,9 +158,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.20.3",
+      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
-      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
+      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
       "dev": true,
       "funding": [
         {
@@ -173,11 +173,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001332",
+        "caniuse-lite": "^1.0.30001400",
-        "electron-to-chromium": "^1.4.118",
+        "electron-to-chromium": "^1.4.251",
-        "escalade": "^3.1.1",
+        "node-releases": "^2.0.6",
-        "node-releases": "^2.0.3",
+        "update-browserslist-db": "^1.0.9"
-        "picocolors": "^1.0.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -187,9 +186,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001340",
+      "version": "1.0.30001414",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz",
-      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
+      "integrity": "sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==",
       "dev": true,
       "funding": [
         {
@@ -296,9 +295,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.137",
+      "version": "1.4.270",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
-      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
+      "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -633,9 +632,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.4",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -693,9 +692,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
+      "version": "8.4.17",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==",
       "dev": true,
       "funding": [
         {
@@ -979,6 +978,32 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
+      "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "browserslist-lint": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -1107,13 +1132,13 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.7",
+      "version": "10.4.12",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "integrity": "sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.20.3",
+        "browserslist": "^4.21.4",
-        "caniuse-lite": "^1.0.30001335",
+        "caniuse-lite": "^1.0.30001407",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -1136,22 +1161,21 @@
       }
     },
     "browserslist": {
-      "version": "4.20.3",
+      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
-      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
+      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001332",
+        "caniuse-lite": "^1.0.30001400",
-        "electron-to-chromium": "^1.4.118",
+        "electron-to-chromium": "^1.4.251",
-        "escalade": "^3.1.1",
+        "node-releases": "^2.0.6",
-        "node-releases": "^2.0.3",
+        "update-browserslist-db": "^1.0.9"
-        "picocolors": "^1.0.0"
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001340",
+      "version": "1.0.30001414",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz",
-      "integrity": "sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==",
+      "integrity": "sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==",
       "dev": true
     },
     "chalk": {
@@ -1228,9 +1252,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.137",
+      "version": "1.4.270",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.270.tgz",
-      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
+      "integrity": "sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==",
       "dev": true
     },
     "emoji-regex": {
@@ -1477,9 +1501,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.4",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
-      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
+      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
     "normalize-path": {
@@ -1519,9 +1543,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.14",
+      "version": "8.4.17",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
@@ -1693,6 +1717,16 @@
       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
       "dev": true
     },
+    "update-browserslist-db": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
+      "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
+      "dev": true,
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -8,17 +8,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hossainemruz/toha.git"
+    "url": "git+https://github.com/hugo-toha/toha.git"
   },
   "author": "Emruz Hossain",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/hossainemruz/toha/issues"
+    "url": "https://github.com/hugo-toha/toha/issues"
   },
-  "homepage": "https://github.com/hossainemruz/toha#readme",
+  "homepage": "https://github.com/hugo-toha/toha#readme",
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.12",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.17",
     "postcss-cli": "^8.3.1"
   }
 }

static/css/layouts/list.css

@@ -67,7 +67,6 @@
 }
 
 .paginator {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: auto;
@@ -91,7 +90,6 @@
   margin-right: auto;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }

static/css/layouts/main.css

@@ -174,7 +174,7 @@ img.right {
   margin-right: 3px;
 }
 
-/* ====== codeblocks ====== */
+/* ====== table ====== */
 table {
   border-radius: 0.1rem;
   background: #e5e9f2;
@@ -206,12 +206,46 @@ tbody tr:hover {
   background: #c0ccda;
 }
 
+/* ====== don't apply css to tables inside gist ====== */
+.gist table {
+  border-radius: unset;
+  background: unset;
+  border: unset;
+  padding: unset;
+}
+
+.gist table tr {
+  height: unset !important;
+}
+
+.gist table th,
+td {
+  padding: unset;
+  border-left: unset;
+  border-bottom: unset;
+}
+
+.gist table thead tr {
+  background: unset;
+  color: unset;
+}
+
+.gist tbody tr:nth-child(odd) {
+  background-color: unset;
+}
+
+.gist tbody tr:hover {
+  background: unset;
+}
+
+.gist table td, .gist table tc{
+  border-right: 1px solid #eee;
+}
+
 figure {
   border: 1px solid #c0ccda;
-  height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   align-self: center;
@@ -276,7 +310,6 @@ mark {
 
 /* ======= Paginator ========= */
 .paginator {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: auto;
@@ -408,7 +441,8 @@ mark {
 
 @media only screen and (max-width: 576px) {
   .skills-section .container,
-  .projects-section .container {
+  .projects-section .container,
+  .publications-section .container {
     padding-left: 0.3rem;
     padding-right: 0.3rem;
   }
@@ -421,7 +455,8 @@ mark {
   .skills-section,
   .projects-section,
   .recent-posts-section,
-  .achievements-section {
+  .achievements-section,
+  .publications-section {
     padding-left: 0;
     padding-right: 0;
   }

static/css/layouts/single.css

@@ -37,7 +37,6 @@ body {
 }
 
 .toc-holder {
-  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;
@@ -308,6 +307,8 @@ h6 {
   list-style-type: none;
   display: inline-block;
   background: #248aaa;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
 }
 
 .taxonomy-terms a {
@@ -437,7 +438,6 @@ h6 {
   .toc-section {
     order: 2;
     width: 100%;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     max-height: 0;
@@ -450,7 +450,6 @@ h6 {
     position: relative;
     /* height: fit-content; */
     flex: 100%;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     max-height: 200vh;

static/css/navigators/navbar.css

@@ -167,7 +167,6 @@
 /* IPad Pro */
 @media (max-width: 1024px) {
   .top-navbar {
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     padding-bottom: 0px;

static/css/navigators/sidebar.css

@@ -8,7 +8,6 @@
 
 .sidebar-holder {
   top: 2.5rem;
-  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
@@ -26,7 +25,6 @@
 .sidebar-tree {
   padding-left: 1rem;
   position: relative;
-  width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
@@ -192,7 +190,6 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
-    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -222,7 +219,6 @@ a.focused {
     transition: all ease-out 0.3s;
   }
   .sidebar-holder {
-    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -250,7 +246,6 @@ a.focused {
   .sidebar-section.hide {
     margin-top: 2rem;
     position: relative;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     flex: none;
@@ -261,7 +256,6 @@ a.focused {
 
   .sidebar-holder {
     max-height: 0;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
     overflow: hidden;
@@ -276,10 +270,8 @@ a.focused {
 
   .sidebar {
     position: relative;
-    height: -webkit-fit-content;
     height: -moz-fit-content;
     height: fit-content;
-    max-height: -webkit-fit-content;
     max-height: -moz-fit-content;
     max-height: fit-content;
     width: 100vw;

static/css/sections/about.css

@@ -76,13 +76,13 @@
   border-bottom-left-radius: 80px;
   border-right: 0;
   transform-origin: center right;
-  -webkit-animation: circular-loading-1 1.8s linear forwards;
   animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
   width: 90%;
   height: 90%;
+  padding: 1rem;
   border-radius: 50%;
   background: #3c4858;
   font-size: 1rem;
@@ -122,69 +122,49 @@
 }
 
 .circular-progress-percentage-50 {
-  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
   animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  -webkit-animation: circular-loading-55 0.18s linear forwards 1.8s;
   animation: circular-loading-55 0.18s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-60 {
-  -webkit-animation: circular-loading-60 0.36s linear forwards 1.8s;
   animation: circular-loading-60 0.36s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-65 {
-  -webkit-animation: circular-loading-65 0.54s linear forwards 1.8s;
   animation: circular-loading-65 0.54s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-70 {
-  -webkit-animation: circular-loading-70 0.72s linear forwards 1.8s;
   animation: circular-loading-70 0.72s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-75 {
-  -webkit-animation: circular-loading-75 0.9s linear forwards 1.8s;
   animation: circular-loading-75 0.9s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-80 {
-  -webkit-animation: circular-loading-80 1.08s linear forwards 1.8s;
   animation: circular-loading-80 1.08s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-85 {
-  -webkit-animation: circular-loading-85 1.26s linear forwards 1.8s;
   animation: circular-loading-85 1.26s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-90 {
-  -webkit-animation: circular-loading-90 1.44s linear forwards 1.8s;
   animation: circular-loading-90 1.44s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-95 {
-  -webkit-animation: circular-loading-95 1.62s linear forwards 1.8s;
   animation: circular-loading-95 1.62s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-100 {
-  -webkit-animation: circular-loading-100 1.8s linear forwards 1.8s;
   animation: circular-loading-100 1.8s linear forwards 1.8s;
 }
 
-@-webkit-keyframes circular-loading-50 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
 @keyframes circular-loading-50 {
   0% {
     transform: rotate(0deg);
@@ -194,15 +174,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-55 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(18deg);
-  }
-}
-
 @keyframes circular-loading-55 {
   0% {
     transform: rotate(0deg);
@@ -212,15 +183,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-60 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
 @keyframes circular-loading-60 {
   0% {
     transform: rotate(0deg);
@@ -230,15 +192,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-65 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(54deg);
-  }
-}
-
 @keyframes circular-loading-65 {
   0% {
     transform: rotate(0deg);
@@ -248,15 +201,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-70 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(72deg);
-  }
-}
-
 @keyframes circular-loading-70 {
   0% {
     transform: rotate(0deg);
@@ -266,15 +210,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-75 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
 @keyframes circular-loading-75 {
   0% {
     transform: rotate(0deg);
@@ -284,15 +219,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-80 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(108deg);
-  }
-}
-
 @keyframes circular-loading-80 {
   0% {
     transform: rotate(0deg);
@@ -302,15 +228,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-85 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
 @keyframes circular-loading-85 {
   0% {
     transform: rotate(0deg);
@@ -320,15 +237,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-90 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
 @keyframes circular-loading-90 {
   0% {
     transform: rotate(0deg);
@@ -338,15 +246,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-95 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(162deg);
-  }
-}
-
 @keyframes circular-loading-95 {
   0% {
     transform: rotate(0deg);
@@ -356,15 +255,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-100 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
 @keyframes circular-loading-100 {
   0% {
     transform: rotate(0deg);
@@ -374,15 +264,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-1 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-
 @keyframes circular-loading-1 {
   0% {
     transform: rotate(0deg);
@@ -392,15 +273,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-2 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(144deg);
-  }
-}
-
 @keyframes circular-loading-2 {
   0% {
     transform: rotate(0deg);
@@ -410,15 +282,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-3 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
 @keyframes circular-loading-3 {
   0% {
     transform: rotate(0deg);
@@ -428,15 +291,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-4 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(36deg);
-  }
-}
-
 @keyframes circular-loading-4 {
   0% {
     transform: rotate(0deg);
@@ -446,15 +300,6 @@
   }
 }
 
-@-webkit-keyframes circular-loading-5 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(126deg);
-  }
-}
-
 @keyframes circular-loading-5 {
   0% {
     transform: rotate(0deg);

static/css/sections/home.css

@@ -19,7 +19,7 @@
 }
 
 /*
-  Resolves https://github.com/hossainemruz/toha/issues/70
+  Resolves https://github.com/hugo-toha/toha/issues/70
 
   fixed attached images use the whole <body> size. On mobile this can get really
   tall which blows your image out. Setting the attachment back to scroll allows
@@ -66,26 +66,9 @@
 }
 
 .bounce {
-  -webkit-animation: bounce 2s infinite;
   animation: bounce 2s infinite;
 }
 
-@-webkit-keyframes bounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-30px);
-  }
-  60% {
-    transform: translateY(-15px);
-  }
-}
-
 @keyframes bounce {
   0%,
   20%,

static/css/sections/publications.css

@@ -0,0 +1,147 @@
+.publications-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
+.publications-section .card {
+  background: #fff;
+  border-top: 2px solid #248aaa;
+}
+.publications-section .card .card-header {
+  background: none;
+  border: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.publications-section .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 0.4rem;
+}
+
+.publications-section .card .sub-title :nth-child(2) {
+  float: right !important;
+}
+
+.publications-section .card .card-body {
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.publications-section .card .card-footer {
+  background: #fff;
+  border: none;
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.publications-section .card .card-footer .tags {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.publications-section .card .card-footer .tags .badge {
+  cursor: auto;
+}
+
+.filtr-publications {
+  padding: 1rem !important;
+}
+
+.publications-section .btn-group{
+  justify-content: center;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publicationss-section .filtr-publications {
+    padding: 0;
+  }
+  .publicationss-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publications-section .filtr-publications {
+    padding: 0;
+  }
+  .publications-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    flex: 100%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .publications-section .btn {
+    margin-top: 0.3125rem;
+  }
+  .publications-section .pub-filtr-item {
+    flex: 100%;
+    max-width: 100%;
+  }
+  .publications-section .card .card-footer .tags {
+    flex: 100%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/css/sections/skills.css

@@ -1,6 +1,5 @@
 .skills-section .card .card-head {
   background-color: #f9fafc;
-  height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   padding: 0.7rem;

static/google-fonts/Mulish/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

static/google-fonts/Mulish/README.txt

@@ -0,0 +1,79 @@
+Mulish Variable Font
+====================
+
+This download contains Mulish as both variable fonts and static fonts.
+
+Mulish is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  Mulish-VariableFont_wght.ttf
+  Mulish-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Mulish:
+  static/Mulish-ExtraLight.ttf
+  static/Mulish-Light.ttf
+  static/Mulish-Regular.ttf
+  static/Mulish-Medium.ttf
+  static/Mulish-SemiBold.ttf
+  static/Mulish-Bold.ttf
+  static/Mulish-ExtraBold.ttf
+  static/Mulish-Black.ttf
+  static/Mulish-ExtraLightItalic.ttf
+  static/Mulish-LightItalic.ttf
+  static/Mulish-Italic.ttf
+  static/Mulish-MediumItalic.ttf
+  static/Mulish-SemiBoldItalic.ttf
+  static/Mulish-BoldItalic.ttf
+  static/Mulish-ExtraBoldItalic.ttf
+  static/Mulish-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

static/google-fonts/Mulish/mulish.css

@@ -0,0 +1,96 @@
+  /* vietnamese */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 500;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 500;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 500;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 600;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 600;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Muli';
+  font-style: normal;
+  font-weight: 600;
+  src: url(/google-fonts/Mulish/Mulish-VariableFont_wght.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

static/js/home.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var projectCards;
+var projectCards, publicationCards;
 
 (function ($) {
   jQuery(document).ready(function () {
@@ -79,7 +79,22 @@ var projectCards;
 
     var projectCardHolder = document.getElementById("project-card-holder");
     if (projectCardHolder != null && projectCardHolder.children.length != 0) {
-      projectCards = $(".filtr-projects").filterizr({ layout: 'sameWidth' });
+      projectCards = $(".filtr-projects").filterizr(
+        {
+          layout: 'sameWidth',
+          controlsSelector: '.project-filtr-control',
+        });
+    }
+
+    // ================== Publication cards =====================
+    var publicationCardHolder = document.getElementById("publication-card-holder");
+    if (publicationCardHolder != null && publicationCardHolder.children.length != 0) {
+      publicationCards = $(".filtr-publications").filterizr(
+        {
+          layout: 'sameWidth',
+          gridItemsSelector: '.pub-filtr-item',
+          controlsSelector: '.pub-filtr-control',
+        });
     }
 
     function showGithubStars() {