feat(widget): add Accomplishments widget

See #792
See #773

exampleSite/content/home/course.md

@@ -0,0 +1,46 @@
++++
+# Accomplishments widget.
+widget = "accomplishments"  # Do not modify this line!
+active = true  # Activate this widget? true/false
+
+title = "Accomplishments"
+subtitle = ""
+
+# Order that this section will appear in.
+weight = 15
+
+# Date format
+#   Refer to https://sourcethemes.com/academic/docs/customization/#date-format
+date_format = "Jan 2006"
+
+# Accomplishments.
+#   Add/remove as many `[[item]]` blocks below as you like.
+#   `title`, `organization` and `date_start` are the required parameters.
+#   Leave other parameters empty if not required.
+#   Begin/end multi-line descriptions with 3 quotes `"""`.
+
+[[item]]
+  title = "Neural Networks and Deep Learning"
+  organization = "Coursera"
+  certificate_url = "https://www.coursera.org"
+  date_start = "2018-10-01"
+  date_end = ""
+  description = ""
+
+[[item]]
+  title = "Blockchain Fundamentals"
+  organization = "edX"
+  certificate_url = "https://www.edx.org"
+  date_start = "2018-03-01"
+  date_end = ""
+  description = ""
+  
+[[item]]
+  title = "Intro to Python"
+  organization = "DataCamp"
+  certificate_url = "https://www.datacamp.com"
+  date_start = "2017-07-01"
+  date_end = "2017-12-21"
+  description = ""
+
++++

i18n/en.yaml

@@ -74,6 +74,11 @@
 
 - id: education
   translation: Education
+  
+# Accomplishments widget
+
+- id: see_certificate
+  translation: See certificate
 
 # Experience widget
 

layouts/partials/css/academic.css

@@ -1214,6 +1214,30 @@ article .article-metadata {
   z-index: 3;
 }
 
+/*************************************************
+ *  Accomplishments
+ **************************************************/
+ 
+.course {
+  margin-bottom: -0.5rem;
+}
+
+.course h6 {
+  font-size: 0.80rem;
+  font-weight: 700;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.course h6 a {
+  border-bottom: solid 1px transparent;
+}
+
+.course h6 a:hover {
+  border-bottom: solid 1px;
+  text-decoration: none;
+}
+
 /*************************************************
  *  Card component
  **************************************************/

layouts/partials/widgets/accomplishments.html

@@ -0,0 +1,47 @@
+{{ $ := .root }}
+{{ $page := .page }}
+
+<!-- Accomplishments widget -->
+<div class="row">
+  <div class="col-12 col-lg-4 section-heading">
+    <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
+    {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
+  </div>
+  <div class="col-12 col-lg-8">
+    {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
+
+    {{ if $page.Params.item }}
+    {{ range $idx, $key := sort $page.Params.item ".date_start" "desc" }}
+    <div class="row experience">
+      <!-- Content -->
+      <div class="col py-2">
+	    <div class="card course">
+          <div class="card-body">
+            <div class="float-right text-muted exp-meta">
+              <div class="text-right">
+                {{ (time .date_start).Format ($page.Params.date_format | default "Jan 2006") }}
+                {{ if .date_end}}
+                  – {{ (time .date_end).Format ($page.Params.date_format | default "Jan 2006") }}
+                {{end}}
+              </div>
+              <div class="text-right">
+				{{ if .certificate_url }}
+				<h6 class="card-title exp-company text-muted my-0">
+					<a href="{{.certificate_url}}" target="_blank" rel="noopener">{{ i18n "see_certificate" | default "See certificate" }}</a>
+				</h6>
+				{{ end }}
+			  </div>
+            </div>
+            <h4 class="card-title exp-title text-muted mt-0 mb-1">{{.title | markdownify | emojify}}</h4>
+            <h4 class="card-title exp-company text-muted my-0">
+              {{- with .organization_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}{{.organization | markdownify | emojify}}{{with .organization_url}}</a>{{end -}}
+            </h4>
+            {{with .description}}<div class="card-text">{{. | markdownify | emojify}}</div>{{end}}
+          </div>
+		</div>
+      </div>
+    </div>
+    {{end}}
+    {{end}}
+  </div>
+</div>