updated projects

package.json

@@ -9,6 +9,7 @@
     "react-dom": "^16.3.0",
     "react-helmet": "^5.2.0",
     "react-lazyload": "^2.3.0",
+    "react-markdown": "^3.3.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "react-transition-group": "^2.3.0"

public/manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "Matthias Kretschmann",
-  "name": "Portfolio of Matthias Kretschmann",
+  "name": "Portfolio of Designer & Developer Matthias Kretschmann",
   "icons": [
     {
       "src": "favicon.ico",
@@ -10,6 +10,6 @@
   ],
   "start_url": "./index.html",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#015565",
-  "background_color": "#ffffff"
+  "background_color": "#e7eef4"
 }

src/components/pages/Home.js

@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import Header from '../molecules/Header'
 import Projects from '../organisms/Projects'
-import './Home.css'
 
 class Home extends Component {
   render() {

src/components/templates/Project.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet/es/Helmet'
+import ReactMarkdown from 'react-markdown'
 import Header from '../molecules/Header'
 import Content from '../atoms/Content'
 import FullWidth from '../atoms/FullWidth'
@@ -10,8 +11,10 @@ import './Project.css'
 const Project = ({ project }) => {
   const title = project.title
   const img = project.img
+  const img_more = project.img_more
   const description = project.description
   const links = project.links
+  const techstack = project.techstack
 
   return (
     <Fragment>
@@ -25,19 +28,42 @@ const Project = ({ project }) => {
         <article className="project">
           <Content>
             <h1 className="project__title">{title}</h1>
-            <p className="project__description">{description}</p>
+            <ReactMarkdown source={description} escapeHtml={false} className="project__description" />
 
             <FullWidth>
               <img className="project__image" src={images[img]} alt={title} />
             </FullWidth>
 
-            <ul>
+            <FullWidth>
-              {!!links && Object.keys(links).map(key => (
+              {!!img_more && img_more.map(key => (
-                <li key={key}>
+                <img key={key} className="project__image" src={images[key]} alt={title} />
-                  <a href={links[key]}>{key}</a>
-                </li>
               ))}
-            </ul>
+            </FullWidth>
+
+            <footer className="project__meta">
+              <div className="project__techstack">
+                <h3 className="project__meta__title">Technologies <span>The tech stack I was involved with.</span></h3>
+                <ul>
+                  {!!techstack && techstack.map(tech => (
+                    <li key={tech}>
+                      {tech}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="project__links">
+                <h3 className="project__meta__title">Links <span>See the project live on the interwebz.</span></h3>
+                <ul>
+                  {!!links && Object.keys(links).map(key => (
+                    <li key={key}>
+                      <a href={links[key]}>{key}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </footer>
+
           </Content>
         </article>
       </main>

src/components/templates/Project.scss

@@ -16,4 +16,51 @@
 
 .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;
+
+    @media (min-width: 40rem) {
+        display: flex;
+        justify-content: space-between;
+
+        > div {
+            flex: 0 0 45%;
+        }
+    }
+}
+
+.project__techstack {
+    ul {
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    li {
+        display: inline-block;
+        padding: $spacer / 4;
+        background: darken($brand-light, 3%);
+        flex: 0 0 28%;
+        margin-bottom: 4%;
+        text-align: center;
+        border-radius: 4rem;
+        font-size: $font-size-small;
+    }
+}
+
+.project__meta__title {
+    font-size: $font-size-h3;
+    margin-bottom: $spacer * 1.5;
+
+    span {
+        display: block;
+        margin-top: $spacer / 3;
+        font-size: $font-size-base;
+        font-family: $font-family-base;
+        color: $brand-grey-light;
+    }
 }

src/data/projects.json

@@ -6,7 +6,15 @@
     "links": {
       "Link": "https://oceanprotocol.com"
     },
-    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
+    "description": "Conceptualizing and executing the creative and visual direction of the Ocean Protocol brand. Leading the UI design & development of all Ocean Protocol web properties. \n\nInitial website in collaboration with [Balance](https://balance.io/).",
+    "techstack": [
+      "React",
+      "SCSS",
+      "JavaScript",
+      "Travis",
+      "AWS S3",
+      "Cloudflare"
+    ]
   },
   {
     "title": "IPDB",
@@ -16,7 +24,16 @@
       "Link": "https://ipdb.io",
       "GitHub": "https://github.com/ipdb/website"
     },
-    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix.",
+    "techstack": [
+      "Jekyll",
+      "Gulp",
+      "SCSS",
+      "JavaScript",
+      "Travis",
+      "AWS S3",
+      "Cloudflare"
+    ]
   },
   {
     "title": "Berlin Innovation Ventures",
@@ -25,7 +42,13 @@
     "links": {
       "Link": "http://berlininnovation.vc"
     },
-    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix.",
+    "techstack": [
+      "Jekyll",
+      "Gulp",
+      "SCSS",
+      "JavaScript"
+    ]
   },
   {
     "title": "9984 >> Summit 2017",
@@ -35,26 +58,59 @@
       "Link": "https://2017.9984.io",
       "GitHub": "https://github.com/9984/2017.9984.io"
     },
-    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
+    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix.",
+    "techstack": [
+      "Jekyll",
+      "Gulp",
+      "SCSS",
+      "JavaScript",
+      "Travis",
+      "AWS S3",
+      "Cloudflare"
+    ]
   },
   {
     "title": "BigchainDB",
     "slug": "bigchaindb",
     "img": "bigchaindb",
     "links": {
-      "Link": "https://www.bigchaindb.com"
+      "Link": "https://www.bigchaindb.com",
+      "GitHub": "https://github.com/bigchaindb/site"
     },
-    "description": "Laudem antiopam mea eu. Nam in accusam mediocritatem, eos ad paulo putent, pericula appellantur te ius. Magna debet id cum, probo eloquentiam sea ut. Cu eam graeco disputationi, graece theophrastus no his, duo errem expetendis te. Duo ea soleat ignota temporibus, in vim scaevola salutandi. Postea possit est at, ea vitae necessitatibus vix."
+    "description": "Conceptualizing and executing the creative and visual direction of the BigchainDB brand. Leading the UI design & development of all BigchainDB web properties.",
+    "techstack": [
+      "Jekyll",
+      "Gulp",
+      "SCSS",
+      "JavaScript",
+      "Travis",
+      "AWS S3",
+      "Cloudflare"
+    ]
   },
   {
     "title": "ChartMogul",
     "slug": "chartmogul",
-    "img": "chartmogul.png",
+    "img": "chartmogul",
-    "img2x": "chartmogul@2x.png",
+    "img_more": [
+      "chartmogul01",
+      "chartmogul02"
+    ],
     "links": {
       "Link": "https://chartmogul.com/stripe/"
     },
-    "description": ""
+    "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": [
+      "Jekyll",
+      "Gulp",
+      "SCSS",
+      "JavaScript",
+      "Travis",
+      "AWS S3",
+      "Cloudflare",
+      "Ruby on Rails",
+      "Backbone.js"
+    ]
   },
   {
     "title": "ShareTheMeal ",

src/images/index.js

@@ -3,11 +3,17 @@ import ipdb from './portfolio-ipdb.png'
 import biv from './portfolio-biv.png'
 import ninenineeightfour from './portfolio-9984.png'
 import bigchaindb from './portfolio-bigchaindb.png'
+import chartmogul from './portfolio-chartmogul.png'
+import chartmogul01 from './portfolio-chartmogul-01.png'
+import chartmogul02 from './portfolio-chartmogul-02.png'
 
 export default {
   oceanprotocol,
   ipdb,
   biv,
   ninenineeightfour,
-  bigchaindb
+  bigchaindb,
+  chartmogul,
+  chartmogul01,
+  chartmogul02
 }

src/stylesheets/_variables.scss

@@ -24,7 +24,7 @@ $font-size-root             : 16px;
 $font-size-base             : 1rem;
 $font-size-large            : 1.2rem;
 $font-size-small            : .8rem;
-$font-size-mini             : .6rem;
+$font-size-mini             : .7rem;
 
 $font-size-h1               : 3rem;
 $font-size-h2               : 2rem;
@@ -43,7 +43,7 @@ $font-color-base            : $text-color;
 $font-family-monospace      : Menlo, Monaco, Consolas, 'Courier New', monospace;
 
 $font-family-headings       : 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
-$font-weight-headings       : 500;
+$font-weight-headings       : 400;
 $line-height-headings       : 1.1;
 $color-headings:            $brand-main;