more projects, switch image sizes

data/projects.json

@@ -15,6 +15,7 @@
       "Sketch",
       "Affinity Designer",
       "React",
+      "HTML",
       "SCSS",
       "JavaScript",
       "Travis",
@@ -39,6 +40,7 @@
       "Sketch",
       "Jekyll",
       "Gulp",
+      "HTML",
       "SCSS",
       "JavaScript",
       "Travis",
@@ -58,6 +60,7 @@
       "Sketch",
       "Jekyll",
       "Gulp",
+      "HTML",
       "SCSS",
       "JavaScript"
     ]
@@ -75,6 +78,7 @@
       "Sketch",
       "Jekyll",
       "Gulp",
+      "HTML",
       "SCSS",
       "JavaScript",
       "Travis",
@@ -93,7 +97,8 @@
     ],
     "links": {
       "Link": "https://www.bigchaindb.com",
-      "GitHub": "https://github.com/bigchaindb/site"
+      "GitHub": "https://github.com/bigchaindb/site",
+      "Dribbble": "https://dribbble.com/shots/2522184-BigchainDB-site"
     },
     "description": "Conceptualizing and executing the creative and visual direction of the BigchainDB brand. Leading the UI design & development of all BigchainDB web properties.\n\nKey visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
     "techstack": [
@@ -102,6 +107,7 @@
       "Illustrator",
       "Jekyll",
       "Gulp",
+      "HTML",
       "SCSS",
       "JavaScript",
       "Travis",
@@ -118,13 +124,15 @@
       "chartmogul02"
     ],
     "links": {
-      "Link": "https://chartmogul.com/stripe/"
+      "Link": "https://chartmogul.com/stripe/",
+      "Dribbble": "https://dribbble.com/kremalicious/projects/311439-ChartMogul"
     },
     "description": "Co-designing and leading the front-end development of various ChartMogul web properties. Creating and implementing a UI design system into the ChartMogul application.",
     "techstack": [
       "Sketch",
       "Affinity Designer",
       "Illustrator",
+      "HTML",
       "SCSS",
       "JavaScript",
       "PHP",
@@ -151,6 +159,7 @@
       "Illustrator",
       "Jekyll",
       "Gulp",
+      "HTML",
       "SCSS",
       "JavaScript",
       "Travis",
@@ -163,21 +172,24 @@
     "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. 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.",
+    "description": "From 2012 to 2015 I worked at ezeep, where 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",
       "ezeep03",
-      "ezeep04"
+      "ezeep04",
+      "ezeep05"
     ],
     "links": {
-      "Link": "https://kremalicious.com/enterprise-software-sucks/"
+      "Info": "https://kremalicious.com/enterprise-software-sucks/",
+      "Dribbble": "https://dribbble.com/kremalicious/projects/84318-ezeep"
     },
     "techstack": [
       "Photoshop",
       "Illustrator",
       "InDesign",
       "Sketch",
+      "HTML",
       "SCSS",
       "JavaScript",
       "PHP",
@@ -190,28 +202,11 @@
       "Electron"
     ]
   },
-  {
-    "title": "Exquisite Droid",
-    "slug": "exquisitedroid",
-    "img": "exquisitedroid",
-    "links": {
-      "Link": "https://exquisitedroid.com",
-      "Dribbble": "https://dribbble.com/shots/380597-ExquisiteDroid-Header"
-    },
-    "description": "Designing, developing and writing a showcase website presenting the most beautiful and usable apps created for Android.",
-    "techstack": [
-      "Photoshop",
-      "CSS",
-      "JavaScript",
-      "PHP",
-      "WordPress"
-    ]
-  },
   {
     "title": "Mr. Reader",
     "slug": "mr-reader",
     "img": "mrreader",
-    "description": "Designing the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful RSS feed reader for iPad.",
+    "description": "I designed the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful RSS feed reader for iPad.",
     "techstack": [
       "Photoshop"
     ]
@@ -221,19 +216,13 @@
     "slug": "ipixelpad",
     "img": "ipixelpad",
     "links": {
-      "Info": "https://kremalicious.com/ipixelpad/"
+      "Download": "https://kremalicious.com/ipixelpad/"
     },
     "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 in the sizes 48px, 32px and 16px.",
     "techstack": [
       "Photoshop"
     ]
   },
