Make Skills and Projects cards linkable (#46)

* Project card header is now can be clicked

* skill is card now having url to add on it's header

* urls added to some skills

* div class synced with original

* guthub button text synced with original

* text decoration removed

* remove next line in card header for text

* whole Skill Card now is under hyperlink

* hyperlink class separated from card

* removed text-decoration from .card class

* ProjectCard header hyperlink decoration removed

* call adjustSkillCardsHeight after page is loaded

* Add "#" in href field when respective URL is not provided

Co-authored-by: hossainemruz <emruz@appscode.com>

exampleSite/data/sections/skills.yaml

@@ -13,10 +13,12 @@ skills:
 - name: Kubernetes
   icon: "images/skills/kubernetes.png"
   summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs."
+  url: "https://kubernetes.io/"
 
 - name: Go Development
   icon: "images/skills/go.png"
   summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  url: "https://golang.org/"
 
 - name: Cloud Computing
   icon: "images/skills/cloud.png"
@@ -25,10 +27,12 @@ skills:
 - name: Docker
   icon: "images/skills/docker.svg"
   summary: "Write most of the programs as dockerized container. Experienced with multi-stage, multi-arch build process."
+  url: "https://www.docker.com/"
 
 - name: Prometheus
   icon: "images/skills/prometheus.png"
   summary: "Capable of setup, configure Prometheus metrics. Experienced with PromQL, AlertManager. Also, experienced with writing metric exporters."
+  url: "https://prometheus.io/"
 
 - name: Linux
   icon: "images/skills/linux.png"
@@ -37,6 +41,7 @@ skills:
 - name: Git
   icon: "images/skills/git.png"
   summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
+  url: "https://git-scm.com/"
 
 - name: C++
   icon: "images/skills/c++.png"

layouts/partials/cards/project.html

@@ -4,18 +4,20 @@
 >
   <div class="card mt-1">
     <div class="card">
-      <div class="card-header">
-        <div class="d-flex">
-          {{ if .logo }}
-          <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
-          {{ end }}
-          <h5 class="card-title mb-0">{{ .name }}</h5>
+      <a class="card-header" href="{{ if .repo }}{{ .repo }}{{ else if .url }}{{ .url }}{{ else }}#{{ end }}">
+        <div>
+          <div class="d-flex">
+            {{ if .logo }}
+            <img class="card-img-xs" src="{{ .logo }}" alt="{{ .name }}" />
+            {{ end }}
+            <h5 class="card-title mb-0">{{ .name }}</h5>
+          </div>
+          <div class="sub-title">
+            <span>{{ .role }}</span>
+            <span>{{ .timeline }}</span>
+          </div>
         </div>
-        <div class="sub-title">
-          <span>{{ .role }}</span>
-          <span>{{ .timeline }}</span>
-        </div>
-      </div>
+      </a>
       <div class="card-body text-justify pt-1 pb-1">
         <p>{{ .summary | markdownify }}</p>
         <span class="float-right">

layouts/partials/cards/skill.html

@@ -1,13 +1,15 @@
 <div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
-  <div class="card">
-    <div class="card-head d-flex">
-      {{ if .icon }}
+  <a class="skill-card-link" href="{{ if .url }}{{ .url }}{{ else }}#{{ end }}">
+    <div class="card">
+      <div class="card-head d-flex">
+        {{ if .icon }}
         <img class="card-img-xs" src="{{ .icon }}" alt="{{ .name }}" />
-      {{ end }}
-      <h5 class="card-title">{{ .name }}</h5>
+        {{ end }}
+        <h5 class="card-title">{{ .name }}</h5>
+      </div>
+      <div class="card-body">
+        <p class="card-text">{{ .summary | markdownify }}</p>
+      </div>
     </div>
-    <div class="card-body">
-      <p class="card-text">{{ .summary | markdownify }}</p>
-    </div>
-  </div>
+  </a>
 </div>

static/assets/css/navigators/navbar.css

@@ -140,7 +140,6 @@
 @media (max-width: 1024px) {
   .top-navbar .container {
     max-width: 100%;
-    padding: 0;
   }
 
   .initial-navbar .navbar-nav .active,
@@ -183,11 +182,6 @@
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
-  .top-navbar .container {
-    max-width: 100%;
-    padding: 0;
-  }
-
   .initial-navbar .navbar-nav .active,
   .initial-navbar li a:hover {
     color: #2098d1;
@@ -228,11 +222,6 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .top-navbar .container {
-    max-width: 100%;
-    padding: 0;
-  }
-
   .initial-navbar .navbar-nav .active,
   .initial-navbar li a:hover {
     color: #2098d1;
@@ -273,9 +262,6 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .final-navbar {
-    padding: 0;
-  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */

static/assets/css/sections/projects.css

@@ -2,6 +2,7 @@
   background-color: #f9fafc;
   padding: 0.7rem;
   padding-bottom: 0rem;
+  text-decoration: none;
 }
 
 .projects-section .card .card-img-xs {

static/assets/css/sections/skills.css

@@ -6,6 +6,10 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
+.skills-section .skill-card-link {
+  text-decoration: none;
+}
+
 .skills-section .card .card-img-xs {
   margin-right: 0.5rem;
 }

static/assets/js/home.js

@@ -69,20 +69,22 @@ var projectCards;
         // primary skills
         var skillCards = document.getElementById("primary-skills");
         if (skillCards != null) {
-          var el = skillCards.children;
+          var cardElems = skillCards.getElementsByClassName("card");
           var maxHeight = 0;
-          for (let i = 0; i < el.length; i++) {
-            if (el[i].children[0].clientHeight > maxHeight) {
-              maxHeight = el[i].children[0].clientHeight;
+          for (let i = 0; i < cardElems.length; i++) {
+            if (cardElems.item(i).clientHeight > maxHeight) {
+              maxHeight = cardElems.item(i).clientHeight;
             }
           }
-          for (let i = 0; i < el.length; i++) {
-            el[i].children[0].setAttribute("style", "min-height: " + maxHeight + "px;")
+          for (let i = 0; i < cardElems.length; i++) {
+            cardElems.item(i).setAttribute("style", "min-height: " + maxHeight + "px;");
           }
         }
       }
     }
-    adjustSkillCardsHeight();
+    $(window).on("load", function () {
+      adjustSkillCardsHeight();
+    });
 
     // ================== Project cards =====================
     // Add click action on project category selector buttons