Fix URL in footer (#95 )

add vendor specific css prefixes (#94 )
Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>
2020-10-11 20:08:47 +06:00 · 2020-10-11 12:41:18 +06:00 · 2020-10-11 12:40:00 +06:00 · 2020-10-05 20:26:10 +06:00 · 2020-10-05 20:24:29 +06:00 · 2020-10-03 10:02:27 +06:00
119 changed files with 5381 additions and 1891 deletions
@@ -0,0 +1,33 @@
+name-template: 'v$RESOLVED_VERSION'
+tag-template: 'v$RESOLVED_VERSION'
+template: |
+  I am very excited to announce [Hugo](https://gohugo.io/) theme [Toha](https://themes.gohugo.io/toha/) **v$RESOLVED_VERSION**. This release incorporates some improvements and fixes. Please, read the release note and update your theme to enjoy the new changes.
+  
+  Thanks to $CONTRIBUTORS	for their valuable contribution in this release.
+  $CHANGES
+
+  This release note has been generated automatically by [Release Drafter](https://github.com/marketplace/actions/release-drafter).
+categories:
+  - title: 'Breaking Changes'
+    label: 'breaking-change'
+  - title: 'New Features & Enhancements'
+    labels:
+    - 'feature'
+    - 'enhancement'
+  - title: 'Bug Fixes'
+    labels:
+      - 'bug'
+      - 'bug-fix'
+
+version-resolver:
+  major:
+    labels:
+      - 'breaking'
+  minor:
+    labels:
+      - 'feature'
+      - 'enhancement'
+  patch:
+    labels:
+      - 'bug'
+      - 'bug-fix'
@@ -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
@@ -0,0 +1,14 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1 +1,2 @@
 .vscode/
+node_modules/
@@ -54,30 +54,74 @@ 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:
    renderer:
      unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false

 # Enable Google Analytics
-googleAnalytics: <your google analytics id>
+googleAnalytics: UA-XXXXXXXXX-X

 # Enable Disqus forum
-# optional
-disqusShortname: <your disqus short code>
+disqusShortname: does-not-exist

 # Enable global emoji support
 enableEmoji: true

 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
-  gitRepo: <your site's Github repo URL>
+  # background image of the landing page
+  background: "images/background.jpg"
+
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # 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
+    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
+
+  # specify whether you want to write blog post or not
+  enableBlogPost: true
+
+  # specify whether you want to show Table of Contents in reading page
+  enableTOC: true
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
 ```

 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.
@@ -86,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/home-section/).
-
-You can also follow the sample format given in `themes/toha/exampleSite/data` directory.
+You can configure your site by following the step by step guides from [here](https://toha.netlify.app/posts/configuration/).

 ## Shortcodes

@@ -99,17 +141,108 @@ Here, are some handy shortcodes you can use with this theme.
 - [img](https://toha.netlify.app/posts/short-codes/img/)
 - [split](https://toha.netlify.app/posts/short-codes/split/)
 - [vs](https://toha.netlify.app/posts/short-codes/vs/)
+- [alert](https://toha.netlify.app/posts/short-codes/alert/)
+
+## Project Roadmap
+
+Here, are the current plan and progress of various components of this theme. The components will be prioritized based on users requests.
+
+### Sections
+
+- [x] **Home**
+  - [x] Configurable Background
+  - [x] Author Image
+  - [x] Greeting
+  - [x] Typing Carousel
+
+- [x] **About**
+  - [x] Name and Designation
+  - [x] Summary
+    - [x] Markdown Support
+  - [x] Social Links
+    - [x] Font Awesome Support
+  - [x] Resume Link
+  - [x] Soft Skills Indicator
+
+- [x] **Skills**
+  - [x] Skill Cards
+  - [x] Markdown Support
+
+- [x] **Experiences**
+  - [x] Designation
+  - [x] Timeline
+  - [x] Company Overview
+  - [x] Responsibilities
+
+- [ ] **Projects**
+  - [x] Category Filter
+  - [ ] Project Card
+    - [x] Overview
+      - [x] Markdown Support
+    - [x] Github Stars
+    - [x] External URL Support
+    - [ ] Technology Tags
+
+- [x] **Recent Posts**
+
+- [ ] **Publications**
+  - [ ] Category Filter
+  - [ ] Card
+  - [ ] Abstract
+  - [ ] Authors
+  - [ ] Tags
+  - [ ] Links
+  - [ ] Gallery
+
+- [ ] **Accomplishment / Courses**
+  - [ ] Overview
+  - [ ] Certificate
+
+- [x] **Achievements Gallery**
+  - [x] Image
+  - [x] Summary
+
+### List Page
+
+- [x] Post Cards
+- [x] Sidebar
+- [x] Pagination
+
+### Reading Page
+
+- [x] Hero Image
+- [x] Author Information
+- [x] Next & Previous Page Navigation
+- [x] `Improve This Page` Button
+- [x] Disqus Comment
+- [x] Option to navigate to list page
+
+### Tracking and Comments
+
+- [x] Google Analytics
+- [x] Disqus Comment
+
+### Shortcodes
+
+- [x] Image
+- [x] Split Page into Multiple Column
+- [x] Vertical space between two sections
+- [x] Alert
+- [ ] Figure & sub-figure
+- [ ] Tabs

 ## Contributing

-Contributions are welcomed and I will be happy to review. Just follow the following principles:
+You can contribute to this theme in various way. You can report a bug, file an feature request, send a PR, share your thoughts etc.
+
+Pull requests are most welcomed and I will be happy to review. Just follow the following principles:

 - Keep it simple.
 - Keep it consistent with the design.
 - Use as little dependency as possible.
 - Have patient.

-I am not a web developer. I just created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PR acknowledging the problems.
+>I am not a web developer. I just created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PR acknowledging the problems.

 ## Attribution

@@ -3,14 +3,34 @@ 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:
    renderer:
      unsafe: true
+  tableOfContents:
+    startLevel: 2
+    endLevel: 6
+    ordered: false

 # Enable Google Analytics
-googleAnalytics: UA-xxxxxxxx
+googleAnalytics: UA-XXXXXXXXX-X

 # Enable Disqus forum
 disqusShortname: does-not-exist
@@ -20,5 +40,27 @@ enableEmoji: true

 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
+  # background image of the landing page
+  background: "images/background.jpg"
+
+  # Provide logos for your site. The inverted logo will be used in the initial
+  # 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
+    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
+
+  # specify whether you want to write blog post or not
+  enableBlogPost: true
+
+  # specify whether you want to show Table of Contents in reading page
+  enableTOC: true
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
@@ -1,14 +0,0 @@
-# Your achievements achievements
-achievements:
-  - title: Best Presenter
-    image: images/achievements/presenter.jpg
-    summary: Best presenter in 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?
@@ -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:
+  - আমি একজন ডেভেলপার
+  - আমি ওপেন সোর্স প্রোজেক্ট এ কাজ করতে পছন্দ করি
+  - আমি মজার কিছু প্রোজেক্ট এ কাজ করতে ভালবাসি
@@ -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"
@@ -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?
@@ -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.
@@ -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"]
@@ -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
@@ -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."
@@ -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/
@@ -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
@@ -1,3 +1,12 @@
+# section information
+section:
+  name: About
+  id: about
+  enable: true
+  weight: 1
+  showOnNavbar: true
+  template: sections/about.html
+
 # your designation
 designation: Software Engineer
 # your company information
@@ -40,7 +49,7 @@ socialLinks:

 # your soft skills
 # give the percentage between 50 to 100 with 5 intervals.
-# currently supported color: blue, yellow, pink, green
+# currently supported colors: blue, yellow, pink, green, sky, orange
 softSkills:
 - name: Leadership
  percentage: 85
@@ -54,3 +63,16 @@ softSkills:
 - 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"
@@ -0,0 +1,24 @@
+# section information
+section:
+  name: Achievements
+  id: achievements
+  enable: true
+  weight: 6
+  showOnNavbar: true
+  # 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?
@@ -0,0 +1,64 @@
+# section information
+section:
+  name: Experiences
+  id: experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+  # 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.
@@ -0,0 +1,64 @@
+# section information
+section:
+  name: Projects
+  id: projects
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  # 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"]
@@ -0,0 +1,11 @@
+# section information
+section:
+  name: Recent Posts
+  id: recent-posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required
@@ -1,13 +1,25 @@
+# section information
+section:
+  name: Skills
+  id: skills
+  enable: true
+  weight: 2
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
 # Your Skills.
-# Give a summary of you each skill in summary section.
+# 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 main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  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"
@@ -16,18 +28,21 @@ skills:
 - 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 main operating system. Capable of writing bash/shell scripts."
+  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."
+  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"
@@ -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/
@@ -1,43 +0,0 @@
-# Your experiences
-experiences:
-  - designation: Software Engineer
-    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 build tools for Kubernetes.
-    start: Nov 2017
-    # 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, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases and cluster's resource definition.
-      - My another responsibilities.
-      - My more responsibilities.
-
-  - designation: Software Engineer
-    company:
-      name: PreExample Co.
-      url: "https://www.preexample.com"
-      location: Nowhere
-      overview: PreExample Co. is gateway company to enter into Example co. So, nothing special here.
-    start: March 2016
-    end: May 2017
-    responsibilities:
-      - Write lots of example codes.
-      - Read lots of examples.
-      - See lots of example videos.
-
-  - designation: Intern
-    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 Engineer.
-    start: Jun 2015
-    end: Jan 2016
-    responsibilities:
-      - Count lost of interns.
-      - Count more interns.
-      - Count myself as intern.
@@ -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
@@ -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"
@@ -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?
@@ -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.
@@ -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"]
@@ -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
@@ -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."
@@ -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/
@@ -1,54 +0,0 @@
-# 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 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"]
@@ -1,40 +0,0 @@
-# background image of the landing page
-background: "images/background.jpg"
-
-# some information about you
-author:
-  name: "Jane Doe"
-  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
-
-# Menus of the home page
-menus:
- name: Home
-  url: "#home"
-  weight: 1
- name: About
-  url: "#about"
-  weight: 2
- name: Skills
-  url: "#skills"
-  weight: 3
- name: Experiences
-  url: "#experiences"
-  weight: 4
- name: Projects
-  url: "#projects"
-  weight: 5
- name: Recent Posts
-  url: "#recent-posts"
-  weight: 6
- name: Achievements
-  url: "#achievements"
-  weight: 7
@@ -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 = "পাওয়ারড বাই"
@@ -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"
@@ -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"
@@ -3,7 +3,7 @@
 {{ end }}

 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
 {{ end }}

 {{ define "content" }}
@@ -14,13 +14,19 @@
    {{ end }}
  </head>

-  <body>
+  <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
    <div class="container-fluid bg-dimmed wrapper">
      <!----- ADD NAVBAR --------------->
      {{ block "navbar" . }} {{ end }}

+      <!----- ADD SIDEBAR --------------->
+      {{ block "sidebar" . }} {{ end }}
+
      <!----- ADD PAGE CONTENT --------->
      {{ block "content" . }} {{ end }}
+
+      <!----- ADD TABLE OF CONTENTS ----------->
+      {{ block "toc" . }} {{ end }}
    </div>

    <!------- ADD FOOTER ------------>
@@ -1,39 +1,49 @@
 {{ 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 }}

 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
+    {{ partial "navigators/navbar-2.html" . }}
 {{ end }}

-{{ define "content" }}
+{{ 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">
-      <input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
          <ul class="tree" id="tree">
-        <li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
+            <li id="list-heading"><a href="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
            <div class="subtree">
-            {{ partial "sections.html" .Sections }}
+                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
            </div>
          </ul>
        </div>
      </div>
-  <div class="content container-fluid" id="content">
-    <div class="content-cards">
-      <div class="container-fluid filtr-container post-cards" id="post-cards">
-        {{ range (where site.RegularPages "Type" "in" site.Params.mainSections) }}
-          {{ partial "cards/post.html" . }}
+    </div>
+  </section>
 {{ end }}
-        {{/*  {{ $paginator := .Paginate .Site.RegularPages 120 }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      {{ $paginator := .Paginate .RegularPagesRecursive 12 }}
      {{ range $paginator.Pages }}
        {{ partial "cards/post.html" . }}
-        {{ end }}  */}}
+      {{ end }}
    </div>
-      {{/*  <div class="paginator">
+    <div class="paginator">
      {{ template "_internal/pagination.html" . }}
-      </div>  */}}
    </div>
  </div>
+</section>
 {{ end }}

 {{ define "scripts" }}
@@ -1,19 +1,41 @@
 {{ 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 }}

 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  <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="{{ site.BaseURL | absLangURL }}posts" data-filter="all">Posts</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
 {{ end }}

 {{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content">
    <div class="container p-0 read-area">
      <!--Hero Area-->
-  <div class="hero-area col-sm-12" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
+      <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-->
@@ -44,39 +66,34 @@

        <!---Next and Previous Navigator -->
      <hr />
-  <div class="row next-prev-navigator">
-    {{ $currentPage := . }}
-    {{ range .Site.RegularPages.ByDate }}
-      {{ if eq .RelPermalink  $currentPage.RelPermalink }}
-        {{ if .Next }}
-        <div class="col-md-6 previous-article">
-          <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-            <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
-            <br />
-            <span>{{ .Next.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-        {{ if .Prev }}
-        <div class="{{ if .Next }}col-md-6{{ else }}col-md-12{{ end }} next-article">
-          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
-            <br />
-            <span>{{ .Prev.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  </div>
+        {{ partial "navigators/next-prev-navigator.html" . }}
      <hr />
      <!-- Add Disqus forum  -->
      {{ if .Site.DisqusShortname }}
          {{ partial "disqus.html" . }}
      {{ end }}
      </div>
+    </div>
+  </div>
+  {{ if .IsTranslated }}
+    {{ partial "navigators/floating-lang-selector.html" . }}
+  {{ end }}
+</section>
 {{ end }}

+{{ define "toc" }}
+  <section class="toc-section" id="toc-section">
+    {{ if site.Params.enableTOC }}
+    <div class="toc-holder">
+      <h5 class="text-center pl-3">Table of Contents</h5>
+      <hr>
+      <div class="toc">
+        {{ .TableOfContents }}
+      </div>
+    </div>
+    {{ end }}
+  </section>
+{{ end }}

 {{ define "scripts" }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
@@ -2,47 +2,58 @@
 <html lang="en">
  <head>
    <title>{{- .Site.Title -}}</title>
+    <meta name="description" content="{{ .Site.Params.description }}" />
    <!-- import common headers -->
    {{- partial "header.html" . -}}

    <!-- import index page specific headers -->
-    <link rel="stylesheet" href="/assets/css/home.css" />
-    <link rel="stylesheet" href="/assets/css/about.css" />
-    <link rel="stylesheet" href="/assets/css/skills.css" />
-    <link rel="stylesheet" href="/assets/css/experiences.css" />
-    <link rel="stylesheet" href="/assets/css/projects.css" />
-    <link rel="stylesheet" href="/assets/css/recent-posts.css" />
-    <link rel="stylesheet" href="/assets/css/achievements.css" />
+    <link rel="stylesheet" href="/assets/css/sections/home.css" />
+    <link rel="stylesheet" href="/assets/css/sections/about.css" />
+    <link rel="stylesheet" href="/assets/css/sections/skills.css" />
+    <link rel="stylesheet" href="/assets/css/sections/experiences.css" />
+    <link rel="stylesheet" href="/assets/css/sections/projects.css" />
+    <link rel="stylesheet" href="/assets/css/sections/recent-posts.css" />
+    <link rel="stylesheet" href="/assets/css/sections/achievements.css" />

    <!-- Add Google Analytics if enabled in configuration -->
    {{ if .Site.GoogleAnalytics }}
        {{ template "_internal/google_analytics_async.html" . }}
    {{ end }}
  </head>
-  <body data-spy="scroll" data-target="#top-navbar" data-offset="50">
+  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
+
    <!--- NAVBAR ------------------------->
-    {{- partial "navbar.html" . -}}
+    {{- partial "navigators/navbar.html" . -}}

    <!--- ADD HOME SECTION ---------------->
-    {{- partial "home.html" . -}}
+    {{- partial "sections/home.html" . -}}

-    <!--- ADD ABOUT SECTION --------------->
-    {{- partial "about.html" . -}}
+    <!--- ADD OPTIONAL SECTIONS ----------->
+    {{ $sections:= .Site.Data.sections }}
+    {{ if (index .Site.Data .Site.Language.Lang).sections }}
+      {{ $sections = (index .Site.Data .Site.Language.Lang).sections }}
+    {{ end }}

-    <!--- ADD SKILLS SECTION -------------->
-    {{- partial "skills.html" . -}}
-
-    <!--- ADD EXPERIENCE SECTION ----------->
-    {{- partial "experiences.html" . -}}
-
-    <!--- ADD PROJECT SECTION -------------->
-    {{- partial "projects.html" . -}}
-
-    <!--- ADD RECENT-POSTS SECTION --------->
-    {{- partial "recent-posts.html" . -}}
-
-    <!--- ADD ACHIEVEMENT SECTION ---------->
-    {{- partial "achievements.html" . -}}
+    {{ if $sections }}
+      {{ $background:= "bg-white"}}
+      {{ range sort $sections "section.weight" }}
+        {{ if .section.enable }}
+          <div class="container-fluid section-holder d-flex {{ $background }}">
+            {{ if .section.template }}
+              {{- partial .section.template . -}}
+            {{ else }}
+              {{- partial (printf "sections/%s.html" (replace (lower .section.name) " " "-")) . -}}
+            {{ end }}
+          </div>
+          <!--- alter background color for next section --->
+          {{ if eq $background "bg-white" }}
+            {{ $background = "bg-dimmed" }}
+          {{ else }}
+            {{ $background = "bg-white" }}
+          {{end}}
+        {{ end }}
+      {{ end }}
+    {{ end }}

    <!--- ADD FOOTER ----------------------->
    {{- partial "footer.html" . -}}
@@ -54,5 +65,6 @@
    <script src="/assets/js/itype.min.js"></script>
    <script src="/assets/js/github-button.js"></script>
    <script src="/assets/js/home.js"></script>
+    <script src="/assets/js/jquery.filterizr.min.js"></script>
  </body>
 </html>
@@ -1,41 +0,0 @@
-<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
-  <div class="container">
-    <div class="row pt-sm-2 pt-md-4 align-self-center">
-      {{ if .Site.Data.about }}
-        <!-- summery -->
-        <div class="col-md-6">
-          <h3 class="p-1">{{ .Site.Data.site.author.name }}</h3>
-          <h5 class="p-1">
-            {{ .Site.Data.about.designation }} at
-            <a href="{{ .Site.Data.about.company.url }}"
-              >{{ .Site.Data.about.company.name }}</a
-            >
-          </h5>
-          <p class="p-1 text-justify">
-            {{ .Site.Data.about.summary | markdownify }}
-          </p>
-          <div class="text-container ml-auto">
-            <ul class="social-link d-flex">
-              {{ range .Site.Data.about.socialLinks }}
-              <li>
-                <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-              </li>
-              {{ end }}
-            </ul>
-          </div>
-          <a href="{{ .Site.Data.about.resume }}" target="#"
-            ><button class="btn btn-dark">My Resume</button></a
-          >
-        </div>
-        <!-- soft skills circular-progressbar -->
-        <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-          <div class="row">
-            {{ range .Site.Data.about.softSkills }}
-              {{ partial "progress/soft-skills" . }}
-            {{ end }}
-          </div>
-        </div>
-      {{ end }}
-    </div>
-  </div>
-</div>
@@ -1,16 +0,0 @@
-<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
-  {{ if .Site.Data.achievements }}
-    <h1 class="text-center">Achievements</h1>
-
-    <div class="container">
-      <div class="row" id="gallery">
-      </div>
-    </div>
-    <!-- achievements-holder holds achievement-entry -->
-    <div class="d-none" id="achievements-holder">
-      {{ range .Site.Data.achievements.achievements }}
-        {{ partial "misc/achievement.html" . }}
-      {{ end }}
-    </div>
-  {{ end }}
-</div>
@@ -1,17 +1,17 @@
-<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
-  <a href="{{ .RelPermalink }}" class="post-card-link">
+<div class="post-card">
+  <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" . }}'/>
      </div>
      <div class="card-body">
        <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery">{{ .Summary }}</p>
+        <p class="card-text post-summary">{{ .Summary }}</p>
      </div>
      <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
        >
@@ -1,13 +1,14 @@
 <div
-  class="col-md-6 col-lg-4 p-2 filtr-item"
+  class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
  data-category='all, {{ delimit  .tags ","}}'
 >
  <div class="card mt-1">
    <div class="card">
-      <div class="card-header">
+      <a class="card-header" href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}#{{ end }}">
+        <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>
@@ -16,6 +17,7 @@
            <span>{{ .timeline }}</span>
          </div>
        </div>
+      </a>
      <div class="card-body text-justify pt-1 pb-1">
        <p>{{ .summary | markdownify }}</p>
        <span class="float-right">
@@ -1,4 +1,4 @@
-<div class="col-lg-4 col-md-6 pt-2">
+<div class="col-lg-4 col-md-6 pt-2 post-card">
  <a href="{{ .RelPermalink }}" class="post-card-link">
    <div class="card">
      <div class="card-head">
@@ -8,7 +8,7 @@
      </div>
      <div class="card-body">
        <h5 class="card-title">{{ .Title }}</h5>
-        <p class="card-text post-summery"> {{ .Summary }}</p>
+        <p class="card-text post-summary"> {{ .Summary }}</p>
      </div>
      <div class="card-footer">
        <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
@@ -1,15 +1,15 @@
-<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
+  <a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}#{{ end }}">
    <div class="card">
      <div class="card-head d-flex">
        {{ if .icon }}
-      <img class="card-img-sm" src="{{ .icon }}" alt="{{ .name }}" />
-      {{ else }}
-      <i class="fas fas fa-tools"></i>
+        <img class="card-img-xs" src="{{ .icon | absURL }}" alt="{{ .name }}" />
        {{ end }}
-      <h4 class="card-title">{{ .name }}</h4>
+        <h5 class="card-title">{{ .name }}</h5>
      </div>
      <div class="card-body">
        <p class="card-text">{{ .summary | markdownify }}</p>
      </div>
    </div>
+  </a>
 </div>
@@ -1,28 +0,0 @@
-<div class="container-fluid experiences bg-white anchor" id="experiences">
-  {{ if .Site.Data.experiences }}
-    <h1 class="text-center">Experiences</h1>
-
-    <div class="container timeline text-justify">
-      {{ $total:= len .Site.Data.experiences.experiences }}
-      {{ range $idx,$val:= .Site.Data.experiences.experiences }}
-        {{ if eq (mod $idx 2) 0 }}
-          <div class="row align-items-center  d-flex">
-            {{ partial "experiences/left-v-line.html" $idx }}
-            {{ partial "experiences/experience-info.html" $val }}
-          </div>
-          {{ if lt $idx (sub $total 1) }}
-            {{ partial "experiences/left-to-right-h-line.html" $idx }}
-          {{ end }}
-        {{else}}
-          <div class="row align-items-center justify-content-end d-flex">
-            {{ partial "experiences/experience-info.html" $val }}
-            {{ partial "experiences/right-v-line.html" $idx }}
-          </div>
-          {{ if lt $idx (sub $total 1) }}
-            {{ partial "experiences/right-to-left-h-line.html" $idx }}
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    </div>
-  {{ end }}
-</div>
@@ -1,14 +0,0 @@
-<div class="col-10 col-lg-8">
-  <div class="experience-entry-heading">
-    <h5>{{ .designation }}</h5>
-    <h6><a href="{{ .company.url }}">{{ .company.name }}</a></h6>
-    <p class="text-muted">{{ .start }} - {{ if .end }} {{ .end }} {{ else }}Present{{ end }}, {{ .company.location }}</p>
-  </div>
-  <p>{{ .company.overview | markdownify }}</p>
-  <h6 class="text-muted">Responsibilities:</h6>
-  <ul class="justify-content-around">
-      {{ range .responsibilities }}
-        <li>{{ . | markdownify }}</li>
-      {{ end }}
-  </ul>
-</div>
@@ -1,11 +0,0 @@
-<div class="row horizontal-line">
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-  <div class="col-10 col-lg-8">
-    <hr />
-  </div>
-  <div class="col-1 col-lg-2 timeline-side-div">
-    <div class="corner"></div>
-  </div>
-</div>
@@ -1,3 +0,0 @@
-<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
-  <div class="circle font-weight-bold">{{ add . 1 }}</div>
-</div>
@@ -1,29 +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>
-        {{ if .Site.Data.site }}
+        <h5>{{ i18n "navigation" }}</h5>
+        {{ if $sections }}
        <ul>
-            {{ range .Site.Data.site.menus }}
+          {{- 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="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+                <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.Data.site.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
@@ -31,15 +59,16 @@
              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 }}
    </div>
  </div>
  <hr />
@@ -47,13 +76,13 @@
    <div class="row text-left">
      <div class="col-md-4">
        <a id="theme" href="https://github.com/hossainemruz/toha" target="#">
-          <img src="/assets/images/logo-inverted.png">
+          <img src="/assets/images/inverted-logo.png">
          Toha
        </a>
      </div>
-      <div class="col-md-4">© 2019 Copyright.</div>
-      <div class="col-md-4">
-        Powered by <a href="https://gohugo.io/">Hugo
+      <div class="col-md-4 text-center">{{ $copyrightNotice }}</div>
+      <div class="col-md-4 text-right">
+        <a id="hugo" href="https://gohugo.io/">{{ i18n "hugoAttributionText" }}
        <img
          src="/assets/images/hugo-logo-wide.svg"
          alt="Hugo Logo"
@@ -4,13 +4,16 @@

 <!-- ============ import common css ========== -->
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
+<link rel="stylesheet" href="/assets/css/layouts/main.css" />
 <link rel="stylesheet" href="/assets/css/style.css" />
-<link rel="stylesheet" href="/assets/css/navbar.css" />
+<link rel="stylesheet" href="/assets/css/navigators/navbar.css" />

 <!--=================== cdn ==============================-->
-<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
 <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" />
@@ -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 }}
@@ -1,4 +1,7 @@
 {{ $authorImage:= "/assets/images/default-avatar.png"}}
+{{ if .Site.Data.site.author}}
+    {{ $authorImage = .Site.Data.site.author.image | relURL }}
+{{ end}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
    {{ with .Params.author }}
        {{ if .image }}
@@ -1,4 +1,7 @@
-{{ $authorName:= "John Doe"}}
+{{ $authorName:= .Site.Params.author.name }}
+{{ if .Site.Data.site.author}}
+    {{ $authorName = .Site.Data.site.author.name }}
+{{ end}}
 {{ if eq (printf "%T" .Params.author ) "maps.Params" }}
    {{ with .Params.author }}
        {{ if .name }}
@@ -1,5 +0,0 @@
-{{ $categories:= ""}}
-{{ if  .Params.categories }}
-    {{ $categories = delimit .Params.categories "," }}
-{{ end }}
-{{ return $categories }}
@@ -1,23 +0,0 @@
-<div class="container-fluid home" id="home">
-  <div
-    class="background container-fluid"
-    style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
-  ></div>
-  <div class="container content text-center">
-    <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
-      class="rounded-circle mx-auto d-block img-fluid"
-    />
-    <h1 class="greeting">Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.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.Data.site.author.summary }}
-      <li>{{ . }}</li>
-      {{ end }}
-    </ul>
-    <a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
-  </div>
-</div>
@@ -0,0 +1,25 @@
+<div class="col-6 col-lg-4 p-2">
+  {{ $predefinedColor:= true}}
+  {{ if hasPrefix .color "#"}}
+    {{ $predefinedColor = false }}
+  {{ end }}
+  <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
+    <span class="circular-progress-left">
+      <span
+        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+        {{ end }}
+      ></span>
+    </span>
+    <span class="circular-progress-right">
+      <span
+      class="circular-progress-bar"
+      {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+      {{ end }}
+      ></span>
+    </span>
+    <div class="circular-progress-value">{{ .name }}</div>
+  </div>
+</div>
@@ -1,17 +0,0 @@
-<nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
-    <div class="container">
-      <a class="navbar-brand" href="{{ .baseURL }}">
-        <img src="/assets/images/logo.png">
-        {{- .title -}}
-      </a>
-      <button class="navbar-toggler navbar-light" type="button" {{ if .hasToggleButton }}onclick="toggleSidebar()"{{ end }}>
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="top-nav-items">
-        <ul class="navbar-nav ml-auto">
-        </ul>
-        </ul>
-      </div>
-    </div>
-</nav>
@@ -1,31 +0,0 @@
-<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
-  <div class="container">
-    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
-      <img src="/assets/images/logo-inverted.png" id="logo">
-      {{- .Site.Title -}}
-    </a>
-    <button
-      class="navbar-toggler navbar-dark"
-      id="navbar-toggler"
-      ,type="button"
-      data-toggle="collapse"
-      data-target="#top-nav-items"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="top-nav-items">
-      <ul class="navbar-nav ml-auto">
-        {{ range .Site.Data.site.menus }}
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="{{ .url }}">{{ .name }}</a>
-        </li>
-        {{ end }}
-        <div class="dropdown-divider" id="top-navbar-divider"></div>
-        <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +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">
+      <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 | relLangURL }}">
+      <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 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 | absURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
+</nav>
@@ -0,0 +1,77 @@
+{{ $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">
+    <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
+      <img src="{{ $invertedLogo | absURL }}" id="logo">
+      {{- .Site.Title -}}
+    </a>
+    <button
+      class="navbar-toggler navbar-dark"
+      id="navbar-toggler"
+      type="button"
+      data-toggle="collapse"
+      data-target="#top-nav-items"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <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">{{ i18n "home" }}</a>
+        </li>
+        {{ if $sections }}
+          {{ 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="#{{ $sectionID }}">{{ .section.name }}</a>
+              </li>
+            {{ end }}
+          {{- end }}
+        {{- end }}
+        {{ $hasCustomMenus:= false }}
+        {{ if and site.Params.customMenus }}
+          {{ if gt (len site.Params.customMenus) 0 }}
+            {{ $hasCustomMenus = true }}
+          {{ end }}
+        {{ end }}
+        {{ if (or site.Params.enableBlogPost $hasCustomMenus) }}
+          <div class="dropdown-divider" id="top-navbar-divider"></div>
+        {{ end }}
+        {{ if site.Params.enableBlogPost }}
+          <li class="nav-item">
+            <a class="nav-link" id="blog-link" href="{{ "/posts" | relLangURL }}">{{ i18n "posts" }}</a>
+          </li>
+        {{ end }}
+        {{ 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 | absURL }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo | absURL }}" class="d-none" id="inverted-logo">
+</nav>
@@ -0,0 +1,35 @@
+<div class="row next-prev-navigator">
+{{ $currentPage := . }}
+{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}}
+  {{ if eq .RelPermalink  $currentPage.RelPermalink }}
+    {{ if .Next }}
+      {{ if (in site.Params.mainSections .Next.Type) }}
+      <div class="col-md-6 previous-article">
+        <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
+          <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
+          <br />
+          <span>{{ .Next.Title }}</span>
+        </a>
+      </div>
+      {{ end }}
+    {{ end }}
+    {{ if .Prev }}
+      {{ if (in site.Params.mainSections .Prev.Type)  }}
+        {{ $columnWidth:="col-md-12" }}
+        {{ if .Next }}
+          {{ if (in site.Params.mainSections .Next.Type) }}
+              {{ $columnWidth = "col-md-6" }}
+          {{ end }}
+        {{ end}}
+        <div class="{{ $columnWidth }} next-article">
+          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
+            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
+            <br />
+            <span>{{ .Prev.Title }}</span>
+          </a>
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+</div>
@@ -0,0 +1,22 @@
+{{ range .menus }}
+  {{ $class:= "" }}
+  {{ $icon:= "fa-plus-circle" }}
+  <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class -->
+  {{ if or ($.ctx.HasMenuCurrent "sidebar" .)  ($.ctx.IsMenuCurrent "sidebar" .)}}
+    {{ $icon = "fa-minus-circle"}}
+    {{ $class = "active" }}
+  {{end}}
+  {{ if .HasChildren }}
+    <!-- Add current entry -->
+    <li>
+      <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) }}
+      </ul>
+    </li>
+  {{ else }}
+    <!-- No sub-tree. So, only add current entry -->
+    <li><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a></li>
+  {{ end }}
+{{ end }}
@@ -1,13 +0,0 @@
-<div class="col-6 col-lg-4 p-2">
-  <div class="circular-progress {{ .color }}">
-    <span class="circular-progress-left">
-      <span
-        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
-      ></span>
-    </span>
-    <span class="circular-progress-right">
-      <span class="circular-progress-bar"></span>
-    </span>
-    <div class="circular-progress-value">{{ .name }}</div>
-  </div>
-</div>
@@ -1,21 +0,0 @@
-<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
-  {{ if .Site.Data.projects }}
-    <h1 class="text-center">Projects</h1>
-    <div class="container ml-auto text-center">
-      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-        {{ range .Site.Data.projects.buttons }}
-        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-          {{ .name }}
-        </button>
-        {{ end }}
-      </div>
-    </div>
-    <div class="container filtr-projects">
-      <div class="row" id="project-card-holder">
-        {{ range .Site.Data.projects.projects }}
-          {{ partial "cards/project" . }}
-        {{ end }}
-      </div>
-    </div>
-  {{ end }}
-</div>
@@ -1,10 +0,0 @@
-<div class="container-fluid recent-posts bg-white anchor pb-5" id="recent-posts">
-  <h1 class="text-center">Recent Posts</h1>
-  <div class="container">
-    <div class="row" id="recent-post-cards">
-      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
-        {{ partial "cards/recent-post.html" . }}
-      {{ end }}
-    </div>
-  </div>
-</div>
@@ -1,5 +1,6 @@
 <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>
-<script src="/assets/js/jquery.filterizr.min.js"></script>
+<script src="/assets/js/main.js"></script>
@@ -1,11 +0,0 @@
-{{ range . }}
-{{ if .Sections }}
-    <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a>
-    <ul>
-        {{ partial "sections.html" .Sections }}
-    </ul>
-    </li>
-    {{ else }}
-        <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
-    {{ end }}
-{{ end }}
@@ -0,0 +1,50 @@
+{{ $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">
+    <h3 class="p-1">{{ site.Params.author.name }}</h3>
+      {{ if .designation }}
+      <h5 class="p-1">
+        {{ .designation }}
+        {{ if .company }}
+          at <a href="{{ .company.url }}">{{ .company.name }}</a>
+        {{ end }}
+      </h5>
+      {{ end }}
+      <p class="p-1 text-justify">
+        {{ .summary | markdownify }}
+      </p>
+      <div class="text-container ml-auto">
+        <ul class="social-link d-flex">
+          {{ range .socialLinks }}
+          <li>
+            {{ if eq .name "Email" }}
+              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ else }}
+              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ end }}
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ if .resume }}
+      <a href="{{ .resume | absURL }}" target="#"
+        ><button class="btn btn-dark">{{ i18n "resume"}}</button></a
+      >
+      {{ end }}
+    </div>
+    <!-- soft skills circular-progressbar -->
+    <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
+      <div class="row">
+        {{ range .softSkills }}
+          {{ partial "misc/soft-skills.html" . }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,20 @@
+{{ $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 }}
+  <div class="container">
+    <div class="row" id="gallery">
+    </div>
+  </div>
+  <!-- achievements-holder holds achievement-entry -->
+  <div class="d-none" id="achievements-holder">
+    {{ range .achievements }}
+      {{ partial "sections/achievements/entry.html" . }}
+    {{ end }}
+  </div>
+</div>
@@ -1,11 +1,11 @@
 <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>
  <div class="caption hidden col-lg-6 text-left" id="caption">
    <h4>{{ .title }}</h4>
-    <p>{{ .summary }}</p>
+    <p>{{ .summary | markdownify }}</p>
  </div>
 </div>
@@ -0,0 +1,30 @@
+{{ $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 }}
+
+  <div class="container timeline text-justify">
+   {{ $totalExperiences:= len .experiences }}
+   {{ range $index,$experience:= .experiences }}
+     {{ if eq (mod $index 2) 0 }}
+       <div class="row align-items-center  d-flex">
+         {{ partial "sections/experiences/vertical-line.html" $index }}
+         {{ partial "sections/experiences/experience-info.html" $experience }}
+       </div>
+     {{else}}
+       <div class="row align-items-center justify-content-end d-flex">
+         {{ partial "sections/experiences/experience-info.html" $experience }}
+         {{ partial "sections/experiences/vertical-line.html" $index }}
+       </div>
+     {{ end }}
+     {{ if lt $index (sub $totalExperiences 1) }}
+       {{ partial "sections/experiences/horizontal-line.html" $index }}
+     {{ end }}
+   {{ end }}
+  </div>
+</div>
@@ -0,0 +1,5 @@
+{{ if gt (len .positions) 1 }}
+  {{ partial "sections/experiences/multiple-positions" . }}
+{{ else }}
+  {{ partial "sections/experiences/single-position.html" . }}
+{{ end }}
@@ -0,0 +1,29 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        <!-- For multiple positions, give emphasis on the company name-->
+        <h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
+
+        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
+        {{ $oldestPosition := index (last 1 .positions) 0}}
+        {{ $mostRecentPosition := index (first 1 .positions) 0}}
+        <p class="text-muted">
+            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+        <!-- Add company overview -->
+        <p>{{ .company.overview | markdownify }}</p>
+    </div>
+    <!-- Add the positions information -->
+    <div class="positions">
+    {{ range $index,$position:= .positions }}
+        <h6 class="designation">{{ $position.designation }}</h6>
+        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
+        <!-- Add the responsibilities handled at this position -->
+        <ul class="justify-content-around">
+        {{ range $position.responsibilities }}
+            <li>{{ . | markdownify }}</li>
+        {{ end }}
+        </ul>
+    {{ end }}
+    </div>
+</div>
@@ -0,0 +1,21 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        {{ $position:= index .positions 0 }}
+        <!-- For single position, give emphasis on the designation-->
+        <h5>{{ $position.designation }}</h5>
+        <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
+        <!-- Add experience duration info -->
+        <p class="text-muted">{{ $position.start }} - {{ if $position.end }}{{ $position.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+    </div>
+    <!-- Add company overview -->
+    <p>{{ .company.overview | markdownify }}</p>
+    <!-- Add the responsibilities handled at this position -->
+    <h6 class="text-muted">Responsibilities:</h6>
+    <ul class="justify-content-around">
+    {{ range $position.responsibilities }}
+        <li>{{ . | markdownify }}</li>
+    {{ end }}
+    </ul>
+</div>
@@ -0,0 +1,59 @@
+{{ $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('{{ $backgroundImage | absURL }}');"
+  ></div>
+  <div class="container content text-center">
+    <img src="{{ $authorImage | absURL }}"
+      class="rounded-circle mx-auto d-block img-fluid"
+    />
+    <h1 class="greeting"> {{ $author.greeting }} {{ $name }}</h1>
+    <div class="typing-carousel">
+      <span id="ityped" class="ityped"></span>
+      <span class="ityped-cursor"></span>
+    </div>
+    <ul id="typing-carousel-data">
+      {{ if $author.summary }}
+        {{ range $author.summary }}
+          <li>{{ . }}</li>
+        {{ end}}
+      {{ end }}
+    </ul>
+    {{ if $sections }}
+      {{ range first 1 (where (sort $sections "section.weight") ".section.enable" true) }}
+        {{ $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>
+</div>
@@ -0,0 +1,26 @@
+{{ $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 }}
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container filtr-projects">
+    <div class="row" id="project-card-holder">
+      {{ range .projects }}
+        {{ partial "cards/project" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>
@@ -0,0 +1,17 @@
+{{ $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 }}
+  <div class="container">
+    <div class="row" id="recent-post-cards">
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+        {{ partial "cards/recent-post.html" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>
@@ -0,0 +1,17 @@
+{{ $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 }}
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+      {{ range .skills }}
+        {{ partial "cards/skill.html" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>
@@ -1,13 +0,0 @@
-<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
-  {{ if .Site.Data.skills }}
-    <h1 class="text-center">Skills</h1>
-
-    <div class="container d-flex-block">
-      <div class="row" id="primary-skills">
-        {{ range .Site.Data.skills.skills }}
-          {{ partial "cards/skill.html" . }}
-        {{ end }}
-      </div>
-    </div>
-  {{ end }}
-</div>
@@ -0,0 +1,3 @@
+<div class="alert alert-{{ .Get "type"}}">
+    <strong>{{.Inner | markdownify }}</strong>
+</div>
@@ -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"
+      }
+    }
+  }
+}
@@ -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"
+  }
+}
@@ -25,9 +25,9 @@

 /* ============= Device specific fixes ======= */

-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}

 /* Extra large devices (large desktops, 1200px and up) */

@@ -41,6 +41,10 @@
  }
 }

+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */

@media (max-width: 992px) {
@@ -75,3 +79,15 @@
    left: 2rem;
  }
 }
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
@@ -0,0 +1,263 @@
+.wrapper {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.content-section {
+  flex: 80%;
+  order: 2;
+  /* background-color: lightseagreen; */
+  padding: 0;
+  position: relative;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.content {
+  padding: 0;
+  position: relative;
+  padding-top: 2rem;
+  min-height: 130vh;
+}
+
+.post-card-holder {
+  margin-top: 32px;
+  margin-left: auto;
+  padding: 0;
+  display: flex;
+  flex-flow: wrap;
+}
+
+.post-card-holder .post-card {
+  width: calc(100% / 3);
+  display: inline-flex;
+}
+
+.post-card-holder .card {
+  margin: 5px;
+  position: relative;
+}
+
+.post-card-holder .card .card-footer span {
+  font-size: 10pt;
+  color: #6c757d !important;
+  padding-top: 5px;
+}
+
+.post-card-holder .card .card-footer {
+  background: #fff;
+  margin-top: auto;
+}
+
+.post-summary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  max-height: 144px;
+  /* fallback */
+  -webkit-line-clamp: 5;
+  /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+.post-card-holder .post-card-link {
+  text-decoration: none;
+}
+
+.content-cards .paginator {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin: auto;
+}
+
+.content-cards .paginator .page-item > a {
+  color: #248aaa;
+}
+
+.content-cards .paginator .page-item.active > a {
+  background-color: #248aaa;
+  color: #f9fafc;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+.pagination {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .content-section {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    flex: 85%;
+    max-width: 85%;
+  }
+  .post-card-holder .post-card {
+    width: calc(100% / 5);
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+  .content-cards {
+    padding-left: 0px;
+  }
+  .post-card-holder {
+    margin-left: 0px;
+  }
+  .post-card-holder .post-card {
+    width: calc(100% / 3);
+  }
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .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;
+  }
+
+  .navbar-collapse.lang-selector {
+    display: block !important;
+    position: absolute;
+    right: 0;
+    top: 0.5rem;
+  }
+
+  .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;
+    transition: all ease-out 0.3s;
+  }
+
+  .post-card-holder .post-card {
+    width: calc(100% / 3);
+  }
+
+  .content-section.hide .post-card-holder .post-card {
+    width: 50%;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+  .post-card-holder .post-card {
+    width: 50%;
+  }
+
+  .content-section.hide .post-card-holder .post-card {
+    width: 100%;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    padding-left: 0px;
+    padding-right: 0px;
+    flex-flow: column;
+    overflow: hidden;
+  }
+  .content-section {
+    flex: 100%;
+    max-width: 100%;
+    padding-left: 0;
+    width: 100%;
+  }
+
+  .content {
+    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;
+  }
+
+  .content-cards {
+    padding-top: 20px;
+    padding-left: 0px;
+    transition: all ease-out 0.3s;
+  }
+
+  .content-section.hide .post-card-holder {
+    margin-top: 0.5rem;
+    transition: all ease-out 0.3s;
+  }
+
+  .post-card-holder .post-card {
+    margin-left: 1%;
+    margin-right: 1%;
+    width: 98%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
@@ -0,0 +1,294 @@
+/* ========= Colors ============
+Heading:     #1C2D41
+Paragraph:   #3C4858
+Iconography: #8392A5
+Secondary:   #C0CCDA
+Dirty Snow:  #E5E9F2
+Snow:        #F9FAFC
+
+Magenta: #7551E9
+Orange:  #FF7D51
+Pink:    #ED63D2
+Green:   #2DCA73
+Yellow:  #FFC212
+*/
+
+body {
+  background-color: #f9fafc;
+  font-family: "Muli";
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: #1c2d41;
+}
+
+strong {
+  color: #1c2d41 !important;
+}
+
+p {
+  color: #3c4858;
+}
+
+a {
+  color: #248aaa;
+}
+
+a:hover {
+  color: #207089;
+}
+
+.nav-button {
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: #8392a5;
+}
+
+.btn-dark {
+  background-color: #3c4858;
+  border-color: #3c4858;
+  color: #e5e9f2;
+  transition: all 0.3s ease-out;
+}
+
+.btn-dark:hover,
+.btn-dark:focus {
+  background-color: #248aaa;
+  border-color: #248aaa;
+  transition: all 0.3s ease-out;
+}
+
+.btn-outline-info {
+  color: #2098d1 !important;
+  border-color: #2098d1 !important;
+}
+
+.btn-outline-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info {
+  background-color: #248aaa !important;
+  color: #e5e9f2 !important;
+}
+
+.btn-info:hover {
+  background-color: #2098d1 !important;
+  color: #e5e9f2 !important;
+}
+
+.bg-white {
+  background-color: #f9fafc !important;
+}
+
+.bg-dimmed {
+  background-color: #e5e9f2;
+}
+
+.anchor {
+  padding-top: 3.5rem;
+}
+
+img.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.left {
+  display: block;
+  margin-right: auto;
+}
+
+img.right {
+  display: block;
+  margin-left: auto;
+}
+
+.card {
+  box-shadow: none;
+  transition: all 0.3s ease-out;
+  overflow: hidden;
+}
+
+.card-img-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.card-img-xs {
+  width: 24px;
+  height: 24px;
+}
+
+.card:hover,
+.card:focus {
+  box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+  border: 1px solid #fff;
+  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;
+}
+
+.card:hover .card-head .card-img-top,
+.card:focus .card-head .card-img-top {
+  transition: all 0.3s ease-out;
+  transform: scale(1.2);
+}
+
+.card-body {
+  text-align: justify;
+}
+
+.sub-title {
+  color: #c0ccda;
+  font-size: 10pt;
+}
+
+/* --- FOOTER START --- */
+
+.footer {
+  color: #8392a5 !important;
+  background-color: #1c2d41;
+  position: relative;
+  z-index: 9999;
+}
+
+.footer h5 {
+  color: #c0ccda;
+}
+.footer a {
+  color: #8392a5;
+  transition: all 0.3s ease-out;
+}
+
+.footer a:hover {
+  margin-left: 5px;
+  transition: all 0.3s ease-out;
+}
+
+.footer ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.footer li {
+  margin-top: 5px;
+}
+
+.footer hr {
+  background-color: #8392a5;
+}
+
+.footer p:first-child {
+  color: #c0ccda;
+}
+
+.footer input {
+  background-color: #c0ccda;
+}
+
+.footer input:focus {
+  background-color: #e5e9f2;
+}
+
+.footer #theme {
+  color: #c0ccda;
+}
+
+.footer #theme img {
+  width: 32px;
+}
+
+.footer #hugo:hover {
+  margin-right: 5px;
+  transition: all 0.3s ease-out;
+}
+
+/* --- FOOTER END ---- */
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .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) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .skills-section .container,
+  .projects-section .container {
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
+  .section-holder {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .skills-section,
+  .projects-section,
+  .recent-posts-section,
+  .achievements-section {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
@@ -0,0 +1,513 @@
+body {
+  background-color: #e5e9f2;
+  position: relative;
+}
+.read-area {
+  background-color: #f9fafc;
+}
+
+.wrapper {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  justify-content: space-between;
+  position: relative;
+}
+
+.content-section {
+  flex: 60%;
+  max-width: 60%;
+  order: 2;
+  /* background-color: lightseagreen; */
+  padding: 0;
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.content {
+  background: #e5e9f2;
+}
+.toc-section {
+  flex: 20%;
+  order: 3;
+  max-width: 20%;
+  /* background-color: lightpink; */
+  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;
+  /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
+  transition: all ease-out 0.3s;
+}
+
+.toc {
+  position: relative;
+  padding-top: 0px;
+  transition: all ease-out 0.3s;
+}
+
+.toc nav {
+  padding-top: 0px;
+  margin-top: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  transition: all ease-out 0.3s;
+}
+
+.toc ul {
+  padding-left: 0.5rem;
+  width: 100%;
+}
+
+.toc .nav-link {
+  padding: 0;
+  padding-left: 0.5rem;
+  transition: all ease-out 0.3s;
+  color: #1c2d41;
+}
+
+.toc .nav-link:hover,
+.toc .nav-link:focus,
+.toc .nav-link.active {
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  background-color: #248aaa;
+  color: #f9f9f9;
+  transition: all ease-out 0.3s;
+}
+
+.hero-area {
+  margin-top: 3rem;
+  width: 100%;
+  height: 400px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.page-content {
+  width: 100%;
+  position: relative;
+  top: -4.5rem;
+  padding: 15px;
+}
+
+.author-profile {
+  position: relative;
+  align-content: center;
+  text-align: center;
+}
+
+.author-name {
+  margin-top: 0px;
+}
+
+.author-profile img {
+  height: 120px;
+  width: 120px;
+  background-color: #f9fafc;
+  padding: 5px;
+}
+.author-profile p {
+  color: #8392a5;
+}
+
+.title {
+  text-align: center;
+}
+
+.post-content {
+  padding: 15px;
+}
+
+.post-content h1,
+h2 {
+  margin-top: 1.4rem;
+}
+
+.post-content h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.3rem;
+}
+
+.post-content blockquote {
+  border-left: 4px solid #248aaa;
+  background-color: #248baa15;
+  padding: 0.3rem;
+  padding-left: 1rem;
+}
+
+.post-content blockquote > p {
+  color: #3c4858;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+table {
+  border-radius: 0.1rem;
+  background: #e5e9f2;
+  border: 1px solid #c0ccda;
+  padding: 0.1rem;
+}
+
+table tr {
+  height: 40px !important;
+}
+
+table th,
+td {
+  padding: 0.5rem;
+  border-left: 1px solid #8392a5;
+  border-bottom: 1px solid #8392a5;
+}
+
+table thead tr {
+  background: #248aaa;
+  color: #e5e9f2;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #e5e9f2;
+}
+
+tbody tr:hover {
+  background: #c0ccda;
+}
+
+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;
+}
+
+img {
+  max-width: 100%;
+}
+
+caption,
+figcaption {
+  caption-side: bottom;
+  text-align: center;
+  color: #8392a5;
+}
+
+pre {
+  margin: 5px;
+}
+
+pre > code {
+  padding: 10px !important;
+}
+
+a.header-anchor {
+  text-decoration: none;
+  color: #1c2d41;
+}
+
+a.header-anchor i {
+  font-size: 10pt;
+  color: #3c4858;
+  display: none;
+  margin-left: 0.5rem;
+}
+a.header-anchor:hover i {
+  display: inline-block;
+}
+a.header-anchor code {
+  color: #e83e8c;
+}
+
+.navbar-toggler {
+  display: none;
+}
+
+.content ul > ol,
+.content ol > ul,
+.content ul > ul,
+.content ol > ol,
+.content li > ol,
+.content li > ul {
+  -webkit-padding-start: 1rem;
+  padding-inline-start: 1rem;
+}
+
+kbd {
+  background-color: #248aaa !important;
+  color: #f9fafc;
+}
+
+mark {
+  background-color: #ffc21280;
+}
+
+.next-prev-navigator {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.next-prev-navigator a {
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator a:hover {
+  color: #3c4858;
+  transition: all 0.3 ease-out;
+}
+
+.next-prev-navigator .next-article {
+  text-align: right;
+}
+
+.next-prev-navigator .next-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .previous-article a {
+  transition: all 0.3s ease-out;
+}
+
+.next-prev-navigator .btn-outline-info {
+  color: #f9fafc !important;
+  border-color: #e5e9f2 !important;
+  background-color: #248aaa !important;
+  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;
+}
+
+.disquss {
+  padding: 10px;
+}
+
+.btn-improve-page {
+  text-align: right;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .content-section {
+    flex: 65%;
+    max-width: 65%;
+  }
+  .content-section .container {
+    max-width: 100%;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .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;
+  }
+  .toc-section.hide {
+    flex: 40%;
+    max-width: 40%;
+    margin-left: 0.5rem;
+    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;
+    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;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .wrapper {
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .content-section {
+    padding: 0;
+    flex: 100%;
+    max-width: 100%;
+    order: 3;
+  }
+
+  .toc-section {
+    order: 2;
+    width: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    max-height: 0;
+    max-width: 100%;
+    transition: all ease-out 0.5s;
+  }
+
+  .toc-section.hide {
+    margin-top: 2.5rem;
+    position: relative;
+    /* height: fit-content; */
+    flex: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    max-height: 200vh;
+    max-width: 100%;
+    margin-left: 0;
+    padding-right: 0;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    transition: all ease-out 0.5s;
+  }
+
+  .toc-holder {
+    max-height: 0;
+    margin-right: 0;
+    overflow: hidden;
+    transition: all ease-out 0.5s;
+  }
+  .toc-section.hide .toc-holder {
+    max-height: 200vh;
+    transition: all ease-out 0.5s;
+  }
+
+  .navbar-toggler {
+    display: block;
+  }
+
+  .hero-area {
+    height: 200px;
+    margin-top: 1rem;
+  }
+
+  .page-content {
+    padding: 0px;
+  }
+
+  pre {
+    margin: 0px;
+  }
+  code {
+    padding: 0px;
+  }
+  .next-prev-navigator .previous-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .next-prev-navigator .next-article {
+    text-align: center;
+    margin: 5px;
+  }
+  .previous-article a,
+  .next-article a {
+    width: 100%;
+  }
+
+  #disqus_thread,
+  .dsq-brlink {
+    padding: 5px;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
@@ -1,418 +0,0 @@
-.wrapper {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 400px;
-  background: #f9fafc;
-  min-height: 100vh;
-  overflow: auto;
-  transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
-}
-
-.sidebar.hide {
-  position: relative;
-  width: 0;
-  transition: all ease-out 0.3s;
-  -webkit-transition: all ease-out 0.3s;
-  z-index: -1001;
-}
-
-#search-box {
-  width: 250px;
-  height: 35px;
-  padding-left: 15px;
-  margin-top: 30px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  background-color: #e5e9f2;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  border: 1px solid #c0ccda;
-}
-
-#search-box:focus {
-  border: 1pt solid #248aaa;
-  outline: none;
-}
-
-.sidebar-tree {
-  margin-left: 2rem;
-  margin-top: 2.5rem;
-  position: fixed;
-}
-
-#list-heading {
-  padding-left: 0px !important;
-}
-
-.tree,
-.tree ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tree ul {
-  margin-left: 0.5rem;
-  position: relative;
-}
-
-.tree ul ul {
-  margin-left: 0.5em;
-}
-
-.tree ul:before {
-  content: "";
-  display: block;
-  width: 0;
-  position: absolute;
-  top: -10px;
-  left: -3px;
-  bottom: 16px;
-  border-left: 1px solid;
-}
-
-.subtree {
-  padding-left: 0.7rem;
-}
-
-.subtree:before {
-  content: "";
-  display: block;
-  width: 0;
-  position: absolute;
-  top: 6.5rem;
-  left: 0.5rem;
-  bottom: 16px;
-  border-left: 1px solid;
-}
-
-.tree li {
-  margin: 0;
-  padding: 0 1em;
-  line-height: 2em;
-  color: #3c4858;
-  font-weight: 700;
-  position: relative;
-}
-
-.subtree li:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 0;
-  border-top: 1px solid;
-  margin-top: -1px;
-  position: absolute;
-  top: 18px;
-  left: -3px;
-}
-
-.subtree li:last-child:before {
-  background: #f9fafc;
-  height: auto;
-  top: 1em;
-  bottom: 0;
-}
-
-.tree li a {
-  text-decoration: none;
-  color: #131313;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-.tree li a:hover {
-  margin-left: 3px;
-  color: #2098d1;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.tree i {
-  color: #3c4858;
-  font-size: 12px;
-  margin-right: 5px;
-}
-
-.tree .shift-right {
-  margin-left: 5px;
-}
-
-.tree ul {
-  display: none;
-}
-
-.tree .expand,
-.tree .expand > ul {
-  display: block;
-}
-
-a.focused {
-  color: #2098d1 !important;
-}
-
-.content {
-  width: 100%;
-  background: #e5e9f2;
-  padding: 0;
-  position: relative;
-}
-
-.content-cards {
-  padding-top: 30px;
-  width: 100%;
-  padding-left: 28px;
-  padding-bottom: 20px;
-}
-
-.post-cards {
-  margin: 32px;
-}
-
-.post-cards .filtr-item {
-  width: 23rem !important;
-}
-
-.post-cards .card {
-  margin: 5px;
-  position: relative;
-}
-
-.post-cards .card .card-footer span {
-  font-size: 10pt;
-  color: #6c757d !important;
-  padding-top: 5px;
-}
-
-.post-cards .card .card-footer {
-  background: #fff;
-  margin-top: auto;
-}
-
-.post-summery {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  max-height: 144px;
-  /* fallback */
-  -webkit-line-clamp: 5;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-.post-cards .post-card-link{
-  text-decoration: none;
-}
-
-.content-cards .paginator{
-  width: fit-content;
-  margin: auto;
-}
-
-.content-cards .paginator .page-item>a{
-  color: #248aaa;
-}
-
-.content-cards .paginator .page-item.active>a{
-  background-color: #248aaa;
-  color: #f9fafc;
-}
-
-.navbar-toggler {
-  display: none;
-}
-
-/*-------------- Media Queries ---------- */
-
-@media (max-width: 1200px) {
-  .sidebar-tree {
-    margin-left: 1rem;
-  }
-  .content-cards {
-    padding-left: 0px;
-  }
-  .post-cards {
-    margin-left: 15px;
-  }
-  .post-cards .filtr-item {
-    width: 22rem !important;
-    padding: 3px;
-  }
-}
-
-@media only screen and (max-width: 768px) {
-  .content {
-    width: 100vw;
-    padding-left: 15px;
-  }
-  .content.overley {
-    width: 60vw;
-    padding-left: 3px;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  .sidebar {
-    width: 0;
-  }
-  .sidebar nav {
-    display: none;
-    transition: all ease-out 0.3s;
-    -webkit-transition: all ease-out 0.3s;
-  }
-  .sidebar.hide {
-    position: relative;
-    z-index: 1001;
-    width: 40vw;
-  }
-
-  .sidebar-tree {
-    margin-left: -20rem;
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
-  }
-
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-cards {
-    margin: 0;
-    margin-top: 32px;
-  }
-
-  .post-cards .filtr-item {
-    margin: 10px;
-    width: 47vw !important;
-  }
-
-  .post-cards .card {
-    max-width: 47vw !important;
-  }
-
-  .content.overley .post-cards .filtr-item {
-    margin: 10px;
-    width: 55vw !important;
-  }
-
-  .content.overley .post-cards .card {
-    max-width: 55vw !important;
-  }
-}
-@media only screen and (max-width: 576px) {
-  .wrapper {
-    display: block;
-  }
-
-  #search-box {
-    width: 85vw;
-    height: 35px;
-    padding-left: 5px;
-    margin-top: 30px;
-  }
-  .content {
-    width: 100vw;
-    left: 0;
-    display: block;
-    padding-left: 2vw;
-  }
-
-  .content.overley {
-    width: 100vw;
-    left: 0;
-    padding-left: 2vw;
-  }
-
-  .sidebar {
-    position: relative;
-    max-height: 0;
-    width: 100vw;
-    min-height: 0;
-    overflow: hidden;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .sidebar-tree {
-    position: relative;
-  }
-
-  .sidebar.hide {
-    position: relative;
-    z-index: 1001;
-    width: 100vw;
-    max-height: 100vh;
-    overflow: hidden;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .sidebar-tree {
-    margin-left: 1.5rem;
-  }
-
-  .sidebar.hide .sidebar-tree {
-    margin-left: 1.5rem;
-    transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    padding-left: 0px;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .content.overley .content-cards {
-    padding-top: 0px;
-    padding-left: 0px;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .post-cards {
-    margin: 0;
-    margin-top: 32px;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .content.overley .post-cards {
-    margin: 0;
-    transition: all ease-out 0.5s;
-    -webkit-transition: all ease-out 0.5s;
-  }
-
-  .post-cards .filtr-item {
-    margin: 0px;
-    width: 95vw !important;
-  }
-
-  .post-cards .card {
-    max-width: 90vw !important;
-  }
-
-  .content.overley .post-cards .filtr-item {
-    margin: 0px;
-    width: 95vw !important;
-  }
-
-  .content.overley .post-cards .card {
-    max-width: 95vw !important;
-  }
-}
@@ -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;
@@ -20,7 +19,7 @@

 .initial-navbar .navbar-brand {
  color: #c0ccda;
-  font-weight: 800;
+  font-weight: 600;
 }

 .initial-navbar li a {
@@ -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,19 +50,17 @@
  background-color: #f9fafc;
  color: #1c2d41;
  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }

 .final-navbar .navbar-brand {
  color: #1c2d41;
-  font-weight: 800;
+  font-weight: 600;
 }

 .final-navbar li a {
  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,11 +116,44 @@
  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 ======= */

-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}

 /* Extra large devices (large desktops, 1200px and up) */

@@ -136,31 +163,31 @@
@media (max-width: 1200px) {
 }

-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
+/* 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;
  }

-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
  .top-navbar .container {
    max-width: 100%;
-    padding: 0;
  }

  .initial-navbar .navbar-nav .active,
  .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;
  }
@@ -169,10 +196,76 @@
    border-bottom: none;
  }

-  .final-navbar .navbar-collapse.show {
-    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+    height: auto;
+    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;
-    -webkit-transition: all 0.3s ease-out;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+  .initial-navbar .navbar-nav .active,
+  .initial-navbar li a:hover {
+    color: #2098d1;
+    transition: all 0.3s ease-out;
+  }
+
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    transition: none;
+
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+    height: auto;
+    width: auto;
+    margin-right: 15px;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .initial-navbar .navbar-nav .active,
+  .initial-navbar li a:hover {
+    color: #2098d1;
+    transition: all 0.3s ease-out;
+  }
+
+  .final-navbar .navbar-nav .active,
+  .final-navbar li a:hover {
+    color: #2098d1;
+    transition: none;
+
+    border-bottom: none;
+    background: transparent;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
  }

  .dropdown-divider {
@@ -189,4 +282,20 @@
 /* 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 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
 }
@@ -0,0 +1,312 @@
+.sidebar-section {
+  order: 1;
+  flex: 20%;
+  max-width: 20%;
+  /* background-color: lightsalmon; */
+  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;
+}
+
+.sidebar {
+  background: #f9fafc;
+  height: 100vh;
+  transition: all ease-out 0.3s;
+}
+
+.sidebar-tree {
+  padding-left: 1rem;
+  position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
+
+#search-box {
+  margin-left: 5%;
+  margin-right: 5%;
+  width: -webkit-fill-available;
+  height: 35px;
+  padding-left: 15px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background-color: #e5e9f2;
+  transition: all 0.3s ease-out;
+  border: 1px solid #c0ccda;
+}
+
+#search-box:focus {
+  border: 1pt solid #248aaa;
+  outline: none;
+}
+
+#list-heading {
+  padding-left: 0px !important;
+}
+
+.tree,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree li {
+  margin: 0;
+  padding: 0 1em;
+  line-height: 2em;
+  color: #3c4858;
+  position: relative;
+}
+
+.tree li a {
+  text-decoration: none;
+  color: #131313;
+  transition: all 0.3s ease-out;
+}
+
+.tree li a.active {
+  display: inline;
+  color: #2098d1;
+}
+
+.tree li a:hover {
+  margin-left: 3px;
+  color: #2098d1;
+  transition: all 0.3s ease-out;
+}
+
+.tree i {
+  color: #3c4858;
+  font-size: 12px;
+  margin-right: 5px;
+}
+
+.tree .shift-right {
+  margin-left: 5px;
+}
+
+.tree .active,
+.tree .active > ul {
+  display: block;
+}
+
+.subtree {
+  padding-left: 0.7rem;
+}
+
+.subtree:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 2.5rem;
+  left: 1.5rem;
+  bottom: 0.9rem;
+  border-left: 1px solid;
+}
+
+.subtree ul,
+ul > ul {
+  position: relative;
+  padding-left: 0.5rem;
+  display: none;
+}
+
+.subtree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: -10px;
+  left: 0.3rem;
+  bottom: 0.9rem;
+  border-left: 1px solid;
+}
+
+.subtree li:before {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 0;
+  border-top: 1px solid;
+  margin-top: -1px;
+  position: absolute;
+  top: 18px;
+  left: -3px;
+}
+
+.subtree li:last-child:before {
+  background: #f9fafc;
+  height: auto;
+  top: 1.1rem;
+  bottom: 0;
+}
+
+a.focused {
+  color: #2098d1 !important;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+  .sidebar-section {
+    flex: 15%;
+    max-width: 15%;
+  }
+  .sidebar-holder {
+    max-width: 100%;
+  }
+}
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+  .sidebar-holder {
+    max-width: 20rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .sidebar-tree {
+    margin-left: 1rem;
+  }
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .sidebar-section {
+    flex: 0%;
+    max-width: 0%;
+    min-height: 100vh;
+    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 {
+    flex: 30%;
+    max-width: 30%;
+    margin-right: 0.5rem;
+    transition: all ease-out 0.3s;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .sidebar-section {
+    flex: 0%;
+    max-width: 0%;
+    min-height: 100vh;
+    transition: all ease-out 0.3s;
+  }
+  .sidebar-holder {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 2.5rem;
+    width: 100%;
+  }
+
+  .sidebar-section.hide {
+    flex: 40%;
+    max-width: 40%;
+    margin-right: 0.5rem;
+    transition: all ease-out 0.3s;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .sidebar-section {
+    width: 100%;
+    min-height: 0;
+    max-height: 0;
+    max-width: 100%;
+    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;
+  }
+
+  .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;
+  }
+
+  .sidebar-section.hide .sidebar-holder {
+    max-height: 200vh;
+    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;
+  }
+
+  .sidebar-tree {
+    margin-left: 0rem;
+    max-height: 0;
+    transition: all 0.5s ease-out;
+  }
+  .sidebar-section.hide .sidebar-tree {
+    max-height: 200vh;
+    transition: all 0.5s ease-out;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
@@ -1,62 +0,0 @@
-.projects .card .card-header {
-  padding: 10px;
-}
-
-.projects .card .card-img-xs {
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-bottom: 5px;
-  margin-right: 10px;
-}
-
-.card .card-header .sub-title span:nth-child(1) {
-  float: left;
-}
-.card .card-header .sub-title span:nth-child(2) {
-  float: right;
-}
-
-.projects .card .card-header {
-  background-color: #f9fafc;
-}
-
-.projects .card .card-header .sub-title {
-  color: #8392a5;
-  margin-top: 5px;
-}
-
-.filtr-projects {
-  padding: 15px !important;
-}
-
-/* ============= Device specific fixes ======= */
-
-/* Extra small devices (portrait phones, less than 576px) */
-
-/* No media query for `xs` since this is the default in Bootstrap */
-
-/* Extra large devices (large desktops, 1200px and up) */
-
-@media (max-width: 1400px) {
-}
-
-@media (max-width: 1200px) {
-}
-
-/*  Large devices (desktops, 992px and up) */
-
-@media (max-width: 992px) {
-}
-
-/* Medium devices (tablets, 768px and up) */
-
-@media only screen and (max-width: 768px) {
-}
-
-/* Small devices (landscape phones, 576px and up) */
-
-@media only screen and (max-width: 576px) {
-  .projects .btn {
-    margin-top: 5px;
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Emruz Hossain	33d43ae325	Fix URL in footer (#95 )	2020-10-11 20:08:47 +06:00
github-actions[bot]	ffa673540c	add vendor specific css prefixes (#94 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-10-11 12:41:18 +06:00
Emruz Hossain	56c8ba4e43	Fix smooth scroll for multi-language setup (#93 )	2020-10-11 12:40:00 +06:00
github-actions[bot]	c7f2ad72ea	add vendor specific css prefixes (#92 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-10-05 20:26:10 +06:00
Emruz Hossain	d5e0de3171	Fix post url (#91 )	2020-10-05 20:24:29 +06:00
github-actions[bot]	3ea6f15cb2	add vendor specific css prefixes (#90 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-10-03 10:02:27 +06:00
Hugo MARTIN	46b21e028c	Translations and i18n (#60 ) * Managing i18n * Fix absolute path * Config files * Home link manage langage * Fixing footer i18n * Implemented i18n on newsletter * Implemented two languages in example * Removed old section directory * Using yaml in data to organize home summary * Fully working for old versions without i18n * Integrating language menu CSS * Fix language dropdown CSS * Refactor translation codes * Remove duplicate code * Fix URL issues * Move customMenus and other site related config into data section * Fix error during language toggle * Only show the available translation for the posts * Handle navbar brand URL properly * Fix responsiveness Co-authored-by: Hugo MARTIN <hugo.martin.69@gmail.com> Co-authored-by: hossainemruz <emruz@appscode.com>	2020-10-03 09:59:28 +06:00
Anthony Vanegas	6c2cca0127	Support custom homepage greeting message (#66 ) * Support custom greeting message in homepage Co-authored-by: Emruz Hossain <emruz@appscode.com>	2020-08-27 18:45:50 +06:00
github-actions[bot]	979d6a4bc3	add vendor specific css prefixes (#82 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-08-27 18:24:19 +06:00
Cristian Marquez Russo	8f2f18b34c	Update get-author-name.html (#61 ) Changed default to the parameters in Config file for consistency	2020-08-27 18:20:49 +06:00
github-actions[bot]	a148d6923c	add vendor specific css prefixes (#80 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-08-25 21:30:37 +06:00
Jean Macena	738f7d5a1b	Remove fixed height on .top-navbar (#68 ) * Remove fixed height on .top-navbar * Fix responsiveness Co-authored-by: Emruz Hossain <emruz@appscode.com>	2020-08-25 21:28:39 +06:00
github-actions[bot]	9abf5b5796	add vendor specific css prefixes (#77 ) Co-authored-by: hossainemruz <hossainemruz@users.noreply.github.com>	2020-08-21 22:36:45 +06:00
Emruz Hossain	d3c02f0223	Fix autoprefixer workflow	2020-08-21 22:34:58 +06:00
Emruz Hossain	85971e6057	Fix auto-prefixer	2020-08-21 22:29:06 +06:00
Emruz Hossain	2e1b01a609	Fix autoprefixer workflow	2020-08-21 22:14:35 +06:00
Emruz Hossain	1735b74f40	Add autoprefixer workflow (#74 ) * Add node_modules in gitignore * Add autoprefixer workflow	2020-08-21 22:12:34 +06:00
Emruz Hossain	18a19d02d1	Fix smooth scroll URL (#73 )	2020-08-20 21:05:59 +06:00
Muhammad Rifqi Fatchurrahman Putra Danar	61a9d7aea0	custom favicon (#63 )	2020-08-18 11:36:28 +06:00
Łukasz Łaniewski-Wołłk	32389ef344	Adding background_position option (#67 ) * Adding background_position option * Revert "Adding background_position option" This reverts commit `ed508759b2`. * Setting background-position to center by default	2020-08-18 11:33:03 +06:00
Ayoze Fernández	5f48a5bacb	added support for the meta description tag (#57 ) * added support for the meta description tag * Update meta description logic for single page Co-authored-by: hossainemruz <emruz@appscode.com>	2020-08-06 21:50:20 +06:00
hossainemruz	629c7196a3	Update README.md	2020-07-26 02:53:35 +06:00
hossainemruz	24b59fe372	Update release-drafter	2020-07-24 22:44:09 +06:00
hossainemruz	7fcd0cb502	Update release drafter	2020-07-24 22:38:41 +06:00
hossainemruz	ff9099e65e	Update GITHUB_TOKEN	2020-07-24 22:15:58 +06:00
Md. Emruz Hossain	6f96ca1e15	Github Action: Add release-drafter (#54 )	2020-07-24 22:07:37 +06:00
Md. Emruz Hossain	55588921f2	Fix responsiveness (#53 )	2020-07-24 12:57:56 +06:00
Yuriy	64fb493030	Make Skills and Projects cards linkable (#46 ) * Project card header is now can be clicked * skill is card now having url to add on it's header * urls added to some skills * div class synced with original * guthub button text synced with original * text decoration removed * remove next line in card header for text * whole Skill Card now is under hyperlink * hyperlink class separated from card * removed text-decoration from .card class * ProjectCard header hyperlink decoration removed * call adjustSkillCardsHeight after page is loaded * Add "#" in href field when respective URL is not provided Co-authored-by: hossainemruz <emruz@appscode.com>	2020-07-24 02:16:48 +06:00
Md. Emruz Hossain	d7df50ed2a	Fix link to the configuration guide (#51 )	2020-07-23 16:33:38 +06:00
Md. Emruz Hossain	36eaf72f47	Fix footer text indentation (#49 )	2020-07-22 22:41:39 +06:00
Md. Emruz Hossain	7da028e643	Allow hiding newsletter section from footer (#48 ) * Allow hiding newsletter section from footer * Update README.md	2020-07-22 22:27:33 +06:00
Md. Emruz Hossain	74bf5e9941	Make site logo customizable (#47 )	2020-07-22 22:08:50 +06:00
Md. Emruz Hossain	fa4d474974	Refactor sidebar logic + Add Table of Contents in reading page (#33 ) * Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md	2020-07-22 04:14:08 +06:00
Jason Tipton	647578e88b	Allow theme configuration to partially override css (#32 )	2020-07-21 09:41:19 +06:00
Al	4eadb8ee2c	add / to change URL in Navigation in footer (#41 )	2020-07-16 10:26:59 +06:00
Md. Emruz Hossain	08420ca095	Fix spacing before comma (#37 )	2020-07-09 22:35:36 +06:00
Pau Trepat Segura	440f424e44	Allow multiple position in one company experience (#9 ) * Add partials for multiple positions on one company * Remove unnecessary codes + Fix CSS Co-authored-by: hossainemruz <emruz@appscode.com>	2020-07-07 00:02:54 +06:00
Yuriy	f03e94e5d4	Sections anchors added (#30 ) - Added anchors to sub-sections, to change coursor to hand - To-Do - open this section(anchor) on link shared(openned)	2020-07-06 22:11:04 +06:00
Md. Emruz Hossain	26ef9aa351	Don't open custom menus in a new tab (#27 )	2020-07-04 02:18:01 +06:00
Jason Tipton	a83b1c5658	Allow section titles to be hidden inline (#24 ) * Allow section titles to be hidden within the section themselves * Show sections in footer to match navbar	2020-07-04 01:04:30 +06:00
Jason Tipton	2936164cc1	Make soft skill's color configurable + add 'sky' and 'orange' colors (#22 ) * Add about circle colors for 'sky' and 'orange' * Make color configurable Co-authored-by: hossainemruz <emruz@appscode.com>	2020-07-03 09:57:27 +06:00
Jason Tipton	8658773212	Find first section for chevron navigation (#26 ) * Find first section for chevron navigation * Handle disabled section Co-authored-by: hossainemruz <emruz@appscode.com>	2020-07-02 21:21:09 +06:00
Jason Tipton	436746b170	Allow a shorter 'nickname' for the initial home greeting (#23 )	2020-07-01 09:39:47 +06:00
Md. Emruz Hossain	45e36f3532	Merge pull request #20 from blueyetisoftware/feature-section-titles Configure section title and menu urls in section yaml files	2020-07-01 00:01:03 +06:00
hossainemruz	fc5853d91c	Revert accidental deletion of "enableEmoji" in "config.yaml"	2020-06-30 22:13:01 +06:00
hossainemruz	8d6cbcca21	Use "*-section class" instead of adding new div	2020-06-30 21:57:20 +06:00
Pau Trepat Segura	0dca3b1800	Add media queries for most popular devices (#19 ) https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-dpi-most-popular-smartphones	2020-06-30 21:04:21 +06:00
Jason Tipton	a2c41811ab	Rename -template ids to -section	2020-06-29 21:29:39 -08:00
Jason Tipton	22a7ac40f4	Correct misspelling of summary in layout files	2020-06-29 21:19:30 -08:00
Jason Tipton	c49a06f115	Change section template names to avoid naming conflicts with common titles	2020-06-29 21:15:38 -08:00
Jason Tipton	f1785ac88a	Add todo for hardcoded section navigation on chevron	2020-06-29 21:11:05 -08:00
Jason Tipton	ff692650a7	Configure section title and menu urls in section yaml files	2020-06-29 20:49:58 -08:00
Jason Tipton	45535cd290	Allow config.yaml to modify the site copyright (#18 )	2020-06-30 09:40:42 +06:00
hossainemruz	4dc1b6c76c	Update README.md	2020-06-30 02:13:24 +06:00
Md. Emruz Hossain	e2d376215a	Make home page sections dynamic and configurable (#14 ) * Make home page sections dynamic and configurable * Fix navbar issue when no section is configured + fix next-prev navigator * Update exampleSite * Fix next-prev navigator * Make navbar brand URL context aware	2020-06-30 01:54:28 +06:00
Md. Emruz Hossain	8f99f05a98	Add "alert" shortcode (#17 )	2020-06-29 23:36:01 +06:00
Jason Tipton	df67dee343	Fix-10 Make 'at' conditional on presence of company attributes (#11 )	2020-06-27 11:53:05 +06:00
Jean-Baptiste Le Duigou	fb7b04dc93	Fix link to email address (#8 ) See https://github.com/hossainemruz/toha/issues/7	2020-06-26 04:54:49 +06:00
Jean-Baptiste Le Duigou	5517dae23a	If no author specified in blog post, it should default to site author (#6 ) * Author name should default to site author If author name is not present in the blog post it should default to site author * Default to site author If author image is not present in the blog post, it should default to the site author	2020-06-24 13:27:28 +06:00
Md. Emruz Hossain	eb32e547f5	Merge pull request #5 from jbleduigou/master Hide "My Resume" button in case the information is missing in config	2020-06-24 09:22:24 +06:00
Jean-Baptiste Le Duigou	1b99e81671	Hide "My Resume" button in case the information is missing in config Hide "My Resume" button in case the information is missing in config	2020-06-23 21:50:19 +02:00
Md. Emruz Hossain	de22ac712b	Merge pull request #4 from jbleduigou/master Bump copyright year	2020-06-23 22:51:41 +06:00
Jean-Baptiste Le Duigou	82bf748cc1	Bump copyright year	2020-06-23 18:49:40 +02:00
hossainemruz	760de0acaf	Make skills card and projects card consistent	2020-06-23 03:42:46 +06:00
Md. Emruz Hossain	6277321d1f	Merge pull request #3 from Trepix/fix-fonts-import Fix fonts import + font weight	2020-06-23 01:47:34 +06:00
Pau Trepat Segura	18f823a4bd	Remove font-weight of navigation posts tree	2020-06-22 18:03:17 +02:00
Pau Trepat Segura	1625ec16d7	Remove bold font of projects card title	2020-06-22 18:03:12 +02:00
Pau Trepat Segura	fb6bd1c31e	Remove bold font of experience headings	2020-06-22 18:03:09 +02:00
Pau Trepat Segura	262d497256	Remove css rule that always is overwrote by bootstrap	2020-06-22 18:03:05 +02:00
Pau Trepat Segura	fc229b53bb	Delete dead code	2020-06-22 03:30:49 +02:00
Pau Trepat Segura	460106f1b4	Adjust brand weight to make it more readable	2020-06-22 03:28:00 +02:00
Pau Trepat Segura	41b2895873	Fix google api fonts request adding font-weight	2020-06-22 03:27:56 +02:00
hossainemruz	632aa48c71	Support markdown syntax in the summary field of achievementes	2020-06-22 04:37:09 +06:00
Md. Emruz Hossain	78a2fdd304	Merge pull request #2 from Trepix/simplify-experiences-partial Simplify code removing duplicated templates	2020-06-22 03:42:36 +06:00
hossainemruz	6af92aa5ae	make bold text color consistence with the theme color scheme	2020-06-22 03:08:25 +06:00
Pau Trepat Segura	39dafc56e0	Simplify code removing duplicated templates	2020-06-21 22:59:57 +02:00
hossainemruz	7c2eb69dbd	Add project roadmap	2020-06-22 00:20:14 +06:00