FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply linkedin approach to experiences section

Browse source
This commit is contained in:
Pau Trepat Segura 2020-07-14 20:21:57 +02:00
parent e6736d4828
commit 6b3f9ec2b9
6 changed files with 134 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

34
layouts/partials/experiences.html
View file

@ -1,25 +1,15 @@
<div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}"> <div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
{{ if not (.section.hideTitle) }} {{ if not (.section.hideTitle) }}
<h2 class="text-center">{{ .section.name }}</h1> <h2 class="text-center">{{ .section.name }}</h1>
{{ end }} {{ end }}
<div class="container timeline text-justify"> <div class="container timeline text-justify">
{{ $totalExperiences:= len .experiences }} {{ range $experience:= .experiences }}
{{ range $index,$experience:= .experiences }} <div class="row d-flex experience">
{{ if eq (mod $index 2) 0 }} <div class="col-12">
<div class="row align-items-center d-flex"> {{ partial "experiences/experience-info.html" $experience }}
{{ partial "experiences/vertical-line.html" $index }} </div>
{{ partial "experiences/experience-info.html" $experience }} </div>
</div> {{ end }}
{{else}} </div>
<div class="row align-items-center justify-content-end d-flex"> </div>
{{ partial "experiences/experience-info.html" $experience }}
{{ partial "experiences/vertical-line.html" $index }}
</div>
{{ end }}
{{ if lt $index (sub $totalExperiences 1) }}
{{ partial "experiences/horizontal-line.html" $index }}
{{ end }}
{{ end }}
</div>
</div>

11
layouts/partials/experiences/horizontal-line.html
View file

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

31
layouts/partials/experiences/multiple-positions.html
View file

@ -1,30 +1,29 @@
<div class="col-10 col-lg-8"> <div class="company">
<div class="experience-entry-heading"> <div class="company-logo">
<!-- For multiple positions, give emphasis on the company name--> <img src="{{ .company.logo_path }} ">
</div>
<div class="company-info">
<h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5> <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}} {{ $oldestPosition := index (last 1 .positions) 0}}
{{ $mostRecentPosition := index (first 1 .positions) 0}} {{ $mostRecentPosition := index (first 1 .positions) 0}}
<p class="text-muted"> <span class="text-muted">
{{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }}, {{ $oldestPosition.start }} - {{ $mostRecentPosition.end }},
{{ .company.location }} {{ .company.location }}
</p> </span>
<!-- Add company overview -->
<p>{{ .company.overview | markdownify }}</p> <p>{{ .company.overview | markdownify }}</p>
</div> </div>
<!-- Add the positions information --> </div>
<div class="positions">
{{ range $index,$position:= .positions }} <div class="company-timeline">
{{ range $index,$position:= .positions }}
<div class="company-timeline-item position">
<h6 class="designation">{{ $position.designation }}</h6> <h6 class="designation">{{ $position.designation }}</h6>
<p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p> <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 responsabilities">
<ul class="justify-content-around">
{{ range $position.responsibilities }} {{ range $position.responsibilities }}
<li>{{ . | markdownify }}</li> <li>{{ . | markdownify }}</li>
{{ end }} {{ end }}
</ul> </ul>
<br>
{{ end }}
</div> </div>
{{ end }}
</div> </div>

30
layouts/partials/experiences/single-position.html
View file

@ -1,16 +1,24 @@
<div class="col-10 col-lg-8"> <div class="company">
<div class="experience-entry-heading"> <div class="company-logo">
<img src="{{ .company.logo_path }} ">
</div>
<div class="company-info">
<h5>{{ .designation }}</h5> <h5>{{ .designation }}</h5>
<h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6> <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
<p class="text-muted">{{ .start }} - {{ if .end }}{{ .end }}{{ else }}Present{{ end }}, <span class="text-muted">{{ .start }} - {{ .end }},
{{ .company.location }} {{ .company.location }}
</p> </span>
</div> </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> </div>
<div class="company-timeline">
<div class="company-timeline-item">
<p>{{ .company.overview | markdownify }}</p>
<ul class="justify-content-around">
{{ range .responsibilities }}
<li>{{ . | markdownify }}</li>
{{ end }}
</ul>
</div>
</div>

