Added experience in home
This commit is contained in:
gurusabarish
@@ -117,6 +117,70 @@ params:
|
||||
- "Node"
|
||||
- "Express"
|
||||
|
||||
# Experience
|
||||
experience:
|
||||
enable: true
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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."
|
||||
|
||||
# Achievements
|
||||
achievements:
|
||||
enable: true
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
{{ define "main" }}
|
||||
{{- partial "sections/hero/index.html" . -}}
|
||||
{{- partial "sections/about.html" . -}}
|
||||
{{- partial "sections/experience.html" . -}}
|
||||
{{- partial "sections/projects.html" . -}}
|
||||
{{- partial "sections/achievements.html" . -}}
|
||||
{{- partial "sections/contact.html" . -}}
|
||||
|
||||
@@ -10,5 +10,10 @@
|
||||
}
|
||||
})
|
||||
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
</script>
|
||||
{{- end }}
|
||||
@@ -0,0 +1,167 @@
|
||||
<section id="experience" class="py-5">
|
||||
<div class="container">
|
||||
<h3 class="text-center">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" 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"
|
||||
type="button"
|
||||
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"
|
||||
type="button"
|
||||
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
|
||||
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
|
||||
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 class="tab-pane fade show active bg-transparent" id="pills-home" role="tabpanel"
|
||||
aria-labelledby="pills-home-tab">
|
||||
<h4>Software developer</h4>
|
||||
<small>Feb 2021 - present</small>
|
||||
<p>
|
||||
Home is some placeholder content the Contact tab's associated content. Clicking another
|
||||
tab
|
||||
will
|
||||
toggle the visibility
|
||||
of this one for the next.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Lead backend developer for a product.</li>
|
||||
<li>Created a frontend design for a product.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade bg-transparent" id="pills-profile" role="tabpanel"
|
||||
aria-labelledby="pills-profile-tab">
|
||||
Profile is some placeholder content the Contact tab's associated content. Clicking another
|
||||
tab
|
||||
will
|
||||
toggle the visibility
|
||||
of this one for the next. The tab JavaScript swaps classes to control the content visibility
|
||||
and
|
||||
styling. You can use it
|
||||
with tabs, pills, and any other .nav-powered navigation.
|
||||
</div>
|
||||
<div class="tab-pane fade bg-transparent" id="pills-contact" role="tabpanel"
|
||||
aria-labelledby="pills-contact-tab">
|
||||
Contact is some placeholder content the Contact tab's associated content. Clicking another
|
||||
tab
|
||||
will
|
||||
toggle the visibility
|
||||
of this one for the next. The tab JavaScript swaps classes to control the content visibility
|
||||
and
|
||||
styling. You can use it
|
||||
with tabs, pills, and any other .nav-powered navigation.
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,4 +1,4 @@
|
||||
{{ if .Site.Params.hero.enable | default true }}
|
||||
{{ if .Site.Params.hero.enable | default false }}
|
||||
<section id="hero" class="py-5">
|
||||
<div class="container px-3 px-sm-5 px-md-5 px-lg-5">
|
||||
<div id="primary-font">
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
font-size: 16px !important;
|
||||
opacity: 0.95;
|
||||
}
|
||||
.nav-link{
|
||||
header .nav-link{
|
||||
transition: none !important;
|
||||
}
|
||||
.navbar-brand {
|
||||
|
||||
@@ -1,3 +1,16 @@
|
||||
/* ToolTip */
|
||||
|
||||
.tooltip {
|
||||
line-height: 1rem;
|
||||
border-radius: .5rem !important;
|
||||
}
|
||||
.tooltip-inner {
|
||||
line-height: 1rem;
|
||||
}
|
||||
.tooltip .tooltip-arrow {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* hero */
|
||||
|
||||
#hero {
|
||||
@@ -112,6 +125,8 @@
|
||||
#about .image img {
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: box-shadow 0.3s;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#about .image img:hover {
|
||||
@@ -167,6 +182,126 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* experience */
|
||||
|
||||
#experience h3 {
|
||||
color: var(--text-secondary-color) !important;
|
||||
}
|
||||
|
||||
#experience * {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
#experience .tab-pane > * {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
#experience .tab-pane small {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#experience .tab-pane ul {
|
||||
padding-top: 1%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content > .tab-pane p {
|
||||
padding: 1% 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#experience .experience-container {
|
||||
background-color: var(--secondary-color) !important;
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
|
||||
}
|
||||
|
||||
#experience .nav-item .nav-link {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0%;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#experience .nav-item .nav-link.active {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#experience .nav-item .nav-link.active:hover {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
#experience .nav-item .nav-link:hover {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#experience a {
|
||||
opacity: 0.9;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
#experience a::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0px;
|
||||
height: 2px;
|
||||
bottom: 0.37em;
|
||||
background-color: var(--primary-color);
|
||||
transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#experience a:hover::after, #experience a:focus::after, #experience a:active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane ul {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane ul li {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane ul li::before {
|
||||
content: "▹";
|
||||
color: var(--primary-color);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane .featuredLink a::after {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
bottom: 0em;
|
||||
background-color: transparent;
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane .featuredLink a.btn {
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: .75rem;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover {
|
||||
color: var(--text-color) !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* achievements */
|
||||
|
||||
#achievements a {
|
||||
|
||||
Reference in New Issue
Block a user