Support custom homepage greeting message (#66)

* Support custom greeting message in homepage
Co-authored-by: Emruz Hossain <emruz@appscode.com>

.github/release-drafter.yml

@@ -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'

.github/workflows/autoprefixer.yml

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

.github/workflows/draft-release.yml

@@ -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 }}

.gitignore

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

README.md

@@ -59,25 +59,81 @@ 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>
+  # 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.
+
+  # 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
+
+  # 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
+
+  # specify the list of custom menus that you want to show in the top navbar.
+  # they will be separated by a divider from the main menus.
+  customMenus:
+  - name: Notes
+    url: https://hossainnotes.netlify.app/docs/example/
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
+
+  # some information about you
+  author:
+    name: "Jane Doe"
+    nickname: "Jane"
+    image: "images/avatar.png"
+    # greeting message before your name. it will default to "Hi! I am" if not provided
+    greeting: "Hi, I am"
+    # give your some contact information. they will be used in the footer
+    contactInfo:
+      email: "janedoe@example.com"
+      phone: "+0123456789"
+    # a summary of what you do
+    summary:
+    - I am a Developer
+    - I work with Go
+    - I love to work with some fun projects
 ```
 
 You can just copy the content for `config.yaml` files from `theme/toha/exampleSite/config.yaml`.
 
+If you want to customize the any of the CSS styles on your site, create a
+`static/assets/css/style.css` file and add any custom CSS there.
+
 ## Usage
 
 Run your hugo site with this theme.
@@ -86,11 +142,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 +153,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
 

exampleSite/config.yaml

@@ -8,9 +8,13 @@ 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 +24,56 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
+  # 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.
+
+  # 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
+
+  # specify the list of custom menus that you want to show in the top navbar.
+  # they will be separated by a divider from the main menus.
+  customMenus:
+  - name: Notes
+    url: https://hossainnotes.netlify.app/docs/example/
+
+  # Provide newsletter configuration. This feature hasn't been implemented yet.
+  # Currently, you can just hide it from the footer.
+  newsletter:
+    enable: true
+
+  # some information about you
+  author:
+    name: "Jane Doe"
+    nickname: "Jane"
+    image: "images/avatar.png"
+    # greeting message before your name. it will default to "Hi! I am" if not provided
+    greeting: "Hi, I am"
+    # give your some contact information. they will be used in the footer
+    contactInfo:
+      email: "janedoe@example.com"
+      phone: "+0123456789"
+    # a summary of what you do
+    summary:
+    - I am a Developer
+    - I work with Go
+    - I love to work with some fun projects

exampleSite/data/achievements.yaml

@@ -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?

exampleSite/data/experiences.yaml

@@ -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.

exampleSite/data/projects.yaml

@@ -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"]

exampleSite/data/sections/about.yaml

@@ -1,3 +1,10 @@
+# section information
+section:
+  name: About
+  enable: true
+  weight: 1
+  showOnNavbar: true
+
 # your designation
 designation: Software Engineer
 # your company information
@@ -40,7 +47,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 +61,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"

exampleSite/data/sections/achievements.yaml

@@ -0,0 +1,23 @@
+# section information
+section:
+  name: 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?

exampleSite/data/sections/experiences.yaml

@@ -0,0 +1,63 @@
+# section information
+section:
+  name: 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.

exampleSite/data/sections/projects.yaml

@@ -0,0 +1,63 @@
+# section information
+section:
+  name: 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"]

exampleSite/data/sections/recent-posts.yaml

@@ -0,0 +1,10 @@
+# section information
+section:
+  name: Recent Posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+# no additional configuration is required

exampleSite/data/sections/skills.yaml

@@ -1,13 +1,24 @@
+# section information
+section:
+  name: 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 +27,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"

exampleSite/data/site.yaml

@@ -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

layouts/404.html

@@ -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" }}

layouts/_default/baseof.html

@@ -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 ------------>

layouts/_default/list.html

@@ -1,39 +1,44 @@
 {{ 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 "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="/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" }}
-<div class="sidebar" id="sidebar">
-    <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>
-        <div class="subtree">
-            {{ partial "sections.html" .Sections }}
-        </div>
-      </ul>
-    </div>
-  </div>
+<section class="content-section" id="content-section">
   <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" . }}
-        {{ end }}
-        {{/*  {{ $paginator := .Paginate .Site.RegularPages 120 }}
-        {{ range $paginator.Pages }}
-          {{ partial "cards/post.html" . }}
-        {{ end }}  */}}
-      </div>
-      {{/*  <div class="paginator">
-        {{ template "_internal/pagination.html" . }}
-      </div>  */}}
+    <div class="container-fluid post-card-holder" id="post-card-holder">
+      {{ $paginator := .Paginate .RegularPagesRecursive 12 }}
+      {{ range $paginator.Pages }}
+        {{ partial "cards/post.html" . }}
+      {{ end }}
+    </div>
+    <div class="paginator">
+      {{ template "_internal/pagination.html" . }}
     </div>
   </div>
+</section>
 {{ end }}
 
 {{ define "scripts" }}

layouts/_default/single.html

@@ -1,82 +1,96 @@
 {{ 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="/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" }}
-<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>
-
-  <!--Content Start-->
-  <div class="page-content">
-    <div class="author-profile ml-auto align-self-lg-center">
-      <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
-      <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
-      <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
-    </div>
-
-    <div class="title">
-      <h1>{{ .Page.Title }}</h1>
-    </div>
-
-    <div class="post-content" id="post-content">
-      {{ .Page.Content }}
-    </div>
-
-    <!--- Improve this page button --->
-    {{ if .Site.Params.GitRepo }}
-      <div class="btn-improve-page">
-          <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
-            <i class="fas fa-code-branch"></i>
-            Improve This Page
-          </a>
+<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" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
       </div>
-    {{ end }}
 
-    <!---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>
+      <!--Content Start-->
+      <div class="page-content">
+        <div class="author-profile ml-auto align-self-lg-center">
+          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
+          <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
+          <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
         </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 class="title">
+          <h1>{{ .Page.Title }}</h1>
         </div>
+
+        <div class="post-content" id="post-content">
+          {{ .Page.Content }}
+        </div>
+
+        <!--- Improve this page button --->
+        {{ if .Site.Params.GitRepo }}
+          <div class="btn-improve-page">
+              <a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
+                <i class="fas fa-code-branch"></i>
+                Improve This Page
+              </a>
+          </div>
         {{ end }}
+
+        <!---Next and Previous Navigator -->
+      <hr />
+        {{ partial "navigators/next-prev-navigator.html" . }}
+      <hr />
+      <!-- Add Disqus forum  -->
+      {{ if .Site.DisqusShortname }}
+          {{ partial "disqus.html" . }}
       {{ end }}
-    {{ end }}
+      </div>
+    </div>
   </div>
-  <hr />
-  <!-- Add Disqus forum  -->
-  {{ if .Site.DisqusShortname }}
-      {{ partial "disqus.html" . }}
-  {{ end }}
-</div>
+</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>

layouts/index.html

@@ -2,47 +2,53 @@
 <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 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" . -}}
+    <!--- ADD OPTIONAL SECTIONS ----------->
+    {{ if .Site.Data.sections }}
+      {{ $background:= "bg-white"}}
+      {{ range sort .Site.Data.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 +60,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>

layouts/partials/about.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>

layouts/partials/achievements.html

@@ -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>

layouts/partials/cards/post.html

@@ -1,4 +1,4 @@
-<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
+<div class="post-card">
   <a href="{{ .RelPermalink }}" class="post-card-link">
     <div class="card">
       <div class="card-head">
@@ -6,7 +6,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>

layouts/partials/cards/project.html

@@ -1,21 +1,23 @@
 <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">
-        <div class="d-flex">
-          {{ if .logo }}
-          <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
-          {{ end }}
-          <h5 class="card-title mb-0">{{ .name }}</h5>
+      <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 }}" />
+            {{ end }}
+            <h5 class="card-title mb-0">{{ .name }}</h5>
+          </div>
+          <div class="sub-title">
+            <span>{{ .role }}</span>
+            <span>{{ .timeline }}</span>
+          </div>
         </div>
-        <div class="sub-title">
-          <span>{{ .role }}</span>
-          <span>{{ .timeline }}</span>
-        </div>
-      </div>
+      </a>
       <div class="card-body text-justify pt-1 pb-1">
         <p>{{ .summary | markdownify }}</p>
         <span class="float-right">

layouts/partials/cards/recent-post.html

@@ -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>

layouts/partials/cards/skill.html

@@ -1,15 +1,15 @@
-<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
-  <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>
-      {{ end }}
-      <h4 class="card-title">{{ .name }}</h4>
+<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-xs" src="{{ .icon }}" alt="{{ .name }}" />
+        {{ end }}
+        <h5 class="card-title">{{ .name }}</h5>
+      </div>
+      <div class="card-body">
+        <p class="card-text">{{ .summary | markdownify }}</p>
+      </div>
     </div>
-    <div class="card-body">
-      <p class="card-text">{{ .summary | markdownify }}</p>
-    </div>
-  </div>
+  </a>
 </div>

layouts/partials/experiences.html

@@ -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>

layouts/partials/experiences/experience-info.html

@@ -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>

layouts/partials/experiences/right-to-left-h-line.html

@@ -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>

layouts/partials/experiences/right-v-line.html

@@ -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>

layouts/partials/footer.html

@@ -3,24 +3,28 @@
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
         <h5>Navigation</h5>
-        {{ if .Site.Data.site }}
-          <ul>
-            {{ range .Site.Data.site.menus }}
+        {{ if .Site.Data.sections }}
+        <ul>
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if and (.section.enable) (.section.showOnNavbar)}}
             <li class="nav-item">
-              <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+              <a class="smooth-scroll" href="/#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
             </li>
             {{ end }}
-          </ul>
+          {{- end }}
+        </ul>
         {{ end }}
+
       </div>
       <div class="col-md-4 col-sm-12">
         <h5>Contact Me</h5>
         <ul>
-          {{ range $key,$value:=.Site.Data.site.author.contactInfo }}
+          {{ range $key,$value:=.Site.Params.author.contactInfo }}
           <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
           {{ end }}
         </ul>
       </div>
+      {{ 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>
@@ -40,6 +44,7 @@
           <button type="submit" class="btn btn-info">Submit</button>
         </form>
       </div>
+      {{ end }}
     </div>
   </div>
   <hr />
@@ -47,13 +52,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">{{ if .Site.Params.copyright }}{{ .Site.Params.copyright }}{{ else }}© 2020 Copyright.{{ end }}</div>
+      <div class="col-md-4 text-right">
+        <a id="hugo" href="https://gohugo.io/">Powered by Hugo
         <img
           src="/assets/images/hugo-logo-wide.svg"
           alt="Hugo Logo"

layouts/partials/header.html

@@ -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"}}" />
 
+<!--================= custom style overrides =========================-->
+<link rel="stylesheet" href="/assets/css/style.css" />

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

@@ -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 }}

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

@@ -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 }}

layouts/partials/helpers/get-categories.html

@@ -1,5 +0,0 @@
-{{ $categories:= ""}}
-{{ if  .Params.categories }}
-    {{ $categories = delimit .Params.categories "," }}
-{{ end }}
-{{ return $categories }}

layouts/partials/home.html

@@ -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>

layouts/partials/misc/soft-skills.html

@@ -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>

layouts/partials/navbar-2.html

@@ -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>

layouts/partials/navbar.html

@@ -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>

layouts/partials/navigators/navbar-2.html

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

layouts/partials/navigators/navbar.html

@@ -0,0 +1,64 @@
+<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
+  <div class="container">
+    {{ $mainLogo:="/assets/images/main-logo.png" }}
+    {{ $invertedLogo:="/assets/images/inverted-logo.png" }}
+    {{ if .Site.Params.logo.main }}
+      {{ $mainLogo = .Site.Params.logo.main }}
+    {{ end }}
+    {{ if .Site.Params.logo.inverted }}
+      {{ $invertedLogo = .Site.Params.logo.inverted }}
+    {{ end }}
+    <a class="navbar-brand" href="{{ .Site.BaseURL }}">
+      <img src="{{ $invertedLogo }}" 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">Home</a>
+        </li>
+        {{- if .Site.Data.sections }}
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if and (.section.enable) (.section.showOnNavbar)}}
+              <li class="nav-item">
+                <a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .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">Posts</a>
+          </li>
+        {{ end }}
+        {{ range site.Params.customMenus }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+  <!-- Store the logo information in a hidden img for the JS -->
+  <img src="{{ $mainLogo }}" class="d-none" id="main-logo">
+  <img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo">
+</nav>

layouts/partials/navigators/next-prev-navigator.html

@@ -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>

layouts/partials/navigators/sidebar.html

@@ -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 }}

layouts/partials/progress/soft-skills.html

@@ -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>

layouts/partials/projects.html

@@ -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>

layouts/partials/recent-posts.html

@@ -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>

layouts/partials/scripts.html

@@ -2,4 +2,4 @@
 <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>

layouts/partials/sections.html

@@ -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 }}

layouts/partials/sections/about.html

@@ -0,0 +1,45 @@
+<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
+  <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 }}" target="#"
+        ><button class="btn btn-dark">My 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>

layouts/partials/sections/achievements.html

@@ -0,0 +1,15 @@
+<div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ 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>

layouts/partials/sections/achievements/entry.html

@@ -6,6 +6,6 @@
   <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>

layouts/partials/sections/experiences.html

@@ -0,0 +1,25 @@
+<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ 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>

layouts/partials/sections/experiences/experience-info.html

@@ -0,0 +1,5 @@
+{{ if gt (len .positions) 1 }}
+  {{ partial "sections/experiences/multiple-positions" . }}
+{{ else }}
+  {{ partial "sections/experiences/single-position.html" . }}
+{{ end }}

layouts/partials/sections/experiences/multiple-positions.html

@@ -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>

layouts/partials/sections/experiences/single-position.html

@@ -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>

layouts/partials/sections/home.html

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

layouts/partials/sections/projects.html

@@ -0,0 +1,21 @@
+<div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ 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>

layouts/partials/sections/recent-posts.html

@@ -0,0 +1,12 @@
+<div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ 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>

layouts/partials/sections/skills.html

@@ -0,0 +1,12 @@
+<div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
+  {{ 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>

layouts/partials/skills.html

@@ -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>

layouts/shortcodes/alert.html

@@ -0,0 +1,3 @@
+<div class="alert alert-{{ .Get "type"}}">
+    <strong>{{.Inner | markdownify }}</strong>
+</div>

package-lock.json

@@ -0,0 +1,956 @@
+{
+  "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"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
+      "dev": true
+    },
+    "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.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.0.tgz",
+      "integrity": "sha512-pUsXKAF2lVwhmtpeA3LJrZ76jXuusrNyhduuQs7CDFf9foT4Y38aQOserd2lMe5DSSrjf3fx34oHwryuvxAUgQ==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001111",
+        "electron-to-chromium": "^1.3.523",
+        "escalade": "^3.0.2",
+        "node-releases": "^1.1.60"
+      }
+    },
+    "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.30001118",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001118.tgz",
+      "integrity": "sha512-RNKPLojZo74a0cP7jFMidQI7nvLER40HgNfgKQEJ2PFm225L0ectUungNQoK3Xk3StQcFbpBPNEvoWD59436Hg==",
+      "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.550",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.550.tgz",
+      "integrity": "sha512-MWDHoJsSieBaJ6mObvi3V0eKZufR1iMJl56VIGdXCgFHyCUbVDGm2IMXUNjDxgbGbKa3tA5+zJmHuBQqRxGiLA==",
+      "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.0.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
+      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "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": "7.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
+      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+      "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.60",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
+      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
+      "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.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      }
+    },
+    "postcss-cli": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.1.tgz",
+      "integrity": "sha512-bYQy5ydAQJKCMSpvaMg0ThPBeGYqhQXumjbFOmWnL4u65CYXQ16RfS6afGQpit0dGv/fNzxbdDtx8dkqOhhIbg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^0.9.0",
+        "fs-extra": "^9.0.0",
+        "get-stdin": "^7.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.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "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.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+      "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+      "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.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "y18n": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dev": true,
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}

package.json

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

static/assets/css/404.css

@@ -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) {
+}

static/assets/css/layouts/list.css

@@ -0,0 +1,256 @@
+.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;
+  }
+
+  .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) {
+}

static/assets/css/layouts/main.css

@@ -0,0 +1,286 @@
+/* ========= 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) {
+}
+
+/*  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) {
+}

static/assets/css/layouts/single.css

@@ -0,0 +1,510 @@
+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;
+  }
+
+  .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) {
+}

static/assets/css/list.css

@@ -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;
-  }
-}

static/assets/css/navigators/navbar.css

@@ -6,7 +6,6 @@
   height: 50px;
   z-index: 99999;
   transition: all 0.4s ease-out;
-  -webkit-transition: all 0.4s ease-out;
   margin: 0;
   padding-top: 0.1rem;
   text-align: center;
@@ -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,
@@ -124,9 +118,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) */
 
@@ -136,31 +130,107 @@
 @media (max-width: 1200px) {
 }
 
-/*  Large devices (desktops, 992px and up) */
+/* 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;
+  }
 
-@media (max-width: 992px) {
-}
-
-/* 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;
+  }
+
+  .final-navbar li a {
+    border-bottom: none;
+  }
+
+  .final-navbar .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+  }
+
+  .dropdown-divider {
+    border-top: 1px solid #c0ccda;
+  }
+  #top-navbar-divider {
+    background: rgba(0, 0, 0, 0.6);
+    height: auto;
+    width: auto;
+    margin-right: 15px;
+  }
+}
+
+/*  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;
+  }
+
+  .final-navbar .navbar-collapse.show {
+    box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
+    transition: all 0.3s ease-out;
+  }
+
+  .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;
   }
@@ -172,7 +242,6 @@
   .final-navbar .navbar-collapse.show {
     box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
     transition: all 0.3s ease-out;
-    -webkit-transition: all 0.3s ease-out;
   }
 
   .dropdown-divider {
@@ -190,3 +259,15 @@
 
 @media only screen and (max-width: 576px) {
 }
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/navigators/sidebar.css

@@ -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) {
+}

static/assets/css/projects.css

@@ -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;
-  }
-}

static/assets/css/recent-posts.css

@@ -1,28 +0,0 @@
-.recent-posts .container{
-  padding-top: 1rem;
-}
-
-.recent-posts .card .card-footer span {
-  font-size: 10pt;
-  color: #6c757d !important;
-  padding-top: 5px;
-}
-
-.recent-posts .card .card-footer {
-  background: #fff;
-  margin-top: auto;
-}
-
-.recent-posts .post-card-link{
-  text-decoration: none;
-}
-
-.post-summery {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  /* line-height: 24px;     fallback */
-  max-height: 144px; /* fallback */
-  -webkit-line-clamp: 5; /* number of lines to show */
-  -webkit-box-orient: vertical;
-}

static/assets/css/sections/about.css

@@ -63,7 +63,6 @@
   border-top-right-radius: 80px;
   border-bottom-right-radius: 80px;
   border-left: 0;
-  -webkit-transform-origin: center left;
   transform-origin: center left;
 }
 
@@ -76,9 +75,9 @@
   border-top-left-radius: 80px;
   border-bottom-left-radius: 80px;
   border-right: 0;
-  -webkit-transform-origin: center right;
   transform-origin: center right;
-  animation: circular-loading-1 1.8s linear forwards;
+  -webkit-animation: circular-loading-1 1.8s linear forwards;
+          animation: circular-loading-1 1.8s linear forwards;
 }
 
 .circular-progress .circular-progress-value {
@@ -100,7 +99,7 @@
 }
 
 .circular-progress.yellow .circular-progress-bar {
-  border-color: #ffc212;
+  border-color: #eebb4d;
 }
 
 .circular-progress.pink .circular-progress-bar {
@@ -111,222 +110,353 @@
   border-color: #2dca73;
 }
 
+.circular-progress.sky .circular-progress-bar {
+  border-color: #00c9e3;
+}
+
+.circular-progress.orange .circular-progress-bar {
+  border-color: #ff7c7c;
+}
+
 .circular-progress-percentage-50 {
-  animation: circular-loading-50 0s linear forwards 1.8s;
+  -webkit-animation: circular-loading-50 0s linear forwards 1.8s;
+          animation: circular-loading-50 0s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-55 {
-  animation: circular-loading-55 0.18s linear forwards 1.8s;
+  -webkit-animation: circular-loading-55 0.18s linear forwards 1.8s;
+          animation: circular-loading-55 0.18s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-60 {
-  animation: circular-loading-60 0.36s linear forwards 1.8s;
+  -webkit-animation: circular-loading-60 0.36s linear forwards 1.8s;
+          animation: circular-loading-60 0.36s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-65 {
-  animation: circular-loading-65 0.54s linear forwards 1.8s;
+  -webkit-animation: circular-loading-65 0.54s linear forwards 1.8s;
+          animation: circular-loading-65 0.54s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-70 {
-  animation: circular-loading-70 0.72s linear forwards 1.8s;
+  -webkit-animation: circular-loading-70 0.72s linear forwards 1.8s;
+          animation: circular-loading-70 0.72s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-75 {
-  animation: circular-loading-75 0.9s linear forwards 1.8s;
+  -webkit-animation: circular-loading-75 0.9s linear forwards 1.8s;
+          animation: circular-loading-75 0.9s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-80 {
-  animation: circular-loading-80 1.08s linear forwards 1.8s;
+  -webkit-animation: circular-loading-80 1.08s linear forwards 1.8s;
+          animation: circular-loading-80 1.08s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-85 {
-  animation: circular-loading-85 1.26s linear forwards 1.8s;
+  -webkit-animation: circular-loading-85 1.26s linear forwards 1.8s;
+          animation: circular-loading-85 1.26s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-90 {
-  animation: circular-loading-90 1.44s linear forwards 1.8s;
+  -webkit-animation: circular-loading-90 1.44s linear forwards 1.8s;
+          animation: circular-loading-90 1.44s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-95 {
-  animation: circular-loading-95 1.62s linear forwards 1.8s;
+  -webkit-animation: circular-loading-95 1.62s linear forwards 1.8s;
+          animation: circular-loading-95 1.62s linear forwards 1.8s;
 }
 
 .circular-progress-percentage-100 {
-  animation: circular-loading-100 1.8s linear forwards 1.8s;
+  -webkit-animation: circular-loading-100 1.8s linear forwards 1.8s;
+          animation: circular-loading-100 1.8s linear forwards 1.8s;
+}
+
+@-webkit-keyframes circular-loading-50 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
 
 @keyframes circular-loading-50 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 }
 
+@-webkit-keyframes circular-loading-55 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(18deg);
+  }
+}
+
 @keyframes circular-loading-55 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(18deg);
     transform: rotate(18deg);
   }
 }
 
+@-webkit-keyframes circular-loading-60 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-60 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-65 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(54deg);
+  }
+}
+
 @keyframes circular-loading-65 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(54deg);
     transform: rotate(54deg);
   }
 }
 
+@-webkit-keyframes circular-loading-70 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(72deg);
+  }
+}
+
 @keyframes circular-loading-70 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(72deg);
     transform: rotate(72deg);
   }
 }
 
+@-webkit-keyframes circular-loading-75 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-75 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-80 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(108deg);
+  }
+}
+
 @keyframes circular-loading-80 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(108deg);
     transform: rotate(108deg);
   }
 }
 
+@-webkit-keyframes circular-loading-85 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-85 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }
 
+@-webkit-keyframes circular-loading-90 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-90 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-95 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(162deg);
+  }
+}
+
 @keyframes circular-loading-95 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(162deg);
     transform: rotate(162deg);
   }
 }
 
+@-webkit-keyframes circular-loading-100 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
 @keyframes circular-loading-100 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+}
+
+@-webkit-keyframes circular-loading-1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
     transform: rotate(180deg);
   }
 }
 
 @keyframes circular-loading-1 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
   }
 }
 
+@-webkit-keyframes circular-loading-2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(144deg);
+  }
+}
+
 @keyframes circular-loading-2 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(144deg);
     transform: rotate(144deg);
   }
 }
 
+@-webkit-keyframes circular-loading-3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
 @keyframes circular-loading-3 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
   }
 }
 
+@-webkit-keyframes circular-loading-4 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(36deg);
+  }
+}
+
 @keyframes circular-loading-4 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(36deg);
     transform: rotate(36deg);
   }
 }
 
+@-webkit-keyframes circular-loading-5 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(126deg);
+  }
+}
+
 @keyframes circular-loading-5 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(126deg);
     transform: rotate(126deg);
   }
 }
@@ -339,9 +469,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) */
 
@@ -351,6 +481,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -359,9 +493,24 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
+  .about-section.container {
+    max-width: 100%;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
 }
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/sections/achievements.css

@@ -1,4 +1,4 @@
-.achievements .container {
+.achievements-section .container {
   padding-top: 0.5rem;
 }
 
@@ -16,7 +16,6 @@
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .achievement-entry:hover {
@@ -24,7 +23,6 @@
   z-index: 1;
   transform: scale(1.1);
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
   z-index: 20000;
 }
 
@@ -33,9 +31,7 @@
   z-index: 1;
   opacity: 1 !important;
   transition: none !important;
-  -webkit-transition: none !important;
   transform: none !important;
-  -webkit-transform: none !important;
 }
 
 #gallery .img-type-1 {
@@ -58,7 +54,6 @@
   opacity: 1;
   font-size: 1rem;
   transition: all 0.3s ease-out;
-  --webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .img-type-1 i {
@@ -72,7 +67,6 @@
 .achievement-details.img-type-2 i {
   margin-top: 0px !important;
   transition: none !important;
-  -webkit-transition: none !important;
   float: right;
 }
 
@@ -92,7 +86,6 @@
   opacity: 1;
   bottom: 0px;
   transition: bottom 0.3s ease-out;
-  -webkit-transition: bottom 0.3s ease-out;
 }
 
 #gallery .caption {
@@ -103,7 +96,6 @@
   padding: 15px;
   position: absolute;
   transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
 }
 
 #gallery .caption h4 {
@@ -123,3 +115,58 @@
 #gallery .achievement-details {
   height: 75vh !important;
 }
+
+/* ============= 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) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .achievements-section .container {
+    max-width: 100%;
+  }
+  .achievements-section .col-md-6 {
+    flex: 50%;
+    width: 50%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  #gallery .achievement-entry:hover {
+    transform: scale(1.05);
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/sections/experiences.css

@@ -1,25 +1,21 @@
-.experiences {
+.experiences-section {
   padding-bottom: 1rem;
 }
 
-.experiences .timeline {
+.experiences-section .timeline {
   margin-top: 1.5rem !important;
 }
 
-.text-muted {
-  color: #e5e9f2;
-}
-
-.experiences ul {
+.experiences-section ul {
   padding-left: 1rem;
 }
 
-.experiences ul > li {
+.experiences-section ul > li {
   margin-left: 0;
   color: #3c4858;
 }
 
-.experience-entry-heading h5 {
+.experiences-section .designation {
   font-weight: 600;
 }
 
@@ -95,9 +91,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) */
 
@@ -107,6 +103,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -115,9 +115,51 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
+  .experiences-section .container {
+    max-width: 100%;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
 }
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+  .top-left {
+    left: -52%;
+    top: -50%;
+  }
+
+  .top-right {
+    left: 52%;
+    top: -50%;
+  }
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+  .top-left {
+    left: -56%;
+    top: -50%;
+  }
+
+  .top-right {
+    left: 56%;
+    top: -50%;
+  }
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+  .top-left {
+    left: -64%;
+    top: -50%;
+  }
+
+  .top-right {
+    left: 64%;
+    top: -50%;
+  }
+}

static/assets/css/sections/home.css

@@ -12,10 +12,10 @@
   padding: 0;
   margin: 0;
   background-attachment: fixed;
+  background-position: center;
   transform: scale(1.1);
-  -webkit-transform: scale(1.1);
-  filter: blur(3px);
   -webkit-filter: blur(3px);
+          filter: blur(3px);
   background-size: cover;
 }
 
@@ -54,7 +54,24 @@
 }
 
 .bounce {
-  animation: bounce 2s infinite;
+  -webkit-animation: bounce 2s infinite;
+          animation: bounce 2s infinite;
+}
+
+@-webkit-keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
 }
 
 @keyframes bounce {
@@ -75,9 +92,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) */
 
@@ -87,6 +104,10 @@
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -116,3 +137,15 @@
     font-size: 24pt;
   }
 }
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/sections/projects.css

@@ -0,0 +1,114 @@
+.projects-section .card .card-header {
+  background-color: #f9fafc;
+  padding: 0.7rem;
+  padding-bottom: 0rem;
+  text-decoration: none;
+}
+
+.projects-section .card .card-img-xs {
+  margin-right: 0.5rem;
+}
+
+.card .card-header .sub-title span:nth-child(1) {
+  float: left;
+}
+.card .card-header .sub-title span:nth-child(2) {
+  float: right;
+}
+
+.projects-section .card .card-body {
+  padding: 0.7rem;
+}
+
+.projects-section .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 0.4rem;
+}
+
+.filtr-projects {
+  padding: 1rem !important;
+}
+
+/* ============= 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) {
+  .projects-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .projects-section .container {
+    max-width: 100%;
+  }
+  .projects-section .filtr-projects {
+    padding: 0;
+  }
+  .projects-section .filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .projects-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .projects-section .container {
+    max-width: 100%;
+  }
+  .projects-section .filtr-projects {
+    padding: 0;
+  }
+  .projects-section .filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    flex: 50%;
+    max-width: calc(100% / 2 - 0.2rem);
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .projects-section .btn {
+    margin-top: 0.3125rem;
+  }
+  .projects-section .filtr-item {
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/sections/recent-posts.css

@@ -0,0 +1,82 @@
+.recent-posts-section .container {
+  padding-top: 1rem;
+}
+
+.recent-posts-section .card .card-footer span {
+  font-size: 10pt;
+  color: #6c757d !important;
+  padding-top: 5px;
+}
+
+.recent-posts-section .card .card-footer {
+  background: #fff;
+  margin-top: auto;
+}
+
+.recent-posts-section .post-card-link {
+  text-decoration: none;
+}
+
+.post-summary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /* line-height: 24px;     fallback */
+  max-height: 144px; /* fallback */
+  -webkit-line-clamp: 5; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+/* ============= 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) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .recent-posts-section .container {
+    max-width: 100%;
+  }
+  .recent-posts-section .post-card {
+    width: 50%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .recent-posts-section .post-card {
+    width: 100%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/sections/skills.css

@@ -0,0 +1,79 @@
+.skills-section .card .card-head {
+  background-color: #f9fafc;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 0.7rem;
+  padding-bottom: 0rem;
+  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
+}
+
+.skills-section .skill-card-link {
+  text-decoration: none;
+}
+
+.skills-section .card .card-img-xs {
+  margin-right: 0.5rem;
+}
+
+.skills-section .card {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.skills-section .card .card-body {
+  padding-top: 0.2rem;
+  padding-left: 0.7rem;
+}
+
+/* ============= 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) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .skills-section {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .skills-section .container {
+    max-width: 100%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}

static/assets/css/single.css

@@ -1,279 +0,0 @@
-body {
-  background-color: #e5e9f2;
-}
-.read-area {
-  background-color: #f9fafc;
-}
-
-.wrapper {
-  padding: 0;
-}
-
-.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: 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;
-}
-
-ul > ol,
-ol > ul,
-ul > ul,
-ol > ol,
-li > ol,
-li > ul {
-  padding-inline-start: 25px;
-}
-
-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;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.next-prev-navigator a:hover {
-  color: #3c4858;
-  transition: all 0.3 ease-out;
-  -webkit-transition: all 0.3 ease-out;
-}
-
-.next-prev-navigator .next-article {
-  text-align: right;
-}
-
-.next-prev-navigator .next-article a {
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.next-prev-navigator .previous-article a {
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.next-prev-navigator .btn-outline-info {
-  color: #f9fafc !important;
-  border-color: #e5e9f2 !important;
-  background-color: #248aaa !important;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.next-prev-navigator .btn-outline-info:hover {
-  color: #3c4858 !important;
-  background-color: #e5e9f2 !important;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.disquss {
-  padding: 10px;
-}
-
-.btn-improve-page{
-  text-align: right;
-}
-
-@media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-}
-@media only screen and (max-width: 576px) {
-  .wrapper {
-    padding: 0px;
-  }
-
-  .hero-area {
-    height: 200px;
-  }
-
-  .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;
-  }
-}

static/assets/css/skills.css

@@ -1,55 +0,0 @@
-.skills .card .card-head img {
-  margin: 10px;
-}
-
-.skills .card .card-head i{
-  font-size: 1.5rem;
-  margin: 10px;
-  margin-top: 15px;
-}
-
-.skills .card {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.skills .card .card-body {
-  padding-top: 0;
-}
-
-.skills .card .card-head {
-  height: fit-content;
-}
-
-.skills .card .card-head h4 {
-  margin-top: 0.8rem;
-}
-
-/* ============= 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) {
-}

static/assets/css/style.css

@@ -1,228 +1,10 @@
-/* ========= 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;
-}
-
-p {
-  color: #3c4858;
-}
-
-a {
-  color: #248aaa;
-}
-
-a:hover {
-  color: #207089;
-}
-
-.btn-dark {
-  background-color: #3c4858;
-  border-color: #3c4858;
-  color: #e5e9f2;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.btn-dark:hover,
-.btn-dark:focus {
-  background-color: #248aaa;
-  border-color: #248aaa;
-  transition: all 0.3s ease-out;
-  -webkit-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;
-  -webkit-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;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.card .card-head {
-  height: 172px;
-  object-fit: cover;
-  overflow: hidden;
-}
-
-.card-img-top {
-  transition: all 0.3s ease-out !important;
-  -webkit-transition: all 0.3s ease-out !important;
-}
-
-.card:hover .card-head .card-img-top,
-.card:focus .card-head .card-img-top {
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-  transform: scale(1.2);
-  -webkit-transform: scale(1.2);
-}
-
-.card-title {
-  font-weight: 600;
-}
-
-.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;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.footer a:hover {
-  margin-left: 5px;
-  transition: all 0.3s ease-out;
-  -webkit-transition: all 0.3s ease-out;
-}
-
-.footer ul {
-  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 END ---- */
+/* This is empty CSS file intended to be overwritten by user's custom CSS file */
 
 /* ============= 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) */
 
@@ -232,6 +14,10 @@ img.right{
 @media (max-width: 1200px) {
 }
 
+/* IPad Pro */
+@media (max-width: 1024px) {
+}
+
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
@@ -245,12 +31,16 @@ img.right{
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .container-fluid.about,
-  .container-fluid.skills,
-  .container-fluid.projects,
-  .container-fluid.recent-posts,
-  .container-fluid.achievements {
-    padding-left: 5px;
-    padding-right: 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) {
 }

static/assets/js/home.js

@@ -43,30 +43,6 @@ var projectCards;
       }
     }
 
-    // ================= Smooth Scroll ===================
-    // Add smooth scrolling to all links
-    $("a").on('click', function (event) {
-
-      // Make sure this.hash has a value before overriding default behavior
-      if (this.hash !== "") {
-        // Prevent default anchor click behavior
-        event.preventDefault();
-
-        // Store hash
-        var hash = this.hash;
-
-        // Using jQuery's animate() method to add smooth page scroll
-        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-        $('html, body').animate({
-          scrollTop: $(hash).offset().top
-        }, 800, function () {
-
-          // Add hash (#) to URL when done scrolling (default click behavior)
-          window.location.hash = hash;
-        });
-      } // End if
-    });
-
     // ============== Fix Timelines Horizontal Lines =========
     var hLines = document.getElementsByClassName("horizontal-line");
     for (let i = 0; i < hLines.length; i++) {
@@ -93,20 +69,22 @@ var projectCards;
         // primary skills
         var skillCards = document.getElementById("primary-skills");
         if (skillCards != null) {
-          var el = skillCards.children;
+          var cardElems = skillCards.getElementsByClassName("card");
           var maxHeight = 0;
-          for (let i = 0; i < el.length; i++) {
-            if (el[i].children[0].clientHeight > maxHeight) {
-              maxHeight = el[i].children[0].clientHeight;
+          for (let i = 0; i < cardElems.length; i++) {
+            if (cardElems.item(i).clientHeight > maxHeight) {
+              maxHeight = cardElems.item(i).clientHeight;
             }
           }
-          for (let i = 0; i < el.length; i++) {
-            el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+          for (let i = 0; i < cardElems.length; i++) {
+            cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;");
           }
         }
       }
     }
-    adjustSkillCardsHeight();
+    $(window).on("load", function () {
+      adjustSkillCardsHeight();
+    });
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons
@@ -145,15 +123,18 @@ var projectCards;
 
     function adjustRecentPostsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("recent-post-cards").children;
-        let maxHeight = 0;
-        for (let i = 0; i < el.length; i++) {
-          if (el[i].children[1].clientHeight > maxHeight) {
-            maxHeight = el[i].children[1].clientHeight;
+        let recentPostCards = document.getElementById("recent-post-cards")
+        if (recentPostCards != null) {
+          let el = recentPostCards.children;
+          let maxHeight = 0;
+          for (let i = 0; i < el.length; i++) {
+            if (el[i].children[1].clientHeight > maxHeight) {
+              maxHeight = el[i].children[1].clientHeight;
+            }
+          }
+          for (let i = 0; i < el.length; i++) {
+            el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
           }
-        }
-        for (let i = 0; i < el.length; i++) {
-          el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
         }
       }
     }
@@ -260,14 +241,14 @@ var projectCards;
     }
     function twoColumnRow(gallery, entries, i) {
       let entry1 = document.createElement("div");
-      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.classList.add("col-6", "m-0", "p-0");
       entry1.appendChild(entries[i].cloneNode(true));
       entry1.children[0].classList.add("img-type-1");
       gallery.appendChild(entry1);
       i++;
 
       let entry2 = document.createElement("div");
-      entry2.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry2.classList.add("col-6", "m-0", "p-0");
       entry2.appendChild(entries[i].cloneNode(true));
       entry2.children[0].classList.add("img-type-1");
       gallery.appendChild(entry2);
@@ -276,7 +257,7 @@ var projectCards;
 
     function singleColumnRow(gallery, entries, i) {
       let entry1 = document.createElement("div");
-      entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
+      entry1.classList.add("col-12", "m-0", "p-0");
       entry1.appendChild(entries[i].cloneNode(true));
       entry1.children[0].classList.add("img-type-1");
       gallery.appendChild(entry1);

static/assets/js/list.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var filterizd;
-
 var isMobile = false, isTablet = false, isLaptop = false;
 (function ($) {
   jQuery(document).ready(function () {
@@ -25,7 +23,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
     // ======= Adjust height of the post cards =============
     function adjustPostCardsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let postCardHolder = document.getElementById("post-cards");
+        let postCardHolder = document.getElementById("post-card-holder");
         if (postCardHolder == null ){
           return
         }
@@ -42,69 +40,5 @@ var isMobile = false, isTablet = false, isLaptop = false;
       }
     }
     adjustPostCardsHeight();
-
-    // ============= Sidebar Tree ================
-    function buildSidebarMenu() {
-      var openedClass = "fa-minus-circle";
-      var closedClass = "fa-plus-circle";
-      // initialize top level
-      var tree = $("#tree");
-      // add expand icon to those li who has ul as children
-      tree.find("li").has("ul").each(function () {
-        var branch = $(this);
-        branch.prepend('<i class="fas ' + closedClass + '"></i>');
-        branch.on('click', function (e) {
-          if (this.children[1] == e.target) {
-            // toggle "expand" class and icon
-            branch.toggleClass("expand");
-            var icon = $(this).children('i:first');
-            icon.toggleClass(openedClass + " " + closedClass);
-          }
-        });
-      });
-
-      // remove "expnad" class from siblings of the clicked item
-      tree.find("li").on("click", function () {
-        var item = $(this);
-        var shiblings = item.siblings().each(function () {
-          var sibling = $(this);
-          if (sibling.hasClass("expand")) {
-            sibling.removeClass("expand");
-            var icon = sibling.children('i:first');
-            icon.toggleClass(openedClass + " " + closedClass);
-          }
-        });
-      });
-
-      // focus the cliked item
-      tree.find("a").on("click", function () {
-        // clear other focused link
-        tree.find("a.focused").each(function () {
-          $(this).removeClass("focused");
-        });
-        // focus cliked link
-        $(this).addClass("focused");
-      });
-    }
-
-    buildSidebarMenu();
-    // initialize filterizr
-    filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
   });
 })(jQuery);
-
-// toggle sidebar on click
-function toggleSidebar() {
-  document.getElementById("sidebar").classList.toggle("hide");
-  document.getElementById("content").classList.toggle("overley");
-
-  // if it is mobile device. then scroll to top.
-  if (isMobile && $("#sidebar").hasClass("hide")) {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
-  }
-
-  setTimeout(function () {
-    filterizd.filterizr('sort');
-  }, 300);
-}

static/assets/js/main.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var projectCards;
+var isMobile = false, isTablet = false, isLaptop = false;
+(function ($) {
+  jQuery(document).ready(function () {
+    function detectDevice() {
+      if (window.innerWidth <= 425) {
+        isMobile = true;
+        isTablet = false;
+        isLaptop = false;
+      } else if (window.innerWidth <= 768) {
+        isMobile = false;
+        isTablet = true;
+        isLaptop = false;
+      } else {
+        isMobile = false;
+        isTablet = false;
+        isLaptop = true;
+      }
+    }
+    detectDevice();
+
+    // ================= Smooth Scroll ===================
+    function addSmoothScroll() {
+      // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
+      // Select all links with hashes
+      $('a[href*="#"]').click(function (event) {
+        // On-page links
+        if (
+          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+          &&
+          location.hostname == this.hostname
+        ) {
+          // Figure out element to scroll to
+          var target = $(this.hash);
+          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+          // Does a scroll target exist?
+          if (target.length) {
+            // Only prevent default if animation is actually gonna happen
+            event.preventDefault();
+
+            let offset = 60;
+            if (isMobile) {
+              offset = 710;
+            } else if (isTablet) {
+              offset = 60;
+            }
+            $('html, body').animate({
+              scrollTop: target.offset().top - offset
+            }, 1000, function () {
+              // Callback after animation
+              // Must change focus!
+              var $target = $(target);
+              $target.focus();
+              if ($target.is(":focus")) { // Checking if the target was focused
+                return false;
+              } else {
+                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
+                $target.focus(); // Set focus again
+              };
+            });
+          }
+        }
+      });
+    }
+    addSmoothScroll();
+
+    // re-render custom functions on window resize
+    window.onresize = function () {
+      detectDevice();
+      addSmoothScroll();
+    };
+  });
+})(jQuery);
+
+
+// Toggle sidebar on click. Here, class "hide" open the sidebar
+function toggleSidebar() {
+  let sidebar = document.getElementById("sidebar-section");
+  if (sidebar == null) {
+    return
+  }
+  if (sidebar.classList.contains("hide")) {
+    sidebar.classList.remove("hide")
+  } else {
+    // if toc-section is open, then close it first
+    let toc = document.getElementById("toc-section");
+    if (toc != null && toc.classList.contains("hide")) {
+      toc.classList.remove("hide");
+    }
+    // add "hide" class
+    sidebar.classList.add("hide")
+    // if it is mobile device. then scroll to top.
+    if (isMobile && sidebar.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      if (document.getElementById("hero-area") != null) {
+        document.getElementById("hero-area").classList.toggle("hide");
+      }
+    }
+  }
+  if (document.getElementById("content-section") != null) {
+    document.getElementById("content-section").classList.toggle("hide");
+  }
+}
+
+// Toggle Table of Contents on click. Here, class "hide" open the toc
+function toggleTOC() {
+  let toc = document.getElementById("toc-section");
+  if (toc == null) {
+    return
+  }
+  if (toc.classList.contains("hide")) {
+    toc.classList.remove("hide");
+  } else {
+    // if sidebar-section is open, then close it first
+    let sidebar = document.getElementById("sidebar-section");
+    if (sidebar != null && sidebar.classList.contains("hide")) {
+      sidebar.classList.remove("hide");
+    }
+    // add "hide" class
+    toc.classList.add("hide")
+    // if it is mobile device. then scroll to top.
+    if (isMobile && toc.classList.contains("hide")) {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
+  }
+  if (document.getElementById("hero-area") != null) {
+    document.getElementById("hero-area").classList.toggle("hide");
+  }
+}
+

static/assets/js/navbar.js

@@ -15,7 +15,9 @@
         $('#navbar-toggler').removeClass('navbar-dark');
         $('#navbar-toggler').addClass('navbar-light');
 
-        $('#logo').attr("src","assets/images/logo.png");
+        // get the main logo from hidden img tag
+        let mainLogo = document.getElementById("main-logo").getAttribute("src");
+        $('#logo').attr("src", mainLogo);
       } else {
         $('#top-navbar').removeClass('final-navbar shadow');
         $('#top-navbar').addClass('initial-navbar');
@@ -23,7 +25,9 @@
         $('#navbar-toggler').removeClass('navbar-light');
         $('#navbar-toggler').addClass('navbar-dark');
 
-        $('#logo').attr("src","assets/images/logo-inverted.png");
+        // get the inverted logo from hidden img tag
+        let invertedLogo = document.getElementById("inverted-logo").getAttribute("src");
+        $('#logo').attr("src", invertedLogo);
       }
     });
   });

static/assets/js/single.js

@@ -36,5 +36,28 @@ var isMobile = false, isTablet = false, isLaptop = false;
       }
     }
 
+    // =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
+    // add "navbar" class to the "nav" element
+    let toc = document.getElementById("TableOfContents");
+    toc.classList.add("navbar");
+    // add "nav-pills" class to the "ul" elements
+    let elems = toc.getElementsByTagName("ul");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-pills");
+    }
+    // add "nav-item" class to the "li" elements
+    elems = toc.getElementsByTagName("li");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-item");
+      if (isMobile) {
+        elems[i].setAttribute("onclick", "toggleTOC()");
+      }
+    }
+    // add "nav-link" class to the "a" elements
+    elems = toc.getElementsByTagName("a");
+    for (let i = 0; i < elems.length; i++) {
+      elems[i].classList.add("nav-link");
+    }
+
   });
 })(jQuery);