Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple jobs in one company #163

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 56 additions & 57 deletions exampleSite/config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -171,66 +171,65 @@ params:
experience:
enable: true
# title: "Custom Name"
items:
- job: "Senior Software Developer"
company: "Facebook"
companyUrl: "https://example.com"
date: "Jan 2022 - present"
featuredLink:
enable: true
name: "View the project"
url: "https://example.com"
content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."

- job: "Software Developer"
company: "Amazon"
companyUrl: "https://example.com"
date: "Sep 2020 - Dec 2021"
featuredLink:
enable: true
url: "https://example.com"
info:
enable: true
content: I worked as a software developer for more than one year in Amazon.
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.

- job: "Junior Software Developer"
company: "Apple"
companies:
- company: "Facebook"
companyUrl: "https://example.com"
date: "Jan 2020 - Aug 2020"
info:
enable: false
featuredLink:
enable: true
url: "https://example.com"
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.

- job: "UI/UX Designer"
company: "Netflix"
jobs:
- job: "Senior Software Developer"
date: "Jan 2022 - present"
featuredLink:
enable: true
name: "View the project"
url: "https://example.com"
content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."

- job: "Software Developer"
date: "Sep 2020 - Dec 2021"
featuredLink:
enable: true
url: "https://example.com"
info:
enable: true
content: I worked as a software developer for more than one year in Facebook.
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.
- company: "Apple"
companyUrl: "https://example.com"
date: "June 2017 - Nov 2019"
featuredLink:
enable: true
url: "https://example.com"
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.

- job: "Product Designer"
company: "Google"
jobs:
- job: "Junior Software Developer"
company: "Apple"
companyUrl: "https://example.com"
date: "Jan 2020 - Aug 2020"
info:
enable: false
featuredLink:
enable: true
url: "https://example.com"
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.
- company: "Netflix"
companyUrl: "https://example.com"
date: "Feb 2016 - Mar 2017"
content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
jobs:
- job: "UI/UX Designer"
date: "June 2017 - Nov 2019"
featuredLink:
enable: true
url: "https://example.com"
content: |
I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.

- Lead backend developer for a product.
- Created a frontend design for a product.

- job: "Product Designer"
date: "Feb 2016 - Mar 2017"
content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."

# Education
education:
Expand Down
206 changes: 76 additions & 130 deletions layouts/partials/sections/experience.html
Original file line number Diff line number Diff line change
@@ -1,130 +1,76 @@
{{ if .Site.Params.experience.enable | default false }}
<section id="experience" class="py-5">
<div class="container">
<h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
<div class="row justify-content-center">
<div class="col-sm-12 col-md-8 col-lg-8 py-5">
<div class="experience-container px-3 pt-2">
<ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
{{ range $index, $element := .Site.Params.experience.items }}
{{ if (eq $index 0) }}
<li class="nav-item px-1 bg-transparent" role="presentation">
<div
class="nav-link active bg-transparent"
aria-selected="true"
role="tab"
data-bs-toggle="pill"
id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
>
{{ .company }}
</div>
</li>
{{ else }}
<li class="nav-item px-1 bg-transparent" role="presentation">
<div
class="nav-link bg-transparent"
aria-selected="true"
role="tab"
data-bs-toggle="pill"
id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
>
{{ .company }}
</div>
</li>
{{ end }}
{{ end }}
</ul>
<div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
{{ range $index, $element := .Site.Params.experience.items }}
{{ if (eq $index 0) }}
<div
class="tab-pane fade show active bg-transparent"
role="tabpanel"
id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
>
<div>
<span class="h4">{{ .job }}</span>
<small>-</small>
<a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
<div class="pb-1">
<small>{{ .date }}</small>
{{ if .info.enable | default true }}
<span class="p-2">
<span
style="cursor: pointer;"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
>
<i class="fas fa-info-circle fa-xs"></i>
</span>
</span>
{{ end }}
</div>

{{ if .featuredLink.enable | default false }}
<div class="py-2 featuredLink">
<a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
{{ .featuredLink.name | default "Featured Link" }}
</a>
</div>
{{ end }}
</div>

{{ .content | markdownify}}
</div>
{{ else }}
<div
class="tab-pane fade bg-transparent"
role="tabpanel"
id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
>
<div>
<span class="h4">{{ .job }}</span>
<small>-</small>
<a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>

<div class="pb-1">
<small>{{ .date }}</small>
{{ if .info.enable | default true }}
<span class="p-2">
<span
style="cursor: pointer;"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-original-title={{ .info.content | default (print "Worked as a " .job " at " .company ) }}
>
<i class="fas fa-info-circle fa-xs"></i>
</span>
</span>
{{ end }}
</div>

{{ if .featuredLink.enable | default false }}
<div class="py-2 featuredLink">
<a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
{{ .featuredLink.name | default "Featured Link" }}
</a>
</div>
{{ end }}
</div>