3
layouts/partials/experiences/vertical-line.html
View file

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

204
static/assets/css/experiences.css
View file

@ -19,93 +19,91 @@
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.positions > h6 { .experiences-section .designation{
font-weight: 600;
text-align: left;
}
.company{
display: flex;
align-items: center;
}
.company-logo {
height: 56px;
width: 56px;
}
.company-logo img {
border-radius: 15%;
width: 100%;
height: 100%;
}
.company-info {
margin-left: 24px;
width: 75%;
}
.company-timeline {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
}
.company-timeline > h6 {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.positions > .text-muted { .company-timeline > .text-muted {
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.experiences-section .designation{ .experience:not(:last-child) {
font-weight: 600; margin-bottom: 1rem;
border-bottom: 2px solid #e6e9ec;
} }
.circle { .responsabilities {
padding: 13px 20px; margin-bottom: 1rem;
border-radius: 50%;
background-color: #248aaa;
color: #f9fafc;
max-height: 50px;
margin-left: 2px;
z-index: 2;
} }
.vertical-line-left-adjustment > .circle { .company-timeline-item {
margin-right: 6px; position: relative;
padding-bottom: 20px;
margin-bottom: 8px;
padding-left: 80px;
} }
.timeline .vertical-line { .company-timeline-item.position::before {
align-self: stretch;
}
.timeline .vertical-line::after {
content: ""; content: "";
position: absolute; position: absolute;
border-left: 3px solid #248aaa; top: 8px;
z-index: 1; height: 8px;
height: 100%; width: 8px;
left: 50%; border-radius: 50%;
background-color: #7cb2c3;
left: 24px;
} }
.vertical-line-left-adjustment::after { .company-timeline-item.position::after {
left: calc(50% - 3px) !important; content: "";
position: absolute;
top: 24px;
height: calc(100% - 18px);
width: 2px;
background-color: #7cb2c3;
left: 27px;
} }
.timeline .horizontal-line div { .company-timeline-item:last-child::after {
padding: 0; content: none;
height: 40px;
} }
.timeline .horizontal-line hr {
border-top: 3px solid #248aaa;
margin: 0;
top: 17px;
position: relative;
}
.timeline .horizontal-line .timeline-side-div {
display: flex;
overflow: hidden;
}
.timeline .horizontal-line .corner {
border: 3px solid #248aaa;
width: 100%;
position: relative;
border-radius: 15px;
}
.top-left {
left: -50%;
top: -50%;
}
.top-right {
left: 50%;
top: -50%;
}
.bottom-left {
left: -50%;
top: calc(50% - 3px);
}
.bottom-right {
left: 50%;
top: calc(50% - 3px);
}
/* ============= Device specific fixes ======= */ /* ============= Device specific fixes ======= */
@ -134,71 +132,45 @@
/* Small devices (landscape phones, 576px and up) */ /* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.positions { .container.timeline {
font-size: 0.95em; padding-left: 0px;
margin-bottom: 0.5rem; padding-right: 10px;
} }
.circle { .company-timeline-item {
padding: 8px 15px; padding-left: 55px;
max-height: 40px; }
.company-logo {
height: 42px;
width: 42px;
}
.company-info {
margin-left: 16px;
}
.company-timeline-item.position::before {
left: 17px;
}
.company-timeline-item.position::after {
left: 20px;
} }
} }
/* iPhoneX, iPhone 6,7,8 */ /* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) { @media only screen and (max-width: 375px) {
.top-left {
left: -52%;
}
.top-right {
left: 52%;
}
.bottom-right {
left: 52%;
}
.bottom-left {
left: -52%;
}
} }
/* Galaxy S5, Moto G4 */ /* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) { @media only screen and (max-width: 360px) {
.top-left {
left: -56%;
}
.top-right {
left: 56%;
}
.bottom-right {
left: 56%;
}
.bottom-left {
left: -56%;
}
} }
/* iPhone 5 or before */ /* iPhone 5 or before */
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
.top-left {
left: -64%;
}
.top-right {
left: 64%;
}
.bottom-right { }
left: 64%;
}
.bottom-left {
left: -64%;
}
}