isotope

n7best · n7best · commit 5576c87c6b93 · 2017-09-28T15:33:46.000-04:00
diff --git a/src/app.js b/src/app.js
@@ -52,4 +52,9 @@ wait(2000)
   container.appendChild(skills(container))
   container.appendChild(experiences(container))
   container.appendChild(portfolio(container))
+
+  return wait(1000)
+})
+.then( ()=> {
+  container.onMounted()
 })
diff --git a/src/app.sass b/src/app.sass
@@ -314,9 +314,7 @@ p {
   }
 
   &_photos {
-
-    
-
+    margin: 0 auto;
     &-item {
       position: relative;
       width: 30em;
@@ -333,6 +331,7 @@ p {
 
         .portfolio_photos-item-icon {
           opacity: 0;
+          font-size: 20em;
         }
 
         .portfolio_photos-item-title {
@@ -359,7 +358,7 @@ p {
       &-title {
         top: -10%;
         font-size: 4em;
-        transition: all .5s .3s;
+        transition: all .5s .1s;
         span:nth-child(even) {
           z-index: 15;
         }
@@ -372,7 +371,7 @@ p {
         z-index: 20;
         font-size: 15em;
         margin: 0;
-        transition: all .3s;
+        transition: all .5s;
         -webkit-text-fill-color: transparent !important;
         -webkit-background-clip: text !important;
         background-size: contain;
diff --git a/src/index.hbs b/src/index.hbs
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
+    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
     {{#if js}}
       <script>
         {{{ js }}}
diff --git a/src/view/portfolio.js b/src/view/portfolio.js
@@ -6,7 +6,7 @@ const data = [
     {
         title: 'Project Web',
         catalog: 'Graphic Design',
-        img: 'assets/portfolio/1.jpg'
+        img: 'assets/portfolio/4.jpg'
     },
     {
         title: 'Logo Design',
@@ -29,7 +29,7 @@ export const portfolio = container => {
 
     const display = h('div', 'portfolio_photos', data.map( item=> {
         const img = h('img', 'portfolio_photos-item-img')
-        const icon = h('h3', 'portfolio_photos-item-icon', item.title[0])
+        const icon = h('h3', 'portfolio_photos-item-icon', item.title[0].toUpperCase() + item.title[1].toLowerCase())
         img.src = item.img
         icon.style.backgroundImage = `url(${item.img})`
 
@@ -45,6 +45,18 @@ export const portfolio = container => {
         )
     }))
 
+    container.onMounted = ()=> {
+        var iso = new Isotope( display, {
+            // options
+            itemSelector: '.portfolio_photos-item',
+            layoutMode: 'masonry',
+            masonry: {
+                isFitWidth: true
+                }
+          });
+          
+    }
+
     return h('div', 'portfolio bg-dark',
         moveOnScrollOpacity(header('My latest crafts', 'Portfolio', ''), {
             container
