Add acomplishment section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

README.md

@@ -219,10 +219,10 @@ Here, are the current plan and progress of various components of this theme. The
   - [ ] Links
   - [ ] Gallery
 
-- [ ] **Accomplishment / Courses**
+- [x] **Accomplishment / Courses**
 
-  - [ ] Overview
-  - [ ] Certificate
+  - [x] Overview
+  - [x] Certificate
 
 - [x] **Achievements Gallery**
   - [x] Image

exampleSite/data/en/sections/accomplishments.yaml

@@ -0,0 +1,22 @@
+# section information
+section:
+  name: Accomplishments
+  id: accomplishments
+  enable: true
+  weight: 6
+  showOnNavbar: false
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+
+# your projects
+certificates:
+- name: Linux Foundation System Administrator
+  logo: /images/sections/projects/kubernetes.png
+  organization: Linux Foundation
+  timeline: "March 2018 - Present"
+ 
+  #url: ""  # link of the certificate.
+  overview: taught me how to manage linux systems can use markdown for images.
+ 
+

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

@@ -3,7 +3,7 @@ section:
   name: Recent Posts
   id: recent-posts
   enable: true
-  weight: 6
+  weight: 8
   showOnNavbar: true
   # Can optionally hide the title in sections
   # hideTitle: true

i18n/bn.toml

@@ -97,3 +97,9 @@ other = "বর্তমান"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "আরো"
+
+[view_certificate]
+other = "সার্টিফিকেট দেখুন"

i18n/cn.toml

@@ -100,3 +100,9 @@ other = "显示较少"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "更多的"
+
+[view_certificate]
+other = "查看证书"

i18n/de.toml

@@ -100,3 +100,9 @@ other = "Laat minder zien"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Meer"
+
+[view_certificate]
+other = "Bekijk certificaat"

i18n/en.toml

@@ -100,3 +100,9 @@ other = "Details"
 
 [err_404]
 other = "The page you are looking for is not there yet."
+
+[more]
+other = "More"
+
+[view_certificate]
+other = "View Certificate"

i18n/es.toml

@@ -100,3 +100,9 @@ other = "Muestra menos"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Más"
+
+[view_certificate]
+other = "Ver Certificado"

i18n/fr.toml

@@ -100,3 +100,9 @@ other = "Montrer moins"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Suite"
+
+[view_certificate]
+other = "Afficher le certificat"

i18n/hi.toml

@@ -100,3 +100,9 @@ other = "कम दिखाएं"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "अधिक"
+
+[view_certificate]
+other = "प्रमाणपत्र देखें"

i18n/id.toml

@@ -100,3 +100,9 @@ other = "Tampilkan Lebih Sedikit"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Lebih"
+
+[view_certificate]
+other = "Lihat Sertifikat"

i18n/it.toml

@@ -100,3 +100,9 @@ other = "Mostra meno"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Di più"
+
+[view_certificate]
+other = "Féach ar an Teastas"

i18n/jp.toml

@@ -97,3 +97,9 @@ other = "表示を減らす"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "もっと"
+
+[view_certificate]
+other = "ビューの証明書"

i18n/ko.toml

@@ -100,3 +100,9 @@ other = "간단히보기"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "더"
+
+[view_certificate]
+other = "인증서보기"

i18n/ru.toml

@@ -100,3 +100,9 @@ other = "Показывай меньше"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Более"
+
+[view_certificate]
+other = "Просмотреть сертификат"

i18n/vn.toml

@@ -100,3 +100,9 @@ other = "Hiện ít hơn"
 
 # [err_404]
 # other = "The page you are looking for is not there yet."
+
+[more]
+other = "Hơn"
+
+[view_certificate]
+other = "Xem chứng chỉ"

layouts/index.html

@@ -23,6 +23,7 @@
     <link rel="stylesheet" href="{{ "/css/sections/projects.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
+    <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
     
     <!-- Add Google Analytics if enabled in configuration -->
     {{ if site.GoogleAnalytics }}

layouts/partials/cards/accomplishments.html

@@ -0,0 +1,17 @@
+<div class="col-md-12 col-lg-6 p-2">
+  <div class="card mt-3">
+    <div class="card-header">
+      <h5 class="card-title mb-0">{{ .name }}</h5>
+      <div class="sub-title">
+        <span><a href="{{ .organization.url }}">{{ .organization.name }}</a></span>
+        <span class="ml-2">{{ .timeline }}</span>
+      </div>
+    </div>
+    <div class="card-body">
+      <p>{{ .courseOverview | markdownify }}</p>
+    </div>
+    <div class="card-footer">
+      <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL | default "#"}}" target="_blank" role="button">{{ i18n "view_certificate"}}</a>
+    </div>
+  </div>
+</div>

layouts/partials/helpers/get-section-id.html

@@ -0,0 +1,5 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+    {{ $sectionID = .section.id }}
+{{ end }}
+{{ return $sectionID }}

layouts/partials/navigators/navbar.html

@@ -55,17 +55,33 @@
           <a class="nav-link" href="#home">{{ i18n "home" }}</a>
         </li>
         {{ if $sections }}
+          {{ $sectionCount := 0}}
           {{ range sort $sections "section.weight" }}
             {{ if and (.section.enable) (.section.showOnNavbar)}}
-              {{ $sectionID := replace (lower .section.name) " " "-"  }}
-              {{ if .section.id }}
-                {{ $sectionID = .section.id }}
+              {{ $sectionCount  = add $sectionCount 1}}
+              {{ if lt $sectionCount 5 }}
+                <li class="nav-item">
+                  <a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                </li>
               {{ end }}
-              <li class="nav-item">
-                <a class="nav-link" href="#{{ $sectionID }}">{{ .section.name }}</a>
-              </li>
             {{ end }}
           {{- end }}
+          {{ if gt $sectionCount 5 }}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                {{ $sectionCount := 0 }}
+                {{ range sort $sections "section.weight" }}
+                  {{ if and (.section.enable) (.section.showOnNavbar) }}
+                    {{ $sectionCount  = add $sectionCount 1}}
+                    {{ if gt $sectionCount 5 }}
+                      <a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
+                    {{ end }}
+                  {{ end }}
+                {{- end }}
+              </div>
+            </li>
+          {{ end }}
         {{- end }}
         {{ $hasCustomMenus:= false }}
         {{ if $customMenus }}

layouts/partials/sections/accomplishments.html

@@ -0,0 +1,18 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 accomplishments-section" id="{{ $sectionID }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
+
+  <div class="container">
+    <div class="row" id="acomplishment-card-holder">
+      {{ range .accomplishments }}
+        {{ partial "cards/accomplishments" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>

static/css/sections/accomplishments.css

@@ -0,0 +1,97 @@
+.accomplishments-section .card {
+  background: #fff;
+  border-top: 2px solid #248aaa;
+}
+.accomplishments-section .card .card-header {
+  background: none;
+  border: none;
+}
+
+.accomplishments-section .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 0.4rem;
+}
+
+.accomplishments-section .card .sub-title :nth-child(2) {
+  float: none !important;
+}
+
+.accomplishments-section .card .card-body {
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.accomplishments-section .card .card-footer {
+  background: #fff;
+  border: none;
+  padding: 0;
+  padding-left: 0.7rem;
+  padding-bottom: 0.3rem;
+}
+
+/* ============= 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) {
+  .accomplishments-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .accomplishments-section .container {
+    max-width: 100%;
+  }
+  .accomplishments-section {
+    padding: 0;
+  }
+  .accomplishments-section {
+    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) {
+
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .accomplishments-section {
+    flex: 100%;
+    max-width: 100%;
+    margin-top: 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) {
+}