<div class="pt-2">
{{ .content | markdownify}}
</div>
</div>
{{ end }}
{{ end }}
</div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ if .Site.Params.experience.enable | default false }}
<section id="experience" class="py-5">
<div class="container">
<h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
<div class="row justify-content-center">
<div class="col-sm-12 col-md-8 col-lg-8 py-5">
<div class="experience-container px-3 pt-2">
<ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
{{ range $indexCompany, $company := .Site.Params.experience.companies }}
<li class="nav-item px-1 bg-transparent" role="presentation">
<div
class="nav-link bg-transparent{{ if (eq $indexCompany 0) }} active{{end}}"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
class="nav-link bg-transparent{{ if (eq $indexCompany 0) }} active{{end}}"
class="nav-link bg-transparent{{ if (eq $indexCompany 0) }} active{{ end }}"

aria-selected="true"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
aria-selected="true"
aria-selected="{{ eq $indexCompany 0 }}"

role="tab"
data-bs-toggle="pill"
id='{{ replace .company " " "-" }}-tab'
data-bs-target='#pills-{{ replace .company " " "-" }}'
aria-controls='{{ replace .company " " "-" }}'
Comment on lines +16 to +18

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Define a variable to avoid code duplicity:

{{ $sanitizedCompany := replace .company " " "-" }}
Suggested change
id='{{ replace .company " " "-" }}-tab'
data-bs-target='#pills-{{ replace .company " " "-" }}'
aria-controls='{{ replace .company " " "-" }}'
id='{{ $sanitizedCompany }}-tab'
data-bs-target='#pills-{{ $sanitizedCompany }}'
aria-controls='{{ $sanitizedCompany }}'

Reference: https://gohugo.io/templates/introduction/#variables

>
{{ .company }}
</div>
</li>
{{ end }}
</ul>
<div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
{{ range $indexCompany, $company := .Site.Params.experience.companies }}
<div
class="tab-pane fade bg-transparent{{ if (eq $indexCompany 0) }} show active{{end}}"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
class="tab-pane fade bg-transparent{{ if (eq $indexCompany 0) }} show active{{end}}"
class="tab-pane fade bg-transparent{{ if (eq $indexCompany 0) }} show active{{ end }}"

role="tabpanel"
id='pills-{{ replace .company " " "-" }}'
aria-labelledby='pills-{{ replace .company " " "-" }}-tab'
Comment on lines +30 to +31

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
id='pills-{{ replace .company " " "-" }}'
aria-labelledby='pills-{{ replace .company " " "-" }}-tab'
id='pills-{{ $sanitizedCompany }}'
aria-labelledby='pills-{{ $sanitizedCompany }}-tab'

>
{{ range $indexJob, $job := .jobs }}
<div class="job-container{{if (eq $indexJob 0) }}-first{{end}}">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="job-container{{if (eq $indexJob 0) }}-first{{end}}">
<div class="job-container{{ if (eq $indexJob 0) }}-first{{ end }}">

<div>
<span class="h4">{{ .job }}</span>
<small>-</small>
<a href="{{ $company.companyUrl }}" target="_blank">{{ $company.company }}</a>
<div class="pb-1">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="pb-1">
<div class="pb-1">

<small>{{ .date }}</small>
{{ if .info.enable | default true }}
<span class="p-2">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span class="p-2">
<span class="p-2">
{{ $jobStatus := cond (eq $indexJob 0) "Working" "Worked" }}

<span
style="cursor: pointer;"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " $company.company ) }}
Copy link

@CarlosSanabriaM CarlosSanabriaM Nov 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be fixed in order to keep previous behaviour (show Working when job is current and Worked when not):

Suggested change
data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " $company.company ) }}
data-bs-original-title={{ .info.content | default (print $jobStatus " as a " .job " at " $company.company ) }}

>
<i class="fas fa-info-circle fa-xs"></i>
</span>
</span>
{{ end }}
</div>

{{ if .featuredLink.enable | default false }}
<div class="py-2 featuredLink">
<a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
{{ .featuredLink.name | default "Featured Link" }}
</a>
</div>
{{ end }}
</div>

{{ .content | markdownify}}
Comment on lines +63 to +64

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the code in the main branch has a bug related to this. The 1st tab (current job) doesn't include the top padding before the job content, whereas the rest include it. I think the intention was to always include this padding.

Suggested change
{{ .content | markdownify}}
<div class="pt-2">
{{ .content | markdownify}}
</div>
No padding

no-padding

Padding

padding

</div>
{{ end }}
</div>

{{ end }}
</div>
</div>
</div>
</div>
</div>
</section>
{{ end }}
6 changes: 5 additions & 1 deletion static/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,10 @@ header .navbar.animate {
opacity: 0.7;
}

#experience .job-container {
margin-top: 20px;
}

Comment on lines +387 to +390

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be done with bootstrap instead of with CSS.

Something similar to this:

<div class="pt-2">

To include top padding. What do you think?

/* Education */

#education .container > h3 {
Expand Down Expand Up @@ -576,4 +580,4 @@ header .navbar.animate {
border-radius: 0.5rem;
box-shadow: 0px 8px 56px rgb(15 80 100 / 5%);
padding: .5rem 1rem;
}
}