From 9a95163b7d76f6161ae1c28feaeb96caa5d47b65 Mon Sep 17 00:00:00 2001 From: hossainemruz Date: Sun, 28 Jun 2020 22:23:33 +0600 Subject: [PATCH] Make home page sections dynamic and configurable --- layouts/index.html | 37 ++++++------- layouts/partials/about.html | 86 ++++++++++++++---------------- layouts/partials/achievements.html | 25 ++++----- layouts/partials/experiences.html | 42 +++++++-------- layouts/partials/footer.html | 15 +++--- layouts/partials/home.html | 8 +-- layouts/partials/navbar.html | 32 ++++++++--- layouts/partials/projects.html | 34 ++++++------ layouts/partials/recent-posts.html | 6 +-- layouts/partials/skills.html | 18 +++---- static/assets/css/achievements.css | 34 +++++++++++- static/assets/css/experiences.css | 8 +-- static/assets/css/projects.css | 10 ++-- static/assets/css/recent-posts.css | 8 +-- static/assets/css/skills.css | 8 +-- static/assets/css/style.css | 14 +++-- static/assets/js/home.js | 19 ++++--- 17 files changed, 227 insertions(+), 177 deletions(-) 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 }} - + + {{- partial "navbar.html" . -}} {{- partial "home.html" . -}} - - {{- partial "about.html" . -}} - - - {{- partial "skills.html" . -}} - - - {{- partial "experiences.html" . -}} - - - {{- partial "projects.html" . -}} - - - {{- partial "recent-posts.html" . -}} - - - {{- partial "achievements.html" . -}} + + {{ if .Site.Data.sections }} + {{ $background:= "bg-white"}} + {{ range sort .Site.Data.sections "section.weight" }} + {{ if .section.enable }} +
+ {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}} +
+ + {{ if eq $background "bg-white" }} + {{ $background = "bg-dimmed" }} + {{ else }} + {{ $background = "bg-white" }} + {{end}} + {{ end }} + {{ end }} + {{ end }} {{- 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 @@ -
-
-
- {{ if .Site.Data.about }} - -
-

{{ .Site.Data.site.author.name }}

- {{ if .Site.Data.about.designation }} -
- {{ .Site.Data.about.designation }} - {{ if .Site.Data.about.company }} - at {{ .Site.Data.about.company.name }} - {{ end }} -
- {{ end }} -

- {{ .Site.Data.about.summary | markdownify }} -

-
- -
- {{ if .Site.Data.about.resume }} - - {{ end }} -
- -
-
- {{ range .Site.Data.about.softSkills }} - {{ partial "progress/soft-skills" . }} - {{ end }} -
-
+
+
+ +
+

{{ site.Params.author.name }}

+ {{ if .designation }} +
+ {{ .designation }} + {{ if .company }} + at {{ .company.name }} + {{ end }} +
{{ end }} +

+ {{ .summary | markdownify }} +

+
+ +
+ {{ if .resume }} + + {{ end }} +
+ +
+
+ {{ range .softSkills }} + {{ partial "progress/soft-skills" . }} + {{ end }} +
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 @@ -
- {{ if .Site.Data.achievements }} -

Achievements

- -
- +
+

{{ .section.name }}

+
+ - -
- {{ range .Site.Data.achievements.achievements }} - {{ partial "misc/achievement.html" . }} - {{ end }} -
- {{ end }} +
+ +
+ {{ range .achievements }} + {{ partial "misc/achievement.html" . }} + {{ end }} +
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 @@ -
- {{ if .Site.Data.experiences }} -

Experiences

+
+

{{ .section.name }}

-
- {{ $totalExperiences:= len .Site.Data.experiences.experiences }} - {{ range $index,$experience:= .Site.Data.experiences.experiences }} - {{ if eq (mod $index 2) 0 }} -
- {{ partial "experiences/vertical-line.html" $index }} - {{ partial "experiences/experience-info.html" $experience }} -
- {{else}} -
- {{ partial "experiences/experience-info.html" $experience }} - {{ partial "experiences/vertical-line.html" $index }} -
- {{ end }} - {{ if lt $index (sub $totalExperiences 1) }} - {{ partial "experiences/horizontal-line.html" $index }} - {{ end }} +
+ {{ $totalExperiences:= len .experiences }} + {{ range $index,$experience:= .experiences }} + {{ if eq (mod $index 2) 0 }} +
+ {{ partial "experiences/vertical-line.html" $index }} + {{ partial "experiences/experience-info.html" $experience }} +
+ {{else}} +
+ {{ partial "experiences/experience-info.html" $experience }} + {{ partial "experiences/vertical-line.html" $index }} +
{{ end }} -
- {{ end }} + {{ if lt $index (sub $totalExperiences 1) }} + {{ partial "experiences/horizontal-line.html" $index }} + {{ end }} + {{ end }} +
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 @@
Navigation
- {{ if .Site.Data.site }} -
    - {{ range .Site.Data.site.menus }} + {{ if .Site.Data.sections }} + + {{- end }} +
{{ end }} +
Contact Me
    - {{ range $key,$value:=.Site.Data.site.author.contactInfo }} + {{ range $key,$value:=.Site.Params.author.contactInfo }}
  • {{ title $key }}: {{ $value }}
    • {{ end }}
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 @@
- -

Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }} +

Hi, I am {{ if .Site.Params.author.name }}{{ .Site.Params.author.name }}{{ else }}Jane Doe{{ end }}

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index a299fcf..6e3548c 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -16,15 +16,35 @@
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 @@ -
- {{ if .Site.Data.projects }} -

Projects

-
-
- {{ range .Site.Data.projects.buttons }} - - {{ end }} -
+
+

{{ .section.name }}

+
+
+ {{ range .buttons }} + + {{ end }}
-
-
- {{ range .Site.Data.projects.projects }} - {{ partial "cards/project" . }} - {{ end }} -
+
+
+
+ {{ range .projects }} + {{ partial "cards/project" . }} + {{ end }}
- {{ end }} +
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 @@ -
-

Recent Posts

+
+

{{ .section.name }}

- {{ 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 }}
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 @@ -
- {{ if .Site.Data.skills }} -

Skills

+
+

{{ .section.name }}

-
-
- {{ range .Site.Data.skills.skills }} - {{ partial "cards/skill.html" . }} - {{ end }} -
+
+
+ {{ range .skills }} + {{ partial "cards/skill.html" . }} + {{ end }}
- {{ end }} +
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;") } } }