-  {
-    "title": "Shortmoves 10",
-    "slug": "shortmoves10",
-    "img": "shortmoves10.jpg",
-    "description": ""
-  },
   {
     "title": "Out Of Whale Oil",
     "slug": "out-of-whale-oil",
@@ -251,42 +240,38 @@
     ]
   },
   {
-    "title": "mluBlogs",
+    "title": "Martin-Luther-Universität Halle-Wittenberg",
-    "slug": "mlublogs",
+    "slug": "unihalle",
-    "img": "mlublogs.png",
+    "img": "unihalle",
+    "img_more": [
+      "unihalle01",
+      "unihalle02"
+    ],
     "links": {
       "Link": "http://blogs.urz-uni-halle.de"
     },
-    "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.",
+    "description": "I worked for over 3 years 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.\n\nAdditionally, I conceptualized, designed, created, and maintained the blog network & community for all students & staff.",
     "techstack": [
       "Photoshop",
+      "Illustrator",
+      "HTML",
       "SCSS",
       "JavaScript",
       "PHP",
+      "Ruby on Rails",
       "WordPress",
-      "Ilias"
+      "Ilias",
+      "Stud.IP"
     ]
   },
   {
     "title": "Coffee Cup",
-    "slug": "coffee-cup",
+    "slug": "coffee-cup-icon",
-    "img": "coffee-cup.jpg",
+    "img": "coffeecup",
     "links": {
-      "Info": "http://www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/"
+      "Download": "https://kremalicious.com/coffee-cup-icon/"
     },
-    "description": "",
+    "description": "Desktop icons showing the fuel of most designers. Released as a goodie on [kremalicious.com](https://kremalicious.com/coffee-cup-icon/).",
-    "techstack": [
-      "Photoshop"
-    ]
-  },
-  {
-    "title": "Niépce's Camera Obscura",
-    "slug": "camera-obscura",
-    "img": "camera-obscura.jpg",
-    "links": {
-      "Info": "http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-and-the-history-of-the-first-photograph/"
-    },
-    "description": "",
     "techstack": [
       "Photoshop"
     ]
@@ -294,7 +279,18 @@
   {
     "title": "Allinnia Creative Group",
     "slug": "allinnia",
-    "img": "allinnia.jpg",
+    "img": "allinnia",
-    "description": ""
+    "img_more": [
+      "allinnia01",
+      "allinnia02"
+    ],
+    "description": "",
+    "techstack": [
+      "Photoshop",
+      "HTML",
+      "CSS",
+      "JavaScript",
+      "PHP"
+    ]
   }
 ]

src/components/atoms/FullWidth.scss

@@ -6,16 +6,4 @@
     margin-left: -50vw;
     margin-right: -50vw;
     text-align: center;
-
-    img {
-        max-height: 105vh;
-        width: auto;
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-
-        @media (min-width: 2559px) {
-            max-width: 2560px;
-        }
-    }
 }

src/components/atoms/Icons.js

@@ -75,5 +75,9 @@ export const Index = props => <svg className="icon" viewBox="0 0 20 20" width="2
   </svg>
 
 export const Info = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
