lots of changes

content/meta.json

@@ -1,11 +1,14 @@
 {
   "title": "Matthias Kretschmann",
   "tagline": "Designer & Developer",
-  "description": "",
+  "description": "Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.",
   "url": "https://matthiaskretschmann.com",
+  "email": "m@kretschmann.io",
   "social": {
     "Twitter": "https://twitter.com/kremalicious",
     "GitHub": "https://github.com/kremalicious",
     "Facebook": "https://facebook.com/matthiaskretschmann"
-  }
+  },
+  "available": false,
+  "googleanalytics": "UA-1441794-4"
 }

content/projects.json

@@ -237,12 +237,6 @@
     },
     "description": ""
   },
-  {
-    "title": "Aref Jdey",
-    "slug": "aref-jdey",
-    "img": "aref-jdey.jpg",
-    "description": ""
-  },
   {
     "title": "Niépce's Camera Obscura",
     "slug": "camera-obscura",
@@ -257,14 +251,5 @@
     "slug": "allinnia",
     "img": "allinnia.jpg",
     "description": ""
-  },
-  {
-    "title": "mkretschmann.com v1",
-    "slug": "mkv1",
-    "img": "mkv1.jpg",
-    "links": {
-      "Info": "http://www.kremalicious.com/2009/02/portal-thingy/"
-    },
-    "description": ""
   }
 ]

gatsby-config.js

@@ -1,4 +1,4 @@
-const meta = require('./src/data/meta.json')
+const meta = require('./content/meta.json')
 
 module.exports = {
   siteMetadata: {
@@ -17,10 +17,19 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'data',
+        name: 'content',
-        path: `${__dirname}/src/data/`,
+        path: `${__dirname}/content/`,
       },
     },
     'gatsby-transformer-json',
+    {
+      resolve: 'gatsby-plugin-google-analytics',
+      options: {
+        trackingId: `${meta.googleanalytics}`,
+        head: false,
+        anonymize: true,
+        respectDNT: true,
+      },
+    },
   ],
 }

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "gatsby": "^1.9.241",
     "gatsby-link": "^1.6.39",
+    "gatsby-plugin-google-analytics": "^1.0.28",
     "gatsby-plugin-react-helmet": "^2.0.8",
     "gatsby-plugin-react-next": "^1.0.11",
     "gatsby-plugin-sass": "^1.0.25",

src/components/atoms/Head.js

