Merge pull request #749 from naher94/development

Interchange Content Updates

_config.yml

@@ -13,7 +13,7 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 8.23.0
+version: 8.24.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava, Honeydew]
 
 # Build settings

_projects/interchange.markdown

@@ -7,37 +7,68 @@ date:   2016-12-30
 tags: branding webdev
 ---
 
-<div class="image-container"><img src="../img/interchange/logo.svg" alt="Logo"/></div>
+<div class="grid-x">
+  <div class="cell">
+    <img src="../img/interchange/logo.svg" alt="Logo"/>
+  </div>
+</div>
 
 Interchange, a career event, was created as a way to help the graduate students of Carnegie Mellon’s School of Architecture connect with the creative industry. As part of this new initiative I branded and developed a website for students to showcase their work ahead of the event. It provided organizations an opportunity to learn about student's work within different degree programs; from architectural building performance to computational design.
 
-<div class="image-container"><img src="../img/interchange/screenshots.png" alt="Website Screenshots"/></div>
-<div class="image-container"><img src="../img/interchange/mobileFriendly.png" alt="Mobile Site Screenshots"/></div>
-
-As this site was used by many students, I templated and created a style guide throughout the site for a uniform look and feel. Keeping in mind the need for a variety of content types and optional information fields such as personal websites and resumes on the profile pages. I built the site using Jekyll to template each page and to automate the connection of pages such as people and their projects and tagging people with their degree program.
-
-<div class="image-container">
-  <img src="../img/interchange/codelab.png" alt="The CodeLab" style="width:100%;"/>
+<div class="grid-x grid-padding-y">
+  <div class="cell">
+    <img src="../img/interchange/home.jpg" alt="Home page and upload page">
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/404.jpg" alt="Fun 404 page">
+  </div>
+    <div class="cell">
+      <img src="../img/interchange/mobile.jpg" alt="Mobile Site Screenshots"/>
+  </div>
 </div>
 
-<div class="image-container">
-  <img src="../img/interchange/wayfinding.png" alt="Wayfinding Stickers"/>
+As this site was used by many students, I templated and created a style guide throughout the site for a uniform look and feel. Keeping in mind the need for a variety of content types and optional information fields such as personal websites and resumes on the profile pages. I built the site using Jekyll to template each page and to automate the connection of pages such as people and their projects and tagging people with their degree program. If you are curious to learn more feel free to <a target="_blank" href="https://github.com/naher94/interchange"> check out the code.</a>
+
+<div class="grid-x grid-padding-x grid-padding-y">
+  <div class="cell medium-6">
+    <img src="../img/interchange/dylan.jpg" alt="Wayfinding Stickers with Dylan in motion">
+  </div>
+  <div class="cell medium-6">
+    <img src="../img/interchange/crossover.jpg" alt="Wayfinding Stickers">
+  </div>
+  <div class="cell" style="display: flex; flex: calc(1050/1400);">
+    <img src="../img/interchange/stairs.jpg" alt="Wayfinding stickers on the stairs">
+  </div>
+  <div class="cell" style="display: flex; flex: calc(1400/1050);">
+    <img src="../img/interchange/codelab-entry.jpg" alt="Wayfinding stickers at CodeLab entry">
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/codelab.jpg" alt="Inside the CodeLab">
+  </div>
 </div>
 
 ## Process
 
-<div class="image-container"><img src="../img/interchange/sketches.png" alt="Sketches"/></div>
-<div class="image-container"><img src="../img/interchange/brandInspiration.png" alt="Brand Inspiration"/></div>
-<div class="image-container" style="margin-top:50px;"><img src="../img/interchange/logo-iterations.svg" alt="Logo Iterations"/></div>
-<div class="image-container"><img src="../img/interchange/postcardIterations.png" alt="Postcard Iterations"/></div>
-<div class="image-container"><img src="../img/interchange/posterSeries.png" alt="Poster Series"/></div>
-<div class="image-container"><img src="../img/interchange/stickerTest.png" alt="Floor Sticker Test"/></div>
-
-<div class="grid-x grid-padding-x">
+<div class="grid-x grid-padding-y">
   <div class="cell">
-<a target="_blank" href="https://github.com/naher94/interchange">
-    <div class="interchange-button content-button"> Check out the code
-    </div>
-</a>
-</div>
+    <img src="../img/interchange/sketches.jpg" alt="Sketches"/>
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/floor-plan.jpg" alt="Floor plan for wayfinding">
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/brandInspiration.png" alt="Brand Inspiration"/>
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/logo-iterations.svg" alt="Logo Iterations"/>
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/postcardIterations.png" alt="Postcard Iterations"/>
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/posterSeries.png" alt="Poster Series"/>
+  </div>
+  <div class="cell">
+    <img src="../img/interchange/stickerTest.png" alt="Floor Sticker Test"/>
+  </div>
 </div>