project tweaks

data/projects.json

@@ -154,7 +154,7 @@
     "title": "ezeep",
     "slug": "ezeep",
     "img": "ezeep",
-    "description": "At ezeep, I created an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors.\n\nThis included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand. I was leading the UI design & development of all ezeep web properties and marketing materials, on top of that I designed all app experiences of ezeep on Windows, macOS, iOS, and Android.\n\nezeep was acquired by [Cortado AG](https://www.cortado.com) in 2015 and became part of their [ThinPrint Cloud Services](https://www.thinprintcloud.com) suite of products.",
+    "description": "At ezeep, I 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.\n\nI 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.\n\nezeep was acquired by [Cortado AG](https://www.cortado.com) in 2015 and became part of their [ThinPrint Cloud Services](https://www.thinprintcloud.com) suite of products.",
     "img_more": [
       "ezeep01",
       "ezeep02",
@@ -204,22 +204,6 @@
     "img": "mrreader",
     "description": "Designing the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful RSS feed reader for iPad."
   },
-  {
-    "title": "IPP Halle",
-    "slug": "ipp-halle",
-    "img": "ipp-halle.png",
-    "links": {
-      "Link": "http://ipp-halle.de"
-    },
-    "description": "",
-    "techstack": [
-      "Photoshop",
-      "CSS",
-      "JavaScript",
-      "PHP",
-      "WordPress"
-    ]
-  },
   {
     "title": "iPixelPad",
     "slug": "ipixelpad",
@@ -258,7 +242,7 @@
     "links": {
       "Link": "http://blogs.urz-uni-halle.de"
     },
-    "description": "",
+    "description": "Conceptualizing & implementing numerous in-house and public facing interfaces for thousands of students and staff. Additionally, conceptualizing, creating and maintaining the blog network & community for all students & staff.",
     "techstack": [
       "Photoshop",
       "SCSS",

gatsby-config.js

@@ -8,6 +8,7 @@ module.exports = {
     'gatsby-plugin-react-next',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sitemap',
+    'gatsby-transformer-json',
     {
       resolve: 'gatsby-plugin-sass',
       options: {
@@ -21,7 +22,6 @@ module.exports = {
         path: `${__dirname}/data/`,
       },
     },
-    'gatsby-transformer-json',
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {

package.json

@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "gatsby": "^1.9.250",
+    "gatsby": "^1.9.251",
     "gatsby-link": "^1.6.39",
-    "gatsby-plugin-google-analytics": "^1.0.29",
+    "gatsby-plugin-google-analytics": "^1.0.30",
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sass": "^1.0.25",
     "gatsby-plugin-sitemap": "^1.2.21",
-    "gatsby-source-filesystem": "^1.5.31",
+    "gatsby-source-filesystem": "^1.5.32",
     "gatsby-transformer-json": "^1.0.16",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",

src/components/molecules/Footer.scss

@@ -1,7 +1,8 @@
 @import 'variables';
 
 .footer {
-    padding: $spacer;
+    margin-top: $spacer * 4;
+    padding: $spacer * 2;
     text-align: center;
     color: $brand-grey-light;
 

src/components/molecules/ProjectNav.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from 'gatsby-link'
+import { Index } from '../atoms/Icons'
+import images from '../../images'
+import './ProjectNav.scss'
+
+const ProjectNav = ({ previous, next }) => (
+  <nav className="project__nav full-width">
+    {previous && (
+      <div className="project__nav__item">
+        <Link className="project__nav__link prev" to={previous.slug}>
+          <img
+            className="project__nav__image"
+            src={images[previous.img]}
+            alt={previous.title}
+          />
+          <h1 className="project__nav__title">{previous.title}</h1>
+        </Link>
+      </div>
+    )}
+    <Link
+      className="project__nav__index"
+      title="Back to projects"
+      to={'/#projects'}
+    >
+      <Index />
+    </Link>
+    {next && (
+      <div className="project__nav__item">
+        <Link className="project__nav__link next" to={next.slug}>
+          <img
+            className="project__nav__image"
+            src={images[next.img]}
+            alt={next.title}
+          />
+          <h1 className="project__nav__title">{next.title}</h1>
+        </Link>
+      </div>
+    )}
+  </nav>
+)
+
+ProjectNav.propTypes = {
+  previous: PropTypes.object,
+  next: PropTypes.object,
+}
+
+export default ProjectNav

src/components/molecules/ProjectNav.scss

@@ -0,0 +1,81 @@
+@import 'variables';
+
+.project__nav {
+    display: flex;
+    justify-content: space-between;
+}
+
+.project__nav__image {
+    margin: 0;
+    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
+}
+
+.project__nav__item {
+    flex: 0 0 48%;
+    position: relative;
+    transition: .2s ease-out;
+
+    &:first-child {
+        text-align: left;
+
+        &:hover,
+        &:focus {
+            transform: translate3d(-1rem, 0, 0);
+        }
+    }
+
+    &:last-child { // stylelint-disable-line
+        text-align: right;
+
+        &:hover,
+        &:focus {
+            transform: translate3d(1rem, 0, 0);
+        }
+    }
+
+    @media (min-width: 45rem) {
+        flex-basis: 33%;
+    }
+}
+
+.project__nav__title {
+    font-size: $font-size-small;
+    padding: $spacer / 2 $spacer / 4;
+    margin: 0;
+    transition: .2s ease-out;
+
+    @media (min-width: 45rem) {
+        font-size: $font-size-base;
+        padding: $spacer / 2 $spacer;
+    }
+}
+
+.project__nav__link {
+    &:hover,
+    &:focus {
+        .project__nav__title {
+            color: $brand-cyan;
+        }
+    }
+}
+
+.project__nav__index {
+    height: 100%;
+    display: block;
+    align-self: center;
+    margin-top: -$spacer;
+
+    &:first-child {
+        margin-left: 48.5%;
+    }
+
+    &:last-child {
+        margin-right: auto;
+    }
+
+    .icon {
+        fill: $brand-grey-light;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+}

src/components/molecules/ProjectTechstack.scss

@@ -6,15 +6,19 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
+        margin-left: -($spacer / 2);
     }
 
     li {
-        display: inline-block;
+        display: flex;
-        padding: 0;
+        align-items: center;
-        flex: 0 0 (100% / 3);
+        justify-content: center;
-        margin-bottom: $spacer;
+        padding: $spacer / 4;
+        flex: 1 1 calc((100% / 3) - #{$spacer});
+        margin-bottom: $spacer / 2;
         font-size: $font-size-small;
         text-align: center;
-        background: rgba(#fff, .2);
+        background: rgba(#fff, .15);
+        margin-left: $spacer / 2;
     }
 }

src/components/molecules/Social.scss

@@ -18,9 +18,16 @@
     border-radius: .25rem;
     transition-property: transform, background, box-shadow;
 
+    &,
+    .icon {
+        transition: .2s ease-out;
+    }
+
     .icon {
         width: 1rem;
         height: 1rem;
+        fill: $brand-grey-light;
+        transition: .2s ease-out;
     }
 
     &:hover,
@@ -28,6 +35,10 @@
         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--minimal & {
@@ -36,17 +47,8 @@
         margin-right: $spacer / 3;
 
         .icon {
-            fill: $brand-grey-light;
-            transition: .2s ease-out;
             width: .85rem;
             height: .85rem;
         }
-
-        &:hover,
-        &:focus {
-            .icon {
-                fill: $brand-grey;
-            }
-        }
     }
 }

src/components/organisms/Project.js

@@ -1,13 +1,12 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
-import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
 import Content from '../atoms/Content'
 import FullWidth from '../atoms/FullWidth'
 import ProjectTechstack from '../molecules/ProjectTechstack'
 import ProjectLinks from '../molecules/ProjectLinks'
-import { Index } from '../atoms/Icons'
+import ProjectNav from '../molecules/ProjectNav'
 import images from '../../images'
 import './Project.scss'
 
@@ -58,23 +57,7 @@ const Project = ({ pathContext }) => {
           </Content>
         </article>
 
-        <nav className="project__nav full-width">
+        <ProjectNav previous={previous} next={next} />
-          {previous && <div className="project__nav__item">
-              <Link className="project__nav__link prev" to={previous.slug}>
-                <img className="project__image project__nav__image" src={images[previous.img]} alt={previous.title} />
-                <h1 className="project__nav__title">{previous.title}</h1>
-              </Link>
-            </div>}
-          <Link className="project__nav__index" title="Back to projects" to={'/'}>
-            <Index />
-          </Link>
-          {next && <div className="project__nav__item">
-              <Link className="project__nav__link next" to={next.slug}>
-                <img className="project__image project__nav__image" src={images[next.img]} alt={next.title} />
-                <h1 className="project__nav__title">{next.title}</h1>
-              </Link>
-            </div>}
-        </nav>
       </main>
     </Fragment>
 }

src/components/organisms/Project.scss

@@ -20,8 +20,8 @@
 }
 
 .project__meta {
-    margin-top: $spacer * 4;
+    margin-top: $spacer * 5;
-    margin-bottom: $spacer * 4;
+    margin-bottom: $spacer * 5;
 
     @media (min-width: 40rem) {
         display: flex;
@@ -45,83 +45,3 @@
         color: $brand-grey-light;
     }
 }
-
-.project__nav {
-    display: flex;
-    justify-content: space-between;
-}
-
-.project__nav__image {
-    margin: 0;
-    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
-}
-
-.project__nav__item {
-    flex: 0 0 48%;
-    position: relative;
-
-    &:first-child {
-        text-align: left;
-    }
-
-    &:last-child {
-        text-align: right;
-    }
-
-    @media (min-width: 45rem) {
-        flex-basis: 33%;
-    }
-}
-
-.project__nav__link {
-    &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 2;
-        background: transparent;
-        transition: background .2s ease-out;
-    }
-
-    &:hover,
-    &:focus {
-        &::after {
-            background: rgba($brand-cyan, .1);
-        }
-    }
-}
-
-.project__nav__title {
-    font-size: $font-size-small;
-    padding: $spacer / 2 $spacer / 4;
-    margin: 0;
-
-    @media (min-width: 45rem) {
-        font-size: $font-size-base;
-        padding: $spacer / 2 $spacer;
-    }
-}
-
-.project__nav__index {
-    height: 100%;
-    display: block;
-    align-self: center;
-    margin-top: -$spacer;
-
-    &:first-child {
-        margin-left: 48.5%;
-    }
-
-    &:last-child {
-        margin-right: auto;
-    }
-
-    .icon {
-        fill: $brand-grey-light;
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-}

src/components/organisms/Projects.js

@@ -8,7 +8,7 @@ const Projects = ({ data }) => {
   const projects = data.allProjectsJson.edges
 
   return (
-    <div className="projects full-width">
+    <div className="projects full-width" id="projects">
       {projects.map(({ node }) => (
         <Link
           key={node.slug}