Fix URL in footer (#95)

Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>

.github/workflows/autoprefixer.yml

@@ -0,0 +1,35 @@
+name: Autoprefixer
+on:
+  push:
+    branches:
+      - master
+jobs:
+  autoprefixer:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout to latest commit
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Run autoprefixer
+        run: |
+          npm install postcss-cli autoprefixer --save-dev
+          npm run autoprefixer
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          branch: autoprefixer
+          branch-suffix: timestamp
+          commit-message: add vendor specific css prefixes
+          title: "Add vendor specific CSS prefixes"
+          body: |
+            This PR adds vendor specific CSS prefixes using [postcss/autoprefixer](https://github.com/postcss/autoprefixer).
+
+            >This PR has been created automatically by Github Action [peter-evans/create-pull-request](https://github.com/peter-evans/create-pull-request).
+          labels: enhancement
+          reviewers: hossainemruz

.gitignore

@@ -1 +1,2 @@
-.vscode/
+.vscode/
+node_modules/

README.md

@@ -54,6 +54,22 @@ languageCode: en-us
 title: "Toha"
 theme: "toha"
 
+# Manage languages
+# For any more details, you can check the official documentation: https://gohugo.io/content-management/multilingual/
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  bn:
+    languageName: বাংলা
+    weight: 3
+
+# Force a locale to be use, really useful to develop the application ! Should be commented in production, the "weight" should rocks.
+# DefaultContentLanguage: fr
+
 # Allow raw html in markdown file
 markup:
   goldmark:
@@ -75,9 +91,6 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # copyright
-  copyright: © 2020 Copyright.
-
   # background image of the landing page
   background: "images/background.jpg"
 
@@ -85,8 +98,9 @@ params:
   # transparent navbar and the main logo will be used in the non-transparent navbar.
   # It will be default to the theme logos if not provided.
   logo:
-    main: /assets/images/main-logo.png
+    main: assets/images/main-logo.png
-    inverted: /assets/images/inverted-logo.png
+    inverted: assets/images/inverted-logo.png
+    favicon: assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
@@ -97,35 +111,17 @@ params:
   # specify whether you want to show Table of Contents in reading page
   enableTOC: true
 
-  # specify the list of custom menus that you want to show in the top navbar.
-  # they will be separated by a divider from the main menus.
-  customMenus:
-  - name: Notes
-    url: https://hossainnotes.netlify.app/docs/example/
-
   # Provide newsletter configuration. This feature hasn't been implemented yet.
   # Currently, you can just hide it from the footer.
   newsletter:
     enable: true
-
-  # some information about you
-  author:
-    name: "Jane Doe"
-    nickname: "Jane"
-    image: "images/avatar.png"
-    # give your some contact information. they will be used in the footer
-    contactInfo:
-      email: "janedoe@example.com"
-      phone: "+0123456789"
-    # a summary of what you do
-    summary:
-    - I am a Developer
-    - I work with Go
-    - I love to work with some fun projects
 ```
 
 You can just copy the content for `config.yaml` files from `theme/toha/exampleSite/config.yaml`.
 
+If you want to customize the any of the CSS styles on your site, create a
+`static/assets/css/style.css` file and add any custom CSS there.
+
 ## Usage
 
 Run your hugo site with this theme.
@@ -134,11 +130,9 @@ Run your hugo site with this theme.
 hugo server -w
 ```
 
-Don't panic if the generated site does not look like what have you seen in the demo. Now, you have to provide some data in `data` folder of your site.
+When you first run your site, it will start with the default parameters. It should look similar to the [example site](https://toha.netlify.app) except it will not have any sections in the homepage. Those sections are added via some data files.
 
-Follow the posts giving step by step instructions for configuring your data folder from [here](https://toha.netlify.app/posts/configuration/home-section/).
+You can configure your site by following the step by step guides from [here](https://toha.netlify.app/posts/configuration/).
-
-You can also follow the sample format given in `themes/toha/exampleSite/data` directory.
 
 ## Shortcodes
 

exampleSite/config.yaml

@@ -3,6 +3,22 @@ languageCode: en-us
 title: "Toha"
 theme: "toha"
 
+# Manage languages
+# For any more details, you can check the official documentation: https://gohugo.io/content-management/multilingual/
+languages:
+  en:
+    languageName: English
+    weight: 1
+  fr:
+    languageName: Français
+    weight: 2
+  bn:
+    languageName: বাংলা
+    weight: 3
+
+# Force a locale to be use, really useful to develop the application ! Should be commented in production, the "weight" should rocks.
+# DefaultContentLanguage: fr
+
 # Allow raw html in markdown file
 markup:
   goldmark:
@@ -24,9 +40,6 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # copyright
-  copyright: © 2020 Copyright.
-
   # background image of the landing page
   background: "images/background.jpg"
 
@@ -34,8 +47,9 @@ params:
   # transparent navbar and the main logo will be used in the non-transparent navbar.
   # It will be default to the theme logos if not provided.
   logo:
-    main: /assets/images/main-logo.png
+    main: assets/images/main-logo.png
-    inverted: /assets/images/inverted-logo.png
+    inverted: assets/images/inverted-logo.png
+    favicon: assets/images/favicon.png
 
   # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
@@ -46,28 +60,7 @@ params:
   # specify whether you want to show Table of Contents in reading page
   enableTOC: true
 
-  # specify the list of custom menus that you want to show in the top navbar.
-  # they will be separated by a divider from the main menus.
-  customMenus:
-  - name: Notes
-    url: https://hossainnotes.netlify.app/docs/example/
-
   # Provide newsletter configuration. This feature hasn't been implemented yet.
   # Currently, you can just hide it from the footer.
   newsletter:
     enable: true
-
-  # some information about you
-  author:
-    name: "Jane Doe"
-    nickname: "Jane"
-    image: "images/avatar.png"
-    # give your some contact information. they will be used in the footer
-    contactInfo:
-      email: "janedoe@example.com"
-      phone: "+0123456789"
-    # a summary of what you do
-    summary:
-    - I am a Developer
-    - I work with Go
-    - I love to work with some fun projects

exampleSite/data/bn/author.yaml

@@ -0,0 +1,16 @@
+# some information about you
+name: "জেইন ডো"
+nickname: "জেইন"
+# greeting message before your name. it will default to "Hi! I am" if not provided
+greeting: "হ্যালো, আমি হলাম"
+image: "images/avatar.png"
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - আমি একজন ডেভেলপার
+  - আমি ওপেন সোর্স প্রোজেক্ট এ কাজ করতে পছন্দ করি
+  - আমি মজার কিছু প্রোজেক্ট এ কাজ করতে ভালবাসি

exampleSite/data/bn/sections/about.yaml

@@ -0,0 +1,78 @@
+# section information
+section:
+  name: আমার-সম্পর্কে
+  id: about
+  enable: true
+  weight: 1
+  showOnNavbar: true
+  template: sections/about.html
+
+# your designation
+designation: Software Engineer
+# your company information
+company:
+  name: Example Co.
+  url: "https://www.example.com"
+
+# your resume. this file path should be relative to you "static" directory
+resume: "files/resume.pdf"
+
+# a summary about you
+summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.'
+
+# your social links
+# give as many as you want. use font-awesome for the icons.
+socialLinks:
+- name: Email
+  icon: "fas fa-envelope"
+  url: "example@gmail.com"
+
+- name: Github
+  icon: "fab fa-github"
+  url: "https://www.github.com/example"
+
+- name: Stackoverflow
+  icon: "fab fa-stack-overflow"
+  url: "#"
+
+- name: LinkedIn
+  icon: "fab fa-linkedin"
+  url: "#"
+
+- name: Twitter
+  icon: "fab fa-twitter"
+  url: "#"
+
+- name: Facebook
+  icon: "fab fa-facebook"
+  url: "#"
+
+# your soft skills
+# give the percentage between 50 to 100 with 5 intervals.
+# currently supported colors: blue, yellow, pink, green, sky, orange
+softSkills:
+- name: Leadership
+  percentage: 85
+  color: blue
+- name: Team Work
+  percentage: 90
+  color: yellow
+- name: Communication
+  percentage: 85
+  color: pink
+- name: Hard Working
+  percentage: 85
+  color: green
+- name: Fast Learner
+  percentage: 85
+  color: sky
+- name: Problem Solving
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

exampleSite/data/bn/sections/achievements.yaml

@@ -0,0 +1,25 @@
+# section information
+section:
+  name: সাফল্য
+  id: achievements
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  template: sections/achievements.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your achievements achievements
+achievements:
+- title: Best Presenter
+  image: images/achievements/presenter.jpg
+  summary: Best presenter in the 2020 XYZ conference.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion in cycling inter-city cycling championship 2020.
+- title: Graduation
+  image: images/achievements/graduation-cap.jpg
+  summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
+- title: Award Winner
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/bn/sections/experiences.yaml

@@ -0,0 +1,65 @@
+# section information
+section:
+  name: অভিজ্ঞতা
+  id: experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  template: sections/experiences.html
+  # Can optionally hide the title in sections
+  # hideTitle: true 
+
+# Your experiences
+experiences:
+- company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes.
+  positions:
+  - designation: Senior Software Engineer
+    start: Nov 2019
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
+    # end: Dec 2020
+    # give some points about what was your responsibilities at the company.
+    responsibilities:
+    - Design and develop XYZ tool for ABC task
+    - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+    - Lead backend team.
+
+  - designation: Junior Software Engineer
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implement and test xyz feature for abc tool.
+    - Support client for abc tool.
+    - Learn k,d,w technology for xyz.
+
+- company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here.
+  positions:
+  - designation: Software Engineer
+    start: March 2016
+    end: May 2017
+    responsibilities:
+    - Write lots of example codes.
+    - Read lots of examples.
+    - See lots of example videos.
+
+- company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers.
+  positions:
+  - designation: Intern
+    start: Jun 2015
+    end: Jan 2016
+    responsibilities:
+    - Count lost of interns.
+    - Count more interns.
+    - Count me as an intern.

exampleSite/data/bn/sections/projects.yaml

@@ -0,0 +1,65 @@
+# section information
+section:
+  name: প্রোজেক্ট
+  id: projects
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  template: sections/projects.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professional
+  filter: "professional"
+- name: Academic
+  filter: "academic"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributor
+  timeline: "March 2018 - Present"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Production-Grade Container Scheduling and Management.
+  tags: ["professional", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Developer
+  timeline: "Jun 2018 - Present"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: An Open Source Machine Learning Framework for Everyone.
+  tags: ["professional", "machine-learning","academic"]
+
+- name: A sample academic paper
+  role: Team Lead
+  timeline: "Jan 2017 - Nov 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["academic","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Nothing
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Jun 2019 - Present"
+  repo: https://github.com/hossainemruz/toha
+  summary: A Hugo theme for personal portfolio.
+  tags: ["hobby","hugo","theme","professional"]

exampleSite/data/bn/sections/recent-posts.yaml

@@ -0,0 +1,12 @@
+# section information
+section:
+  name: সাম্প্রতিক-পোস্ট
+  id: recent-posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  template: sections/recent-posts.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/bn/sections/skills.yaml

@@ -0,0 +1,50 @@
+# section information
+section:
+  name: দক্ষতা
+  id: skills
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  template: sections/skills.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your Skills.
+# Give a summary of you each skill in the summary section.
+skills:
+- name: Kubernetes
+  icon: "images/skills/kubernetes.png"
+  summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs."
+  url: "https://kubernetes.io/"
+
+- name: Go Development
+  icon: "images/skills/go.png"
+  summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  url: "https://golang.org/"
+
+- name: Cloud Computing
+  icon: "images/skills/cloud.png"
+  summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc."
+
+- name: Docker
+  icon: "images/skills/docker.svg"
+  summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process."
+  url: "https://www.docker.com/"
+
+- name: Prometheus
+  icon: "images/skills/prometheus.png"
+  summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters."
+  url: "https://prometheus.io/"
+
+- name: Linux
+  icon: "images/skills/linux.png"
+  summary: "Using as the main operating system. Capable of writing bash/shell scripts."
+
+- name: Git
+  icon: "images/skills/git.png"
+  summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
+  url: "https://git-scm.com/"
+
+- name: C++
+  icon: "images/skills/c++.png"
+  summary: "Know basic C/C++ programming. Used for contest programming and problem solving."

exampleSite/data/bn/site.yaml

@@ -0,0 +1,11 @@
+# Copyright Notice
+copyright: © 2020 Copyright.
+
+# Meta description for your site.  This will help the search engines to find your site.
+description: Portfolio and personal blog of Jane Doe.
+
+# specify the list of custom menus that you want to show in the top navbar.
+# they will be separated by a divider from the main menus.
+customMenus:
+- name: নোটসমুহ
+  url: https://hossainemruz.gitbook.io/

exampleSite/data/en/author.yaml

@@ -0,0 +1,18 @@
+# some information about you
+name: "Jane Doe"
+nickname: "Jane"
+# greeting message before your name. it will default to "Hi! I am" if not provided
+greeting: "Hi, I am"
+image: "images/avatar.png"
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - I am a Developer
+  - I am a Devops
+  - I love servers
+  - I work on open-source projects
+  - I love to work with some fun projects

exampleSite/data/en/sections/about.yaml

@@ -1,9 +1,11 @@
 # section information
 section:
   name: About
+  id: about
   enable: true
   weight: 1
   showOnNavbar: true
+  template: sections/about.html
 
 # your designation
 designation: Software Engineer

exampleSite/data/en/sections/achievements.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Achievements
+  id: achievements
   enable: true
   weight: 6
   showOnNavbar: true

exampleSite/data/en/sections/experiences.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Experiences
+  id: experiences
   enable: true
   weight: 3
   showOnNavbar: true

exampleSite/data/en/sections/projects.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Projects
+  id: projects
   enable: true
   weight: 4
   showOnNavbar: true

exampleSite/data/en/sections/recent-posts.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Recent Posts
+  id: recent-posts
   enable: true
   weight: 5
   showOnNavbar: true

exampleSite/data/en/sections/skills.yaml

@@ -1,6 +1,7 @@
 # section information
 section:
   name: Skills
+  id: skills
   enable: true
   weight: 2
   showOnNavbar: true

exampleSite/data/en/site.yaml

@@ -0,0 +1,11 @@
+# Copyright Notice
+copyright: © 2020 Copyright.
+
+# Meta description for your site.  This will help the search engines to find your site.
+description: Portfolio and personal blog of Jane Doe.
+
+# specify the list of custom menus that you want to show in the top navbar.
+# they will be separated by a divider from the main menus.
+customMenus:
+- name: Notes
+  url: https://hossainemruz.gitbook.io/

exampleSite/data/fr/author.yaml

@@ -0,0 +1,19 @@
+name: "Jane Doe"
+nickname: "Jane"
+image: "images/avatar.png"
+
+# greeting message before your name. it will default to "Hi! I am" if not provided
+greeting: "Bonjour, je suis"
+
+# give your some contact information. they will be used in the footer
+contactInfo:
+  email: "janedoe@example.com"
+  phone: "+0123456789"
+
+# some summary about what you do
+summary:
+  - Je suis un développeur
+  - Je suis un Devops
+  - J'aime les serveurs
+  - Je travaille sur des projets open-source
+  - J'aime travailler avec des projets amusants

exampleSite/data/fr/sections/about.yaml

@@ -0,0 +1,78 @@
+# section information
+section:
+  name: "A propos"
+  id: about
+  enable: true
+  weight: 1
+  showOnNavbar: true
+  template: sections/about.html
+
+# your designation
+designation: "Développeur logiciel"
+# your company information
+company:
+  name: Example Co.
+  url: "https://www.example.com"
+
+# your resume. this file path should be relative to you "static" directory
+resume: "files/resume.pdf"
+
+# a summary about you
+summary: "Je suis un ingénieur en logiciel passionné, avec x années d'expérience professionnelle. J'ai construit des outils OSS pour [Kubernetes](https://kubernetes.io/) en utilisant GO. Mes outils aident les gens à déployer leurs charges de travail dans Kubernetes. Parfois, je travaille sur des projets amusants comme l'écriture d'un thème, etc."
+
+# your social links
+# give as many as you want. use font-awesome for the icons.
+socialLinks:
+- name: Email
+  icon: "fas fa-envelope"
+  url: "example@gmail.com"
+
+- name: Github
+  icon: "fab fa-github"
+  url: "https://www.github.com/example"
+
+- name: Stackoverflow
+  icon: "fab fa-stack-overflow"
+  url: "#"
+
+- name: LinkedIn
+  icon: "fab fa-linkedin"
+  url: "#"
+
+- name: Twitter
+  icon: "fab fa-twitter"
+  url: "#"
+
+- name: Facebook
+  icon: "fab fa-facebook"
+  url: "#"
+
+# your soft skills
+# give the percentage between 50 to 100 with 5 intervals.
+# currently supported colors: blue, yellow, pink, green, sky, orange
+softSkills:
+- name: Chef de projet
+  percentage: 85
+  color: blue
+- name: Travail d'équipe
+  percentage: 90
+  color: yellow
+- name: Communication
+  percentage: 85
+  color: pink
+- name: Persévérant
+  percentage: 85
+  color: green
+- name: Autonome
+  percentage: 85
+  color: sky
+- name: Logique
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"

exampleSite/data/fr/sections/achievements.yaml

@@ -0,0 +1,25 @@
+# section information
+section:
+  name: Realisations
+  id: achievements
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  template: sections/achievements.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your achievements achievements
+achievements:
+- title: Meilleur présentateur
+  image: images/achievements/presenter.jpg
+  summary: Meilleur présentateur de la conférence XYZ 2020.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion du championnat cycliste interurbain 2020.
+- title: Remise des diplômes
+  image: images/achievements/graduation-cap.jpg
+  summary: J'ai obtenu une licence en sciences (B.Sc.) en informatique et en ingénierie à l'université XYZ.
+- title: Lauréat du prix
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?

exampleSite/data/fr/sections/experiences.yaml

@@ -0,0 +1,65 @@
+# section information
+section:
+  name: Experiences
+  id: experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  template: sections/experiences.html
+  # Can optionally hide the title in sections
+  # hideTitle: true 
+
+# Your experiences
+experiences:
+- company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. est une entreprise largement reconnue pour le développement de l'utilisation des nuages. Elle construit des outils pour Kubernetes.
+  positions:
+  - designation: Ingénieur logiciel senior
+    start: Nov 2019
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
+    # end: Dec 2020
+    # give some points about what was your responsibilities at the company.
+    responsibilities:
+    - Concevoir et développer l'outil XYZ pour la tâche ABC.
+    - Concevoir, développer et gérer l'outil de reprise après sinistre [Xtool](https://www.example.com) qui sauvegarde les volumes, les bases de données et la définition des ressources du cluster de Kubernetes.
+    - Diriger l'équipe de soutien.
+
+  - designation: Ingénieur logiciel junior
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implémenter et tester la fonction xyz pour l'outil abc.
+    - Support client pour abc tool.
+    - Apprendre la technologie k,d,w pour xyz.
+
+- company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. est une société passerelle pour entrer dans Example co. Donc, rien de spécial ici.
+  positions:
+  - designation: Ingénieur logiciel
+    start: Mars 2016
+    end: Mai 2017
+    responsibilities:
+    - Rédigez de nombreux exemples de codes.
+    - Lire de nombreux exemples.
+    - Voir de nombreux exemples de vidéos.
+
+- company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: La Compagnie de comptage des stagiaires (ICC) est responsable du comptage des ingénieurs stagiaires du monde entier.
+  positions:
+  - designation: Stagiaire
+    start: Juin 2015
+    end: Jan 2016
+    responsibilities:
+    - Compte perdu des stagiaires.
+    - Comptez plus de stagiaires.
+    - Comptez-moi comme un stagiaire.

exampleSite/data/fr/sections/projects.yaml

@@ -0,0 +1,65 @@
+# section information
+section:
+  name: Projets
+  id: projects
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  template: sections/projects.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professionnel
+  filter: "professionnel"
+- name: Ecole
+  filter: "ecole"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributeur
+  timeline: "Mars 2018 - Présent"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Planification et gestion des conteneurs de qualité production.
+  tags: ["professionnel", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Développeur
+  timeline: "Juin 2018 - Présent"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: Un cadre d'apprentissage machine à source ouverte pour tous.
+  tags: ["professionnel", "machine-learning","ecole"]
+
+- name: Un exemple d'article académique
+  role: Chef d'équipe
+  timeline: "Janvier 2017 - Novembre 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["ecole","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Rien
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: La meilleure façon de rédiger des demandes sûres et fiables. N'écrivez rien, ne déployez rien.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Juin 2019 - Présent"
+  repo: https://github.com/hossainemruz/toha
+  summary: Un thème Hugo pour le portfolio personnel.
+  tags: ["hobby","hugo","theme","professionnel"]

exampleSite/data/fr/sections/recent-posts.yaml

@@ -0,0 +1,12 @@
+# section information
+section:
+  name: Posts recents
+  id: recent-posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  template: sections/recent-posts.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/fr/sections/skills.yaml

@@ -0,0 +1,50 @@
+# section information
+section:
+  name: Competences
+  id: skills
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  template: sections/skills.html
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# Your Skills.
+# Give a summary of you each skill in the summary section.
+skills:
+- name: Kubernetes
+  icon: "images/skills/kubernetes.png"
+  summary: "Capable de déployer, de gérer l'application sur Kubernetes. Expérimenté dans la rédaction de contrôleurs Kubernetes pour les CRD."
+  url: "https://kubernetes.io/"
+
+- name: Go
+  icon: "images/skills/go.png"
+  summary: "Utiliser comme langue principale pour le développement professionnel. Capable d'écrire des programmes évolutifs, testables et maintenables."
+  url: "https://golang.org/"
+
+- name: Cloud Computing
+  icon: "images/skills/cloud.png"
+  summary: "A travaillé avec la plupart des principaux nuages tels que GCP, AWS, Azure, etc."
+
+- name: Docker
+  icon: "images/skills/docker.svg"
+  summary: "Inscrivez la plupart des programmes en tant que conteneur déchargé. Expérimenté dans le processus de construction en plusieurs étapes et en plusieurs arcs."
+  url: "https://www.docker.com/"
+
+- name: Prometheus
+  icon: "images/skills/prometheus.png"
+  summary: "Capable d'installation, de configurer les métriques de Prometheus. Expérimenté avec PromQL, AlertManager. Expérimenté également dans la rédaction d'exportateurs de métriques."
+  url: "https://prometheus.io/"
+
+- name: Linux
+  icon: "images/skills/linux.png"
+  summary: "Utilisé comme système d'exploitation principal. Capable d'écrire des scripts bash/shell."
+
+- name: Git
+  icon: "images/skills/git.png"
+  summary: "Expérimenté dans le développement basé sur les GIT. Surtout, utilisez Github. Avoir également une expérience de travail avec GitLab."
+  url: "https://git-scm.com/"
+
+- name: C++
+  icon: "images/skills/c++.png"
+  summary: "Connaître les bases de la programmation C/C++. Utilisé pour la programmation de concours et la résolution de problèmes."

exampleSite/data/fr/site.yaml

@@ -0,0 +1,11 @@
+# Copyright Notice
+copyright: © 2020 Droits d'auteur.
+
+# Meta description for your site.  This will help the search engines to find your site.
+description: Portfolio et blog personnel de Jane Doe.
+
+# specify the list of custom menus that you want to show in the top navbar.
+# they will be separated by a divider from the main menus.
+customMenus:
+- name: Remarques
+  url: https://hossainemruz.gitbook.io/

i18n/bn.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "হোম"
+
+[posts]
+other = "পোষ্ট সমূহ"
+
+[resume]
+other = "আমার জীবনবৃত্তান্ত"
+
+[navigation]
+other = "নেভিগেশন"
+
+[contact_me]
+other = "আমার সাথে যোগাযোগ করুনঃ"
+
+[newsletter_text]
+other = "ইমেইল নোটিফিকেশান এর মাধ্যমে সর্বশেষ তথ্য জানুন"
+
+[newsletter_input_placeholder]
+other = "ইমেইল প্রবেশ করান"
+
+[newsletter_warning]
+other = "আমরা আপনার ইমেল অন্য কারও সাথে শেয়ার করব না।"
+
+[submit]
+other = "জমা দিন"
+
+[hugoAttributionText]
+other = "পাওয়ারড বাই"

i18n/en.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Home"
+
+[posts]
+other = "Posts"
+
+[resume]
+other = "My resume"
+
+[navigation]
+other = "Navigation"
+
+[contact_me]
+other = "Contact me:"
+
+[newsletter_text]
+other = "Stay up to date with email notification"
+
+[newsletter_input_placeholder]
+other = "Enter email"
+
+[newsletter_warning]
+other = "We'll never share your email with anyone else."
+
+[submit]
+other = "Submit"
+
+[hugoAttributionText]
+other = "Powered by"

i18n/fr.toml

@@ -0,0 +1,30 @@
+# More documentation here: https://github.com/nicksnyder/go-i18n
+[home]
+other = "Accueil"
+
+[posts]
+other = "Des postes"
+
+[resume]
+other = "Mon Curriculum vitæ"
+
+[navigation]
+other = "Naviguation"
+
+[contact_me]
+other = "Contactez moi :"
+
+[newsletter_text]
+other = "Restez à jour par e-mail"
+
+[newsletter_input_placeholder]
+other = "Entrez une adresse e-mail"
+
+[newsletter_warning]
+other = "Nous ne partagerons jamais votre courriel avec quelqu'un d'autre."
+
+[submit]
+other = "Envoyer"
+
+[hugoAttributionText]
+other = "Alimenté par"

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "header" }}
-    <link rel="stylesheet" href="/assets/css/list.css">
+    <link rel="stylesheet" href="/assets/css/layouts/list.css">
     <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
@@ -8,13 +8,18 @@
 {{ end }}
 
 {{ define "sidebar" }}
+  {{ $blogHome:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) "posts") }}
+  {{ end }}
+
   <section class="sidebar-section" id="sidebar-section">
     <div class="sidebar-holder">
       <div class="sidebar" id="sidebar">
         <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
         <div class="sidebar-tree">
           <ul class="tree" id="tree">
-            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
             <div class="subtree">
                 {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
             </div>

layouts/_default/single.html

@@ -1,9 +1,10 @@
 {{ define "header" }}
+<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
 />
-<link rel="stylesheet" href="/assets/css/single.css" />
+<link rel="stylesheet" href="/assets/css/layouts/single.css" />
 <link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
 {{ end }}
 
@@ -18,7 +19,7 @@
         <input type="text" value="" placeholder="Search" data-search="" id="search-box" />
         <div class="sidebar-tree">
           <ul class="tree" id="tree">
-            <li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
+            <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
             <div class="subtree">
                 {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
             </div>
@@ -36,7 +37,7 @@
       <!--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>
-  
+
       <!--Content Start-->
       <div class="page-content">
         <div class="author-profile ml-auto align-self-lg-center">
@@ -44,15 +45,15 @@
           <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
           <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
         </div>
-  
+
         <div class="title">
           <h1>{{ .Page.Title }}</h1>
         </div>
-  
+
         <div class="post-content" id="post-content">
           {{ .Page.Content }}
         </div>
-  
+
         <!--- Improve this page button --->
         {{ if .Site.Params.GitRepo }}
           <div class="btn-improve-page">
@@ -62,7 +63,7 @@
               </a>
           </div>
         {{ end }}
-  
+
         <!---Next and Previous Navigator -->
       <hr />
         {{ partial "navigators/next-prev-navigator.html" . }}
@@ -74,6 +75,9 @@
       </div>
     </div>
   </div>
+  {{ if .IsTranslated }}
+    {{ partial "navigators/floating-lang-selector.html" . }}
+  {{ end }}
 </section>
 {{ end }}
 

layouts/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <title>{{- .Site.Title -}}</title>
+    <meta name="description" content="{{ .Site.Params.description }}" />
     <!-- import common headers -->
     {{- partial "header.html" . -}}
 
@@ -28,9 +29,14 @@
     {{- partial "sections/home.html" . -}}
 
     <!--- ADD OPTIONAL SECTIONS ----------->
-    {{ if .Site.Data.sections }}
+    {{ $sections:= .Site.Data.sections }}
+    {{ if (index .Site.Data .Site.Language.Lang).sections }}
+      {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+    {{ end }}
+
+    {{ if $sections }}
       {{ $background:= "bg-white"}}
-      {{ range sort .Site.Data.sections "section.weight" }}
+      {{ range sort $sections "section.weight" }}
         {{ if .section.enable }}
           <div class="container-fluid section-holder d-flex {{ $background }}">
             {{ if .section.template }}

layouts/partials/cards/post.html

@@ -1,5 +1,5 @@
 <div class="post-card">
-  <a href="{{ .RelPermalink }}" class="post-card-link">
+  <a href="{{ .RelPermalink | relLangURL }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
         <img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'/>
@@ -11,7 +11,7 @@
       <div class="card-footer">
         <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
         <a
-        href="{{ .RelPermalink }}"
+        href="{{ .RelPermalink | relLangURL }}"
         class="float-right btn btn-outline-info btn-sm"
         >Read</a
         >

layouts/partials/cards/project.html

@@ -8,7 +8,7 @@
         <div>
           <div class="d-flex">
             {{ if .logo }}
-            <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
+            <img class="card-img-xs" src="{{ .logo | absURL }}" alt="{{ .name }}" />
             {{ end }}
             <h5 class="card-title mb-0">{{ .name }}</h5>
           </div>

layouts/partials/cards/skill.html

@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-head d-flex">
         {{ if .icon }}
-        <img class="card-img-xs" src="{{ .icon }}" alt="{{ .name }}" />
+        <img class="card-img-xs" src="{{ .icon | absURL }}" alt="{{ .name }}" />
         {{ end }}
         <h5 class="card-title">{{ .name }}</h5>
       </div>

layouts/partials/footer.html

@@ -1,33 +1,57 @@
+{{ $author:= .Site.Data.author }}
+{{ if (index .Site.Data .Site.Language.Lang).author }}
+  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
+{{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
+{{ $copyrightNotice := "© 2020 Copyright."}}
+{{ if (index .Site.Data .Site.Language.Lang).site }}
+  {{ $siteConfig := (index .Site.Data .Site.Language.Lang).site }}
+  {{ if $siteConfig.copyright }}
+    {{ $copyrightNotice = $siteConfig.copyright }}
+  {{ end }}
+{{ end }}
+
 <footer class="container-fluid text-center align-content-center footer pb-2">
   <div class="container pt-5">
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
-        <h5>Navigation</h5>
+        <h5>{{ i18n "navigation" }}</h5>
-        {{ if .Site.Data.sections }}
+        {{ if $sections }}
         <ul>
-          {{- range sort .Site.Data.sections "section.weight" }}
+          {{- range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
-            <li class="nav-item">
+              {{ $sectionID := replace (lower .section.name) " " "-"  }}
-              <a class="smooth-scroll" href="/#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+              {{ if .section.id }}
-            </li>
+                {{ $sectionID = .section.id }}
+              {{ end }}
+              <li class="nav-item">
+                <a class="smooth-scroll" href="#{{ $sectionID }}">{{ .section.name }}</a>
+              </li>
             {{ end }}
           {{- end }}
         </ul>
         {{ end }}
 
       </div>
+      {{ if $author }}
       <div class="col-md-4 col-sm-12">
-        <h5>Contact Me</h5>
+        <h5>{{ i18n "contact_me" }}</h5>
         <ul>
-          {{ range $key,$value:=.Site.Params.author.contactInfo }}
+          {{ range $key,$value:= $author.contactInfo }}
           <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
           {{ end }}
         </ul>
       </div>
+      {{ end }}
       {{ if .Site.Params.newsletter.enable }}
       <div class="col-md-4 col-sm-12">
         <!-- <h5>Newsletter</h5> -->
-        <p>Stay up to date with email notification</p>
+        <p>{{ i18n "newsletter_text" }}</p>
         <form>
           <div class="form-group">
             <input
@@ -35,13 +59,13 @@
               class="form-control"
               id="exampleInputEmail1"
               aria-describedby="emailHelp"
-              placeholder="Enter email"
+              placeholder="{{ i18n "newsletter_input_placeholder" }}"
             />
             <small id="emailHelp" class="form-text text-muted"
-              >We'll never share your email with anyone else.</small
+              >{{ i18n "newsletter_warning" }}</small
             >
           </div>
-          <button type="submit" class="btn btn-info">Submit</button>
+          <button type="submit" class="btn btn-info">{{ i18n "submit" }}</button>
         </form>
       </div>
       {{ end }}
@@ -56,9 +80,9 @@
           Toha
         </a>
       </div>
-      <div class="col-md-4 text-center">{{ if .Site.Params.copyright }}{{ .Site.Params.copyright }}{{ else }}© 2020 Copyright.{{ end }}</div>
+      <div class="col-md-4 text-center">{{ $copyrightNotice }}</div>
       <div class="col-md-4 text-right">
-        <a id="hugo" href="https://gohugo.io/">Powered by Hugo
+        <a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
         <img
           src="/assets/images/hugo-logo-wide.svg"
           alt="Hugo Logo"

layouts/partials/header.html

@@ -4,7 +4,7 @@
 
 <!-- ============ import common css ========== -->
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
-<link rel="stylesheet" href="/assets/css/main.css" />
+<link rel="stylesheet" href="/assets/css/layouts/main.css" />
 <link rel="stylesheet" href="/assets/css/style.css" />
 <link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
 
@@ -13,7 +13,7 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
 
 <!--================= fab-icon =========================-->
-<link rel="icon" type="image/png" href="/assets/images/favicon.png" />
+<link rel="icon" type="image/png" href="{{ .Site.Params.logo.favicon | default "/assets/images/favicon.png" | absURL }}" />
 
 <!--================= custom style overrides =========================-->
 <link rel="stylesheet" href="/assets/css/style.css" />

layouts/partials/helpers/country-code.html

@@ -0,0 +1,13 @@
+{{ $languageCode:= .Lang }}
+{{/*  by default the language code and the country code are same  */}}
+{{ $countryCode:= $languageCode }}
+
+{{/*  language code and country code are not same for some countries. we need to fix them.  */}}
+{{ if eq $languageCode "en" }}
+   {{ $countryCode = "gb" }}
+{{ else if  eq $languageCode "bn" }}
+    {{ $countryCode = "bd" }}
+{{ end }}
+
+{{/*  return the country code  */}}
+{{ return $countryCode }}

layouts/partials/helpers/get-author-name.html

@@ -1,4 +1,4 @@
-{{ $authorName:= "John Doe"}}
+{{ $authorName:= .Site.Params.author.name }}
 {{ if .Site.Data.site.author}}
     {{ $authorName = .Site.Data.site.author.name }}
 {{ end}}

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

@@ -0,0 +1,19 @@
+{{ $pageURL:= .RelPermalink }}
+{{ if .Site.IsMultiLingual }}
+    {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
+{{ end }}
+
+<div class="dropdown languageSelector">
+    <a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+        {{ .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 }}">
+            <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+            {{ .Language.LanguageName }}
+        </a>
+        {{ end }}
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+{{ $pageURL:= .RelPermalink }}
+{{ if .Site.IsMultiLingual }}
+  {{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
+{{ end }}
+
+<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">
+      <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+      {{ .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 }}">
+          <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+          {{ .Language.LanguageName }}
+        </a>
+      {{ end }}
+    </div>
+</li>

layouts/partials/navigators/lang-selector.html

@@ -0,0 +1,14 @@
+<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">
+    <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/16.png">
+    {{ .Site.Language.LanguageName }}
+</a>
+<div class="dropdown-menu" aria-labelledby="languageSelector">
+    {{ range $.Site.Home.AllTranslations }}
+    <a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
+        <img class="flag" src="https://www.countryflags.io/{{ partial "helpers/country-code.html" .Language }}/flat/24.png">
+        {{ .Language.LanguageName }}
+    </a>
+    {{ end }}
+</div>
+</li>

layouts/partials/navigators/navbar-2.html

@@ -1,30 +1,34 @@
+{{ $mainLogo:="assets/images/main-logo.png" }}
+{{ $invertedLogo:="assets/images/inverted-logo.png" }}
+{{ if .Site.Params.logo.main }}
+  {{ $mainLogo = .Site.Params.logo.main }}
+{{ end }}
+{{ if .Site.Params.logo.inverted }}
+  {{ $invertedLogo = .Site.Params.logo.inverted }}
+{{ end }}
+
 <nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
   <div class="container">
-    {{ $mainLogo:="/assets/images/main-logo.png" }}
-    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
-    {{ if .Site.Params.logo.main }}
-      {{ $mainLogo = .Site.Params.logo.main }}
-    {{ end }}
-    {{ if .Site.Params.logo.inverted }}
-      {{ $invertedLogo = .Site.Params.logo.inverted }}
-    {{ end }}
       <button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <a class="navbar-brand" href="{{ site.BaseURL }}">
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
-      <img src="{{ $mainLogo }}">
+      <img src="{{ $mainLogo | absURL }}">
       {{- site.Title -}}
     </a>
     <button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse" id="top-nav-items">
+    <div class="collapse navbar-collapse lang-selector" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
+      {{ if .IsTranslated }}
+        {{ partial "navigators/lang-selector-2.html" . }}
+      {{ end }}
       </ul>
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/navbar.html

@@ -1,15 +1,21 @@
+{{ $mainLogo:="assets/images/main-logo.png" }}
+{{ $invertedLogo:="assets/images/inverted-logo.png" }}
+{{ if .Site.Params.logo.main }}
+  {{ $mainLogo = .Site.Params.logo.main }}
+{{ end }}
+{{ if .Site.Params.logo.inverted }}
+  {{ $invertedLogo = .Site.Params.logo.inverted }}
+{{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
 <nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
   <div class="container">
-    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
-    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+      <img src="{{ $invertedLogo | absURL }}" id="logo">
-    {{ if .Site.Params.logo.main }}
-      {{ $mainLogo = .Site.Params.logo.main }}
-    {{ end }}
-    {{ if .Site.Params.logo.inverted }}
-      {{ $invertedLogo = .Site.Params.logo.inverted }}
-    {{ end }}
-    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
-      <img src="{{ $invertedLogo }}" id="logo">
       {{- .Site.Title -}}
     </a>
     <button
@@ -25,13 +31,17 @@
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link" href="#home">Home</a>
+          <a class="nav-link" href="#home">{{ i18n "home" }}</a>
         </li>
-        {{- if .Site.Data.sections }}
+        {{ if $sections }}
-          {{- range sort .Site.Data.sections "section.weight" }}
+          {{ range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
+              {{ $sectionID := replace (lower .section.name) " " "-"  }}
+              {{ if .section.id }}
+                {{ $sectionID = .section.id }}
+              {{ end }}
               <li class="nav-item">
-                <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+                <a class="nav-link" href="#{{ $sectionID }}">{{ .section.name }}</a>
               </li>
             {{ end }}
           {{- end }}
@@ -47,18 +57,21 @@
         {{ end }}
         {{ if site.Params.enableBlogPost }}
           <li class="nav-item">
-            <a class="nav-link" id="blog-link" href="/posts">Posts</a>
+            <a class="nav-link" id="blog-link" href="{{ "/posts" | relLangURL }}">{{ i18n "posts" }}</a>
           </li>
         {{ end }}
-        {{ range site.Params.customMenus }}
+        {{ range  (index .Site.Data .Site.Language.Lang).site.customMenus }}
           <li class="nav-item">
             <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
           </li>
         {{ end }}
+        {{ if .IsTranslated }}
+          {{ partial "navigators/lang-selector.html" . }}
+        {{ end }}
       </ul>
     </div>
   </div>
   <!-- Store the logo information in a hidden img for the JS -->
-  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $mainLogo | absURL }}" class="d-none" id="main-logo">
-  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
 </nav>

layouts/partials/navigators/sidebar.html

@@ -9,7 +9,7 @@
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
@@ -17,6 +17,6 @@
     </li>
   {{ else }}
     <!-- No sub-tree. So, only add current entry -->
-    <li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
+    <li><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a></li>
   {{ end }}
 {{ end }}

layouts/partials/scripts.html

@@ -1,4 +1,5 @@
 <script src="/assets/js/jquery-3.4.1.min.js"></script>
+<script src="/assets/js/popper.min.js"></script>
 <script src="/assets/js/bootstrap.min.js"></script>
 
 <script src="/assets/js/navbar.js"></script>

layouts/partials/sections/about.html

@@ -1,4 +1,9 @@
-<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container anchor p-lg-5 about-section" id="{{ $sectionID }}">
   <div class="row pt-sm-2 pt-md-4 align-self-center">
     <!-- summary -->
     <div class="col-sm-6">
@@ -28,8 +33,8 @@
         </ul>
       </div>
       {{ if .resume }}
-      <a href="{{ .resume }}" target="#"
+      <a href="{{ .resume | absURL }}" target="#"
-        ><button class="btn btn-dark">My Resume</button></a
+        ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
       >
       {{ end }}
     </div>

layouts/partials/sections/achievements.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/achievements/entry.html

@@ -1,6 +1,6 @@
 <div
   class="achievement-entry text-center"
-  style="background-image: url({{ .image }});"
+  style="background-image: url({{ .image | absURL }});"
 >
   <i class="fas fa-search-plus" id="enlarge-icon"></i>
   <h4 class="title" id="achievement-title">{{ .title }}</h4>

layouts/partials/sections/experiences.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/home.html

@@ -1,33 +1,58 @@
+{{ $author:= .Site.Data.author }}
+{{ if (index .Site.Data .Site.Language.Lang).author }}
+  {{ $author = (index .Site.Data .Site.Language.Lang).author }}
+{{ end }}
+
+{{ $name:="Jane Doe" }}
+{{ if $author.nickname }}
+  {{ $name = $author.nickname }}
+{{ else if $author.name }}
+  {{ $name = $author.name }}
+{{ end }}
+
+{{ $sections:= .Site.Data.sections }}
+{{ if (index .Site.Data .Site.Language.Lang).sections }}
+  {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+{{ end }}
+
+{{ $backgroundImage:= "assets/images/default-background.jpg" }}
+{{ if .Site.Params.background }}
+  {{ $backgroundImage = .Site.Params.background }}
+{{ end }}
+
+{{ $authorImage:= "assets/images/default-avatar.png" }}
+{{ if $author.image }}
+  {{ $authorImage = $author.image }}
+{{ end }}
+
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
-    style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
+    style="background-image: url('{{ $backgroundImage | absURL }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
+    <img src="{{ $authorImage | absURL }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
-    <h1 class="greeting">Hi, I am
+    <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
-      {{ if .Site.Params.author.nickname }}
-        {{ .Site.Params.author.nickname }}
-      {{ else if .Site.Params.author.name }}
-        {{ .Site.Params.author.name }}
-      {{ else }}
-        Jane Doe
-      {{ end }}
-    </h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>
     </div>
     <ul id="typing-carousel-data">
-      {{ range .Site.Params.author.summary }}
+      {{ if $author.summary }}
-      <li>{{ . }}</li>
+        {{ range $author.summary }}
+          <li>{{ . }}</li>
+        {{ end}}
       {{ end }}
     </ul>
-    {{ if .Site.Data.sections }}
+    {{ if $sections }}
-      {{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
+      {{ range first 1 (where (sort $sections "section.weight") ".section.enable" true) }}
-        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
+        {{ $sectionID := replace (lower .section.name) " " "-"  }}
+        {{ if .section.id }}
+          {{ $sectionID = .section.id }}
+        {{ end }}
+        <a href="#{{ $sectionID }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/sections/projects.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 projects-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/recent-posts.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

layouts/partials/sections/skills.html

@@ -1,4 +1,9 @@
-<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 skills-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">{{ .section.name }}</h1>
   {{ end }}

package-lock.json

@@ -0,0 +1,948 @@
+{
+  "name": "toha",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@nodelib/fs.scandir": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
+      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.3",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
+      "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
+      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.3",
+        "fastq": "^1.6.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "9.8.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "colorette": "^1.2.1",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
+      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.14.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
+      "integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001135",
+        "electron-to-chromium": "^1.3.571",
+        "escalade": "^3.1.0",
+        "node-releases": "^1.1.61"
+      }
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
+      "requires": {
+        "callsites": "^2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
+      "requires": {
+        "caller-callsite": "^2.0.0"
+      }
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001147",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001147.tgz",
+      "integrity": "sha512-CPyN875geYk46eIqPl5jlmotCr5YZC2KxIVfb4z0FrNfLxPM+MyodWD2irJGDG8vUUE1fmg3De9vt8uaC6Nf6w==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz",
+      "integrity": "sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.4.0"
+      }
+    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
+      "dev": true
+    },
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "dev": true,
+      "requires": {
+        "import-fresh": "^2.0.0",
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.13.1",
+        "parse-json": "^4.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "dependency-graph": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.9.0.tgz",
+      "integrity": "sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.3.578",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz",
+      "integrity": "sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==",
+      "dev": true
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escalade": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
+      "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+      "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.0",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
+      }
+    },
+    "fastq": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "fs-extra": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+      "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^1.0.0"
+      }
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+      "dev": true
+    },
+    "glob-parent": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "globby": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
+      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.1.1",
+        "ignore": "^5.1.4",
+        "merge2": "^1.3.0",
+        "slash": "^3.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
+      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "dev": true
+    },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
+      "requires": {
+        "caller-path": "^2.0.0",
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
+      "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^1.0.0"
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.0.1"
+      }
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+      "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.0.5"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.61",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
+      "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "postcss": {
+      "version": "7.0.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      }
+    },
+    "postcss-cli": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.2.tgz",
+      "integrity": "sha512-3mlEmN1v2NVuosMWZM2tP8bgZn7rO5PYxRRrXtdSyL5KipcgBDjJ9ct8/LKxImMCJJi3x5nYhCGFJOkGyEqXBQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.9.0",
+        "fs-extra": "^9.0.0",
+        "get-stdin": "^8.0.0",
+        "globby": "^11.0.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "postcss-reporter": "^6.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "yargs": "^15.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^5.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-reporter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
+      "integrity": "sha512-LpmQjfRWyabc+fRygxZjpRxfhRf9u/fdlKf4VHG4TSPbV2XNsuISzYW1KL+1aQzx53CAppa1bKG4APIB/DOXXw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "lodash": "^4.17.11",
+        "log-symbols": "^2.2.0",
+        "postcss": "^7.0.7"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
+    "readdirp": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+      "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "resolve-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+      "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "universalify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+      "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+      "dev": true
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "y18n": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "toha",
+  "version": "1.0.0",
+  "description": "A [Hugo](https://gohugo.io/) theme for a personal portfolio with minimalist design and responsiveness.",
+  "main": "index.js",
+  "scripts": {
+    "autoprefixer": "postcss static/assets/css/*/*.css --use autoprefixer -r --no-map"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hossainemruz/toha.git"
+  },
+  "author": "Emruz Hossain",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hossainemruz/toha/issues"
+  },
+  "homepage": "https://github.com/hossainemruz/toha#readme",
+  "devDependencies": {
+    "autoprefixer": "^9.8.6",
+    "postcss-cli": "^7.1.2"
+  }
+}

static/assets/css/layouts/list.css

@@ -67,6 +67,8 @@
 }
 
 .content-cards .paginator {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
   margin: auto;
 }
@@ -89,6 +91,8 @@
   margin-right: auto;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -151,6 +155,13 @@
     visibility: hidden;
   }
 
+  .navbar-collapse.lang-selector {
+    display: block !important;
+    position: absolute;
+    right: 0;
+    top: 0.5rem;
+  }
+
   .content-cards {
     padding-top: 20px;
     width: 100%;
@@ -163,6 +174,7 @@
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     position: relative;
+    transition: all ease-out 0.3s;
   }
 
   .post-card-holder .post-card {
@@ -177,45 +189,6 @@
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
   .post-card-holder .post-card {
     width: 50%;
   }
@@ -228,52 +201,6 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
-  .post-card-holder .post-card {
-    width: 50%;
-  }
-
-  .content-section.hide .post-card-holder .post-card {
-    width: 100%;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -296,35 +223,24 @@
     width: 100%;
     padding-left: 0;
     padding-right: 0;
+    transition: all ease-out 0.3s;
   }
 
   .content-section.hide .content {
     margin-top: 0;
     padding-top: 0;
-  }
+    transition: all ease-out 0.3s;
-
-  #toc-toggler {
-    visibility: hidden;
   }
 
   .content-cards {
     padding-top: 20px;
     padding-left: 0px;
-    transition: all ease-out 0.5s;
+    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
-  .post-card-holder {
+  .content-section.hide .post-card-holder {
-    margin: 0;
+    margin-top: 0.5rem;
-    margin-top: 1.5rem;
+    transition: all ease-out 0.3s;
-    padding-right: 0;
-    padding-left: 0;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .post-card-holder.hide {
-    margin-top: 0;
   }
 
   .post-card-holder .post-card {

static/assets/css/layouts/main.css

@@ -54,7 +54,6 @@ a:hover {
   border-color: #3c4858;
   color: #e5e9f2;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .btn-dark:hover,
@@ -62,7 +61,6 @@ a:hover {
   background-color: #248aaa;
   border-color: #248aaa;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .btn-outline-info {
@@ -116,7 +114,6 @@ img.right {
 .card {
   box-shadow: none;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   overflow: hidden;
 }
 
@@ -135,26 +132,23 @@ img.right {
   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
   border: 1px solid #fff;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .card .card-head {
   height: 172px;
+  -o-object-fit: cover;
   object-fit: cover;
   overflow: hidden;
 }
 
 .card-img-top {
   transition: all 0.3s ease-out !important;
-  -webkit-transition: all 0.3s ease-out !important;
 }
 
 .card:hover .card-head .card-img-top,
 .card:focus .card-head .card-img-top {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   transform: scale(1.2);
-  -webkit-transform: scale(1.2);
 }
 
 .card-body {
@@ -181,13 +175,11 @@ img.right {
 .footer a {
   color: #8392a5;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .footer a:hover {
   margin-left: 5px;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .footer ul {
@@ -226,7 +218,6 @@ img.right {
 .footer #hugo:hover {
   margin-right: 5px;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 /* --- FOOTER END ---- */
@@ -247,6 +238,14 @@ img.right {
 
 /* IPad Pro */
 @media (max-width: 1024px) {
+  .content-section .languageSelector {
+    position: fixed;
+    right: 0.5rem;
+    bottom: 1rem;
+    z-index: 10000000;
+    background-color: #f9fafc;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  }
 }
 
 /*  Large devices (desktops, 992px and up) */

static/assets/css/layouts/single.css

@@ -34,27 +34,24 @@ body {
   max-width: 20%;
   /* background-color: lightpink; */
   transition: all ease-out 0.5s;
-  -webkit-transition: all ease-out 0.5s;
 }
 
 .toc-holder {
+  position: -webkit-sticky;
   position: sticky;
   top: 4.5rem;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #f9fafc;
   margin-right: 0.5rem;
-  max-height: 100vh;
   /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc {
   position: relative;
   padding-top: 0px;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc nav {
@@ -64,7 +61,6 @@ body {
   flex-direction: column;
   align-items: flex-start;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .toc ul {
@@ -76,7 +72,6 @@ body {
   padding: 0;
   padding-left: 0.5rem;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
   color: #1c2d41;
 }
 
@@ -88,7 +83,6 @@ body {
   background-color: #248aaa;
   color: #f9f9f9;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .hero-area {
@@ -193,7 +187,11 @@ tbody tr:hover {
 
 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;
   margin: auto;
@@ -246,6 +244,7 @@ a.header-anchor code {
 .content ol > ol,
 .content li > ol,
 .content li > ul {
+  -webkit-padding-start: 1rem;
   padding-inline-start: 1rem;
 }
 
@@ -266,13 +265,11 @@ mark {
 .next-prev-navigator a {
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator a:hover {
   color: #3c4858;
   transition: all 0.3 ease-out;
-  -webkit-transition: all 0.3 ease-out;
 }
 
 .next-prev-navigator .next-article {
@@ -281,12 +278,10 @@ mark {
 
 .next-prev-navigator .next-article a {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .previous-article a {
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info {
@@ -294,14 +289,12 @@ mark {
   border-color: #e5e9f2 !important;
   background-color: #248aaa !important;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .next-prev-navigator .btn-outline-info:hover {
   color: #3c4858 !important;
   background-color: #e5e9f2 !important;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .disquss {
@@ -359,23 +352,25 @@ mark {
     flex: 0%;
     max-width: 0%;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .toc-section.hide {
     flex: 40%;
     max-width: 40%;
     margin-left: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 
   .toc-holder {
     top: 3rem;
+    max-height: calc(100vh - 3rem);
   }
 
   .navbar-toggler {
     display: block;
   }
+  .navbar-collapse.lang-selector {
+    display: none;
+  }
 
   .hero-area {
     height: 300px;
@@ -411,72 +406,6 @@ mark {
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    max-width: 100%;
-    order: 2;
-    overflow: hidden;
-  }
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-
-  .toc-section {
-    order: 3;
-    flex: 0%;
-    max-width: 0%;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-  .toc-section.hide {
-    flex: 40%;
-    max-width: 40%;
-    margin-left: 0.5rem;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-
-  .toc-holder {
-    top: 3rem;
-  }
-
-  .navbar-toggler {
-    display: block;
-  }
-
-  .hero-area {
-    height: 300px;
-    margin-top: 1rem;
-  }
-
-  .page-content {
-    padding: 0px;
-  }
-
-  pre {
-    margin: 0px;
-  }
-  code {
-    padding: 0px;
-  }
-
-  .btn-improve-page {
-    margin-right: 1rem;
-  }
-
-  #disqus_thread,
-  .dsq-brlink {
-    padding: 5px;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -498,11 +427,12 @@ mark {
   .toc-section {
     order: 2;
     width: 100%;
-    height: 0;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .toc-section.hide {
@@ -510,6 +440,8 @@ mark {
     position: relative;
     /* height: fit-content; */
     flex: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     max-height: 200vh;
     max-width: 100%;
@@ -517,7 +449,6 @@ mark {
     padding-right: 0;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .toc-holder {
@@ -525,12 +456,10 @@ mark {
     margin-right: 0;
     overflow: hidden;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
   .toc-section.hide .toc-holder {
     max-height: 200vh;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .navbar-toggler {
@@ -542,9 +471,6 @@ mark {
     margin-top: 1rem;
   }
 
-  .hero-area.hide {
-    margin-top: 1rem;
-  }
   .page-content {
     padding: 0px;
   }

static/assets/css/navigators/navbar.css

@@ -6,7 +6,6 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  -webkit-transition: all 0.4s ease-out;
   margin: 0;
   padding-top: 0.1rem;
   text-align: center;
@@ -31,7 +30,6 @@
 .initial-navbar li a:hover {
   color: #f9fafc;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .navbar-collapse {
@@ -52,7 +50,6 @@
   background-color: #f9fafc;
   color: #1c2d41;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .final-navbar .navbar-brand {
@@ -64,7 +61,6 @@
   color: #1c2d41;
   font-weight: 500;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border-bottom: 2px solid#F9FAFC;
 }
 
@@ -72,7 +68,6 @@
 .final-navbar li a:hover {
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border-bottom: 2px solid #2098d1;
   background: rgb(2, 0, 36);
   background: linear-gradient(
@@ -87,7 +82,6 @@
   color: #1c2d41;
   font-weight: 500;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .navbar-collapse.show .navbar-nav .active,
@@ -122,6 +116,39 @@
   margin-left: -10px;
 }
 
+.top-navbar .dropdown-menu {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  max-height: 0vh;
+  overflow: hidden;
+  display: block;
+  visibility: hidden;
+  transition: all 0.3s ease-out;
+}
+
+.top-navbar .dropdown-menu.show {
+  max-height: 100vh;
+  visibility: visible;
+  transition: all 0.3s ease-in;
+}
+
+.top-navbar .dropdown-menu a {
+  color: #1c2d41;
+  border-bottom: none;
+}
+
+.top-navbar .dropdown-menu a:hover {
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+  border-bottom: none;
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    90deg,
+    rgba(2, 0, 36, 1) 0%,
+    rgba(34, 136, 168, 0.2) 0%
+  );
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */
@@ -138,6 +165,14 @@
 
 /* IPad Pro */
 @media (max-width: 1024px) {
+  .top-navbar {
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
+
   .top-navbar .container {
     max-width: 100%;
   }
@@ -146,14 +181,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -162,12 +196,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -177,6 +205,12 @@
     width: auto;
     margin-right: 15px;
   }
+  .top-navbar .dropdown-menu {
+    text-align: center;
+    margin-bottom: 0.5rem;
+    margin-right: 1rem;
+    transition: all 0.3s ease-out;
+  }
 }
 
 /*  Large devices (desktops, 992px and up) */
@@ -186,14 +220,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -202,12 +235,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -226,14 +253,13 @@
   .initial-navbar li a:hover {
     color: #2098d1;
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .final-navbar .navbar-nav .active,
   .final-navbar li a:hover {
     color: #2098d1;
     transition: none;
-    -webkit-transition: none;
+
     border-bottom: none;
     background: transparent;
   }
@@ -242,12 +268,6 @@
     border-bottom: none;
   }
 
-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
-  }
-
   .dropdown-divider {
     border-top: 1px solid #c0ccda;
   }
@@ -262,6 +282,10 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .top-navbar .dropdown-menu {
+    margin-left: -1rem;
+    margin-right: 0rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */

static/assets/css/navigators/sidebar.css

@@ -4,30 +4,30 @@
   max-width: 20%;
   /* background-color: lightsalmon; */
   transition: all ease-out 0.5s;
-  -webkit-transition: all ease-out 0.5s;
 }
 
 .sidebar-holder {
   top: 2.5rem;
+  position: -webkit-sticky;
   position: sticky;
   background-color: #f9fafc;
   height: 100vh;
   overflow: auto;
   box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .sidebar {
   background: #f9fafc;
   height: 100vh;
   transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
 }
 
 .sidebar-tree {
   padding-left: 1rem;
   position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 
@@ -42,7 +42,6 @@
   border-radius: 5px;
   background-color: #e5e9f2;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   border: 1px solid #c0ccda;
 }
 
@@ -74,7 +73,6 @@ ul {
   text-decoration: none;
   color: #131313;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .tree li a.active {
@@ -86,7 +84,6 @@ ul {
   margin-left: 3px;
   color: #2098d1;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 .tree i {
@@ -193,12 +190,13 @@ a.focused {
     max-width: 0%;
     min-height: 100vh;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
+    max-height: calc(100vh - 2.5rem);
   }
 
   .sidebar-section.hide {
@@ -206,7 +204,6 @@ a.focused {
     max-width: 30%;
     margin-right: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 }
 
@@ -223,9 +220,9 @@ a.focused {
     max-width: 0%;
     min-height: 100vh;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
   .sidebar-holder {
+    position: -webkit-sticky;
     position: sticky;
     top: 2.5rem;
     width: 100%;
@@ -236,7 +233,6 @@ a.focused {
     max-width: 40%;
     margin-right: 0.5rem;
     transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
   }
 }
 
@@ -249,56 +245,57 @@ a.focused {
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-section.hide {
     margin-top: 2rem;
     position: relative;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     flex: none;
     max-height: 300vh;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-holder {
     max-height: 0;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
     height: fit-content;
     overflow: hidden;
     max-width: 100%;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-section.hide .sidebar-holder {
     max-height: 200vh;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .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;
     min-height: 0;
     overflow: hidden;
     transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
   }
 
   .sidebar-tree {
     margin-left: 0rem;
     max-height: 0;
     transition: all 0.5s ease-out;
-    -webkit-transition: all 0.5s ease-out;
   }
   .sidebar-section.hide .sidebar-tree {
     max-height: 200vh;
     transition: all 0.5s ease-out;
-    -webkit-transition: all 0.5s ease-out;
   }
 }
 

static/assets/css/sections/about.css

@@ -63,7 +63,6 @@
   border-top-right-radius: 80px;
   border-bottom-right-radius: 80px;
   border-left: 0;
-  -webkit-transform-origin: center left;
   transform-origin: center left;
 }
 
@@ -76,9 +75,9 @@
   border-top-left-radius: 80px;
   border-bottom-left-radius: 80px;
   border-right: 0;
-  -webkit-transform-origin: center right;
   transform-origin: center right;
-  animation: circular-loading-1 1.8s linear forwards;
+  -webkit-animation: circular-loading-1 1.8s linear forwards;
+          animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
@@ -120,221 +119,344 @@
 }
 
 .circular-progress-percentage-50 {
-  animation: circular-loading-50 0s linear forwards 1.8s;
+  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
+          animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  animation: circular-loading-55 0.18s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-60 0.36s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-65 0.54s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-70 0.72s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-75 0.9s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-80 1.08s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-85 1.26s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-90 1.44s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-95 1.62s linear forwards 1.8s;
+  -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 {
-  animation: circular-loading-100 1.8s linear forwards 1.8s;
+  -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% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 }
 
+@-webkit-keyframes circular-loading-55 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(18deg);
+  }
+}
+
 @keyframes circular-loading-55 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(18deg);
     transform: rotate(18deg);
   }
 }
 
+@-webkit-keyframes circular-loading-60 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-60 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-65 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(54deg);
+  }
+}
+
 @keyframes circular-loading-65 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(54deg);
     transform: rotate(54deg);
   }
 }
 
+@-webkit-keyframes circular-loading-70 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(72deg);
+  }
+}
+
 @keyframes circular-loading-70 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(72deg);
     transform: rotate(72deg);
   }
 }
 
+@-webkit-keyframes circular-loading-75 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-75 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-80 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(108deg);
+  }
+}
+
 @keyframes circular-loading-80 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(108deg);
     transform: rotate(108deg);
   }
 }
 
+@-webkit-keyframes circular-loading-85 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-85 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }
 
+@-webkit-keyframes circular-loading-90 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-90 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-95 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(162deg);
+  }
+}
+
 @keyframes circular-loading-95 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(162deg);
     transform: rotate(162deg);
   }
 }
 
+@-webkit-keyframes circular-loading-100 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
 @keyframes circular-loading-100 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+}
+
+@-webkit-keyframes circular-loading-1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
     transform: rotate(180deg);
   }
 }
 
 @keyframes circular-loading-1 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 }
 
+@-webkit-keyframes circular-loading-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-2 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-3 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-4 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-4 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-5 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-5 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }

static/assets/css/sections/achievements.css

@@ -16,7 +16,6 @@
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .achievement-entry:hover {
@@ -24,7 +23,6 @@
   z-index: 1;
   transform: scale(1.1);
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   z-index: 20000;
 }
 
@@ -33,9 +31,7 @@
   z-index: 1;
   opacity: 1 !important;
   transition: none !important;
-  -webkit-transition: none !important;
   transform: none !important;
-  -webkit-transform: none !important;
 }
 
 #gallery .img-type-1 {
@@ -58,7 +54,6 @@
   opacity: 1;
   font-size: 1rem;
   transition: all 0.3s ease-out;
-  --webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .img-type-1 i {
@@ -72,7 +67,6 @@
 .achievement-details.img-type-2 i {
   margin-top: 0px !important;
   transition: none !important;
-  -webkit-transition: none !important;
   float: right;
 }
 
@@ -92,7 +86,6 @@
   opacity: 1;
   bottom: 0px;
   transition: bottom 0.3s ease-out;
-  -webkit-transition: bottom 0.3s ease-out;
 }
 
 #gallery .caption {
@@ -103,7 +96,6 @@
   padding: 15px;
   position: absolute;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .caption h4 {

static/assets/css/sections/home.css

@@ -12,10 +12,9 @@
   padding: 0;
   margin: 0;
   background-attachment: fixed;
+  background-position: center;
   transform: scale(1.1);
-  -webkit-transform: scale(1.1);
   filter: blur(3px);
-  -webkit-filter: blur(3px);
   background-size: cover;
 }
 
@@ -54,7 +53,24 @@
 }
 
 .bounce {
-  animation: bounce 2s infinite;
+  -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 {

static/assets/css/sections/skills.css

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

static/assets/js/main.js

@@ -23,34 +23,52 @@ var isMobile = false, isTablet = false, isLaptop = false;
 
     // ================= Smooth Scroll ===================
     function addSmoothScroll() {
-      // Add smooth scrolling to all links
+      // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
-      $("a").on('click', function (event) {
+      // Select all links with hashes
+      $('a[href*="#"]')
+        // Remove links that don't actually link to anything
+        .not('[href="#"]')
+        .not('[href="#0"]')
+        .click(function (event) {
+          // On-page links
+          if (
+            location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+            &&
+            location.hostname == this.hostname
+          ) {
+            // Figure out element to scroll to
+            var target = $(this.hash);
+            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+            // Does a scroll target exist?
+            if (target.length) {
+              // Only prevent default if animation is actually gonna happen
+              event.preventDefault();
 
-        // Make sure this.hash has a value before overriding default behavior
+              let offset = 60;
-        if (this.hash !== "") {
+              if (isMobile) {
-          // Prevent default anchor click behavior
+                offset = 710;
-          event.preventDefault();
+              } else if (isTablet) {
-
+                offset = 60;
-          // Store hash
+              }
-          var hash = this.hash;
+              $('html, body').animate({
-
+                scrollTop: target.offset().top - offset
-          let offset = 60;
+              }, 1000, function () {
-          if (isMobile) {
+                // Callback after animation
-            offset = 760;
+                // Must change focus!
-          } else if (isTablet) {
+                var $target = $(target);
-            offset = 60;
+                $target.focus();
+                if ($target.is(":focus")) { // Checking if the target was focused
+                  return false;
+                } else {
+                  $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
+                  $target.focus(); // Set focus again
+                };
+              });
+              // Add hash (#) to URL when done scrolling (default click behavior)
+              window.location.hash = this.hash
+            }
           }
-          // Using jQuery's animate() method to add smooth page scroll
+        });
-          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-          $('html, body').animate({
-            scrollTop: $(hash).offset().top - offset
-          }, 800, function () {
-
-            // Add hash (#) to URL when done scrolling (default click behavior)
-            window.location.hash = hash - offset;
-          });
-        } // End if
-      });
     }
     addSmoothScroll();