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

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);
+  }
+}

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;
 }

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;
   }
 }

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;
 }
 

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;
 }

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;
+  }
 }

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;")
         }
       }
     }