diff options
| author | gurusabarish <gurusabarisha@gmail.com> | 2022-02-28 16:58:45 +0300 |
|---|---|---|
| committer | gurusabarish <gurusabarisha@gmail.com> | 2022-02-28 16:58:45 +0300 |
| commit | 54ecbb65c432558fc4a2df75f18aab6a16805f87 (patch) | |
| tree | c2882fa68fd4eb99e54dd2f00b3483a37d853937 | |
| parent | f8eb6d0646478bc739fc1a1def86ea962a37f735 (diff) | |
Added education in home
| -rw-r--r-- | exampleSite/config.yaml | 47 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 2 | ||||
| -rw-r--r-- | layouts/index.html | 1 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 16 | ||||
| -rw-r--r-- | layouts/partials/sections/education.html | 64 | ||||
| -rw-r--r-- | layouts/partials/sections/experience.html | 45 | ||||
| -rw-r--r-- | layouts/partials/sections/header.html | 12 | ||||
| -rw-r--r-- | layouts/partials/sections/hero/social.html | 30 | ||||
| -rw-r--r-- | static/css/index.css | 84 |
9 files changed, 240 insertions, 61 deletions
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 98585d6..9795c30 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -180,6 +180,53 @@ params: 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."
+
+ # Education
+ education:
+ enable: true
+ # index: true
+ items:
+ - title: "Master of Business Administration"
+ school:
+ name: "University of California, Berkeley"
+ url: "https://example.org"
+ date: "2013 - 2015"
+ GPA: "3.8 out of 5.0"
+ content: |-
+ Extracurricular Activities
+ - Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique.
+ - Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique.
+ - title: "Bachelor of Science in Computer Science"
+ school:
+ name: "Massachusetts Institute of Technology"
+ url: "https://example.org"
+ date: "2009 - 2013"
+ GPA: "3.9 out of 5.0"
+ content: |-
+ I Publiced two papers in the ACM SIGCHI Conference on Artificial Intelligence.
+ - [Fast and Accurate Object Detection with a Single Convolutional Neural Network](https://example.com)
+ - Face mask detection using a single convolutional neural network.
+
+ Extracurricular Activities
+ - Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique.
+ - Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique.
+ featuredLink:
+ enable: true
+ name: "My academic record"
+ url: "https://example.com"
+ - title: "High School"
+ school:
+ name: "Thomas Jefferson High School for Science and Technology."
+ url: "https://example.org"
+ GPA: "4.2 out of 5.0"
+ featuredLink:
+ enable: true
+ name: "My academic record"
+ url: "https://example.com"
# Achievements
achievements:
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5540c38..0e75fb7 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,7 +9,7 @@ </title> </head> -<body class="light"> +<body class="light" onload="loading()"> <!-- javascripts --> <!-- <script src="/js/jquery-3.6.0.min.js"></script> --> <script src="/bootstrap-5/js/bootstrap.bundle.js"></script> diff --git a/layouts/index.html b/layouts/index.html index 9aec77f..5806a58 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -15,6 +15,7 @@ {{- partial "sections/hero/index.html" . -}}
{{- partial "sections/about.html" . -}}
{{- partial "sections/experience.html" . -}}
+{{- partial "sections/education.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 15238bd..87016fd 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -16,4 +16,18 @@ })
</script>
-{{- end }}
\ No newline at end of file +{{- end }}
+
+<script>
+ let loadingIcons;
+
+ function loading() {
+ myVar = setTimeout(showPage, 100);
+ }
+
+ function showPage() {
+ try{
+ document.getElementById("loading-icons").style.display = "block";
+ } catch(err) {}
+ }
+</script>
\ No newline at end of file diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html new file mode 100644 index 0000000..7b0b5b9 --- /dev/null +++ b/layouts/partials/sections/education.html @@ -0,0 +1,64 @@ +{{ if .Site.Params.education.enable | default false }}
+<section id="education" class="py-5">
+ <div class="container">
+ <h3 class="text-center">Education</h3>
+ <div class="row justify-content-center py-5">
+ {{ $indexMenu := .Site.Params.education.index }}
+ {{ range $index, $element := .Site.Params.education.items }}
+ <div class="col-12">
+ <div class="row row align-items-center justify-content-center m-2 mb-4">
+ {{ if $indexMenu }}
+ <div class="col-md-1 text-center me-2 p-0 d-none d-md-block">
+ <div class="py-2">
+ <span class="index shadow-lg">
+ {{ add $index 1 }}
+ </span>
+ </div>
+ </div>
+ {{ end }}
+
+ <div class="col-md-9">
+ <div class="card">
+ <div class="card-body">
+ <div class="float-end">
+ <small>{{ .date }}</small>
+ </div>
+ <h5 class="card-title">{{ .title }}</h5>
+
+ {{ if .school.url }}
+ <a href="{{ .school.url }}" target="_blank">
+ <h6>
+ {{ .school.name }}
+ </h6>
+ </a>
+ {{ else }}
+ {{ .school.name }}
+ {{ end }}
+
+ <div class="py-1">
+ GPA:
+ <i>
+ <small>{{ .GPA }}</small>
+ </i>
+ </div>
+ <div class="py-1 education-content">
+ {{ .content | markdownify}}
+ </div>
+
+ {{ if .featuredLink.enable }}
+ <div class="py-1">
+ <a href="{{ .featuredLink.url }}" class="btn">
+ {{ .featuredLink.name | default "Featured" }}
+ </a>
+ </div>
+ {{ end }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ </div>
+</section>
+{{ end }}
\ No newline at end of file diff --git a/layouts/partials/sections/experience.html b/layouts/partials/sections/experience.html index 894e8f7..c64c490 100644 --- a/layouts/partials/sections/experience.html +++ b/layouts/partials/sections/experience.html @@ -1,3 +1,4 @@ +{{ if .Site.Params.experience.enable | default false }}
<section id="experience" class="py-5">
<div class="container">
<h3 class="text-center">Experience</h3>
@@ -57,6 +58,7 @@ {{ 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 ) }}
@@ -95,6 +97,7 @@ {{ 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 ) }}
@@ -120,48 +123,10 @@ </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 +</section>
+{{ end }}
\ No newline at end of file diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html index 09fabe5..cea7ed8 100644 --- a/layouts/partials/sections/header.html +++ b/layouts/partials/sections/header.html @@ -58,14 +58,22 @@ </li>
{{ end }}
- {{ if not (.Site.Params.navbar.menus.disableExperience | default false) }}
+ {{
+ if and
+ (.Site.Params.experience.enable | default false)
+ (not (.Site.Params.navbar.menus.disableExperience | default false))
+ }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience"
aria-label="experience">Experience</a>
</li>
{{ end }}
- {{ if not (.Site.Params.navbar.menus.disableEducation | default false) }}
+ {{
+ if and
+ (.Site.Params.education.enable | default false)
+ (not (.Site.Params.navbar.menus.disableEducation | default false))
+ }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education"
aria-label="education">Education</a>
diff --git a/layouts/partials/sections/hero/social.html b/layouts/partials/sections/hero/social.html index b70df15..ab5e8ef 100644 --- a/layouts/partials/sections/hero/social.html +++ b/layouts/partials/sections/hero/social.html @@ -1,15 +1,17 @@ -{{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
-<span class="px-1">
- <a href="{{ .url }}" target="_blank" class="btn social-icon">
- <i class="{{ .icon }}"></i>
- </a>
-</span>
-{{ end }}
+<span id="loading-icons" style="display: none;">
+ {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }}
+ <span class="px-1">
+ <a href="{{ .url }}" target="_blank" class="btn social-icon">
+ <i class="{{ .icon }}"></i>
+ </a>
+ </span>
+ {{ end }}
-{{ range .Site.Params.hero.socialLinks.customIcons }}
-<span class="px-1">
- <a href="{{ .url }}" target="_blank" class="btn social-icon">
- <img src="{{ .icon }}">
- </a>
-</span>
-{{ end }}
\ No newline at end of file + {{ range .Site.Params.hero.socialLinks.customIcons }}
+ <span class="px-1">
+ <a href="{{ .url }}" target="_blank" class="btn social-icon">
+ <img src="{{ .icon }}">
+ </a>
+ </span>
+ {{ end }}
+</span>
\ No newline at end of file diff --git a/static/css/index.css b/static/css/index.css index cb59130..e47df71 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -302,6 +302,79 @@ opacity: 0.7;
}
+/* Education */
+
+#education .container > h3 {
+ color: var(--text-secondary-color) !important;
+}
+
+#education .row .index {
+ opacity: 0.8;
+ padding: 13px 20px;
+ line-height: 0%;
+ border-radius: 50%;
+ max-height: 50px;
+ z-index: 2;
+ background-color: var(--primary-color) !important;
+ color: var(--secondary-color) !important;
+ font-weight: bold;
+}
+
+#education .card * {
+ background-color: var(--secondary-color) !important;
+}
+
+#education .card {
+ border-radius: 1.5rem;
+ box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
+ border: 2px solid var(--text-secondary-color) !important;
+ transition: box-shadow .2s linear,opacity .2s linear;
+ transition: transform 0.2s;
+}
+
+#education .card .card-body {
+ border-radius: 1.5rem;
+ padding: 2rem;
+}
+
+#education .card:hover {
+ transition: 0.3s;
+ box-shadow: 0 4px 11px rgb(15 80 100 / 16%);
+ border: 2px solid var(--primary-color) !important;
+}
+
+#education .card .card-body > a h6 {
+ display: inline-block;
+ text-decoration: none;
+ color: var(--primary-color) !important;
+}
+
+#education .card .card-body > a h6::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;
+}
+
+#education .card .card-body > a h6:hover::after, #education .card .card-body > a h6:focus::after, #education .card .card-body > a h6:active::after {
+ width: 100%;
+}
+
+#education .card .card-body a.btn {
+ opacity: 0.9;
+ border: 1px solid var(--primary-color) !important;
+ border-radius: .75rem;
+ box-shadow: none;
+}
+
+#education .card .card-body a.btn:hover {
+ opacity: 0.8;
+}
+
/* achievements */
#achievements a {
@@ -314,16 +387,21 @@ #achievements .card {
background-color: var(--secondary-color) !important;
- border-radius: .75rem;
+ border-radius: 1rem;
box-shadow: 0 0 36px rgba(0,0,0,0.1);
cursor: alias;
/* transform: translate3d(0, 0, 0); */
transition: box-shadow .2s linear,opacity .2s linear;
+ border: 2px solid transparent;
}
#achievements .card:hover {
- border: 1px solid var(--text-color);
- transition: .4s;
+ border: 2px solid var(--text-color);
+ transition: .3s;
+}
+#achievements .card:focus {
+ border: 2px solid var(--text-color);
+ transition: .3s;
}
#achievements .card-text {
|