Add education section (#168)

* Add education section

* Add education-alt section

* Add translations

exampleSite/data/bn/sections/education.yaml

@@ -0,0 +1,89 @@
+# section information
+section:
+  name: শিক্ষা জীবন
+  id: education
+  template: sections/education.html
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+degrees:
+- name: কোয়ান্টাম ক্রিপ্টোগ্রাফিতে পি. এইচ. ডি.
+  icon: fa-microscope
+  timeframe: ২০১৬-২০২০
+  institution:
+    name: এ. বি. সি. প্রযুক্তি বিশ্ববিদ্যালয়
+    url: "#"
+  grade:
+    scale: সিজিপিএ
+    achieved: ৪
+    outOf: ৩.৬
+  publications:
+  - title: অর্থহীন লেখা যার মাঝে আছে অনেক কিছু।
+    url: "#"
+  - title: হ্যাঁ, এই লেখার মাঝেই আছে অনেক কিছু।
+    url: "#"
+  - title: যদি তুমি মনে করো, এটা তোমার কাজে লাগবে, তাহলে তা লাগবে কাজে।
+    url: "#"
+- name: কম্পিউটার সায়েন্স এন্ড ইঞ্জিনিয়ারিং এ বি.এসসি
+  icon: fa-graduation-cap
+  timeframe: ২০১২-২০১৬
+  institution:
+    name: এক্স ওয়াই জেড বিশ্ববিদ্যালয়
+    url: "#"
+  grade:
+    scale: সিজিপিএ
+    achieved: ৪
+    outOf: ৩.৫
+  takenCourses:
+    # if true, the courses will be rendered as a table otherwise it will render as a list and the grades will be hidden.
+    showGrades: true
+    courses:
+    - name: ডেটা স্ট্রাকচারস এবং অ্যালগরিদম
+      achieved: ৩.৭৫
+      outOf: ৪
+    - name: নেটওয়ার্ক সিকিউরিটি
+      achieved: ৩.৮০
+      outOf: ৪
+    - name: অপারেটিং সিস্টেম
+      achieved: ৩.৫
+      outOf: ৪
+    - name: কৃত্রিম বুদ্ধিমত্তা
+      achieved: ৩.৭৫
+      outOf: ৪
+  publications:
+  - title: নিজের ভাষায় লেখা দেখতে অভ্যস্ত হও।
+    url: "#"
+  - title: মনে রাখবে লেখা অর্থহীন হয়, যখন তুমি তাকে অর্থহীন মনে করো; আর লেখা অর্থবোধকতা তৈরি করে, যখন তুমি তাতে অর্থ ঢালো।
+    url: "#"
+  extracurricularActivities:
+  - কোনো লেখাই তোমার কাছে অর্থবোধকতা তৈরি করতে পারে, যদি তুমি সেখানে অর্থদ্যোতনা দেখতে পাও।
+  - যে কথাকে কাজে লাগাতে চাও, তাকে কাজে লাগানোর কথা চিন্তা করার আগে ভাবো, তুমি কি সেই কথার জাদুতে আচ্ছন্ন হয়ে গেছ কিনা।
+  - তুমি যদি নিশ্চিত হও যে, তুমি কোনো মোহাচ্ছাদিত আবহে আবিষ্ট হয়ে অন্যের শেখানো বুলি আত্মস্থ করছো না, তাহলে তুমি নির্ভয়ে, নিশ্চিন্তে অগ্রসর হও।
+  - তুমি সেই কথাকে জানো, বুঝো, আত্মস্থ করো; মনে রাখবে, যা অনুসরণ করতে চলেছো, তা আগে অনুধাবন করা জরুরি; এখানে কিংকর্তব্যবিমূঢ় হবার কোনো সুযোগ নেই।
+- name: উচ্চমাধ্যমিক সার্টিফিকেট
+  icon: fa-university
+  timeframe: ২০১০-২০১২
+  institution:
+    name: এমএসটি বিজ্ঞান কলেজ
+    url: "#"
+  grade:
+    scale: জিপিএ
+    achieved: ৫
+    outOf: ৫
+  extracurricularActivities:
+  - কোনো কথা শোনামাত্রই কি তুমি তা বিশ্বাস করবে?
+  - হয়তো বলবে, করবে, হয়তো বলবে “আমি করবো না।”
+  - তাই কোন কথাটি কাজে লাগবে, তা নির্ধারণ করবে তুমি— হ্যাঁ, তুমি।
+  - নিজেই ঠিক করো, নিজের ভাষাটা কি অর্থহীন, নাকি কিছু সত্যিই বলছে!
+- name: মাধ্যমিক সার্টিফিকেট
+  icon: fa-school
+  timeframe: ২০০৫-২০১০
+  institution:
+    name: জে কে স্কুল অফ সায়েন্স
+  grade:
+    scale: জিপিএ
+    achieved: ৫
+    outOf: ৪.৫

exampleSite/data/en/sections/education.yaml

@@ -0,0 +1,89 @@
+# section information
+section:
+  name: Education
+  id: education
+  template: sections/education.html # Use "sections/education-alt.html for alternate template.
+  enable: true
+  weight: 4
+  showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true
+
+degrees:
+- name: Ph.D in Quantum Cryptography
+  icon: fa-microscope
+  timeframe: 2016-2020
+  institution:
+    name: ABC University of Technology
+    url: "#"
+  grade: #(optional)
+    scale: CGPA
+    achieved: 3.6
+    outOf: 4
+  publications: #(optional)
+  - title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    url: "#"
+  - title: Fusce eu augue ut odio porttitor pulvinar.
+    url: "#"
+  - title: Nullam vitae orci tincidunt purus viverra pulvinar.
+    url: "#"
+- name: B.Sc. in Computer Science & Engineering
+  icon: fa-graduation-cap
+  timeframe: 2012-2016
+  institution:
+    name: University of XYZ
+    url: "#"
+  grade: #(optional)
+    scale: CGPA
+    achieved: 3.5
+    outOf: 4
+  takenCourses: #(optional)
+    # if true, the courses will be rendered as a table otherwise it will render as a list and the grades will be hidden.
+    showGrades: true
+    courses:
+    - name: Data Structures and Algorithm
+      achieved: 3.75
+      outOf: 4
+    - name: Network Security
+      achieved: 3.80
+      outOf: 4
+    - name: Operating System
+      achieved: 3.5
+      outOf: 4
+    - name: Artificial Intelligent
+      achieved: 3.75
+      outOf: 4
+  publications: #(optional)
+  - title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    url: "#"
+  - title: Fusce eu augue ut odio porttitor pulvinar.
+    url: "#"
+  extracurricularActivities: #(optional)
+  - In vitae facilisis est, eget porta sem.
+  - Vestibulum consectetur lorem justo, at laoreet lorem feugiat et.
+  - Duis sed massa feugiat, ornare justo et, aliquam est.
+  - Pellentesque ut fringilla magna.
+- name: Higher Secondary School Certificate
+  icon: fa-university
+  timeframe: 2010-2012
+  institution:
+    name: MST College of Science
+    url: "#"
+  grade: #(optional)
+    scale: GPA
+    achieved: 5
+    outOf: 5
+  extracurricularActivities: #(optional)
+  - In vitae facilisis est, eget porta sem.
+  - Vestibulum consectetur lorem justo, at laoreet lorem feugiat et.
+  - Duis sed massa feugiat, ornare justo et, aliquam est.
+  - Pellentesque ut fringilla magna.
+- name: Secondary School Certificate
+  icon: fa-school
+  timeframe: 2005-2010
+  institution:
+    name: JK School of Science
+  grade: #(optional)
+    scale: GPA
+    achieved: 4.5
+    outOf: 5

i18n/bn.toml

@@ -45,4 +45,28 @@ other = "পূর্ববর্তী"
 other = "পরবর্তী"
 
 [improve_this_page]
-other = "এই পৃষ্ঠাটি উন্নত করুন"
+other = "এই পৃষ্ঠাটি উন্নত করুন"
+
+[out_of]
+other = "এর মধ্যে"
+
+[publications]
+other = "প্রকাশনা সমূহ"
+
+[taken_courses]
+other = "গৃহীত কোর্সসমূহ"
+
+[course_name]
+other = "কোর্সের নাম"
+
+[total_credit]
+other = "মোট ক্রেডিট"
+
+[obtained_credit]
+other = "অর্জিত ক্রেডিট"
+
+[extracurricular_activities]
+other = "পাঠক্রম বহির্ভূত কার্যক্রম"
+
+[see_more]
+other = "আরো দেখুন"

i18n/cn.toml

@@ -48,4 +48,28 @@ other = "上一篇"
 other = "下一篇"
 
 [improve_this_page]
-other = "改善此页面"
+other = "改善此页面"
+
+[out_of]
+other = "之"
+
+[publications]
+other = "刊物"
+
+[taken_courses]
+other = "选修课程"
+
+[course_name]
+other = "课程名"
+
+[total_credit]
+other = "总信用"
+
+[obtained_credit]
+other = "获得信贷"
+
+[extracurricular_activities]
+other = "课外活动"
+
+[see_more]
+other = "查看更多"

i18n/de.toml

@@ -48,4 +48,28 @@ other = "Vorherige"
 other = "Nächste"
 
 [improve_this_page]
-other = "Diese Seite verbessern"
+other = "Diese Seite verbessern"
+
+[out_of]
+other = "van de"
+
+[publications]
+other = "Publicaties"
+
+[taken_courses]
+other = "Cursussen gevolgd"
+
+[course_name]
+other = "Cursus naam"
+
+[total_credit]
+other = "Totaal krediet"
+
+[obtained_credit]
+other = "Krediet verkregen"
+
+[extracurricular_activities]
+other = "Buitenschoolse activiteiten"
+
+[see_more]
+other = "Bekijk meer"

i18n/en.toml

@@ -48,4 +48,28 @@ other = "Prev"
 other = "Next"
 
 [improve_this_page]
-other = "Improve this page"
+other = "Improve this page"
+
+[out_of]
+other = "out of"
+
+[publications]
+other = "Publications"
+
+[taken_courses]
+other = "Taken Courses"
+
+[course_name]
+other = "Course Name"
+
+[total_credit]
+other = "Total Credit"
+
+[obtained_credit]
+other = "Obtained Credit"
+
+[extracurricular_activities]
+other = "Extracurricular Activities"
+
+[see_more]
+other = "See More"

i18n/es.toml

@@ -49,3 +49,27 @@ other = "Siguiente"
 
 [improve_this_page]
 other = "Mejorar esta página"
+
+[out_of]
+other = "de"
+
+[publications]
+other = "Publicaciones"
+
+[taken_courses]
+other = "Cursos tomados"
+
+[course_name]
+other = "Nombre del curso"
+
+[total_credit]
+other = "Crédito total"
+
+[obtained_credit]
+other = "Crédito obtenido"
+
+[extracurricular_activities]
+other = "Actividades extracurriculares"
+
+[see_more]
+other = "Ver más"

i18n/fr.toml

@@ -48,4 +48,28 @@ other = "Précédent"
 other = "Suivant"
 
 [improve_this_page]
-other = "Améliorez cette page"
+other = "Améliorez cette page"
+
+[out_of]
+other = "sur"
+
+[publications]
+other = "Publications"
+
+[taken_courses]
+other = "Taken Courses"
+
+[course_name]
+other = "Cours suivis"
+
+[total_credit]
+other = "Crédit total"
+
+[obtained_credit]
+other = "Crédit obtenu"
+
+[extracurricular_activities]
+other = "Activités extra-scolaires"
+
+[see_more]
+other = "En savoir plus"

i18n/id.toml

@@ -48,4 +48,28 @@ other = "Sebelumnya"
 other = "Lanjut"
 
 [improve_this_page]
-other = "Perbaiki halaman ini"
+other = "Perbaiki halaman ini"
+
+[out_of]
+other = "dari"
+
+[publications]
+other = "Publikasi"
+
+[taken_courses]
+other = "Kursus yang Diambil"
+
+[course_name]
+other = "Nama kursus"
+
+[total_credit]
+other = "Total Kredit"
+
+[obtained_credit]
+other = "Memperoleh Kredit"
+
+[extracurricular_activities]
+other = "Kegiatan ekstrakulikuler"
+
+[see_more]
+other = "Lihat Selengkapnya"

i18n/it.toml

@@ -48,4 +48,28 @@ other = "Precedente"
 other = "Successivo"
 
 [improve_this_page]
-other = "Migliora questa pagina"
+other = "Migliora questa pagina"
+
+[out_of]
+other = "su"
+
+[publications]
+other = "Pubblicazioni"
+
+[taken_courses]
+other = "Corsi presi"
+
+[course_name]
+other = "Nome del corso"
+
+[total_credit]
+other = "Credito totale"
+
+[obtained_credit]
+other = "Credito ottenuto"
+
+[extracurricular_activities]
+other = "Attività extracurriculari"
+
+[see_more]
+other = "Vedi altro"

i18n/jp.toml

@@ -36,7 +36,7 @@ other = "ご入力いただいたメールアドレスが他人に開示され
 other = "登録"
 
 [hugoAttributionText]
-other = "Powered by"
+other = "搭載"
 
 [prev]
 other = "前"
@@ -46,3 +46,27 @@ other = "次"
 
 [improve_this_page]
 other = "編集リクエストを送る"
+
+[out_of]
+other = "のうち"
+
+[publications]
+other = "出版物"
+
+[taken_courses]
+other = "受講したコース"
+
+[course_name]
+other = "コース名"
+
+[total_credit]
+other = "合計クレジット"
+
+[obtained_credit]
+other = "取得したクレジット"
+
+[extracurricular_activities]
+other = "課外活動"
+
+[see_more]
+other = "続きを見る"

i18n/ru.toml

@@ -48,4 +48,28 @@ other = "Предыдущий"
 other = "Следующий"
 
 [improve_this_page]
-other = "Улучшить эту страницу"
+other = "Улучшить эту страницу"
+
+[out_of]
+other = "из"
+
+[publications]
+other = "Публикации"
+
+[taken_courses]
+other = "Пройденные курсы"
+
+[course_name]
+other = "Название курса"
+
+[total_credit]
+other = "Общий кредит"
+
+[obtained_credit]
+other = "Полученный кредит"
+
+[extracurricular_activities]
+other = "Внеклассные занятия"
+
+[see_more]
+other = "Узнать больше"

i18n/vn.toml

@@ -48,4 +48,28 @@ other = "Trước"
 other = "Tiếp theo"
 
 [improve_this_page]
-other = "Cải thiện trang này"
+other = "Cải thiện trang này"
+
+[out_of]
+other = "trên"
+
+[publications]
+other = "Ấn phẩm"
+
+[taken_courses]
+other = "Đã thực hiện các khóa học"
+
+[course_name]
+other = "Tên khóa học"
+
+[total_credit]
+other = "Tổng số tín dụng"
+
+[obtained_credit]
+other = "Tín dụng thu được"
+
+[extracurricular_activities]
+other = "Các hoạt động ngoại khóa"
+
+[see_more]
+other = "Xem thêm"

layouts/index.html

@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="{{ "/assets/css/sections/about.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/assets/css/sections/skills.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/assets/css/sections/experiences.css" | relURL }}"/>
+    <link rel="stylesheet" href="{{ "/assets/css/sections/education.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/assets/css/sections/projects.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/assets/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/assets/css/sections/achievements.css" | relURL }}"/>

layouts/partials/sections/education-alt.html

@@ -0,0 +1,110 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+{{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 education-section education-alt" id="{{ $sectionID }}">
+    {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+    {{ end }}
+
+    <div class="container">
+        <table class="education-info-table">
+            <tbody>
+                {{ range .degrees}}
+                <tr>
+                    <td class="icon">
+                        <div class="hline"></div>
+                        <div class="icon-holder">
+                            <i class="fas {{ .icon }}"></i>
+                        </div>
+                    </td>
+                    <td class="line">
+                        <div></div>
+                    </td>
+                    <td class="details">
+                        <div class="degree-info card">
+                            <div class="row">
+                                <div class="col-lg-10 col-md-8">
+                                    {{ if .institution.url }}
+                                        <h5><a href="{{ .institution.url }}">{{ .institution.name }}</a></h5>
+                                    {{ else }}
+                                        <h5>{{ .institution.name }}</h5>
+                                    {{ end }}
+                                </div>
+                                <div class="timeframe col-lg-2 col-md-4">{{ .timeframe }}</div>
+                            </div>
+                            <h6>{{ .name }}</h6>
+                            {{ if .grade }}
+                                <h6><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6>
+                            {{ end }}
+                            {{ if .publications }}
+                                <div class="publications">
+                                    <h6 class="text-muted">{{i18n "publications"}}</h6>
+                                    <ul>
+                                        {{ range .publications }}
+                                            <li><a href="{{ .url }} ">{{ .title }}</a></li>
+                                        {{ end }}
+                                    </ul>
+                                </div>
+                            {{ end }}
+                            {{ if .takenCourses }}
+                            <div class="taken-courses">
+                                <h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
+                                {{ if .takenCourses.showGrades }}    
+                                <table>
+                                    <thead>
+                                        <th>{{ i18n "course_name" }}</th>
+                                        <th>{{ i18n "total_credit" }}</th>
+                                        <th>{{ i18n "obtained_credit" }}</th>
+                                    </thead>
+                                    <tbody>
+                                        {{ range $index,$course := .takenCourses.courses }}
+                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                            <td>{{ $course.name }}</td>
+                                            <td>{{ $course.outOf }}</td>
+                                            <td>{{ $course.achieved }}</td>
+                                        </tr>
+                                        {{ end }}
+                                    </tbody>
+                                </table>
+                                {{ else }}
+                                    <ul>
+                                        {{ range $index,$course := .takenCourses.courses }}
+                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        {{ end }}
+                                    </ul>
+                                {{ end }}
+                                {{ if gt (len .takenCourses.courses) 2 }}
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    onclick="showMoreCourses(this);">{{ i18n "see_more"}}</button>
+                                {{ end }}
+                            </div>
+                            {{ end }}
+                            {{ if .extracurricularActivities }}
+                            <div class="extracurricular-activities">
+                                <h6 class="text-muted">{{ i18n "extracurricular_activities" }}</h6>
+                                <ul>
+                                {{ range .extracurricularActivities }}
+                                    <li>{{ . }}</li>
+                                {{ end }}
+                                </ul>
+                            </div>
+                            {{ end }}
+                        </div>
+                    </td>
+                    <td class="line">
+                        <div></div>
+                    </td>
+                    <td class="icon">
+                        <div class="hline"></div>
+                        <div class="icon-holder">
+                            <i class="fas {{ .icon }}"></i>
+                        </div>
+                    </td>
+                </tr>
+                {{ end }}
+            </tbody>
+        </table>
+    </div>
+</div>

layouts/partials/sections/education.html

@@ -0,0 +1,101 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+{{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 education-section" id="{{ $sectionID }}">
+    {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+    {{ end }}
+
+    <div class="container">
+        <table class="education-info-table">
+            <tbody>
+                {{ range .degrees}}
+                <tr>
+                    <td class="icon">
+                        <div class="hline"></div>
+                        <div class="icon-holder">
+                            <i class="fas {{ .icon }}"></i>
+                        </div>
+                    </td>
+                    <td class="line">
+                        <div></div>
+                    </td>
+                    <td class="details">
+                        <div class="degree-info card">
+                            <div class="row">
+                                <div class="col-lg-10 col-md-8">
+                                    {{ if .institution.url }}
+                                        <h5><a href="{{ .institution.url }}">{{ .institution.name }}</a></h5>
+                                    {{ else }}
+                                        <h5>{{ .institution.name }}</h5>
+                                    {{ end }}
+                                </div>
+                                <div class="timeframe col-lg-2 col-md-4">{{ .timeframe }}</div>
+                            </div>
+                            <h6>{{ .name }}</h6>
+                            {{ if .grade }}
+                                <h6><span class="text-muted">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6>
+                            {{ end }}
+                            {{ if .publications }}
+                                <div class="publications">
+                                    <h6 class="text-muted">{{ i18n "publications"}}</h6>
+                                    <ul>
+                                        {{ range .publications }}
+                                            <li><a href="{{ .url }} ">{{ .title }}</a></li>
+                                        {{ end }}
+                                    </ul>
+                                </div>
+                            {{ end }}
+                            {{ if .takenCourses }}
+                            <div class="taken-courses">
+                                <h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
+                                {{ if .takenCourses.showGrades }}    
+                                <table>
+                                    <thead>
+                                        <th>{{ i18n "course_name"}}</th>
+                                        <th>{{ i18n "total_credit"}}</th>
+                                        <th>{{ i18n "obtained_credit"}}</th>
+                                    </thead>
+                                    <tbody>
+                                        {{ range $index,$course := .takenCourses.courses }}
+                                        <tr class="course {{ if gt $index 1 }}hidden-course{{ end}}">
+                                            <td>{{ $course.name }}</td>
+                                            <td>{{ $course.outOf }}</td>
+                                            <td>{{ $course.achieved }}</td>
+                                        </tr>
+                                        {{ end }}
+                                    </tbody>
+                                </table>
+                                {{ else }}
+                                    <ul>
+                                        {{ range $index,$course := .takenCourses.courses }}
+                                        <li class="course {{ if gt $index 1 }}hidden-course{{ end}}">{{ $course.name }}</li>
+                                        {{ end }}
+                                    </ul>
+                                {{ end }}
+                                {{ if gt (len .takenCourses.courses ) 2 }}
+                                    <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
+                                    onclick="showMoreCourses(this);">{{ i18n "see_more"}}</button>
+                                {{ end }}
+                            </div>
+                            {{ end }}
+                            {{ if .extracurricularActivities }}
+                            <div class="extracurricular-activities">
+                                <h6 class="text-muted">{{ i18n "extracurricular_activities"}}</h6>
+                                <ul>
+                                {{ range .extracurricularActivities }}
+                                    <li>{{ . }}</li>
+                                {{ end }}
+                                </ul>
+                            </div>
+                            {{ end }}
+                        </div>
+                    </td>
+                </tr>
+                {{ end }}
+            </tbody>
+        </table>
+    </div>
+</div>

static/assets/css/layouts/main.css

@@ -83,6 +83,14 @@ a:hover {
   color: #e5e9f2 !important;
 }
 
+.btn-link{
+  color: #248aaa;
+}
+
+.btn-link:hover{
+  color: #207089;
+}
+
 .bg-white {
   background-color: #f9fafc !important;
 }

static/assets/css/sections/education.css

@@ -0,0 +1,158 @@
+.education-section .education-info-table {
+    width: 100%;
+}
+
+.education-section .education-info-table tr {
+    padding: 0.1rem;
+}
+
+.education-section .timeframe {
+    color: #8392A5;
+    text-align: right;
+}
+.education-section .icon {
+    width: 2rem;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+}
+
+.education-section .icon .hline {
+    position: absolute;
+    left: 1rem;
+    top: 0;
+    background-color: #248aaa;
+    height: 100%;
+    width: 2px;
+}
+
+.education-section .education-info-table tr:first-child .hline {
+    height: 60%;
+    top: auto;
+}
+
+.education-section .education-info-table tr:last-child .hline {
+    height: 50%;
+}
+
+.education-section .icon-holder {
+    background-color: #248aaa;
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+    padding: 0.2rem;
+    text-align: center;
+    color: #e5e9f2;
+    position: relative;
+}
+
+.education-section .line {
+    width: 5%;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.education-section .line div {
+    height: 2px;
+    /* width: 100%; */
+    margin-right: -1px;
+    background-color: #248aaa;
+}
+
+.education-section .degree-info {
+    padding: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-left: 2px solid #248aaa;
+    border-top: 1px solid #C0CCDA;
+    border-bottom: 1px solid #C0CCDA;
+    border-right: 1px solid #C0CCDA;
+    border-radius: 5px;
+}
+
+.education-section .degree-info h5{
+    margin-bottom: 0.3rem;
+}
+
+.education-section .taken-courses table {
+    margin-left: 1rem;
+    width: 100%;
+    transition: all 0.3s ease-out;
+}
+
+.education-section .taken-courses .hidden-course {
+    display: none;
+    transition: all 1s ease-out;
+}
+
+.education-section .taken-courses ul {
+    margin-bottom: 0;
+}
+
+/*============ Education Alter Template =============*/
+.education-alt .degree-info{
+    border-right: 2px solid #248aaa;
+}
+
+
+/* ============= 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) {
+    .education-section .container {
+        padding-left: 0;
+    }
+}
+
+/*  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) {
+    .education-section {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    .education-section .container{
+        padding-right: 0;
+    }
+    
+    .education-section .icon {
+        display: none;
+    }
+    .education-section .line{
+        display: none;
+    }
+    .education-section .timeframe{
+        text-align: left;
+    }
+}
+
+/* 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/main.js

@@ -138,3 +138,27 @@ function toggleTOC() {
   }
 }
 
+// Show more rows in the taken courses table
+function showMoreCourses(elem) {
+
+  // find the courses
+  let courses = elem.parentNode.getElementsByClassName("course");
+  if (courses == null) {
+    return
+  }
+
+  // toggle hidden-course class from the third elements
+  for (var i = 0; i < courses.length; i++) {
+    if (i > 1 && courses[i].classList !== null) {
+      courses[i].classList.toggle("hidden-course");
+    }
+  }
+
+  // toggle the button text
+  let btnText = elem.innerText;
+  if (btnText == "Show More") {
+    elem.innerText = "Show Less";
+  } else {
+    elem.innerText = "Show More";
+  }
+}