Display project card technology tags (#243)

* Display project card technology tags

* Fix tag CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

exampleSite/data/bn/sections/projects.yaml

@@ -38,7 +38,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead

exampleSite/data/cn/sections/projects.yaml

@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead

exampleSite/data/en/sections/projects.yaml

@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead

exampleSite/data/id/sections/projects.yaml

@@ -37,7 +37,7 @@ projects:
   repo: https://github.com/tensorflow/tensorflow
   #url: ""
   summary: An Open Source Machine Learning Framework for Everyone.
-  tags: ["professional", "machine-learning","academic"]
+  tags: ["professional", "machine-learning"]
 
 - name: A sample academic paper
   role: Team Lead

layouts/partials/cards/project.html

@@ -26,25 +26,39 @@
       </a>
       <div class="card-body text-justify pt-1 pb-1">
         <p>{{ .summary | markdownify }}</p>
-        <span class="float-right">
-          {{ if .repo }}
-          <a
-            class="github-button-inactive"
-            href="{{ .repo }}"
-            data-icon="octicon-standard"
-            data-show-count="true"
-            aria-label="Star {{ .name }}"
-            >Star</a
-          >
-          {{ else if .url }}
-          <a
-            class="btn btn-outline-info btn-sm mb-2"
-            href="{{ .url }}"
-            target="#"
-            >Details</a
-          >
+        <!-- Display project card technology tags -->
+        <div class="project-card-footer">
+          {{ if .tags }}
+            <div class="project-tags-holder">
+              {{ range $index,$tag:= .tags }}
+                  <span class="badge btn-info">
+                    {{ $tag }}
+                  </span>
+              {{ end }}
+            </div>
           {{ end }}
-        </span>
+          <div class="project-btn-holder">
+            {{ if .repo }}
+            <a
+              class="github-button-inactive project-btn"
+              href="{{ .repo }}"
+              data-icon="octicon-standard"
+              data-show-count="true"
+              aria-label="Star {{ .name }}"
+              >Star</a
+            >
+            {{ else if .url }}
+            <span>
+              <a
+                class="btn btn-outline-info btn-sm"
+                href="{{ .url }}"
+                target="#"
+                >Details</a
+              >
+            </span>
+            {{ end }}
+          </div>
+        </div>
       </div>
     </div>
   </div>

static/css/sections/projects.css

@@ -29,6 +29,26 @@
   padding: 1rem !important;
 }
 
+.project-card-footer {
+  display: flex;
+}
+
+.project-tags-holder {
+  width: 70%;
+}
+
+.project-btn-holder {
+  width: 30%;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.project-btn-holder span {
+  justify-content: flex-end;
+  display: flex;
+}
+
 /* ============= Device specific fixes ======= */
 
 /* Large screens such as TV */