diff --git a/archetypes/project.md b/archetypes/project.md index b923f240..95a7febd 100644 --- a/archetypes/project.md +++ b/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 + +++ diff --git a/exampleSite/content/home/projects.md b/exampleSite/content/home/projects.md index 402ec6d0..ed02d4d4 100644 --- a/exampleSite/content/home/projects.md +++ b/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" + +++ diff --git a/exampleSite/content/project/deep-learning.md b/exampleSite/content/project/deep-learning.md index 44735ab6..b0e80c9b 100644 --- a/exampleSite/content/project/deep-learning.md +++ b/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 = "" diff --git a/exampleSite/content/project/example-external-project.md b/exampleSite/content/project/example-external-project.md index b9749819..84e24ccd 100644 --- a/exampleSite/content/project/example-external-project.md +++ b/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" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8266ab3a..5f35f627 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,6 +2,7 @@ + {{ range .Site.Params.custom_js }} diff --git a/layouts/partials/widgets/projects.html b/layouts/partials/widgets/projects.html index 59ccafe0..009643dd 100644 --- a/layouts/partials/widgets/projects.html +++ b/layouts/partials/widgets/projects.html @@ -15,36 +15,68 @@
{{ with $page.Content }}

{{ . | markdownify }}

{{ end }} - + +
+ + {{ end }} + diff --git a/static/css/hugo-academic.css b/static/css/hugo-academic.css index 5a219866..f20e6cb2 100644 --- a/static/css/hugo-academic.css +++ b/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 **************************************************/ diff --git a/static/img/boards.jpg b/static/img/boards.jpg new file mode 100644 index 00000000..fdde290f Binary files /dev/null and b/static/img/boards.jpg differ diff --git a/static/img/bubbles.jpg b/static/img/bubbles.jpg new file mode 100644 index 00000000..0952f719 Binary files /dev/null and b/static/img/bubbles.jpg differ diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js index 844f6621..e2988c22 100644 --- a/static/js/hugo-academic.js +++ b/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. * --------------------------------------------------------------------------- */ diff --git a/static/js/isotope.pkgd.min.js b/static/js/isotope.pkgd.min.js new file mode 100644 index 00000000..ae734b71 --- /dev/null +++ b/static/js/isotope.pkgd.min.js @@ -0,0 +1,12 @@ +/*! + * Isotope PACKAGED v3.0.1 + * + * Licensed GPLv3 for open source use + * or Isotope Commercial License for commercial use + * + * http://isotope.metafizzy.co + * Copyright 2016 Metafizzy + */ + +!function(t,e){"use strict";"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,s,a){function u(t,e,n){var o,s="$()."+i+'("'+e+'")';return t.each(function(t,u){var h=a.data(u,i);if(!h)return void r(i+" not initialized. Cannot call methods, i.e. "+s);var d=h[e];if(!d||"_"==e.charAt(0))return void r(s+" is not a valid method");var l=d.apply(h,n);o=void 0===o?l:o}),void 0!==o?o:t}function h(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new s(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(s.prototype.option||(s.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return u(this,t,e)}return h(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,s=t.console,r="undefined"==typeof s?function(){}:function(t){s.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var s=this._onceEvents&&this._onceEvents[t];o;){var r=s&&s[o];r&&(this.off(t,o),delete s[o]),o.apply(this,e),n+=r?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=-1==t.indexOf("%")&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;h>e;e++){var i=u[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s.isBoxSizeOuter=r=200==t(o.width),i.removeChild(e)}}function s(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var s=n(e);if("none"==s.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==s.boxSizing,l=0;h>l;l++){var f=u[l],c=s[f],m=parseFloat(c);a[f]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,y=a.paddingTop+a.paddingBottom,g=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,I=a.borderTopWidth+a.borderBottomWidth,z=d&&r,x=t(s.width);x!==!1&&(a.width=x+(z?0:p+_));var S=t(s.height);return S!==!1&&(a.height=S+(z?0:y+I)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(y+I),a.outerWidth=a.width+g,a.outerHeight=a.height+v,a}}var r,a="undefined"==typeof console?e:function(t){console.error(t)},u=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],h=u.length,d=!1;return s}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;ir?"round":"floor";s=Math[a](s),this.cols=Math.max(s,1)},i.prototype.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},i.prototype._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this._getColGroup(n),s=Math.min.apply(Math,o),r=o.indexOf(s),a={x:this.columnWidth*r,y:s},u=s+t.size.outerHeight,h=this.cols+1-o.length,d=0;h>d;d++)this.colYs[r+d]=u;return a},i.prototype._getColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++){var o=this.colYs.slice(n,n+t);e[n]=Math.max.apply(Math,o)}return e},i.prototype._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),s=o?n.left:n.right,r=s+i.outerWidth,a=Math.floor(s/this.columnWidth);a=Math.max(0,a);var u=Math.floor(r/this.columnWidth);u-=r%this.columnWidth?0:1,u=Math.min(this.cols-1,u);for(var h=this._getOption("originTop"),d=(h?n.top:n.bottom)+i.outerHeight,l=a;u>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},i.prototype._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},i.prototype._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},i.prototype.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}),function(t,e){"function"==typeof define&&define.amd?define("isotope/js/layout-modes/masonry",["../layout-mode","masonry/masonry"],e):"object"==typeof module&&module.exports?module.exports=e(require("../layout-mode"),require("masonry-layout")):e(t.Isotope.LayoutMode,t.Masonry)}(window,function(t,e){"use strict";var i=t.create("masonry"),n=i.prototype,o={_getElementOffset:!0,layout:!0,_getMeasurement:!0};for(var s in e.prototype)o[s]||(n[s]=e.prototype[s]);var r=n.measureColumns;n.measureColumns=function(){this.items=this.isotope.filteredItems,r.call(this)};var a=n._getOption;return n._getOption=function(t){return"fitWidth"==t?void 0!==this.options.isFitWidth?this.options.isFitWidth:this.options.fitWidth:a.apply(this.isotope,arguments)},i}),function(t,e){"function"==typeof define&&define.amd?define("isotope/js/layout-modes/fit-rows",["../layout-mode"],e):"object"==typeof exports?module.exports=e(require("../layout-mode")):e(t.Isotope.LayoutMode)}(window,function(t){"use strict";var e=t.create("fitRows"),i=e.prototype;return i._resetLayout=function(){this.x=0,this.y=0,this.maxY=0,this._getMeasurement("gutter","outerWidth")},i._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth+this.gutter,i=this.isotope.size.innerWidth+this.gutter;0!==this.x&&e+this.x>i&&(this.x=0,this.y=this.maxY);var n={x:this.x,y:this.y};return this.maxY=Math.max(this.maxY,this.y+t.size.outerHeight),this.x+=e,n},i._getContainerSize=function(){return{height:this.maxY}},e}),function(t,e){"function"==typeof define&&define.amd?define("isotope/js/layout-modes/vertical",["../layout-mode"],e):"object"==typeof module&&module.exports?module.exports=e(require("../layout-mode")):e(t.Isotope.LayoutMode)}(window,function(t){"use strict";var e=t.create("vertical",{horizontalAlignment:0}),i=e.prototype;return i._resetLayout=function(){this.y=0},i._getItemLayoutPosition=function(t){t.getSize();var e=(this.isotope.size.innerWidth-t.size.outerWidth)*this.options.horizontalAlignment,i=this.y;return this.y+=t.size.outerHeight,{x:e,y:i}},i._getContainerSize=function(){return{height:this.y}},e}),function(t,e){"function"==typeof define&&define.amd?define(["outlayer/outlayer","get-size/get-size","desandro-matches-selector/matches-selector","fizzy-ui-utils/utils","isotope/js/item","isotope/js/layout-mode","isotope/js/layout-modes/masonry","isotope/js/layout-modes/fit-rows","isotope/js/layout-modes/vertical"],function(i,n,o,s,r,a){return e(t,i,n,o,s,r,a)}):"object"==typeof module&&module.exports?module.exports=e(t,require("outlayer"),require("get-size"),require("desandro-matches-selector"),require("fizzy-ui-utils"),require("isotope/js/item"),require("isotope/js/layout-mode"),require("isotope/js/layout-modes/masonry"),require("isotope/js/layout-modes/fit-rows"),require("isotope/js/layout-modes/vertical")):t.Isotope=e(t,t.Outlayer,t.getSize,t.matchesSelector,t.fizzyUIUtils,t.Isotope.Item,t.Isotope.LayoutMode)}(window,function(t,e,i,n,o,s,r){function a(t,e){return function(i,n){for(var o=0;oa||a>r){var u=void 0!==e[s]?e[s]:e,h=u?1:-1;return(r>a?1:-1)*h}}return 0}}var u=t.jQuery,h=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(/^\s+|\s+$/g,"")},d=e.create("isotope",{layoutMode:"masonry",isJQueryFiltering:!0,sortAscending:!0});d.Item=s,d.LayoutMode=r;var l=d.prototype;l._create=function(){this.itemGUID=0,this._sorters={},this._getSorters(),e.prototype._create.call(this),this.modes={},this.filteredItems=this.items,this.sortHistory=["original-order"];for(var t in r.modes)this._initLayoutMode(t)},l.reloadItems=function(){this.itemGUID=0,e.prototype.reloadItems.call(this)},l._itemize=function(){for(var t=e.prototype._itemize.apply(this,arguments),i=0;ii;i++){var n=t[i];n.updateSortData()}};var f=function(){function t(t){if("string"!=typeof t)return t;var i=h(t).split(" "),n=i[0],o=n.match(/^\[(.+)\]$/),s=o&&o[1],r=e(s,n),a=d.sortDataParsers[i[1]]; +return t=a?function(t){return t&&a(r(t))}:function(t){return t&&r(t)}}function e(t,e){return t?function(e){return e.getAttribute(t)}:function(t){var i=t.querySelector(e);return i&&i.textContent}}return t}();d.sortDataParsers={parseInt:function(t){return parseInt(t,10)},parseFloat:function(t){return parseFloat(t)}},l._sort=function(){var t=this.options.sortBy;if(t){var e=[].concat.apply(t,this.sortHistory),i=a(e,this.options.sortAscending);this.filteredItems.sort(i),t!=this.sortHistory[0]&&this.sortHistory.unshift(t)}},l._mode=function(){var t=this.options.layoutMode,e=this.modes[t];if(!e)throw new Error("No layout mode: "+t);return e.options=this.options[t],e},l._resetLayout=function(){e.prototype._resetLayout.call(this),this._mode()._resetLayout()},l._getItemLayoutPosition=function(t){return this._mode()._getItemLayoutPosition(t)},l._manageStamp=function(t){this._mode()._manageStamp(t)},l._getContainerSize=function(){return this._mode()._getContainerSize()},l.needsResizeLayout=function(){return this._mode().needsResizeLayout()},l.appended=function(t){var e=this.addItems(t);if(e.length){var i=this._filterRevealAdded(e);this.filteredItems=this.filteredItems.concat(i)}},l.prepended=function(t){var e=this._itemize(t);if(e.length){this._resetLayout(),this._manageStamps();var i=this._filterRevealAdded(e);this.layoutItems(this.filteredItems),this.filteredItems=i.concat(this.filteredItems),this.items=e.concat(this.items)}},l._filterRevealAdded=function(t){var e=this._filter(t);return this.hide(e.needHide),this.reveal(e.matches),this.layoutItems(e.matches,!0),e.matches},l.insert=function(t){var e=this.addItems(t);if(e.length){var i,n,o=e.length;for(i=0;o>i;i++)n=e[i],this.element.appendChild(n.element);var s=this._filter(e).matches;for(i=0;o>i;i++)e[i].isLayoutInstant=!0;for(this.arrange(),i=0;o>i;i++)delete e[i].isLayoutInstant;this.reveal(s)}};var c=l.remove;return l.remove=function(t){t=o.makeArray(t);var e=this.getItems(t);c.call(this,t);for(var i=e&&e.length,n=0;i&&i>n;n++){var s=e[n];o.removeFrom(this.filteredItems,s)}},l.shuffle=function(){for(var t=0;t