Add education section
This commit is contained in:
Emruz Hossain
parent
7c87605d45
commit
beba457d1c
5 changed files with 289 additions and 0 deletions
|
|
@ -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 }}"/>
|
||||
|
|
|
|||
99
layouts/partials/sections/education.html
Normal file
99
layouts/partials/sections/education.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
{{ $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>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> out of <span>{{ .grade.outOf }}</span></h6>
|
||||
{{ end }}
|
||||
{{ if .publications }}
|
||||
<div class="publications">
|
||||
<h6>Publications</h6>
|
||||
<ul>
|
||||
{{ range .publications }}
|
||||
<li><a href="{{ .url }} ">{{ .title }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .takenCourses }}
|
||||
<div class="taken-courses">
|
||||
<h6>Taken Courses</h6>
|
||||
{{ if .takenCourses.showGrades }}
|
||||
<table>
|
||||
<thead>
|
||||
<th>Course Name</th>
|
||||
<th>Total Credit</th>
|
||||
<th>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 }}
|
||||
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
|
||||
onclick="showMoreCourses(this);">Show More</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .extracurricularActivities }}
|
||||
<div class="extracurricular-activities">
|
||||
<h6>Extracurricular Activities</h6>
|
||||
<ul>
|
||||
{{ range .extracurricularActivities }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,6 +83,14 @@ a:hover {
|
|||
color: #e5e9f2 !important;
|
||||
}
|
||||
|
||||
.btn-link{
|
||||
color: #248aaa;
|
||||
}
|
||||
|
||||
.btn-link:hover{
|
||||
color: #207089;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #f9fafc !important;
|
||||
}
|
||||
|
|
|
|||
157
static/assets/css/sections/education.css
Normal file
157
static/assets/css/sections/education.css
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
.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-section .taken-courses .show-more-btn {
|
||||
padding-top: 0;
|
||||
margin-left: 0.2rem;
|
||||
} */
|
||||
|
||||
/* ============= 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) {}
|
||||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue