Adding animations to homepage and some upated WILL with better screenshots of style guide

Author: clhorn

client/assets/img/res-tools/Final.jpg

@@ -45,6 +45,9 @@
       .when('/weddings', {
         templateUrl: 'projects/weddings.html',
       })
+      .when('/res-tools', {
+        templateUrl: 'projects/res-tools.html',
+      })
       .when('/about', {
         templateUrl: 'about.html',
       });
@@ -67,7 +70,7 @@
     $(document).ready(function() {
 
       $('#horn_images').cycle({
-          delay:  1000,
+          delay:  500,
           speed:  500
       });
 

client/assets/img/res-tools/Mockup.jpg

@@ -1,3 +1,6 @@
+$cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);
+
+
 .home {
 
   #top-banner {
@@ -118,7 +121,6 @@
         0 4px 4px rgba(0, 0, 0, .1),
         0 8px 8px rgba(0, 0, 0, .1);
 
-      [data-whatinput="touch"] &,
       &:hover,
       &:focus {
         opacity: 1;
@@ -155,6 +157,17 @@
       width: 50%;
       padding: $global-padding/2;
 
+      .text,
+      .details {
+        position: relative;
+        z-index: 1;
+        transition: transform .4s $cubic-bezier, opacity .3s $cubic-bezier;
+      }
+
+      .text {
+        transition-delay: .1s;
+      }
+
       .text {
         min-height: rem-calc(180);
         display: flex;
@@ -167,9 +180,91 @@
       }
 
       a {
+        overflow: hidden;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 0;
+
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center top;
+
+          opacity: 0;
+          transition: opacity .6s $cubic-bezier, transform .6s $cubic-bezier;
+
+          transform: scale(1.05);
+          transform-origin: center;
+        }
+
+
+        &:hover,
+        &:focus {
+          &::before {
+            opacity: 1;
+            transition-delay: .1s;
+            transform: scale(1);
+          }
+
+          .text,
+          .details {
+            transform: translateY(-500px);
+            transition-duration: .6, .5;
+            opacity: 0;
+          }
+
+          .text {
+            transition-delay: .1s;
+          }
+
+          .details {
+            transition-delay: .2s;
+          }
+        }
+
+        // all the custom background images based on href
+
+        &[href*="res-tools"]::before {
+          background-image: url(/assets/img/res-tools/Final.jpg);
+        }
+
+        &[href*="spheric"]::before {
+          background-image: url(/assets/img/spheric/banner.jpg);
+        }
+
+        &[href*="cinario"]::before {
+          background-image: url(/assets/img/cinario/styleguide-1-large.jpg);
+          background-size: auto 100%;
+          background-position-x: left;
+        }
+
+        &[href*="the-road"]::before {
+          background-image: url(/assets/img/road/TheRoad_header_poster.jpg);
+        }
+
+        &[href*="reinventing"]::before {
+          background-image: url(/assets/img/rmb/poster.jpg);
+          background-position-y: center;
+        }
+
+        &[href*="will"]::before {
+          background-image: url(/assets/img/will/branding-mockups.jpg);
+        }
+
+        &[href*="weddings"]::before {
+          background-image: url(/assets/img/weddings/Johnson_header.jpg);
+        }
+
+
       }
 
       .categories {
@@ -198,7 +293,7 @@
 
   @include breakpoint(rem-calc(1400)) {
     > li  {
-      width: 33%;
+      //width: 33%;
     }
   }
 

client/assets/img/res-tools/Styleguide.jpg

@@ -12,6 +12,21 @@ $rmb-primary: #467c84;
 	}
 }
 
+#rmb-screenshot {
+  &, .screenshot {
+    // allow image's dropshadow to extend bounds
+    overflow: visible;
+  }
+
+  img {
+    border-radius: 5px;
+    box-shadow:
+      0 4px 4px rgba(0, 0, 0, .1),
+      0 8px 8px rgba(0, 0, 0, .1),
+      0 8px 54px 9px rgba(0, 0, 0, .1);;
+  }
+}
+
 #rmb-iphone-aside {
   padding: 0;
   margin-bottom: 0;
@@ -57,4 +72,4 @@ $rmb-primary: #467c84;
   	}
 	}
 
-}
+}

client/assets/img/res-tools/Wireframes.jpg

@@ -6,6 +6,10 @@ $road-primary: #016e7a;
     padding: $global-padding;
     color: $white;
 
