Merge pull request #742 from naher94/development

Darkmode Images Added

README.md

@@ -227,7 +227,6 @@ https://society6.com/rehanbutt/about |✅ header image|✖️|✖️
 https://www.youtube.com/c/RehanButt1994 | ✅ header image|✖️|✖️| social links
 https://www.clubhouse.com/@rehanbutt |✖️|✅|✅|Twitter link
 https://letterboxd.com/naher94/ |✖️|✖️|✅|
-http://interchange.soa.cmu.edu | ✅ footer | ✖️|✖️
 https://www.stickermule.com/u/rehanbutt | ✖️|✖️|✖️ 
 http://BRND.life | ✅ footer |✖️|✖️
 http://QULR.life | ✅ footer |✖️|✖️
@@ -241,6 +240,7 @@ https://jekyllrb.com/showcase/ |✅|✖️|✖️| Full screen shot of the home
 ~https://soa.cmu.edu/design/~ | ~no~ ||| ~showing fashion work~
 ~https://soa.cmu.edu/alumni/~ |~yes~ ||| ~SHOULD BE UPDATED~
 ~http://soa.cmu.edu/students/~ | ~yes~ ||| ~Graduate Student Section~
+~http://interchange.soa.cmu.edu~ | ~✅ footer~ | ✖️|✖️
 ~http://ideate.xsead.cmu.edu/profiles/profiles/naher94~ | ~no~ |
 ~https://scottylabs.org/portfolio/~ |~✅~|✖️|✖️|
 ~http://tech.soa.cmu.edu~ | ~✅ footer~ |✖️|✖️

_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.19.0
+version: 8.20.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava, Honeydew]
 
 # Build settings

_projects/ces.markdown

@@ -29,7 +29,7 @@ The last set of interfaces that I would like to highlight include the schedule p
 
 I wanted to take full advantage of the topic categories created for CES. As such I created a color system that maps each category to a color for identifying events, booths and several other things across the app experience.
 
-<div class="image-container"><img src="../img/ces/userflowmap.png" alt="User Flow Map"/></div>
+<div class="image-container"><img src="../img/ces/userflowmap.jpg" alt="User Flow Map"/></div>
 
 ## Process
 
@@ -56,6 +56,8 @@ Several screens from the current app.
 
 Some interaction and static interfaces, that I used as inspiration. Looking at things like ease of use, hierarchy and legibility to name a few.
 
-<div class="image-container small-12 medium-10 cell medium-centered"><img src="../img/ces/topics.png" alt="Topic Groups"/></div>
+<div class="cell">
+  <img src="../img/ces/topics.png" alt="Topic Groups" style="width:100%;"/>
+</div>
 
-<div class="image-container"><img src="../img/ces/eventtiles.png" alt="Event Tile Iterations"/></div>
+<div class="image-container"><img src="../img/ces/event-tiles.jpg" alt="Event Tile Iterations"/></div>

_projects/consumerreportsbrand.markdown

@@ -7,7 +7,7 @@ date:   2015-08-20
 tags: UI UX branding
 ---
 
-<div class="grid-x grid-padding-x">
+<div class="grid-x grid-padding-x grid-padding-y">
   <div class="cell">
     <img src="../img/cr/logo-color.svg" alt="Consumer Report's new logo full color">
   </div>
@@ -89,7 +89,7 @@ Typeface and lockup exploration
 
 <div class="grid-x grid-padding-x grid-margin-y">
   <div class="cell">
-    <img src="../img/cr/CRblobs.png" alt="CR Rating Blobs" />
+    <img src="../img/cr/cr-blobs.jpg" alt="CR Rating Blobs" />
   </div>
 </div>
 

_projects/expii.markdown

@@ -37,13 +37,13 @@ Across all the public facing platforms I came across four distinct brand images
 
 Some inspiration I used to articulate the brand, the flow, clarity, and hierarchy of the experiences.
 
-<div class="image-container"><img src="../img/expii/brandProposal.svg" alt="Simple Brand Proposal"/></div>
+<div class="image-container"><img src="../img/expii/brand-proposal.svg" alt="Simple Brand Proposal"/></div>
 
 When designing this brand image, I looked at it as the starting point for a bigger brand system. Using the pill shapes as a thematic element that could be used across all Expii products and marketing materials with an approachable color scheme and mascot to guide users through the Expii experience.
 
 ### Experiences
 