@@ -4,7 +4,7 @@ import Helmet from 'react-helmet'
 
 const Head = ({ meta }) => {
   return <Helmet defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`} titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}>
-      <meta name="desacription" content={meta.description} />
+      <meta name="description" content={meta.description} />
       <link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
     </Helmet>
 }

src/components/molecules/Footer.js

@@ -7,7 +7,7 @@ const Footer = ({ meta }) => {
 
   return (
     <footer className="footer">
-      <small>© {year} {meta.title} &mdash; All Rights Reserved</small>
+      <small>&copy; {year} {meta.title} &mdash; All Rights Reserved</small>
     </footer>
   )
 }

src/components/molecules/Header.js

@@ -1,16 +1,16 @@
 import React from 'react'
-import Link from 'react-router-dom/Link'
+import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import Social from './Social'
 import './Header.scss'
 
 const Header = ({ meta }) => {
-  const minimal = location.pathname === '/' ? false : true
+  const isHomepage = location.pathname === '/'
-  const classes = minimal ? 'header header--minimal' : 'header'
+  const classes = isHomepage ? 'header' : 'header header--minimal'
 
   return (
     <header className={classes}>
-      <Link className="header__name" to="/">
+      <Link className="header__name" to={'/'}>
         <span className="header__logo">␥</span>
         <h1 className="header__title">{meta.title}</h1>
         <p className="header__description">{meta.tagline}</p>
@@ -22,7 +22,6 @@ const Header = ({ meta }) => {
 }
 
 Header.propTypes = {
-  minimal: PropTypes.bool,
   meta: PropTypes.object,
 }
 

src/components/molecules/ProjectLinks.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { Chain, GitHub, Dribbble } from '../atoms/Icons'
 import './ProjectLinks.scss'
 
@@ -16,19 +17,24 @@ const LinkIcon = ({ title }) => {
 }
 
 const ProjectLinks = ({ links }) => (
-  <ul className="projectlinks">
+  <div className="project__links">
-    {!!links &&
+    <h3 className="project__meta__title">
-      Object.keys(links).map(key => {
+      Links <span>See the project live on the interwebz.</span>
+    </h3>
+
+    <ul>
+      {Object.keys(links).map(key => {
         if (links[key]) {
           return <li key={key}>
-              <a href={links[key]}>
+            <OutboundLink href={links[key]}>
-                <LinkIcon title={key} />
+              <LinkIcon title={key} />
-                {key}
+              {key}
-              </a>
+            </OutboundLink>
-            </li>
+          </li>
         }
       })}
-  </ul>
+    </ul>
+  </div>
 )
 
 ProjectLinks.propTypes = {

src/components/molecules/ProjectLinks.scss

@@ -1,11 +1,13 @@
 @import 'variables';
 
-.projectlinks {
+.project__links {
-    padding: 0;
+    ul {
-    display: flex;
+        padding: 0;
-    flex-wrap: wrap;
+        display: flex;
-    justify-content: space-between;
+        flex-wrap: wrap;
-    width: 100%;
+        justify-content: space-between;
+        width: 100%;
+    }
 
     li {
         display: block;

src/components/molecules/ProjectTechstack.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './ProjectTechstack.scss'
+
+const ProjectTechstack = ({ techstack }) => (
+  <div className="project__techstack">
+    <h3 className="project__meta__title">
+      Technologies <span>The tech stack I was involved with.</span>
+    </h3>
+    <ul>
+      {techstack.map(tech => <li key={tech}>{tech}</li>)}
+    </ul>
+  </div>
+)
+
+ProjectTechstack.propTypes = {
+  techstack: PropTypes.array,
+}
+
+export default ProjectTechstack

src/components/molecules/ProjectTechstack.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+
+.project__techstack {
+    ul {
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    li {
+        display: inline-block;
+        padding: 0;
+        flex: 0 0 (100% / 3);
+        margin-bottom: $spacer;
+        border-radius: 4rem;
+        font-size: $font-size-small;
+    }
+}

src/components/molecules/Social.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { Twitter, GitHub, Facebook } from '../atoms/Icons'
 import './Social.scss'
 
@@ -19,9 +20,9 @@ const Social = ({ meta }) => {
   return (
     <aside className="social">
       {Object.keys(social).map((key, i) => (
-        <a className="social__link" href={social[key]} key={i} title={key}>
+        <OutboundLink className="social__link" href={social[key]} key={i} title={key}>
           <SocialIcon title={key} />
-        </a>
+        </OutboundLink>
       ))}
     </aside>
   )

src/components/molecules/Social.scss

@@ -20,6 +20,7 @@
     height: 1.35rem;
     box-shadow: 0 3px 5px rgba($brand-main, .1), 0 5px 16px rgba($brand-main, .1);
     border-radius: .25rem;
+    transition-property: transform, background, box-shadow;
 
     &:hover,
     &:focus {

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 ProjectTechstack from '../molecules/ProjectTechstack'
 import ProjectLinks from '../molecules/ProjectLinks'
 import images from '../../images'
 import './Project.scss'
@@ -33,9 +34,9 @@ const Project = props => {
               <img className="project__image" src={images[img]} alt={title} />
             </FullWidth>
 
-            <FullWidth>
+            {!!img_more &&
-              {!!img_more &&
+              <FullWidth>
-                img_more.map(key => (
+                {img_more.map(key => (
                   <img
                     key={key}
                     className="project__image"
@@ -43,27 +44,12 @@ const Project = props => {
                     alt={title}
                   />
                 ))}
-            </FullWidth>
+              </FullWidth>
+            }
 
             <footer className="project__meta">
-              <div className="project__techstack">
+              {!!techstack && <ProjectTechstack techstack={techstack} />}
-                <h3 className="project__meta__title">
+              {!!links && <ProjectLinks links={links} />}
-                  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>
-                <ProjectLinks links={links} />
-              </div>
             </footer>
           </Content>
         </article>

src/components/organisms/Project.scss

@@ -32,24 +32,6 @@
     }
 }
 
-.project__techstack {
-    ul {
-        padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    li {
-        display: inline-block;
-        padding: 0;
-        flex: 0 0 (100% / 3);
-        margin-bottom: $spacer;
-        border-radius: 4rem;
-        font-size: $font-size-small;
-    }
-}
-
 .project__meta__title {
     font-size: $font-size-h3;
     margin-bottom: $spacer * 1.5;

src/components/organisms/Projects.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
-import FadeIn from '../atoms/FadeIn'
 import images from '../../images'
 import './Projects.scss'
 
@@ -9,13 +8,15 @@ const Projects = ({ data }) => {
   const projects = data.allProjectsJson.edges
 
   return <div className="projects full-width">
-      {projects.map(({ node }) => <FadeIn key={node.slug}>
+      {projects.map(({ node }) =>
-          <Link key={node.slug} to={`/${node.slug}`} className="projects__project">
+        <Link
-            <h1 className="projects__project__title">{node.title}</h1>
+          key={node.slug}
+          to={`/${node.slug}`}
+          className="projects__project">
 
-            <img className="projects__project__image" src={images[node.img]} alt={node.title} />
+          <h1 className="projects__project__title">{node.title}</h1>
-          </Link>
+          <img className="projects__project__image" src={images[node.img]} alt={node.title} />
-        </FadeIn>)}
+        </Link>)}
     </div>
 }
 

src/layouts/index.js

@@ -7,7 +7,7 @@ import Footer from '../components/molecules/Footer'
 import './index.scss'
 
 const TemplateWrapper = props => {
-  const meta = props.data.allDataJson.edges[0].node
+  const meta = props.data.allContentJson.edges[0].node
 
   return <div className="app">
       <Head meta={meta} />
@@ -26,7 +26,7 @@ export default TemplateWrapper
 
 export const query = graphql`
   query metaQuery {
-    allDataJson {
+    allContentJson {
       edges {
         node {
           title

src/layouts/index.scss

@@ -77,7 +77,7 @@ h6 {
 a {
     color: $brand-cyan;
     text-decoration: none;
-    transition: .2s ease-out;
+    transition: color .2s ease-out;
 
     &:hover,
     &:focus {