-  <path d="M10,19.1791992 C4.93046826,19.1791992 0.820800781,15.0695317 0.820800781,10 C0.820800781,4.93046826 4.93046826,0.820800781 10,0.820800781 C15.0695317,0.820800781 19.1791992,4.93046826 19.1791992,10 C19.1791992,15.0695317 15.0695317,19.1791992 10,19.1791992 Z M11.316,6.031 C11.316,5.85366578 11.2810003,5.68800077 11.211,5.534 C11.1409996,5.37999923 11.0476672,5.24700056 10.931,5.135 C10.8143327,5.02299944 10.6743341,4.93433366 10.511,4.869 C10.3476658,4.80366634 10.1773342,4.771 10,4.771 C9.8133324,4.771 9.64066746,4.80599965 9.482,4.876 C9.32333254,4.94600035 9.18333394,5.03699944 9.062,5.149 C8.94066606,5.26100056 8.84733366,5.39399923 8.782,5.548 C8.71666634,5.70200077 8.684,5.86299916 8.684,6.031 C8.684,6.37633506 8.80999874,6.67266543 9.062,6.92 C9.31400126,7.16733457 9.6266648,7.291 10,7.291 C10.1773342,7.291 10.3476658,7.25833366 10.511,7.193 C10.6743341,7.12766634 10.8143327,7.03900056 10.931,6.927 C11.0476672,6.81499944 11.1409996,6.68200077 11.211,6.528 C11.2810003,6.37399923 11.316,6.20833422 11.316,6.031 Z M8.852,15.229 L11.148,15.229 L11.148,8.257 L8.852,8.257 L8.852,15.229 Z" />
+  <path d="M10,19 C5.02943725,19 1,14.9705627 1,10 C1,5.02943725 5.02943725,1 10,1 C14.9705627,1 19,5.02943725 19,10 C19,14.9705627 14.9705627,19 10,19 Z M11.2903086,6.10848407 C11.2903086,5.93461182 11.2559923,5.77218098 11.1873585,5.62118666 C11.1187247,5.47019234 11.0272144,5.33979011 10.9128247,5.22997606 C10.7984351,5.12016201 10.6611696,5.03322719 10.5010241,4.969169 C10.3408786,4.9051108 10.1738722,4.87308219 10,4.87308219 C9.81697658,4.87308219 9.64768246,4.90739856 9.49211256,4.97603234 C9.33654266,5.04466612 9.19927715,5.1338887 9.08031193,5.24370275 C8.96134671,5.3535168 8.86983638,5.48391903 8.80577818,5.63491335 C8.74171998,5.78590766 8.70969137,5.94376299 8.70969137,6.10848407 C8.70969137,6.44707739 8.83323032,6.7376227 9.08031193,6.98012873 C9.32739354,7.22263476 9.63395317,7.34388595 10,7.34388595 C10.1738722,7.34388595 10.3408786,7.31185733 10.5010241,7.24779914 C10.6611696,7.18374094 10.7984351,7.09680612 10.9128247,6.98699207 C11.0272144,6.87717802 11.1187247,6.7467758 11.1873585,6.59578148 C11.2559923,6.44478716 11.2903086,6.28235631 11.2903086,6.10848407 Z M8.87441162,15.1269178 L11.1255884,15.1269178 L11.1255884,8.2910274 L8.87441162,8.2910274 L8.87441162,15.1269178 Z" />
+</svg>
+
+export const Download = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+  <path d="M10,19 C14.9707692,19 19,14.9707692 19,10 C19,5.03061538 14.9707692,1 10,1 C5.02923077,1 1,5.03061538 1,10 C1,14.9707692 5.02923077,19 10,19 Z M6.53846154,10.6923077 C6.80846154,10.4223077 7.24738462,10.4223077 7.51738462,10.6923077 L9.30769231,12.4826154 L9.30769231,5.84615385 C9.30769231,5.464 9.61784615,5.15384615 10,5.15384615 C10.3821538,5.15384615 10.6923077,5.464 10.6923077,5.84615385 L10.6923077,12.4826154 L12.4826154,10.6923077 C12.7526154,10.4223077 13.1915385,10.4223077 13.4615385,10.6923077 C13.7315385,10.9623077 13.7315385,11.4012308 13.4615385,11.6712308 L10.4901538,14.644 C10.2201538,14.9126154 9.78123077,14.9126154 9.51123077,14.644 L6.53846154,11.6712308 C6.26846154,11.4012308 6.26846154,10.9623077 6.53846154,10.6923077 Z" />
 </svg>

src/components/atoms/ProjectImage.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import './ProjectImage.scss'
+
+const ProjectImage = (props) => (
+  <img
+    className="project__image"
+    {...props}
+  />
+)
+
+export default ProjectImage

src/components/atoms/ProjectImage.scss

@@ -0,0 +1,14 @@
+@import 'variables';
+
+.project__image {
+    max-height: 100vh;
+    width: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
+
+    @media (min-width: 1440px) {
+        max-width: 1440px;
+    }
+}

src/components/molecules/Footer.scss

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

src/components/molecules/ProjectLinks.js

