Added experience in home
This commit is contained in:
gurusabarish
@@ -117,6 +117,70 @@ params:
|
|||||||
- "Node"
|
- "Node"
|
||||||
- "Express"
|
- "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
|
||||||
achievements:
|
achievements:
|
||||||
enable: true
|
enable: true
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{- partial "sections/hero/index.html" . -}}
|
{{- partial "sections/hero/index.html" . -}}
|
||||||
{{- partial "sections/about.html" . -}}
|
{{- partial "sections/about.html" . -}}
|
||||||
|
{{- partial "sections/experience.html" . -}}
|
||||||
{{- partial "sections/projects.html" . -}}
|
{{- partial "sections/projects.html" . -}}
|
||||||
{{- partial "sections/achievements.html" . -}}
|
{{- partial "sections/achievements.html" . -}}
|
||||||
{{- partial "sections/contact.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>
|
</script>
|
||||||
{{- end }}
|
{{- 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">
|
<section id="hero" class="py-5">
|
||||||
<div class="container px-3 px-sm-5 px-md-5 px-lg-5">
|
<div class="container px-3 px-sm-5 px-md-5 px-lg-5">
|
||||||
<div id="primary-font">
|
<div id="primary-font">
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
opacity: 0.95;
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
.nav-link{
|
header .nav-link{
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
.navbar-brand {
|
.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 */
|
||||||
|
|
||||||
#hero {
|
#hero {
|
||||||
@@ -112,6 +125,8 @@
|
|||||||
#about .image img {
|
#about .image img {
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
transition: box-shadow 0.3s;
|
transition: box-shadow 0.3s;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about .image img:hover {
|
#about .image img:hover {
|
||||||
@@ -167,6 +182,126 @@
|
|||||||
width: 100%;
|
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 */
|
||||||
|
|
||||||
#achievements a {
|
#achievements a {
|
||||||
|
|||||||
Reference in New Issue
Block a user