project updates, social tweaks

data/meta.yml

@@ -3,16 +3,22 @@ title: Matthias Kretschmann
 tagline: Designer & Developer
 description: Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.
 url: https://matthiaskretschmann.com
+
 social:
   Email: mailto:m@kretschmann.io
   Blog: https://kremalicious.com
   Twitter: https://twitter.com/kremalicious
   GitHub: https://github.com/kremalicious
   Dribbble: https://dribbble.com/kremalicious
+
 availability:
   status: false
-  available: "\U0001F454 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s
+  available: "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s
     talk</a>!"
   unavailable: Not available for new projects.
+
+gpg: https://kretschmann.io/pub.gpg
+addressbook: /vcard-matthias-kretschmann.vcf
+
 typekit: dtg3zui
 googleanalytics: UA-1441794-4

data/projects.yml

@@ -7,7 +7,7 @@
   description: >
     Since 2017 I'm leading the UI design & development of all Ocean Protocol web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.
 
-    The main website is a single-page JavaScript application built with React, pulling its data from JSON files and various micro services I've built over time. All design & development is embedded in a continous deployment process via GitHub & Travis.
+    The main website is a single-page JavaScript application built with React, pulling its data from JSON files and various micro services. All design & development is embedded in a continous deployment process via GitHub & Travis.
 
     Initial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
   links:
@@ -34,7 +34,7 @@
   slug: "/ipdb/"
   img: "../src/images/portfolio-ipdb-01.png"
   description: >
-    From 2015-2017 I was leading the UI design & development of all IPDB web properties and additonally iterated on the creative and visual direction of the IPDB brand.
+    From 2015–2017 I was leading the UI design & development of all IPDB web properties and additonally iterated on the creative and visual direction of the IPDB brand.
 
     The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.
 
@@ -152,7 +152,7 @@
   slug: "/chartmogul/"
   img: "../src/images/portfolio-chartmogul-01.png"
   description: >
-    From 2015-2017 I was co-designing and leading the UI design & development of various ChartMogul web properties. This included the creation of a components-based UI design system and implementing it across all web touch points.
+    From 2015–2017 I was co-designing and leading the UI design & development of various ChartMogul web properties. This included the creation of a components-based UI design system and implementing it across all web touch points.
 
     The main website with its landing pages is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, while the blog is running on WordPress with its own custom theme. All embedded in an automated development & deployment workflow via GitHub and Travis.
 
@@ -191,7 +191,9 @@
   slug: "/sharethemeal/"
   img: "../src/images/portfolio-sharethemeal.png"
   description: >
-    Co-designing and leading the front-end development of the ShareTheMeal website.
+    ShareTheMeal is an app from the United Nations World Food Programme (WFP) that enables people to "share their meals" with children in need. In 2015 I was consulting, co-designing and leading the front-end development of the ShareTheMeal website and various parts of the ShareTheMeal apps for iOS & Android.
+
+    The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, embedded in a continous deployment process via GitHub & Travis.
 
   techstack:
   - Sketch
@@ -209,13 +211,14 @@
   links:
   - title: Link
     url: https://sharethemeal.org/
+
 -
 
   title: ezeep
   slug: "/ezeep/"
   img: "../src/images/portfolio-ezeep-01.png"
   description: >
-    From 2012 to 2015 I worked at ezeep, where we created an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.
+    From 2012–2015 I worked at ezeep, where I helped creating an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.
 
     I was leading the UI design & development of all ezeep touch points and - as a product designer - defined the ezeep product based on user and market research in an iterative process. On top of that, I designed and helped building all app experiences of ezeep on Windows, macOS, iOS, and Android.
 
@@ -262,8 +265,9 @@
   description: >
     So, what to do when everyone seem to release iPad icons but fail to
     include some crisp small size icons? Pushing the pixels for yourself of course.
