From f8eb6d0646478bc739fc1a1def86ea962a37f735 Mon Sep 17 00:00:00 2001
From: gurusabarish <gurusabarisha@gmail.com>
Date: Thu, 24 Feb 2022 22:14:28 +0530
Subject: Added experience in home

---
 exampleSite/config.yaml                   |  64 ++++++++++++
 layouts/index.html                        |   1 +
 layouts/partials/scripts.html             |   5 +
 layouts/partials/sections/experience.html | 167 ++++++++++++++++++++++++++++++
 layouts/partials/sections/hero/index.html |   2 +-
 static/css/header.css                     |   2 +-
 static/css/index.css                      | 135 ++++++++++++++++++++++++
 7 files changed, 374 insertions(+), 2 deletions(-)
 create mode 100644 layouts/partials/sections/experience.html

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 48a2b29..98585d6 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -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
diff --git a/layouts/index.html b/layouts/index.html
index 5c7d826..9aec77f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -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" . -}}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 7f6c473..15238bd 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.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 }}
\ No newline at end of file
diff --git a/layouts/partials/sections/experience.html b/layouts/partials/sections/experience.html
new file mode 100644
index 0000000..894e8f7
--- /dev/null
+++ b/layouts/partials/sections/experience.html
@@ -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>
\ No newline at end of file
diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html
index a4db34f..ce3ab27 100644
--- a/layouts/partials/sections/hero/index.html
+++ b/layouts/partials/sections/hero/index.html
@@ -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">
diff --git a/static/css/header.css b/static/css/header.css
index c611530..0c266ad 100644
--- a/static/css/header.css
+++ b/static/css/header.css
@@ -12,7 +12,7 @@
     font-size: 16px !important;
     opacity: 0.95;
 }
-.nav-link{
+header .nav-link{
     transition: none !important;
 }
 .navbar-brand {
diff --git a/static/css/index.css b/static/css/index.css
index 689d4db..cb59130 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -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 {
-- 
cgit v1.2.3