Add filtering for projects (addresses #51) + add fade animation

archetypes/project.md

@@ -1,7 +1,21 @@
 +++
+# Tags: can be used for filtering projects.
+# Example: `tags = ["machine-learning", "deep-learning"]`
 tags = []
+
+# Project summary to display on homepage.
 summary = ""
+
+# Optional image to display on homepage.
+image_preview = ""
+
+# Optional image to display on project detail page.
 image = ""
-math = false
+
+# Optional external URL for project (replaces project detail page).
 external_link = ""
+
+# Does the project detail page use math formatting?
+math = false
+  
 +++

exampleSite/content/home/projects.md

@@ -12,5 +12,26 @@ widget = "projects"
 # Order that this section will appear in.
 weight = 40
 
+# View.
+# Customize how projects are displayed.
+# Legend: 0 = list, 1 = cards.
+view = 1
+
+# Filter toolbar.
+# Add or remove as many filters (`[[filter]]` instances) as you like.
+# Use "*" tag to show all projects or an existing tag prefixed with "." to filter by specific tag.
+# To remove toolbar, delete/comment all instances of `[[filter]]` below.
+[[filter]]
+  name = "All"
+  tag = "*"
+  
+[[filter]]
+  name = "Deep Learning"
+  tag = ".deep-learning"
+
+[[filter]]
+  name = "Other"
+  tag = ".demo"
+
 +++
 

exampleSite/content/project/deep-learning.md

@@ -2,9 +2,9 @@
 client_name = ""
 date = "2016-04-27"
 image = ""
-image_preview = ""
+image_preview = "bubbles.jpg"
 summary = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-tags = []
+tags = ["deep-learning"]
 title = "Deep Learning"
 external_link = ""
 

exampleSite/content/project/example-external-project.md

@@ -2,9 +2,9 @@
 client_name = ""
 date = "2016-04-27"
 image = ""
-image_preview = ""
+image_preview = "boards.jpg"
 summary = "An example of linking directly to an external project website using `external_link`."
-tags = []
+tags = ["demo"]
 title = "External Project"
 external_link = "http://example.org"
 

layouts/partials/footer.html

@@ -2,6 +2,7 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
     <script src="{{ "/js/jquery-1.12.3.min.js" | relURL }}"></script>
     <script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
+    <script src="{{ "/js/isotope.pkgd.min.js" | relURL }}"></script>
     <script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
     {{ range .Site.Params.custom_js }}
     <script src="{{ "/js/" | relURL }}{{ . }}"></script>

layouts/partials/widgets/projects.html

@@ -15,36 +15,68 @@
       <div class="col-xs-12 col-md-8">
         {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
-        <ul class="fa-ul">
-          {{ range where $.Data.Pages "Type" "project" }}
-          <li>
-            <span class="project-title">
-            {{ if .Content }}
-              <a href="{{ .Permalink }}">
-            {{ else }}
-              {{ with .Params.external_link }}<a href="{{ . }}">{{ end }}
-            {{ end }}
-            <i class="fa-li fa fa-files-o pub-icon" aria-hidden="true"></i>
-            {{ .Title }}
-            {{ if .Content }}</a>{{ else }}{{ with .Params.external_link }}</a>{{ end }}{{ end }}
-            </span>
-
-            {{ with .Params.summary }}<p class="project-summary">{{ . }}</p>{{ end }}
-
-            {{ if isset .Params "tags" }}
-            {{ $tagsLen := len .Params.tags }}
-            {{ if gt $tagsLen 0 }}
-            <div class="project-tags">
-              <i class="fa fa-tags"></i>
-              {{ range $k, $v := .Params.tags }}
-              {{ . }}{{ if lt $k (sub $tagsLen 1) }}, {{ end }}
+        <div class="project-toolbar">
+          <div id="filters">
+            <div class="btn-toolbar">
+              <div class="btn-group">
+              {{ range $page.Params.filter }}
+                <a href="#" data-filter="{{ .tag }}" class="btn btn-primary btn-large{{ if eq .tag "*" }} active{{ end }}">{{ .name }}</a>
               {{ end }}
+              </div>
             </div>
+          </div>
+        </div>
+
+        {{ if eq $page.Params.view 0 }}
+
+        <div id="container-projects" class="isotope">
+          <ul class="fa-ul" style="position: relative">
+
+            {{ range where $.Data.Pages "Type" "project" }}
+            <li class="project-item isotope-item {{ delimit .Params.tags " " }}">
+              <span class="project-title">
+              {{ if .Content }}
+              <a href="{{ .Permalink }}">
+              {{ else }}
+                {{ with .Params.external_link }}<a href="{{ . }}">{{ end }}
+              {{ end }}
+              <i class="fa-li fa fa-files-o pub-icon" aria-hidden="true"></i>
+              {{ .Title }}
+              {{ if .Content }}</a>{{ else }}{{ with .Params.external_link }}</a>{{ end }}{{ end }}
+              </span>
+              {{ with .Params.summary }}<p class="project-summary">{{ . }}</p>{{ end }}
+            </li>
             {{ end }}
-            {{ end }}
-          </li>
+
+          </ul>
+        </div>
+
+        {{ else }}
+
+        <div id="container-projects" class="row isotope">
+
+          {{ range $project := where $.Data.Pages "Type" "project" }}
+          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 project-item isotope-item {{ delimit .Params.tags " " }}">
+            <div class="card">
+              {{ with $project.Params.image_preview }}
+              <a href="{{ $project.Permalink }}" title="" class="card-image hover-overlay">
+                <img src="{{ "/img/" | relURL }}{{ . }}" alt="" class="img-responsive">
+              </a>
+              {{ end }}
+              <div class="card-text">
+                <h4><a href="{{ $project.Permalink }}">{{ .Title }}</a></h4>
+                <div class="card-desription">
+                  {{ with $project.Params.summary }}<p>{{ . }}</p>{{ end }}
+                </div>
+              </div>
+            </div>
+          </div>
           {{ end }}
-        </ul>
+
+        </div>
+
+        {{ end }}
+
       </div>
     </div>
 

static/css/hugo-academic.css

@@ -113,6 +113,11 @@ video {
   display: block;
 }
 
+.img-responsive {
+  /* Extend Bootstrap declaration with centering. */
+  margin: 0 auto;
+}
+
 figcaption:before {
   font-weight: 700;
   text-transform: uppercase;
@@ -176,9 +181,20 @@ blockquote p:last-child {
  *  Home Sections
  **************************************************/
 
+@keyframes intro {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .home-section {
   background-color: rgb(255, 255, 255);
   padding: 110px 0 110px 0;
+  animation: intro 0.3s both;
+  animation-delay: 0.15s;
 }
 @media screen and (max-width: 768px) {
   .home-section {
@@ -344,6 +360,11 @@ ul.share li:hover .fa {
  *  Blog Articles
  **************************************************/
 
+article {
+  animation: intro 0.3s both;
+  animation-delay: 0.15s;
+}
+
 .article-title {
   font-size: 1.75rem;
 }
@@ -497,6 +518,122 @@ ul.share li:hover .fa {
   color: #9c9c9c;
 }
 
+#container-projects {
+  display: block;
+  position: relative;
+  /*margin-top: 5rem;*/
+  overflow: hidden;
+}
+
+.project-toolbar{
+  margin-bottom: 2rem;
+}
+
+.project-item {
+  margin-bottom: 1.5rem;
+}
+
+.isotope-item {
+  transition-property: transform, opacity;
+  transition-duration: 0.8s;
+  z-index: 2;
+}
+
+.isotope-item:hover{
+  z-index: 3;
+}
+
+/*************************************************
+ *  Card component
+ **************************************************/
+
+.card {
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
+  transition: all 0.2s ease-out;
+}
+
+.card .card-image {
+  display: block;
+  position: relative;
+  min-height: 100px;
+}
+
+.card h4 {
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.card h4 a {
+  color: #000;
+  border-bottom: solid 1px transparent;
+}
+
+.card h4 a:hover {
+  color: #000;
+  border-bottom: solid 1px #000;
+  text-decoration: none;
+}
+
+.card .card-text {
+  padding: 0.75rem 1rem 0.75rem;
+}
+
+.card .card-text p {
+  color: #999999;
+  font-size: 0.75rem;
+}
+
+.card p:last-child {
+  margin-bottom: 0;
+}
+
+.card .card-image.hover-overlay:before {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  content: " ";
+  opacity: 0;
+  transition: all 0.2s ease-out;
+}
+
+.card .card-image.hover-overlay:after {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  transform: translate(0, -50%);
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  font-family: 'FontAwesome';
+  content: '\f0c1';
+  text-align: center;
+  font-size: 3rem;
+  color: #666;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.card:hover .card-image.hover-overlay:before {
+  opacity: 0.8;
+}
+
+.card:hover .card-image.hover-overlay:after {
+  opacity: 0.6;
+}
+
 /*************************************************
  *  Contact
  **************************************************/
@@ -548,6 +685,7 @@ footer a#back_to_top i {
 
 .btn-primary {
   border-color: #0095eb;
+  background: #0095eb;
 }
 
 .btn-primary:hover,
@@ -558,6 +696,34 @@ footer a#back_to_top i {
   background: #0095eb;
 }
 
+/*************************************************
+ *  Toolbar Buttons
+ **************************************************/
+
+.btn-toolbar .btn {
+  font-size: 0.9rem;
+  padding: 10px 14px 9px;
+  border: none;
+}
+
+.btn-toolbar .btn:first-child {
+  border-radius: 6px 0 0 6px;
+}
+
+.btn-toolbar .btn:last-child {
+  border-radius: 0 6px 6px 0;
+}
+
+.btn-toolbar .btn.btn-primary:hover,
+.btn-toolbar .btn.btn-primary:focus {
+  background-color: rgba(0,149,235,0.6);
+}
+
+.btn-toolbar .btn.btn-primary:active,
+.btn-toolbar .btn.btn-primary.active {
+  background-color: rgba(0,89,175,1);
+}
+
 /*************************************************
  *  Button Outlines
  **************************************************/

static/js/hugo-academic.js

@@ -89,6 +89,26 @@
     }
   });
 
+  /* ---------------------------------------------------------------------------
+   * Filter projects.
+   * --------------------------------------------------------------------------- */
+
+  var $container = $('#container-projects');
+
+  // Initialize Isotope.
+  $container.isotope({
+    itemSelector: '.isotope-item',
+    layoutMode: 'masonry'
+  });
+
+  // Filter items when filter link is clicked.
+  $('#filters a').click(function () {
+    var selector = $(this).attr('data-filter');
+    $container.isotope({filter: selector});
+    $(this).removeClass('active').addClass('active').siblings().removeClass('active all');
+    return false;
+  });
+
   /* ---------------------------------------------------------------------------
    * On window load.
    * --------------------------------------------------------------------------- */