-    So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad
+    So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad.
-    in the sizes 48px, 32px and 16px.
+
+    Released as a goodie on [kremalicious.com](https://kremalicious.com/ipixelpad/).
 
   techstack:
   - Photoshop
@@ -279,7 +283,8 @@
   img: "../src/images/portfolio-outofwhaleoil-01.png"
   description: >
     Tribute wallpaper pack inspired by the Futurama movie _Into The Wild
-    Green Yonder_.
+    Green Yonder_. Released as a goodie
+    on [kremalicious.com](https://kremalicious.com/out-of-whale-oil/).
   links:
   - title: Download
     url: https://kremalicious.com/out-of-whale-oil/
@@ -292,7 +297,7 @@
   slug: "/unihalle/"
   img: "../src/images/portfolio-unihalle-01.png"
   description: >
-    From 2009 to 2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized & implemented numerous in-house and public facing interfaces for thousands of students and staff.
+    From 2009–2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized, designed & implemented numerous in-house and public facing interfaces for thousands of students and staff.
 
     Additionally, I conceptualized, designed, created, and maintained the blog network & community for all students & staff.
 
@@ -330,12 +335,32 @@
   - title: Download
     url: https://kremalicious.com/coffee-cup-icon/
 
+-
+
+  title: Project Purple
+  slug: "/projectpurple/"
+  img: "../src/images/portfolio-projectpurple-01.png"
+  description: >
+    It had been revealed the original iPhone was developed in a locked down building under the name Project Purple and because of the secrecy involved, the team decorated the building with Fight Club references. Perfect story to create a wallpaper out of it.
+
+    Released as a goodie on [kremalicious.com](https://kremalicious.com/projectpurple/).
+
+  techstack:
+  - Photoshop
+
+  links:
+  - title: Download
+    url: https://kremalicious.com/projectpurple/
+
 -
 
   title: Allinnia Creative Group
   slug: "/allinnia/"
   img: "../src/images/portfolio-allinnia-01.png"
-  description: ''
+  description: >
+    In 2009 I created the branding, website, and various key visuals for professional music production studio Allinnia Creative Group, reflecting their own musical compositions.
+
+    The website was built from scratch as a simple PHP application with a store and music listening functionality.
   techstack:
   - Photoshop
   - HTML
@@ -343,3 +368,28 @@
   - JavaScript
   - PHP
 
+-
+
+  title: Aperture Loupe
+  slug: "/apertureloupe/"
+  img: "../src/images/portfolio-apertureloupe-01.png"
+  description: >
+    When Apple released their professional photography app _Aperture_ in 2008, the loupe tool in there was something really novel and just fun to play with. Inspired by that, I created this macOS desktop icon.
+
+  techstack:
+  - Photoshop
+
+-
+
+  title: Adiumeetie
+  slug: "/adiumeetie/"
+  img: "../src/images/portfolio-adiumeetie-01.png"
+  description: >
+    A macOS replacement desktop icon created in 2009 for the popular Mac IM client Adium following the style of atebit’s excellent Tweetie for Mac icon. Released as a goodie on [kremalicious.com](https://kremalicious.com/adiumeetie/).
+
+  techstack:
+  - Photoshop
+
+  links:
+  - title: Download
+    url: https://kremalicious.com/adiumeetie/

src/components/molecules/ProjectNav.scss

@@ -2,6 +2,7 @@
 
 .project__nav {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     overflow: hidden;
 }
@@ -12,31 +13,36 @@
 }
 
 .project__nav__item {
-    flex: 1 1 48%;
+    flex: 1 1 46%;
     position: relative;
     transition: .2s ease-out;
     max-width: 500px;
 
     &:first-child {
-        text-align: left;
+        margin-right: $spacer / 2;
 
         &:hover,
         &:focus {
-            transform: translate3d(-1rem, 0, 0);
+            transform: translate3d(-.5rem, 0, 0);
         }
     }
 
     &:last-child { // stylelint-disable-line
-        text-align: right;
+        margin-left: $spacer / 2;
 
         &:hover,
         &:focus {
-            transform: translate3d(1rem, 0, 0);
+            transform: translate3d(.5rem, 0, 0);
         }
     }
 
     @media (min-width: 45rem) {
         flex-basis: 33%;
+
+        &:first-child,
+        &:last-child {
+            margin: 0;
+        }
     }
 }
 
@@ -53,11 +59,19 @@
     height: 100%;
     display: block;
     align-self: center;
-    margin-top: $spacer * 8;
+    margin-top: $spacer * 2;
+    margin-left: $spacer;
+    margin-right: $spacer;
     transition: .2s ease-out;
+    order: 3;
+    width: 100%;
 
     @media (min-width: 45rem) {
-        margin-top: -$spacer;
+        margin-top: 0;
+        margin-left: $spacer * 4;
+        margin-right: $spacer * 4;
+        order: initial;
+        width: auto;
     }
 
     .icon {
@@ -68,8 +82,6 @@
 
     &:hover,
     &:focus {
-        transform: translate3d(0, -.3rem, 0);
-
         .icon {
             fill: $brand-cyan;
         }

src/components/molecules/Social.jsx

@@ -45,6 +45,7 @@ const Social = ({ meta, minimal, hide }) => {
               title={key}
             >
               <SocialIcon title={key} className="icon" />
+              <span className="social__title">{key}</span>
             </OutboundLink>
           ))}
         </aside>

src/components/molecules/Social.scss

@@ -1,21 +1,27 @@
 @import 'variables';
 
 .social {
-    margin-top: $spacer * 2;
+    margin-top: $spacer * $line-height;
     width: 100%;
     display: flex;
     justify-content: center;
 }
 
+.social__title {
+    display: block;
+    width: 100%;
+    font-size: $font-size-mini;
+    color: $brand-grey-light;
+    opacity: 0;
+    transform: translate3d(0, .5rem, 0);
+    transition: .2s ease-out;
+}
+
 .social__link {
     margin-left: $spacer / 4;
     margin-right: $spacer / 4;
-    padding: $spacer / 2;
     text-align: center;
-    display: flex;
+    display: block;
-    align-items: center;
-    justify-content: center;
-    border-radius: .25rem;
 
     @media (min-width: 30rem) {
         margin-left: $spacer / 2;
@@ -31,24 +37,26 @@
         width: 1rem;
         height: 1rem;
         fill: $brand-grey-light;
-        transition: .2s ease-out;
     }
 
     &:hover,
     &:focus {
         background: $brand-light;
-        transform: translate3d(0, -.2rem, 0);
-        box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
 
         .icon {
             fill: $brand-cyan;
         }
+
+        .social__title {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
     }
 
     .social--minimal & {
-        padding: $spacer / 3;
+        padding: $spacer / 4;
-        margin-left: $spacer / 3;
+        margin-left: $spacer / 4;
-        margin-right: $spacer / 3;
+        margin-right: $spacer / 4;
 
         .icon {
             width: .85rem;

src/components/organisms/Footer.jsx

@@ -9,9 +9,15 @@ const Footer = ({ meta }) => {
   return (
     <footer className="footer">
       <Social meta={meta} minimal />
-      <small>
+      <p className="footer__actions">
-        &copy; {year} {meta.title} &mdash; All Rights Reserved
+        <a href={meta.addressbook}>Add to addressbook</a>
-      </small>
+        <a href={meta.gpg}>PGP/GPG key</a>
+      </p>
+      <p>
+        <small>
+          &copy; {year} {meta.title} &mdash; All Rights Reserved
+        </small>
+      </p>
     </footer>
   )
 }

src/components/organisms/Footer.scss

@@ -15,3 +15,21 @@
         margin-bottom: $spacer;
     }
 }
+
+.footer__actions {
+    width: 100%;
+    margin-top: -($spacer / 2);
+    margin-bottom: $spacer * 3;
+
+    a {
+        display: inline-block;
+        padding: 0 $spacer / 4;
+        font-size: $font-size-small;
+        margin-left: $spacer;
+        color: $brand-grey-light;
+
+        &:first-child {
+            margin-left: 0;
+        }
+    }
+}

src/layouts/index.jsx

@@ -82,6 +82,8 @@ export const query = graphql`
         available
         unavailable
       }
+      gpg
+      addressbook
       typekit
       googleanalytics
     }

src/layouts/index.scss

@@ -83,11 +83,12 @@ h6 {
 a {
     color: $brand-cyan;
     text-decoration: none;
-    transition: color .2s ease-out;
+    transition: .2s ease-out;
 
     &:hover,
     &:focus {
         color: lighten($brand-cyan, 10%);
+        transform: translate3d(0, -.1rem, 0);
     }
 }