@@ -1,20 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import { Chain, GitHub, Dribbble, Info } from '../atoms/Icons'
+import { Chain, GitHub, Dribbble, Info, Download } from '../atoms/Icons'
 import './ProjectLinks.scss'
 
 const LinkIcon = ({ title }) => {
-  if (title === 'Link') {
+  switch (title) {
-    return <Chain />
+    case 'Link':
-  } else if (title === 'GitHub') {
+      return <Chain />
-    return <GitHub />
+    case 'GitHub':
-  } else if (title === 'Dribbble') {
+      return <GitHub />
-    return <Dribbble />
+    case 'Dribbble':
-  } else if (title === 'Info') {
+      return <Dribbble />
-    return <Info />
+    case 'Info':
-  } else {
+      return <Info />
-    return null
+    case 'Download':
+      return <Download />
+    default:
+      return null
   }
 }
 

src/components/organisms/Project.js

@@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
 import Content from '../atoms/Content'
 import FullWidth from '../atoms/FullWidth'
+import ProjectImage from '../atoms/ProjectImage'
 import ProjectTechstack from '../molecules/ProjectTechstack'
 import ProjectLinks from '../molecules/ProjectLinks'
 import ProjectNav from '../molecules/ProjectNav'
@@ -37,15 +38,17 @@ const Project = ({ pathContext }) => {
             <ReactMarkdown source={description} escapeHtml={false} className="project__description" />
 
             <FullWidth>
-              <img className="project__image" src={images[img]} alt={title} />
+              <ProjectImage
+                src={images[img]}
+                alt={title}
+              />
             </FullWidth>
 
             {!!img_more &&
               <FullWidth>
                 {img_more.map(key => (
-                  <img
+                  <ProjectImage
                     key={key}
-                    className="project__image"
                     src={images[key]}
                     alt={title}
                   />

src/components/organisms/Project.scss

@@ -1,5 +1,11 @@
 @import 'variables';
 
+.project {
+    .project__image {
+        margin-bottom: $spacer * 6;
+    }
+}
+
 .project__title {
     font-size: $font-size-h2;
 
@@ -14,11 +20,6 @@
     margin-bottom: $spacer * 4;
 }
 
-.project__image {
-    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
-    margin-bottom: $spacer * 3;
-}
-
 .project__meta {
     margin-top: $spacer * 5;
     margin-bottom: $spacer * 5;

src/components/organisms/Projects.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
+import ProjectImage from '../atoms/ProjectImage'
 import images from '../../images'
 import './Projects.scss'
 
@@ -16,8 +17,7 @@ const Projects = ({ data }) => {
           className="projects__project"
         >
           <h1 className="projects__project__title">{node.title}</h1>
-          <img
+          <ProjectImage
-            className="projects__project__image"
             src={images[node.img]}
             alt={node.title}
           />

src/components/organisms/Projects.scss

@@ -4,6 +4,12 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+
+    .project__image {
+        @media (min-width: 90rem) {
+            max-width: 100%;
+        }
+    }
 }
 
 .projects__project {
@@ -11,10 +17,10 @@
     background-color: $brand-grey-light;
     margin: 0 auto $spacer * 4 auto;
 
-    @media (min-width: 85rem) {
+    @media (min-width: 90rem) {
-        flex: 0 0 calc(50% - #{$spacer / 2});
+        flex: 0 0 calc(50% - #{$spacer * 2});
         margin: 0;
-        margin-bottom: $spacer;
+        margin-bottom: $spacer * 4;
     }
 
     &::after {
@@ -32,7 +38,7 @@
     &:hover,
     &:focus {
         &::after {
-            background: rgba($brand-cyan, .1);
+            background: rgba($brand-cyan, .05);
         }
     }
 }
@@ -42,9 +48,3 @@
     font-size: 0;
     margin: 0;
 }
-
-.projects__project__image {
-    margin: 0;
-    display: block;
-    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
-}

src/images/index.js

@@ -19,12 +19,19 @@ import ezeep01 from './portfolio-ezeep-01.png'
 import ezeep02 from './portfolio-ezeep-02.png'
 import ezeep03 from './portfolio-ezeep-03.png'
 import ezeep04 from './portfolio-ezeep-04.png'
-import exquisitedroid from './portfolio-exquisitedroid.png'
+import ezeep05 from './portfolio-ezeep-05.png'
 import mrreader from './portfolio-mrreader.png'
 import outofwhaleoil from './portfolio-outofwhaleoil.png'
 import outofwhaleoil01 from './portfolio-outofwhaleoil-01.png'
 import outofwhaleoil02 from './portfolio-outofwhaleoil-02.png'
 import ipixelpad from './portfolio-ipixelpad.png'
+import unihalle from './portfolio-unihalle.png'
+import unihalle01 from './portfolio-unihalle-01.png'
+import unihalle02 from './portfolio-unihalle-02.png'
+import coffeecup from './portfolio-coffeecup.png'
+import allinnia from './portfolio-allinnia.png'
+import allinnia01 from './portfolio-allinnia-01.png'
+import allinnia02 from './portfolio-allinnia-02.png'
 
 export default {
   oceanprotocol,
@@ -48,10 +55,17 @@ export default {
   ezeep02,
   ezeep03,
   ezeep04,
-  exquisitedroid,
+  ezeep05,
   mrreader,
   outofwhaleoil,
   outofwhaleoil01,
   outofwhaleoil02,
   ipixelpad,
+  unihalle,
+  unihalle01,
+  unihalle02,
+  coffeecup,
+  allinnia,
+  allinnia01,
+  allinnia02,
 }

src/layouts/index.scss

@@ -100,6 +100,7 @@ video,
 svg {
     max-width: 100%;
     height: auto;
+    margin: 0;
 }
 
 .app {