Added experience in home

7 files changed, 374 insertions, 2 deletions

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 {