+    p {
+      margin-bottom: 0;
+    }
+
     .button {
       margin-top: 1rem;
       margin-bottom: 0;
@@ -50,4 +54,4 @@ $road-primary: #016e7a;
       margin-left: 8.3333333333%;
   }
 
-}
+}

client/assets/js/app.js

@@ -51,8 +51,8 @@ $will-primary: #87c390;
 
 #will-code {
   background: $silver;
-  padding: 1rem 0 0;
-  margin-top: 0;
+  padding: 0;
+  //margin-top: 0;
 
   .text {
     padding: 1rem 1rem 0;

client/assets/scss/site/pages/_home-page-grid.scss

@@ -9,11 +9,22 @@ <h1>Case Studies</h1>
 	<p>To see current works in progress, visit my <a href="https://dribbble.com/curiouschaos">Dribbble</a> page.</p>
 
 	<ul id="recent-grid">
+		<li>
+			<a ui-sref="res-tools">
+			  <span class="text">
+			    <h2>Resilience Tools</h2>
+			  	<p class="subheader">Searchable and filterable web application to find resources.</p></span>
+				<span class="details">
+					<ul class="categories">
+	  				<li>UX</li><li>Design</li><li>Front-End</li></ul></span>
+			</a>
+		</li>
+
 		<li>
 			<a ui-sref="spheric">
 			  <span class="text">
 			    <h2>Spheric</h2>
-			  	<p class="subheader">Living style guide for e-gaming social network site.</p></span>
+			  	<p class="subheader">Live prototype for e-gaming social network site.</p></span>
 				<span class="details">
 					<ul class="categories">
 	  				<li>Design</li><li>Front-End</li></ul></span>
@@ -83,6 +94,7 @@ <h2>WILL Styles</h2>
 			</a>
 		</li>
 
+<!--
 		<li>
 			<a ui-sref="weddings">
 			  <span class="text">
@@ -95,5 +107,6 @@ <h2>Weddings</h2>
 				</span>
 			</a>
 		</li>
+-->
 	</ul>
 </div>

client/assets/scss/site/pages/_rmb-page.scss

@@ -0,0 +1,52 @@
+---
+name: res-tools
+url: /res-tools
+animationIn: slideInUp
+---
+
+<div id="spheric-page" class="project">
+	<article class="grid-container">
+
+  	<div class="row header_image"><img src="./assets/img/res-tools/Mockup.jpg" alt="Mockup of the Resilience Tools final product"></div>
+
+	  <header class="text-center">
+	    <ul class="categories"><li>UX</li><li>Design</li><li>Front-End</li></ul>
+	    <h2 class="entry-title">Resilience Tools</h2>
+	    <p class="lead">Mixtape cliche hoodie heirloom PBR&B bitters fixie actually meh pour-over VHS readymade flexitarian banjo cred letterpress YOLO irony paleo mlkshk next level asymmetrical fashion axe aesthetic 8-bit beard ugh craft beer 3 wolf moon retro.</p>
+	  </header>
+
+	  <hr>
+
+	  <div id="res-tools-wireframes" class="entry-content new-section">
+	    <div class="content">
+	      <h3>Annotated Wireframes</h3>
+	      <p>We knew that the process of creating this website was going to be a process. We didn't have prior knowledge of the particular market or how it would react to this type of offering. Therefore, we knew needed to get something online to be able to start testing with real users and get real feedback.</p>
+	    </div>
+
+      <div class="content">
+        <img src="./assets/img/res-tools/Wireframes.jpg" alt="Askew screenshot of annotated wireframes">
+      </div>
+	  </div>
+
+
+	  <div id="res-tools-styleguide" class="entry-content new-section">
+  	  <h3>Style Guide</h3>
+  	  <p>I created the style guide to make sure we were approaching the design in a way that aligned with our potential users mindset. It gives the right logo, colors, fonts. and images to use, but <strong>why</strong>. </p>
+
+  	  <img src="./assets/img/res-tools/Styleguide.jpg" alt="Styleguide for the Resilience Tools final product">
+	  </div>
+
+    <div id="res-tools-final" class="entry-content new-section">
+      <h3 class="text-center">Final</h3>
+      <p class="text-center">In addition to user experience responsibilities, I was also the primary designer and front-end developer.</p>
+      <img src="./assets/img/res-tools/Final.jpg" alt="Screenshot of the final Resilience Tools web application">
+    </div>
+
+    <nav class="posts_navigation">
+    	<ul>
+    		<li><a ui-sref="spheric" rel="prev">Spheric</a></li>
+    	</ul>
+    </nav>
+  </article>
+</div>
+

client/assets/scss/site/pages/_road-page.scss

@@ -53,6 +53,14 @@ <h3>Responsive</h3>
       </div>
     </div>
 
+  	<aside id="spheric-contact" class="entry-content new-section link_out">
+  		<p class="text-center lead">
+  			Spheric is a living prototype. <br> If you'd like to dig into the fully functional site: <br><br>
+
+  			<a class="button large" href="mailto:caroline@curiouschaos.com?subject=Spheric Prototype.com">Email Me</a>
+  		</p>
+  	</aside>
+
     <nav class="posts_navigation">
     	<ul>
     		<li><a ui-sref="cinario" rel="prev">cinar.io</a></li>

client/assets/scss/site/pages/_will-page.scss

@@ -12,7 +12,7 @@
 	  <header class="text-center">
 	    <ul class="categories"><li>Branding</li><li>Design</li><li>Front-End</li></ul>
 	    <h2 class="entry-title">WILL Styles</h2>
-  	  <p class="lead">I started working at WILL in 2007, straight out of college. I was immediately tasked with creating a new logo for the company. Then in 2015, we once again decided to update the branding so it more cohesively exuded who WILL is. Just before leaving will in early 2016, we finalized the logo below. The interesting part of seeing both logos side-by-side is that it not only shows the progression of how WILL has changed over the years, but how I as a designer have progressed in my skills and career.</p>
+  	  <p class="lead">I started working at WILL in 2007, straight out of college. I was immediately tasked with creating a new logo for the company. Then in 2015, we once again decided to update the branding so it more cohesively exuded who WILL is. Just before leaving will in early 2016, we finalized the new logo. The broken arrow represents the multiple pathways through WILL's interactive storylines.</p>
 	  </header>
 
 	  <div id="will-logos-images" class="entry-content">
@@ -26,23 +26,26 @@ <h2 class="entry-title">WILL Styles</h2>
       </div>
 	  </div>
 
+	  <div class="entry-content">
+      <p class="ideal text-center">The interesting part of seeing both logos side-by-side is that it not only shows the progression of how WILL has changed over the years, but how I as a designer have progressed in my skills and career.</p>
+    </div>
+
 	  <div id="will-styleguide" class="entry-content new-section">
-  	  <h3>Style guide</h3>
-  	  <p>As a development team, we have kept a living style guide to help us in the development of all custom internal business development applications. It has evolved alongside of the branding.</p>
+  	  <h3>Style Guide &amp; Documentation</h3>
+  	  <p>To maintain this new brand throughout our custom applications, as a development team, we kept a living style guide with detailed documentation.</p>
 
 	  </div>
-	  <div id="will-styleguide-images" class="entry-content">
-      <img src="./assets/img/will/styleguide-basics.jpg" alt="">
-      <img src="./assets/img/will/styleguide-code.jpg" alt="">
-	  </div>
+
+	  <img src="./assets/img/will/StyleGuide.jpg" alt="">
 
 	  <div id="will-code" class="entry-content new-section">
 	  	<div class="text">
-	  	  <h3>Gem</h3>
-	  	  <p>To help with future iterations and implementation of the style guide, we built it as a gem that could be used by all of our Ruby on Rails applications. This way, we were tweak the styles in one place and they would update across all applications. It also helped with version control.</p>
+	  	  <h3>Component-Based Development</h3>
+	  	  <p>We built the more complex components as Ruby components and helpers for consistency and maintainability. The documentation would then show the resulting component, the code for ruby helper, and the resulting HTML.</p>
+	  	  <p>To help with future iterations and implementation of the style guide, we maintained the components in a Ruby gem that could be used by all of our applications. This way, when we altered the HTML and CSS in one place they would update across all applications.</p>
 	  	</div>
 	  	<div class="image">
-  	    <img src="./assets/img/will/code.png" alt="">
+  	    <img src="./assets/img/will/StyleGuide-code.png" alt="">
 	  	</div>
 	  </div>
 
@@ -60,7 +63,6 @@ <h3 class="text-center">WILL Apps</h3>
 
     <nav class="posts_navigation">
     	<ul>
-    		<li><a ui-sref="weddings" rel="prev">Weddings</a></li>
     		<li><a ui-sref="reinventing-michael-banks" rel="next">Reinventing Michael Banks</a></li>
     	</ul>
     </nav>