-<div class="image-container"><img src="../img/expii/platforms.png" alt="Platforms Expii Exists On" style="margin-bottom:70px;"/></div>
+<div class="image-container"><img src="../img/expii/platforms.png" alt="Platforms Expii Exists On"/></div>
 Extending from the brand audit, I looked at whether the product differed based on platform and if each platform was being capitalized on to the fullest extent. iOS only provided one of the two Expii products--Solve. Upon opening the app, the experience was immediately gated by a user login, which can be a big deterrent for users to try out a product or service. The Expii Android app was a webview leaving the interactions to be identical to the site. One of the benefits of a native app, however, is that resources can be stored on the device for easy retrieval and offline usage in many cases--something especially important in developing countries where infrastructure may not be as reliable but the added value of a learning tool like Expii would be far bigger. Lastly, I explored the desktop web experience as it is the most prominent and fully featured.
 
 <div class="image-container"><img src="../img/expii/products.png" alt="Products"/></div>

_projects/interchange.markdown

@@ -9,12 +9,12 @@ tags: branding webdev
 
 <div class="image-container"><img src="../img/interchange/logo.svg" alt="Logo"/></div>
 
-Interchange, a career event, was created as a way to help the graduate students of Carnegie Mellon’s School of Architecture to help them 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 will provide organizations an opportunity to learn about student's work within different degree programs; from architectural building performance to computational design.
+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 will be 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. <a href="https://interchange.soa.cmu.edu">Check out the site.</a>
+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%;"/>
@@ -28,7 +28,7 @@ As this site will be used by many students, I templated and created a style guid
 
 <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/logoIterations.svg" alt="Logo Iterations"/></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>

_projects/lechuga.markdown

@@ -18,7 +18,7 @@ tags: web
 
 ## Process
 
-<div class="image-container"><img src="../img/lechuga/logoiterations.svg" alt="Logo Iterations"/></div>
+<div class="image-container"><img src="../img/lechuga/logo-iterations.jpg" alt="Logo Iterations"/></div>
 <div class="image-container"><img src="../img/lechuga/brandingsketches.png" alt="Brand Sketches"/></div>
 <div class="image-container"><img src="../img/lechuga/appsketches.png" alt="Experience Sketches"/></div>
 <div class="image-container"><img src="../img/lechuga/competitiveaudit.png" alt="Other Food Services"/></div>

_projects/logomarks.markdown

@@ -74,11 +74,10 @@ I created a set of personal LogoMarks using information about the people the Log
 
 Looking at the first logoMark, Yasmeen's, I starting on my computer within my vector program, Rhinoceros, I started with her initials "YA" looking at the outcome from current fonts and some interesting spaces and relations that could come of it. This was 1 of the 2 approaches I took. The second started from a stamp marking she already used to sign with, which is the marking below. First I vectorized it and then tried to overlay a geometry, which did not work out so well. So I decided to ditch the geometry and if I was going to use the stamp I was going to use it in the original vectorized form.
 
-<div class="image-container">
-  <img src="../img/logomark/ya-process-stamp.png" alt="Yasmeen Almuhanna Stamp Mark" class="image-center" style="width:70%" />
-</div>
-
 <div class="grid-x grid-padding-x grid-margin-y">
+<div class="cell">
+  <img src="../img/logomark/ya-process-stamp.jpg" alt="Yasmeen Almuhanna Stamp Mark"/>
+</div>
   <div class="cell">
     <img src="../img/logomark/ya-shape-iterations.jpg" alt="Shape Iterations of the YA Logomark">
   </div>

_projects/techsoa.markdown

@@ -14,7 +14,7 @@ The goal with tech.soa was to pull all the resources from around the department
 ## Process
 
 <div class="image-container"><img src="../img/techsoa/pageProcess.png" alt="Home Page Versions"/></div>
-<div class="image-container"><img src="../img/techsoa/tileIterations.svg" alt="Tile Iterations"/></div>
+<div class="image-container"><img src="../img/techsoa/tile-iterations.svg" alt="Tile Iterations"/></div>
 <div class="grid-x">
   <div class="medium-4 cell"><img src="../img/techsoa/interactionTitlesTags.gif" alt="Hover Interaction For Titles & Tags"/></div>
   <div class="medium-4 cell"><img src="../img/techsoa/interactionTile.gif" alt="Hover Interaction for Tiles"/></div>