diff --git a/public/img/tile-svgs/001-cloud-computing.svg b/public/img/tile-svgs/001-cloud-computing.svg
new file mode 100644
index 00000000..7636ae4a
--- /dev/null
+++ b/public/img/tile-svgs/001-cloud-computing.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/002-worldwide.svg b/public/img/tile-svgs/002-worldwide.svg
new file mode 100644
index 00000000..88aaac80
--- /dev/null
+++ b/public/img/tile-svgs/002-worldwide.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/003-rss.svg b/public/img/tile-svgs/003-rss.svg
new file mode 100644
index 00000000..eeb98cf9
--- /dev/null
+++ b/public/img/tile-svgs/003-rss.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/004-twitter.svg b/public/img/tile-svgs/004-twitter.svg
new file mode 100644
index 00000000..ca72ba49
--- /dev/null
+++ b/public/img/tile-svgs/004-twitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/005-hashtag.svg b/public/img/tile-svgs/005-hashtag.svg
new file mode 100644
index 00000000..6ab5c73b
--- /dev/null
+++ b/public/img/tile-svgs/005-hashtag.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/006-pin.svg b/public/img/tile-svgs/006-pin.svg
new file mode 100644
index 00000000..3324c2af
--- /dev/null
+++ b/public/img/tile-svgs/006-pin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/007-heart.svg b/public/img/tile-svgs/007-heart.svg
new file mode 100644
index 00000000..bd7fee69
--- /dev/null
+++ b/public/img/tile-svgs/007-heart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/008-paypal.svg b/public/img/tile-svgs/008-paypal.svg
new file mode 100644
index 00000000..ab1fcb0c
--- /dev/null
+++ b/public/img/tile-svgs/008-paypal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/009-xing.svg b/public/img/tile-svgs/009-xing.svg
new file mode 100644
index 00000000..5c37af2e
--- /dev/null
+++ b/public/img/tile-svgs/009-xing.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/010-star.svg b/public/img/tile-svgs/010-star.svg
new file mode 100644
index 00000000..70035db3
--- /dev/null
+++ b/public/img/tile-svgs/010-star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/011-windows.svg b/public/img/tile-svgs/011-windows.svg
new file mode 100644
index 00000000..598814e6
--- /dev/null
+++ b/public/img/tile-svgs/011-windows.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/012-network.svg b/public/img/tile-svgs/012-network.svg
new file mode 100644
index 00000000..f0927456
--- /dev/null
+++ b/public/img/tile-svgs/012-network.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/013-facebook.svg b/public/img/tile-svgs/013-facebook.svg
new file mode 100644
index 00000000..5dd472af
--- /dev/null
+++ b/public/img/tile-svgs/013-facebook.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/014-instagram.svg b/public/img/tile-svgs/014-instagram.svg
new file mode 100644
index 00000000..3c798108
--- /dev/null
+++ b/public/img/tile-svgs/014-instagram.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/015-linkedin.svg b/public/img/tile-svgs/015-linkedin.svg
new file mode 100644
index 00000000..8e50eaa8
--- /dev/null
+++ b/public/img/tile-svgs/015-linkedin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/016-like.svg b/public/img/tile-svgs/016-like.svg
new file mode 100644
index 00000000..c0c9b260
--- /dev/null
+++ b/public/img/tile-svgs/016-like.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/017-dislike.svg b/public/img/tile-svgs/017-dislike.svg
new file mode 100644
index 00000000..d12e2ce1
--- /dev/null
+++ b/public/img/tile-svgs/017-dislike.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/018-youtube.svg b/public/img/tile-svgs/018-youtube.svg
new file mode 100644
index 00000000..5136516f
--- /dev/null
+++ b/public/img/tile-svgs/018-youtube.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/019-messenger.svg b/public/img/tile-svgs/019-messenger.svg
new file mode 100644
index 00000000..9149d71e
--- /dev/null
+++ b/public/img/tile-svgs/019-messenger.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/020-telegram.svg b/public/img/tile-svgs/020-telegram.svg
new file mode 100644
index 00000000..1121c7b1
--- /dev/null
+++ b/public/img/tile-svgs/020-telegram.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/021-chat.svg b/public/img/tile-svgs/021-chat.svg
new file mode 100644
index 00000000..bca4b412
--- /dev/null
+++ b/public/img/tile-svgs/021-chat.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/022-happy.svg b/public/img/tile-svgs/022-happy.svg
new file mode 100644
index 00000000..330a47e9
--- /dev/null
+++ b/public/img/tile-svgs/022-happy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/023-sad.svg b/public/img/tile-svgs/023-sad.svg
new file mode 100644
index 00000000..82c5ead0
--- /dev/null
+++ b/public/img/tile-svgs/023-sad.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/024-file.svg b/public/img/tile-svgs/024-file.svg
new file mode 100644
index 00000000..77602884
--- /dev/null
+++ b/public/img/tile-svgs/024-file.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/025-file-1.svg b/public/img/tile-svgs/025-file-1.svg
new file mode 100644
index 00000000..132539b4
--- /dev/null
+++ b/public/img/tile-svgs/025-file-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/026-playstore.svg b/public/img/tile-svgs/026-playstore.svg
new file mode 100644
index 00000000..c6d8d17b
--- /dev/null
+++ b/public/img/tile-svgs/026-playstore.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/027-whatsapp.svg b/public/img/tile-svgs/027-whatsapp.svg
new file mode 100644
index 00000000..e65d129f
--- /dev/null
+++ b/public/img/tile-svgs/027-whatsapp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/028-skype.svg b/public/img/tile-svgs/028-skype.svg
new file mode 100644
index 00000000..2cd1c390
--- /dev/null
+++ b/public/img/tile-svgs/028-skype.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/029-retweet.svg b/public/img/tile-svgs/029-retweet.svg
new file mode 100644
index 00000000..1a8e5884
--- /dev/null
+++ b/public/img/tile-svgs/029-retweet.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/030-chat-1.svg b/public/img/tile-svgs/030-chat-1.svg
new file mode 100644
index 00000000..8910905b
--- /dev/null
+++ b/public/img/tile-svgs/030-chat-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/031-photo-camera.svg b/public/img/tile-svgs/031-photo-camera.svg
new file mode 100644
index 00000000..5f914f8c
--- /dev/null
+++ b/public/img/tile-svgs/031-photo-camera.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/032-network-1.svg b/public/img/tile-svgs/032-network-1.svg
new file mode 100644
index 00000000..bee1a342
--- /dev/null
+++ b/public/img/tile-svgs/032-network-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/033-image.svg b/public/img/tile-svgs/033-image.svg
new file mode 100644
index 00000000..3424b398
--- /dev/null
+++ b/public/img/tile-svgs/033-image.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/034-myspace.svg b/public/img/tile-svgs/034-myspace.svg
new file mode 100644
index 00000000..0e3a7f34
--- /dev/null
+++ b/public/img/tile-svgs/034-myspace.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/035-user.svg b/public/img/tile-svgs/035-user.svg
new file mode 100644
index 00000000..65a96abe
--- /dev/null
+++ b/public/img/tile-svgs/035-user.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/036-network-2.svg b/public/img/tile-svgs/036-network-2.svg
new file mode 100644
index 00000000..37f37e25
--- /dev/null
+++ b/public/img/tile-svgs/036-network-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/037-information.svg b/public/img/tile-svgs/037-information.svg
new file mode 100644
index 00000000..a94cd530
--- /dev/null
+++ b/public/img/tile-svgs/037-information.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/038-like-1.svg b/public/img/tile-svgs/038-like-1.svg
new file mode 100644
index 00000000..ebe71911
--- /dev/null
+++ b/public/img/tile-svgs/038-like-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/039-happy-1.svg b/public/img/tile-svgs/039-happy-1.svg
new file mode 100644
index 00000000..60e8bb83
--- /dev/null
+++ b/public/img/tile-svgs/039-happy-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/040-deviantart.svg b/public/img/tile-svgs/040-deviantart.svg
new file mode 100644
index 00000000..a6a5f0ab
--- /dev/null
+++ b/public/img/tile-svgs/040-deviantart.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/041-vimeo.svg b/public/img/tile-svgs/041-vimeo.svg
new file mode 100644
index 00000000..614742fd
--- /dev/null
+++ b/public/img/tile-svgs/041-vimeo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/042-behance.svg b/public/img/tile-svgs/042-behance.svg
new file mode 100644
index 00000000..9f288b4d
--- /dev/null
+++ b/public/img/tile-svgs/042-behance.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/043-email.svg b/public/img/tile-svgs/043-email.svg
new file mode 100644
index 00000000..5d02082c
--- /dev/null
+++ b/public/img/tile-svgs/043-email.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/044-flickr.svg b/public/img/tile-svgs/044-flickr.svg
new file mode 100644
index 00000000..444de11d
--- /dev/null
+++ b/public/img/tile-svgs/044-flickr.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/045-suitcase.svg b/public/img/tile-svgs/045-suitcase.svg
new file mode 100644
index 00000000..959fb834
--- /dev/null
+++ b/public/img/tile-svgs/045-suitcase.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/046-network-3.svg b/public/img/tile-svgs/046-network-3.svg
new file mode 100644
index 00000000..030ad1c1
--- /dev/null
+++ b/public/img/tile-svgs/046-network-3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/047-chat-2.svg b/public/img/tile-svgs/047-chat-2.svg
new file mode 100644
index 00000000..863f4b76
--- /dev/null
+++ b/public/img/tile-svgs/047-chat-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/048-notification.svg b/public/img/tile-svgs/048-notification.svg
new file mode 100644
index 00000000..a354c250
--- /dev/null
+++ b/public/img/tile-svgs/048-notification.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/049-agenda.svg b/public/img/tile-svgs/049-agenda.svg
new file mode 100644
index 00000000..8bd7c3a9
--- /dev/null
+++ b/public/img/tile-svgs/049-agenda.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/img/tile-svgs/050-megaphone.svg b/public/img/tile-svgs/050-megaphone.svg
new file mode 100644
index 00000000..73033e0a
--- /dev/null
+++ b/public/img/tile-svgs/050-megaphone.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index f07f76ea..55b223bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
-
diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index fc157b7e..3ef2dd9e 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -70,7 +70,7 @@ export default {
diff --git a/src/components/ItemGroup.vue b/src/components/ItemGroup.vue
index 0ace4dd1..4b83d541 100644
--- a/src/components/ItemGroup.vue
+++ b/src/components/ItemGroup.vue
@@ -11,6 +11,7 @@
:title="item.title"
:description="item.description"
:icon="item.icon"
+ :svg="item.svg"
/>
diff --git a/src/data/item-data.json b/src/data/item-data.json
index d467a27a..65b0a7e2 100644
--- a/src/data/item-data.json
+++ b/src/data/item-data.json
@@ -287,5 +287,43 @@
"url": "https://online.sjdaccountancy.com/dashboard"
}
]
+ },
+ {
+ "id": "008",
+ "name": "Social Profiles",
+ "collapsed": true,
+ "cols": 1,
+ "items": [
+ {
+ "id":"001",
+ "title": "Twitter",
+ "svg": "004-twitter",
+ "url": "https://twitter.com/Lissy_Sykes"
+ },
+ {
+ "id":"002",
+ "title": "Instagram",
+ "svg": "014-instagram",
+ "url": "https://www.instagram.com/lissy_sykes93/"
+ },
+ {
+ "id":"003",
+ "title": "Facebook",
+ "svg": "013-facebook",
+ "url": "https://fb.com/liss.sykes"
+ },
+ {
+ "id":"004",
+ "title": "LinkedIn",
+ "svg": "015-linkedin",
+ "url": "https://www.linkedin.com/in/aliciasykes/"
+ },
+ {
+ "id":"005",
+ "title": "VK",
+ "icon": "",
+ "url": "https://vk.com/id554636914"
+ }
+ ]
}
]
\ No newline at end of file
diff --git a/src/lib/vue-masonry-css.js b/src/lib/vue-masonry-css.js
new file mode 100644
index 00000000..08baba9e
--- /dev/null
+++ b/src/lib/vue-masonry-css.js
@@ -0,0 +1,225 @@
+// the component name ``
+// can be overridden with `Vue.use(Masonry, { name: 'the-masonry' });`
+const componentName = 'masonry';
+
+const props = {
+ tag: {
+ type: [String],
+ default: 'div'
+ },
+ cols: {
+ type: [Object, Number, String],
+ default: 2
+ },
+ gutter: {
+ type: [Object, Number, String],
+ default: 0
+ },
+ css: {
+ type: [Boolean],
+ default: true
+ },
+ columnTag: {
+ type: [String],
+ default: 'div'
+ },
+ columnClass: {
+ type: [String, Array, Object],
+ default: () => []
+ },
+ columnAttr: {
+ type: [Object],
+ default: () => ({})
+ }
+};
+
+// Get the resulting value from `:col=` prop
+// based on the window width
+const breakpointValue = (mixed, windowWidth) => {
+ const valueAsNum = parseInt(mixed);
+
+ if(valueAsNum > -1) {
+ return mixed;
+ }else if(typeof mixed !== 'object') {
+ return 0;
+ }
+
+ let matchedBreakpoint = Infinity;
+ let matchedValue = mixed.default || 0;
+
+ for(let k in mixed) {
+ const breakpoint = parseInt(k);
+ const breakpointValRaw = mixed[breakpoint];
+ const breakpointVal = parseInt(breakpointValRaw);
+
+ if(isNaN(breakpoint) || isNaN(breakpointVal)) {
+ continue;
+ }
+
+ const isNewBreakpoint = windowWidth <= breakpoint && breakpoint < matchedBreakpoint;
+
+ if(isNewBreakpoint) {
+ matchedBreakpoint = breakpoint;
+ matchedValue = breakpointValRaw;
+ }
+ }
+
+ return matchedValue;
+}
+
+const component = {
+ props,
+
+ data() {
+ return {
+ displayColumns: 2,
+ displayGutter: 0
+ }
+ },
+
+ mounted() {
+ this.$nextTick(() => {
+ this.reCalculate();
+ });
+
+ // Bind resize handler to page
+ if(window) {
+ window.addEventListener('resize', this.reCalculate);
+ }
+ },
+
+ updated() {
+ this.$nextTick(() => {
+ this.reCalculate();
+ });
+ },
+
+ beforeDestroy() {
+ if(window) {
+ window.removeEventListener('resize', this.reCalculate);
+ }
+ },
+
+ methods: {
+ // Recalculate how many columns to display based on window width
+ // and the value of the passed `:cols=` prop
+ reCalculate() {
+ const previousWindowWidth = this.windowWidth;
+
+ this.windowWidth = (window ? window.innerWidth : null) || Infinity;
+
+ // Window resize events get triggered on page height
+ // change which when loading the page can result in multiple
+ // needless calculations. We prevent this here.
+ if(previousWindowWidth === this.windowWidth) {
+ return;
+ }
+
+ this._reCalculateColumnCount(this.windowWidth);
+
+ this._reCalculateGutterSize(this.windowWidth);
+ },
+
+ _reCalculateGutterSize(windowWidth) {
+ this.displayGutter = breakpointValue(this.gutter, windowWidth);
+ },
+
+ _reCalculateColumnCount(windowWidth) {
+ let newColumns = breakpointValue(this.cols, windowWidth);
+
+ // Make sure we can return a valid value
+ newColumns = Math.max(1, Number(newColumns) || 0);
+
+ this.displayColumns = newColumns;
+ },
+
+ _getChildItemsInColumnsArray() {
+ const columns = [];
+ let childItems = this.$slots.default || [];
+
+ // This component does not work with a child ..yet,
+ // so for now we think it may be helpful to ignore until we can find a way for support
+ if(childItems.length === 1 && childItems[0].componentOptions && childItems[0].componentOptions.tag == 'transition-group') {
+ childItems = childItems[0].componentOptions.children;
+ }
+
+ // Loop through child elements
+ for (let i = 0, visibleItemI = 0; i < childItems.length; i++, visibleItemI++) {
+ // skip Vue elements without tags, which includes
+ // whitespace elements and also plain text
+ if(!childItems[i].tag) {
+ visibleItemI--;
+
+ continue;
+ }
+
+ // Get the column index the child item will end up in
+ const columnIndex = visibleItemI % this.displayColumns;
+
+ if(!columns[columnIndex]) {
+ columns[columnIndex] = [];
+ }
+
+ columns[columnIndex].push(childItems[i]);
+ }
+
+ return columns;
+ }
+ },
+
+ render(createElement) {
+ const columnsContainingChildren = this._getChildItemsInColumnsArray();
+ const isGutterSizeUnitless = parseInt(this.displayGutter) === this.displayGutter * 1;
+ const gutterSizeWithUnit = isGutterSizeUnitless ? `${this.displayGutter}px` : this.displayGutter;
+
+ const columnStyle = {
+ boxSizing: 'border-box',
+ backgroundClip: 'padding-box',
+ width: `${100 / this.displayColumns}%`,
+ border: '0 solid transparent',
+ borderLeftWidth: gutterSizeWithUnit
+ };
+
+ const columns = columnsContainingChildren.map((children, index) => {
+ /// Create column element and inject the children
+ return createElement(this.columnTag, {
+ key: index + '-' + columnsContainingChildren.length,
+ style: this.css ? columnStyle : null,
+ class: this.columnClass,
+ attrs: this.columnAttr
+ }, children); // specify child items here
+ });
+
+ const containerStyle = {
+ display: ['-webkit-box', '-ms-flexbox', 'flex'],
+ marginLeft: `-${gutterSizeWithUnit}`
+ };
+
+ // Return wrapper with columns
+ return createElement(
+ this.tag, // tag name
+ this.css ? { style: containerStyle } : null, // element options
+ columns // column vue elements
+ );
+ }
+};
+
+const Plugin = function () {}
+
+Plugin.install = function (Vue, options) {
+ if (Plugin.installed) {
+ return;
+ }
+
+ if(options && options.name) {
+ Vue.component(options.name, component);
+ } else {
+ Vue.component(componentName, component);
+ }
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+ window.Vue.use(Plugin);
+}
+
+export default Plugin;
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 219d4eee..1f01c1bd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,8 +4,10 @@ import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
import './registerServiceWorker';
+import VueMasonry from './lib/vue-masonry-css'; // Thank you @PaulCollett 🙌 https://git.io/JeeYC
Vue.use(Element);
+Vue.use(VueMasonry);
Vue.config.productionTip = false;
new Vue({
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2732bb49..10d50e4d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,15 +4,21 @@