diff options
author | Md. Emruz Hossain <hossainemruz@gmail.com> | 2020-06-29 22:54:28 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-29 22:54:28 +0300 |
commit | e2d376215ac52d8d69a5a1fae7eb8041d0f4fa23 (patch) | |
tree | ba66eb0e2d375c7f75caade05d0570843f55c5fb | |
parent | 8f99f05a984f94b5ab8aa6af85f4e93d37464c6c (diff) |
Make home page sections dynamic and configurable (#14)
* Make home page sections dynamic and configurable
* Fix navbar issue when no section is configured + fix next-prev navigator
* Update exampleSite
* Fix next-prev navigator
* Make navbar brand URL context aware
32 files changed, 453 insertions, 361 deletions
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 63405cf..f28da75 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -20,5 +20,31 @@ enableEmoji: true # Custom parameters params: - # Github Repo URL. This is used to add "Improve This Page" button + # background image of the landing page + background: "images/background.jpg" + + # GitHub repo URL of your site gitRepo: https://github.com/hossainemruz/toha-example-site + + # specify whether you want to write blog post or not + enableBlogPost: true + + # specify the list of custom menus that you want to show in the top navbar. + # they will be separated by a divider from the main menus. + customMenus: + - name: Notes + url: https://hossainnotes.netlify.app/docs/example/ + + # some information about you + author: + name: "Jane Doe" + image: "images/avatar.png" + # give your some contact information. they will be used in the footer + contactInfo: + email: "janedoe@example.com" + phone: "+0123456789" + # a summary of what you do + summary: + - I am a Developer + - I work with Go + - I love to work with some fun projects diff --git a/exampleSite/data/achievements.yaml b/exampleSite/data/achievements.yaml deleted file mode 100644 index fb4bc23..0000000 --- a/exampleSite/data/achievements.yaml +++ /dev/null @@ -1,14 +0,0 @@ -# Your achievements achievements -achievements: - - title: Best Presenter - image: images/achievements/presenter.jpg - summary: Best presenter in 2020 XYZ conference. - - title: Champion - image: images/achievements/sport.jpg - summary: Champion in cycling inter-city cycling championship 2020. - - title: Graduation - image: images/achievements/graduation-cap.jpg - summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. - - title: Award Winner - image: images/achievements/woman-winner.jpg - summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero? diff --git a/exampleSite/data/experiences.yaml b/exampleSite/data/experiences.yaml deleted file mode 100644 index abefadc..0000000 --- a/exampleSite/data/experiences.yaml +++ /dev/null @@ -1,43 +0,0 @@ -# Your experiences -experiences: - - designation: Software Engineer - company: - name: Example Co. - url: "https://www.example.com" - location: Dhaka Branch - # company overview - overview: Example Co. is a widely recognized company for cloud native development. It build tools for Kubernetes. - start: Nov 2017 - # don't provide end date if you are currently working there. It will be replaced by "Present" - # end: Dec 2020 - # give some points about what was your responsibilities at the company. - responsibilities: - - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases and cluster's resource definition. - - My another responsibilities. - - My more responsibilities. - - - designation: Software Engineer - company: - name: PreExample Co. - url: "https://www.preexample.com" - location: Nowhere - overview: PreExample Co. is gateway company to enter into Example co. So, nothing special here. - start: March 2016 - end: May 2017 - responsibilities: - - Write lots of example codes. - - Read lots of examples. - - See lots of example videos. - - - designation: Intern - company: - name: Intern Counting Company (ICC). - url: "https://www.intern.com" - location: Intern Land - overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineer. - start: Jun 2015 - end: Jan 2016 - responsibilities: - - Count lost of interns. - - Count more interns. - - Count myself as intern. diff --git a/exampleSite/data/projects.yaml b/exampleSite/data/projects.yaml deleted file mode 100644 index 99dd016..0000000 --- a/exampleSite/data/projects.yaml +++ /dev/null @@ -1,54 +0,0 @@ -# filter buttons -buttons: - - name: All - filter: "all" - - name: Professional - filter: "professional" - - name: Academic - filter: "academic" - - name: Hobby - filter: "hobby" - -# your projects -projects: - - name: Kubernetes - logo: images/projects/kubernetes.png - role: Contributor - timeline: "March 2018 - Present" - repo: https://github.com/kubernetes/kubernetes # if your project is public repo on github, then provide this link. it will show star count. - #url: "" # if your project is not a public repo but it has a website, or any external details url then provide it here. don't provide "repo" and "url" simultaneously. - summary: Production-Grade Container Scheduling and Management . - tags: ["professional", "kubernetes", "cloud"] - - - name: Tensorflow - logo: images/projects/tensorflow.png - role: Developer - timeline: "Jun 2018 - Present" - repo: https://github.com/tensorflow/tensorflow - #url: "" - summary: An Open Source Machine Learning Framework for Everyone. - tags: ["professional", "machine-learning","academic"] - - - name: A sample academic paper - role: Team Lead - timeline: "Jan 2017 - Nov 2017" - url: "https://www.example.com" - summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi. - tags: ["academic","iot"] - - - name: Nocode - logo: images/projects/no-code.png - role: Nothing - timeline: "Oct 2019 - Dec 2019" - repo: https://github.com/kelseyhightower/nocode - #url: "" - summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere. - tags: ["hobby", "fun"] - - - name: Toha - logo: images/projects/toha.png - role: Owner - timeline: "Jun 2019 - Present" - repo: https://github.com/hossainemruz/toha - summary: A Hugo theme for personal portfolio. - tags: ["hobby","hugo","theme","professional"] diff --git a/exampleSite/data/about.yaml b/exampleSite/data/sections/about.yaml index 5fac037..8ae9359 100644 --- a/exampleSite/data/about.yaml +++ b/exampleSite/data/sections/about.yaml @@ -1,3 +1,10 @@ +# section information +section: + name: About + enable: true + weight: 1 + showOnNavbar: true + # your designation designation: Software Engineer # your company information @@ -53,4 +60,4 @@ softSkills: color: pink - name: Hard Working percentage: 85 - color: green + color: green
\ No newline at end of file diff --git a/exampleSite/data/sections/achievements.yaml b/exampleSite/data/sections/achievements.yaml new file mode 100644 index 0000000..5877753 --- /dev/null +++ b/exampleSite/data/sections/achievements.yaml @@ -0,0 +1,21 @@ +# section information +section: + name: Achievements + enable: true + weight: 6 + showOnNavbar: true + +# Your achievements achievements +achievements: +- title: Best Presenter + image: images/achievements/presenter.jpg + summary: Best presenter in the 2020 XYZ conference. +- title: Champion + image: images/achievements/sport.jpg + summary: Champion in cycling inter-city cycling championship 2020. +- title: Graduation + image: images/achievements/graduation-cap.jpg + summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. +- title: Award Winner + image: images/achievements/woman-winner.jpg + summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero? diff --git a/exampleSite/data/sections/experiences.yaml b/exampleSite/data/sections/experiences.yaml new file mode 100644 index 0000000..3ed8349 --- /dev/null +++ b/exampleSite/data/sections/experiences.yaml @@ -0,0 +1,51 @@ +# section information +section: + name: Experiences + enable: true + weight: 3 + showOnNavbar: true + + +# Your experiences +experiences: +- designation: Software Engineer + company: + name: Example Co. + url: "https://www.example.com" + location: Dhaka Branch + # company overview + overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes. + start: Nov 2017 + # don't provide end date if you are currently working there. It will be replaced by "Present" + # end: Dec 2020 + # give some points about what was your responsibilities at the company. + responsibilities: + - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition. + - My another responsibility. + - My more responsibilities. + +- designation: Software Engineer + company: + name: PreExample Co. + url: "https://www.preexample.com" + location: Nowhere + overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here. + start: March 2016 + end: May 2017 + responsibilities: + - Write lots of example codes. + - Read lots of examples. + - See lots of example videos. + +- designation: Intern + company: + name: Intern Counting Company (ICC). + url: "https://www.intern.com" + location: Intern Land + overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers. + start: Jun 2015 + end: Jan 2016 + responsibilities: + - Count lost of interns. + - Count more interns. + - Count me as an intern. diff --git a/exampleSite/data/sections/projects.yaml b/exampleSite/data/sections/projects.yaml new file mode 100644 index 0000000..0d84565 --- /dev/null +++ b/exampleSite/data/sections/projects.yaml @@ -0,0 +1,61 @@ +# section information +section: + name: Projects + enable: true + weight: 4 + showOnNavbar: true + +# filter buttons +buttons: +- name: All + filter: "all" +- name: Professional + filter: "professional" +- name: Academic + filter: "academic" +- name: Hobby + filter: "hobby" + +# your projects +projects: +- name: Kubernetes + logo: images/projects/kubernetes.png + role: Contributor + timeline: "March 2018 - Present" + repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count. + #url: "" # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously. + summary: Production-Grade Container Scheduling and Management. + tags: ["professional", "kubernetes", "cloud"] + +- name: Tensorflow + logo: images/projects/tensorflow.png + role: Developer + timeline: "Jun 2018 - Present" + repo: https://github.com/tensorflow/tensorflow + #url: "" + summary: An Open Source Machine Learning Framework for Everyone. + tags: ["professional", "machine-learning","academic"] + +- name: A sample academic paper + role: Team Lead + timeline: "Jan 2017 - Nov 2017" + url: "https://www.example.com" + summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi. + tags: ["academic","iot"] + +- name: Nocode + logo: images/projects/no-code.png + role: Nothing + timeline: "Oct 2019 - Dec 2019" + repo: https://github.com/kelseyhightower/nocode + #url: "" + summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere. + tags: ["hobby", "fun"] + +- name: Toha + logo: images/projects/toha.png + role: Owner + timeline: "Jun 2019 - Present" + repo: https://github.com/hossainemruz/toha + summary: A Hugo theme for personal portfolio. + tags: ["hobby","hugo","theme","professional"] diff --git a/exampleSite/data/sections/recent-posts.yaml b/exampleSite/data/sections/recent-posts.yaml new file mode 100644 index 0000000..9fb496a --- /dev/null +++ b/exampleSite/data/sections/recent-posts.yaml @@ -0,0 +1,8 @@ +# section information +section: + name: Recent Posts + enable: true + weight: 5 + showOnNavbar: true + +# no other configuration is required diff --git a/exampleSite/data/skills.yaml b/exampleSite/data/sections/skills.yaml index 00c673b..05730d8 100644 --- a/exampleSite/data/skills.yaml +++ b/exampleSite/data/sections/skills.yaml @@ -1,5 +1,12 @@ +# section information +section: + name: Skills + enable: true + weight: 2 + showOnNavbar: true + # Your Skills. -# Give a summary of you each skill in summary section. +# Give a summary of you each skill in the summary section. skills: - name: Kubernetes icon: "images/skills/kubernetes.png" @@ -7,7 +14,7 @@ skills: - name: Go Development icon: "images/skills/go.png" - summary: "Using as main language for professional development. Capable of writing scalable, testable, and maintainable program." + summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program." - name: Cloud Computing icon: "images/skills/cloud.png" @@ -23,11 +30,11 @@ skills: - name: Linux icon: "images/skills/linux.png" - summary: "Using as main operating system. Capable of writing bash/shell scripts." + summary: "Using as the main operating system. Capable of writing bash/shell scripts." - name: Git icon: "images/skills/git.png" - summary: "Experienced with git based development. Mostly, use Github. Also have experience in working with GitLab." + summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab." - name: C++ icon: "images/skills/c++.png" diff --git a/exampleSite/data/site.yaml b/exampleSite/data/site.yaml deleted file mode 100644 index 019d8b6..0000000 --- a/exampleSite/data/site.yaml +++ /dev/null @@ -1,40 +0,0 @@ -# background image of the landing page -background: "images/background.jpg" - -# some information about you -author: - name: "Jane Doe" - image: "images/avatar.png" - # give your some contact information. they will be used in the footer - contactInfo: - email: "janedoe@example.com" - phone: "+0123456789" - # a summary of what you do - summary: - - I am a Developer - - I work with Go - - I love to work with some fun projects - -# Menus of the home page -menus: -- name: Home - url: "#home" - weight: 1 -- name: About - url: "#about" - weight: 2 -- name: Skills - url: "#skills" - weight: 3 -- name: Experiences - url: "#experiences" - weight: 4 -- name: Projects - url: "#projects" - weight: 5 -- name: Recent Posts - url: "#recent-posts" - weight: 6 -- name: Achievements - url: "#achievements" - weight: 7 diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7b00091..5f463ab 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -3,7 +3,7 @@ {{ end }} {{ define "navbar" }} - {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }} + {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL" .Site.BaseURL ) }} {{ end }} {{ define "content" }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 30dc63d..42b71f7 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -7,7 +7,7 @@ {{ end }} {{ define "navbar" }} - {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }} + {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL" "/posts") }} {{ end }} {{ define "content" }} @@ -44,31 +44,7 @@ <!---Next and Previous Navigator --> <hr /> - <div class="row next-prev-navigator"> - {{ $currentPage := . }} - {{ range .Site.RegularPages.ByDate }} - {{ if eq .RelPermalink $currentPage.RelPermalink }} - {{ if .Next }} - <div class="col-md-6 previous-article"> - <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info"> - <span><i class="fas fa-chevron-circle-left"></i> Prev</span> - <br /> - <span>{{ .Next.Title }}</span> - </a> - </div> - {{ end }} - {{ if .Prev }} - <div class="{{ if .Next }}col-md-6{{ else }}col-md-12{{ end }} next-article"> - <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info"> - <span>Next <i class="fas fa-chevron-circle-right"></i></span> - <br /> - <span>{{ .Prev.Title }}</span> - </a> - </div> - {{ end }} - {{ end }} - {{ end }} - </div> + {{ partial "next-prev-navigator.html" . }} <hr /> <!-- Add Disqus forum --> {{ if .Site.DisqusShortname }} diff --git a/layouts/index.html b/layouts/index.html index a9dd4ea..507e1a8 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -19,30 +19,31 @@ {{ template "_internal/google_analytics_async.html" . }} {{ end }} </head> - <body data-spy="scroll" data-target="#top-navbar" data-offset="50"> + <body data-spy="scroll" data-target="#top-navbar" data-offset="100"> + <!--- NAVBAR -------------------------> {{- partial "navbar.html" . -}} <!--- ADD HOME SECTION ----------------> {{- partial "home.html" . -}} - <!--- ADD ABOUT SECTION ---------------> - {{- partial "about.html" . -}} - - <!--- ADD SKILLS SECTION --------------> - {{- partial "skills.html" . -}} - - <!--- ADD EXPERIENCE SECTION -----------> - {{- partial "experiences.html" . -}} - - <!--- ADD PROJECT SECTION --------------> - {{- partial "projects.html" . -}} - - <!--- ADD RECENT-POSTS SECTION ---------> - {{- partial "recent-posts.html" . -}} - - <!--- ADD ACHIEVEMENT SECTION ----------> - {{- partial "achievements.html" . -}} + <!--- ADD OPTIONAL SECTIONS -----------> + {{ if .Site.Data.sections }} + {{ $background:= "bg-white"}} + {{ range sort .Site.Data.sections "section.weight" }} + {{ if .section.enable }} + <div class="container-fluid section-holder d-flex {{ $background }}"> + {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}} + </div> + <!--- alter background color for next section ---> + {{ if eq $background "bg-white" }} + {{ $background = "bg-dimmed" }} + {{ else }} + {{ $background = "bg-white" }} + {{end}} + {{ end }} + {{ end }} + {{ end }} <!--- ADD FOOTER -----------------------> {{- partial "footer.html" . -}} diff --git a/layouts/partials/about.html b/layouts/partials/about.html index ab178dc..2af5476 100644 --- a/layouts/partials/about.html +++ b/layouts/partials/about.html @@ -1,49 +1,45 @@ -<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about"> - <div class="container"> - <div class="row pt-sm-2 pt-md-4 align-self-center"> - {{ if .Site.Data.about }} - <!-- summery --> - <div class="col-md-6"> - <h3 class="p-1">{{ .Site.Data.site.author.name }}</h3> - {{ if .Site.Data.about.designation }} - <h5 class="p-1"> - {{ .Site.Data.about.designation }} - {{ if .Site.Data.about.company }} - at <a href="{{ .Site.Data.about.company.url }}">{{ .Site.Data.about.company.name }}</a> +<div class="container anchor p-md-5" id="about"> + <div class="row pt-sm-2 pt-md-4 align-self-center"> + <!-- summery --> + <div class="col-md-6"> + <h3 class="p-1">{{ site.Params.author.name }}</h3> + {{ if .designation }} + <h5 class="p-1"> + {{ .designation }} + {{ if .company }} + at <a href="{{ .company.url }}">{{ .company.name }}</a> + {{ end }} + </h5> + {{ end }} + <p class="p-1 text-justify"> + {{ .summary | markdownify }} + </p> + <div class="text-container ml-auto"> + <ul class="social-link d-flex"> + {{ range .socialLinks }} + <li> + {{ if eq .name "Email" }} + <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a> + {{ else }} + <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a> {{ end }} - </h5> - {{ end }} - <p class="p-1 text-justify"> - {{ .Site.Data.about.summary | markdownify }} - </p> - <div class="text-container ml-auto"> - <ul class="social-link d-flex"> - {{ range .Site.Data.about.socialLinks }} - <li> - {{ if eq .name "Email" }} - <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a> - {{ else }} - <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a> - {{ end }} - </li> - {{ end }} - </ul> - </div> - {{ if .Site.Data.about.resume }} - <a href="{{ .Site.Data.about.resume }}" target="#" - ><button class="btn btn-dark">My Resume</button></a - > + </li> {{ end }} - </div> - <!-- soft skills circular-progressbar --> - <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0"> - <div class="row"> - {{ range .Site.Data.about.softSkills }} - {{ partial "progress/soft-skills" . }} - {{ end }} - </div> - </div> + </ul> + </div> + {{ if .resume }} + <a href="{{ .resume }}" target="#" + ><button class="btn btn-dark">My Resume</button></a + > {{ end }} </div> + <!-- soft skills circular-progressbar --> + <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0"> + <div class="row"> + {{ range .softSkills }} + {{ partial "progress/soft-skills" . }} + {{ end }} + </div> + </div> </div> </div> diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html index 7cc6ebf..49b3ce9 100644 --- a/layouts/partials/achievements.html +++ b/layouts/partials/achievements.html @@ -1,16 +1,13 @@ -<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements"> - {{ if .Site.Data.achievements }} - <h1 class="text-center">Achievements</h1> - - <div class="container"> - <div class="row" id="gallery"> - </div> +<div class="container-fluid anchor pb-5" id="achievements"> + <h1 class="text-center">{{ .section.name }}</h1> + <div class="container"> + <div class="row" id="gallery"> </div> - <!-- achievements-holder holds achievement-entry --> - <div class="d-none" id="achievements-holder"> - {{ range .Site.Data.achievements.achievements }} - {{ partial "misc/achievement.html" . }} - {{ end }} - </div> - {{ end }} + </div> + <!-- achievements-holder holds achievement-entry --> + <div class="d-none" id="achievements-holder"> + {{ range .achievements }} + {{ partial "misc/achievement.html" . }} + {{ end }} + </div> </div> diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html index 91ad594..1c24938 100644 --- a/layouts/partials/experiences.html +++ b/layouts/partials/experiences.html @@ -1,25 +1,23 @@ -<div class="container-fluid experiences bg-white anchor" id="experiences"> - {{ if .Site.Data.experiences }} - <h1 class="text-center">Experiences</h1> +<div class="container-fluid anchor" id="experiences"> + <h1 class="text-center">{{ .section.name }}</h1> - <div class="container timeline text-justify"> - {{ $totalExperiences:= len .Site.Data.experiences.experiences }} - {{ range $index,$experience:= .Site.Data.experiences.experiences }} - {{ if eq (mod $index 2) 0 }} - <div class="row align-items-center d-flex"> - {{ partial "experiences/vertical-line.html" $index }} - {{ partial "experiences/experience-info.html" $experience }} - </div> - {{else}} - <div class="row align-items-center justify-content-end d-flex"> - {{ partial "experiences/experience-info.html" $experience }} - {{ partial "experiences/vertical-line.html" $index }} - </div> - {{ end }} - {{ if lt $index (sub $totalExperiences 1) }} - {{ partial "experiences/horizontal-line.html" $index }} - {{ end }} + <div class="container timeline text-justify"> + {{ $totalExperiences:= len .experiences }} + {{ range $index,$experience:= .experiences }} + {{ if eq (mod $index 2) 0 }} + <div class="row align-items-center d-flex"> + {{ partial "experiences/vertical-line.html" $index }} + {{ partial "experiences/experience-info.html" $experience }} + </div> + {{else}} + <div class="row align-items-center justify-content-end d-flex"> + {{ partial "experiences/experience-info.html" $experience }} + {{ partial "experiences/vertical-line.html" $index }} + </div> {{ end }} - </div> - {{ end }} + {{ if lt $index (sub $totalExperiences 1) }} + {{ partial "experiences/horizontal-line.html" $index }} + {{ end }} + {{ end }} + </div> </div> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 326aad2..555e211 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,20 +3,23 @@ <div class="row text-left"> <div class="col-md-4 col-sm-12"> <h5>Navigation</h5> - {{ if .Site.Data.site }} - <ul> - {{ range .Site.Data.site.menus }} + {{ if .Site.Data.sections }} + <ul> + {{- range sort .Site.Data.sections "section.weight" }} + {{ if .section.enable }} <li class="nav-item"> - <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a> + <a class="smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a> </li> {{ end }} - </ul> + {{- end }} + </ul> {{ end }} + </div> <div class="col-md-4 col-sm-12"> <h5>Contact Me</h5> <ul> - {{ range $key,$value:=.Site.Data.site.author.contactInfo }} + {{ range $key,$value:=.Site.Params.author.contactInfo }} <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li> {{ end }} </ul> diff --git a/layouts/partials/home.html b/layouts/partials/home.html index a201309..d67eccd 100644 --- a/layouts/partials/home.html +++ b/layouts/partials/home.html @@ -1,20 +1,20 @@ <div class="container-fluid home" id="home"> <div class="background container-fluid" - style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');" + style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');" ></div> <div class="container content text-center"> - <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}" + <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}" class="rounded-circle mx-auto d-block img-fluid" /> - <h1 class="greeting">Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }} + <h1 class="greeting">Hi, I am {{ if .Site.Params.author.name }}{{ .Site.Params.author.name }}{{ else }}Jane Doe{{ end }} </h1> <div class="typing-carousel"> <span id="ityped" class="ityped"></span> <span class="ityped-cursor"></span> </div> <ul id="typing-carousel-data"> - {{ range .Site.Data.site.author.summary }} + {{ range .Site.Params.author.summary }} <li>{{ . }}</li> {{ end }} </ul> diff --git a/layouts/partials/navbar-2.html b/layouts/partials/navbar-2.html index c0ff089..03fb869 100644 --- a/layouts/partials/navbar-2.html +++ b/layouts/partials/navbar-2.html @@ -1,6 +1,6 @@ <nav class="navbar navbar-expand-lg top-navbar final-navbar shadow"> <div class="container"> - <a class="navbar-brand" href="{{ .baseURL }}"> + <a class="navbar-brand" href="{{ .navBrandURL }}"> <img src="/assets/images/logo.png"> {{- .title -}} </a> @@ -11,7 +11,6 @@ <div class="collapse navbar-collapse" id="top-nav-items"> <ul class="navbar-nav ml-auto"> </ul> - </ul> </div> </div> </nav> diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index a299fcf..253c54d 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -16,15 +16,37 @@ <div class="collapse navbar-collapse" id="top-nav-items"> <ul class="navbar-nav ml-auto"> - {{ range .Site.Data.site.menus }} <li class="nav-item"> - <a class="nav-link smooth-scroll" href="{{ .url }}">{{ .name }}</a> + <a class="nav-link smooth-scroll" href="#home">Home</a> </li> + {{- if .Site.Data.sections }} + {{- range sort .Site.Data.sections "section.weight" }} + {{ if .section.showOnNavbar }} + <li class="nav-item"> + <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a> + </li> + {{ end }} + {{- end }} + {{- end }} + {{ $hasCustomMenus:= false }} + {{ if and site.Params.customMenus }} + {{ if gt (len site.Params.customMenus) 0 }} + {{ $hasCustomMenus = true }} + {{ end }} + {{ end }} + {{ if (or site.Params.enableBlogPost $hasCustomMenus) }} + <div class="dropdown-divider" id="top-navbar-divider"></div> + {{ end }} + {{ if site.Params.enableBlogPost }} + <li class="nav-item"> + <a class="nav-link" id="blog-link" href="/posts">Posts</a> + </li> + {{ end }} + {{ range site.Params.customMenus }} + <li class="nav-item"> + <a class="nav-link" href="{{ .url }}" target="/">{{ .name }}</a> + </li> {{ end }} - <div class="dropdown-divider" id="top-navbar-divider"></div> - <li class="nav-item"> - <a class="nav-link" id="blog-link" href="/posts">Blog</a> - </li> </ul> </div> </div> diff --git a/layouts/partials/next-prev-navigator.html b/layouts/partials/next-prev-navigator.html new file mode 100644 index 0000000..eca6632 --- /dev/null +++ b/layouts/partials/next-prev-navigator.html @@ -0,0 +1,35 @@ +<div class="row next-prev-navigator"> +{{ $currentPage := . }} +{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}} + {{ if eq .RelPermalink $currentPage.RelPermalink }} + {{ if .Next }} + {{ if (in site.Params.mainSections .Next.Type) }} + <div class="col-md-6 previous-article"> + <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info"> + <span><i class="fas fa-chevron-circle-left"></i> Prev</span> + <br /> + <span>{{ .Next.Title }}</span> + </a> + </div> + {{ end }} + {{ end }} + {{ if .Prev }} + {{ if (in site.Params.mainSections .Prev.Type) }} + {{ $columnWidth:="col-md-12" }} + {{ if .Next }} + {{ if (in site.Params.mainSections .Next.Type) }} + {{ $columnWidth = "col-md-6" }} + {{ end }} + {{ end}} + <div class="{{ $columnWidth }} next-article"> + <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info"> + <span>Next <i class="fas fa-chevron-circle-right"></i></span> + <br /> + <span>{{ .Prev.Title }}</span> + </a> + </div> + {{ end }} + {{ end }} + {{ end }} +{{ end }} +</div> diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html index 3d2d371..3d2bcd4 100644 --- a/layouts/partials/projects.html +++ b/layouts/partials/projects.html @@ -1,21 +1,19 @@ -<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects"> - {{ if .Site.Data.projects }} - <h1 class="text-center">Projects</h1> - <div class="container ml-auto text-center"> - <div class="btn-group flex-wrap" role="group" id="project-filter-buttons"> - {{ range .Site.Data.projects.buttons }} - <button type="button" class="btn btn-dark" data-filter="{{ .filter }}"> - {{ .name }} - </button> - {{ end }} - </div> +<div class="container-fluid anchor pb-5" id="projects"> + <h1 class="text-center">{{ .section.name }}</h1> + <div class="container ml-auto text-center"> + <div class="btn-group flex-wrap" role="group" id="project-filter-buttons"> + {{ range .buttons }} + <button type="button" class="btn btn-dark" data-filter="{{ .filter }}"> + {{ .name }} + </button> + {{ end }} </div> - <div class="container filtr-projects"> - <div class="row" id="project-card-holder"> - {{ range .Site.Data.projects.projects }} - {{ partial "cards/project" . }} - {{ end }} - </div> + </div> + <div class="container filtr-projects"> + <div class="row" id="project-card-holder"> + {{ range .projects }} + {{ partial "cards/project" . }} + {{ end }} </div> - {{ end }} + </div> </div> diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html index 10508f4..a69cc05 100644 --- a/layouts/partials/recent-posts.html +++ b/layouts/partials/recent-posts.html @@ -1,8 +1,8 @@ -<div class="container-fluid recent-posts bg-white anchor pb-5" id="recent-posts"> - <h1 class="text-center">Recent Posts</h1> +<div class="container-fluid anchor pb-5" id="recent-posts"> + <h1 class="text-center">{{ .section.name }}</h1> <div class="container"> <div class="row" id="recent-post-cards"> - {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}} + {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}} {{ partial "cards/recent-post.html" . }} {{ end }} </div> diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html index 8088b4d..58b1f44 100644 --- a/layouts/partials/skills.html +++ b/layouts/partials/skills.html @@ -1,13 +1,11 @@ -<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills"> - {{ if .Site.Data.skills }} - <h1 class="text-center">Skills</h1> +<div class="container-fluid anchor pb-5" id="skills"> + <h1 class="text-center">{{ .section.name }}</h1> - <div class="container d-flex-block"> - <div class="row" id="primary-skills"> - {{ range .Site.Data.skills.skills }} - {{ partial "cards/skill.html" . }} - {{ end }} - </div> + <div class="container d-flex-block"> + <div class="row" id="primary-skills"> + {{ range .skills }} + {{ partial "cards/skill.html" . }} + {{ end }} </div> - {{ end }} + </div> </div> diff --git a/static/assets/css/achievements.css b/static/assets/css/achievements.css index a13a4da..aa75925 100644 --- a/static/assets/css/achievements.css +++ b/static/assets/css/achievements.css @@ -1,4 +1,4 @@ -.achievements .container { +#achievements .container { padding-top: 0.5rem; } @@ -123,3 +123,35 @@ #gallery .achievement-details { height: 75vh !important; } + +/* ============= Device specific fixes ======= */ + +/* Extra small devices (portrait phones, less than 576px) */ + +/* No media query for `xs` since this is the default in Bootstrap */ + +/* Extra large devices (large desktops, 1200px and up) */ + +@media (max-width: 1400px) { +} + +@media (max-width: 1200px) { +} + +/* Large devices (desktops, 992px and up) */ + +@media (max-width: 992px) { +} + +/* Medium devices (tablets, 768px and up) */ + +@media only screen and (max-width: 768px) { +} + +/* Small devices (landscape phones, 576px and up) */ + +@media only screen and (max-width: 576px) { + #gallery .achievement-entry:hover { + transform: scale(1.05); + } +} diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css index 2035c52..595171c 100644 --- a/static/assets/css/experiences.css +++ b/static/assets/css/experiences.css @@ -1,16 +1,16 @@ -.experiences { +#experiences { padding-bottom: 1rem; } -.experiences .timeline { +#experiences .timeline { margin-top: 1.5rem !important; } -.experiences ul { +#experiences ul { padding-left: 1rem; } -.experiences ul > li { +#experiences ul > li { margin-left: 0; color: #3c4858; } diff --git a/static/assets/css/projects.css b/static/assets/css/projects.css index d3a61d0..1c6c1a2 100644 --- a/static/assets/css/projects.css +++ b/static/assets/css/projects.css @@ -1,10 +1,10 @@ -.projects .card .card-header { +#projects .card .card-header { background-color: #f9fafc; padding: 0.7rem; padding-bottom: 0rem; } -.projects .card .card-img-xs { +#projects .card .card-img-xs { margin-right: 0.5rem; } @@ -15,11 +15,11 @@ float: right; } -.projects .card .card-body { +#projects .card .card-body { padding: 0.7rem; } -.projects .card .card-header .sub-title { +#projects .card .card-header .sub-title { color: #8392a5; margin-top: 0.4rem; } @@ -55,7 +55,7 @@ /* Small devices (landscape phones, 576px and up) */ @media only screen and (max-width: 576px) { - .projects .btn { + #projects .btn { margin-top: 0.3125rem; } } diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css index da1855f..d2f098a 100644 --- a/static/assets/css/recent-posts.css +++ b/static/assets/css/recent-posts.css @@ -1,19 +1,19 @@ -.recent-posts .container{ +#recent-posts .container{ padding-top: 1rem; } -.recent-posts .card .card-footer span { +#recent-posts .card .card-footer span { font-size: 10pt; color: #6c757d !important; padding-top: 5px; } -.recent-posts .card .card-footer { +#recent-posts .card .card-footer { background: #fff; margin-top: auto; } -.recent-posts .post-card-link{ +#recent-posts .post-card-link{ text-decoration: none; } diff --git a/static/assets/css/skills.css b/static/assets/css/skills.css index cf4e8c3..a197c52 100644 --- a/static/assets/css/skills.css +++ b/static/assets/css/skills.css @@ -1,4 +1,4 @@ -.skills .card .card-head { +#skills .card .card-head { background-color: #f9fafc; height: fit-content; padding: 0.7rem; @@ -6,16 +6,16 @@ border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125); } -.skills .card .card-img-xs { +#skills .card .card-img-xs { margin-right: 0.5rem; } -.skills .card { +#skills .card { margin-top: 0.5rem; margin-bottom: 0.5rem; } -.skills .card .card-body { +#skills .card .card-body { padding-top: 0.2rem; padding-left: 0.7rem; } diff --git a/static/assets/css/style.css b/static/assets/css/style.css index 986bb2a..7e1a022 100644 --- a/static/assets/css/style.css +++ b/static/assets/css/style.css @@ -245,12 +245,16 @@ img.right{ /* Small devices (landscape phones, 576px and up) */ @media only screen and (max-width: 576px) { - .container-fluid.about, - .container-fluid.skills, - .container-fluid.projects, - .container-fluid.recent-posts, - .container-fluid.achievements { + .section-holder { padding-left: 5px; padding-right: 5px; } + + #skills, + #projects, + #recent-posts, + #achievements{ + padding-left: 0; + padding-right: 0; + } } diff --git a/static/assets/js/home.js b/static/assets/js/home.js index cca42df..cf800d2 100644 --- a/static/assets/js/home.js +++ b/static/assets/js/home.js @@ -145,15 +145,18 @@ var projectCards; function adjustRecentPostsHeight() { if (!isMobile) { // no need to adjust height for mobile devices - let el = document.getElementById("recent-post-cards").children; - let maxHeight = 0; - for (let i = 0; i < el.length; i++) { - if (el[i].children[1].clientHeight > maxHeight) { - maxHeight = el[i].children[1].clientHeight; + let recentPostCards = document.getElementById("recent-post-cards") + if (recentPostCards != null) { + let el = recentPostCards.children; + let maxHeight = 0; + for (let i = 0; i < el.length; i++) { + if (el[i].children[1].clientHeight > maxHeight) { + maxHeight = el[i].children[1].clientHeight; + } + } + for (let i = 0; i < el.length; i++) { + el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;") } - } - for (let i = 0; i < el.length; i++) { - el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;") } } } |