project views, lots of cleanup

src/App.js

@@ -1,12 +1,10 @@
 import React from 'react'
-import Header from './components/molecules/Header.js'
 import FadeIn from './components/atoms/FadeIn'
 import Routes from './Routes'
 
 const App = () => (
   <FadeIn>
     <div className="app">
-      <Header />
       <Routes />
     </div>
   </FadeIn>

src/Routes.js

@@ -1,11 +1,25 @@
 import React from 'react'
-import { Route, Switch } from 'react-router-dom'
+import Switch from 'react-router-dom/Switch'
+import Route from 'react-router-dom/Route'
 import Home from './components/pages/Home'
+import Project from './components/organisms/Project'
 import NotFound from './components/pages/NotFound'
+import projects from './data/projects.json'
 
 const Routes = () => (
   <Switch>
-    <Route exact component={Home} path="/" />
+    <Route exact path="/" component={Home} />
+    {projects.map(project => (
+      <Route
+        key={project.slug}
+        path={`/${project.slug}`}
+        render={(props) =>
+          <Project
+            {...props}
+            project={project} />
+        }
+      />
+    ))}
     <Route component={NotFound} />
   </Switch>
 )

src/components/atoms/Content.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './Content.css'
+
+const Content = ({children}) => (
+  <div className="content">
+    {children}
+  </div>
+)
+
+Content.propTypes = {
+  children: PropTypes.node
+}
+
+export default Content

src/components/atoms/Content.scss

@@ -0,0 +1,4 @@
+.content {
+    max-width: 40rem;
+    margin: 0 auto;
+}

src/components/molecules/Header.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Social from './Social'
 import './Header.css'
-import { meta } from '../../constants'
+import meta from '../../data/meta.json'
 
 const Header = () => (
   <header className="header">

src/components/molecules/Social.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Twitter, GitHub, Facebook } from '../atoms/Icons'
-import { social } from '../../constants'
+import meta from '../../data/meta.json'
 import './Social.css'
 
+const social = meta.social
+
 const SocialIcon = ({ title }) => {
   if (title === 'Twitter') {
     return <Twitter />
@@ -15,9 +17,9 @@ const SocialIcon = ({ title }) => {
 
 const Social = () => (
   <aside className="social">
-    {social.map(link => (
+    {Object.keys(social).map((key, i) => (
-      <a className="social__link" href={link.url} key={link.title} title={link.title}>
+      <a className="social__link" href={social[key]} key={i} title={key}>
-        <SocialIcon title={link.title} />
+        <SocialIcon title={key} />
       </a>
     ))}
   </aside>

src/components/organisms/Project.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Content from '../atoms/Content'
+
+const Project = ({ project }) => {
+  const title = project.title
+  const img = project.img
+  const description = project.description
+  const links = project.links
+
+  return (
+    <main className="screen screen--project">
+      <Content>
+        <h1>{title}</h1>
+        <p>{description}</p>
+
+        {img}
+
+        <ul>
+          {Object.keys(links).map(key => (
+            <li key={key}>
+              <a href={links[key]}>{key}</a>
+            </li>
+          ))}
+        </ul>
+      </Content>
+    </main>
+  )
+}
+
+Project.propTypes = {
+  project: PropTypes.object
+}
+
+export default Project

src/components/pages/Home.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
+import Link from 'react-router-dom/Link'
 import LazyLoad from 'react-lazyload'
+import Header from '../molecules/Header'
 import FadeIn from '../atoms/FadeIn'
 import projects from '../../data/projects.json'
 import './Home.css'
@@ -9,13 +11,20 @@ class Home extends Component {
     return (
       <main className="screen screen--home">
 
+        <Header />
+
         <div className="projects">
             {projects.map(project => (
               <LazyLoad key={project.slug} height={700} offset={200} once>
                 <FadeIn>
-                  <article className="project" key={project.slug}>
+                  <Link
-                    <h1 className="project__title">{project.name}</h1>
+                    key={project.slug}
+                    to={{pathname: `/${project.slug}`}}
+                  >
+                    <article className="project">
+                      <h1 className="project__title">{project.title}</h1>
                     </article>
+                  </Link>
                 </FadeIn>
               </LazyLoad>
             ))}

src/constants.js

@@ -1,19 +0,0 @@
-export const meta = {
-  title: 'Matthias Kretschmann',
-  tagline: 'Designer & Developer'
-}
-
-export const social = [
-  {
-    title: 'Twitter',
-    url: 'https://twitter.com/kremalicious'
-  },
-  {
-    title: 'GitHub',
-    url: 'https://github.com/kremalicious'
-  },
-  {
-    title: 'Facebook',
-    url: 'https://facebook.com/matthiaskretschmann'
-  }
-]

src/data/meta.json

@@ -0,0 +1,10 @@
+{
+  "title": "Matthias Kretschmann",
+  "tagline": "Designer & Developer",
+  "description": "",
+  "social": {
+    "Twitter": "https://twitter.com/kremalicious",
+    "GitHub": "https://github.com/kremalicious",
+    "Facebook": "https://facebook.com/matthiaskretschmann"
+  }
+}

src/data/projects.json

@@ -1,278 +1,177 @@
 [
   {
-    "name": "Ocean Protocol",
+    "title": "Ocean Protocol",
-    "slug": "ocean-site",
+    "slug": "oceanprotocol",
-    "img": "ocean-site.png",
+    "img": "oceanprotocol.png",
-    "img2x": "ocean-site@2x.png",
+    "img2x": "oceanprotocol@2x.png",
-    "url": "https://oceanprotocol.com",
+    "links": {
-    "tags": ["web", "code", "design", "ci" ],
+      "Link": "https://oceanprotocol.com"
-    "slides": [ "ocean-site-1.png" ]
+    },
+    "description": ""
   },
   {
-    "name": "IPDB",
+    "title": "IPDB",
-    "slug": "ipdb-site",
+    "slug": "ipdb",
-    "img": "ipdb-site.png",
+    "img": "ipdb.png",
-    "img2x": "ipdb-site@2x.png",
+    "img2x": "ipdb@2x.png",
-    "url": "https://ipdb.io",
+    "links": {
-    "github": "https://github.com/ipdb/website",
+      "Link": "https://ipdb.io",
-    "tags": ["web", "code", "design", "ci"],
+      "GitHub": "https://github.com/ipdb/website"
-    "slides": [ "ipdb-site-1.png", "ipdb-site-2.png", "ipdb-site-3.png" ]
+    },
+    "description": "Bla Bla Bla"
   },
   {
-    "name": "9984 >> Summit 2017",
+    "title": "9984 >> Summit 2017",
-    "slug": "9984-site",
+    "slug": "9984",
-    "img": "9984-site.png",
+    "img": "9984.png",
-    "img2x": "9984-site@2x.png",
+    "img2x": "9984@2x.png",
-    "url": "https://2017.9984.io",
+    "links": {
-    "github": "https://github.com/9984/2017.9984.io",
+      "Link": "https://2017.9984.io",
-    "tags": [ "web", "code", "design", "ci" ],
+      "GitHub": "https://github.com/9984/2017.9984.io"
-    "slides": [ "9984-site-1.png", "9984-site-2.png", "9984-site-3.png" ]
+    },
+    "description": ""
   },
   {
-    "name": "BigchainDB",
+    "title": "BigchainDB",
-    "slug": "bigchaindb-site",
+    "slug": "bigchaindb",
-    "img": "bigchaindb-site.png",
+    "img": "bigchaindb.png",
-    "img2x": "bigchaindb-site@2x.png",
+    "img2x": "bigchaindb@2x.png",
-    "url": "https://www.bigchaindb.com",
+    "links": {
-    "tags": [ "web", "code", "design", "ci" ],
+      "Link": "https://www.bigchaindb.com"
-    "slides": [
+    },
-      "bigchaindb-site-1.png",
+    "description": ""
-      "bigchaindb-site-2.png",
-      "bigchaindb-site-3.png",
-      "bigchaindb-site-4.png"
-    ]
   },
   {
-    "name": "ChartMogul",
+    "title": "ChartMogul",
-    "slug": "chartmogul-landing",
+    "slug": "chartmogul",
-    "img": "chartmogul-landing.png",
+    "img": "chartmogul.png",
-    "img2x": "chartmogul-landing@2x.png",
+    "img2x": "chartmogul@2x.png",
-    "url": "https://chartmogul.com/stripe/",
+    "links": {
-    "tags": [ "web", "code", "design" ],
+      "Link": "https://chartmogul.com/stripe/"
-    "slides": [ "chartmogul-landing-1.png" ]
+    },
+    "description": ""
   },
   {
-    "name": "ShareTheMeal ",
+    "title": "ShareTheMeal ",
-    "slug": "sharethemeal-site",
+    "slug": "sharethemeal",
-    "img": "sharethemeal-site.png",
+    "img": "sharethemeal.png",
-    "img2x": "sharethemeal-site@2x.png",
+    "img2x": "sharethemeal@2x.png",
-    "url": "https://sharethemeal.org/",
+    "links": {
-    "tags": [ "web", "code" ]
+      "Link": "https://sharethemeal.org/"
+    },
+    "description": ""
   },
   {
-    "name": "ezeep Document Type Icons",
+    "title": "ezeep",
-    "slug": "ezeep-doc-icons",
+    "slug": "ezeep",
-    "img": "ezeep-doc-icons.png",
+    "img": "ezeep.png",
-    "img2x": "ezeep-doc-icons@2x.png",
+    "img2x": "ezeep@2x.png",
-    "tags": [ "web", "icon" ]
+    "description": ""
   },
   {
-    "name": "ezeep.com",
+    "title": "Category Icons",
-    "slug": "ezeep-site",
-    "img": "ezeep-site.png",
-    "img2x": "ezeep-site@2x.png",
-    "url": "https://www.ezeep.com",
-    "tags": [ "web", "code", "design", "ci" ]
-  },
-  {
-    "name": "ezeep Web App Printer Units",
-    "slug": "ezeep-web-app-printers",
-    "img": "ezeep-web-app-printers.png",
-    "img2x": "ezeep-web-app-printers@2x.png",
-    "url": "https://portal.ezeep.com",
-    "tags": [ "web", "ui", "code", "design" ],
-    "slides": [
-      "ezeep-web-app-printers-1.png"
-    ]
-  },
-  {
-    "name": "ezeep Android app",
-    "slug": "ezeep-android",
-    "img": "ezeep-android.png",
-    "img2x": "ezeep-android@2x.png",
-    "url": "https://www.ezeep.com",
-    "tags": [ "android", "app", "icon", "ui" ],
-    "slides": [
-      "ezeep-android-1.png",
-      "ezeep-android-2.png",
-      "ezeep-android-3.png"
-    ]
-  },
-  {
-    "name": "ezeep OS X Printer Icon",
-    "slug": "ezeep-printer-icon-osx",
-    "img": "ezeep-printer-icon-osx.png",
-    "img2x": "ezeep-printer-icon-osx@2x.png",
-    "tags": [ "icon" ]
-  },
-  {
-    "name": "ezeep Menu Icons",
-    "slug": "ezeep-menu-icons",
-    "img": "ezeep-menu-icons.png",
-    "img2x": "ezeep-menu-icons@2x.png",
-    "tags": [ "web", "icon" ]
-  },
-  {
-    "name": "ezeep connect",
-    "slug": "ezeep-connect-icon",
-    "img": "ezeep-connect-icon.png",
-    "img2x": "ezeep-connect-icon@2x.png",
-    "tags": [ "icon" ]
-  },
-  {
-    "name": "Mr. Reader",
-    "slug": "mr-reader-theme",
-    "img": "mr-reader-theme.jpg",
-    "url": "http://www.curioustimes.de/mrreader/themes/",
-    "tags": [ "app" ],
-    "slides": [
-      "mr-reader-theme-1.png",
-      "mr-reader-theme-2.png",
-      "mr-reader-theme-3.png"
-    ]
-  },
-  {
-    "name": "Category Icons",
     "slug": "category-icons",
     "img": "category-icons.jpg",
-    "infourl": "http://dribbble.com/shots/372450-Category-Icons",
+    "links": {
-    "tags": [ "icon" ]
+      "Info": "http://dribbble.com/shots/372450-Category-Icons"
+    },
+    "description": ""
   },
   {
-    "name": "Exquisite Droid",
+    "title": "Exquisite Droid",
     "slug": "exquisitedroid",
     "img": "exquisitedroid.jpg",
-    "url": "http://exquisitedroid.com",
+    "links": {
-    "tags": [ "web", "icon", "ci", "code", "design" ]
+      "Link": "http://exquisitedroid.com"
+    },
+    "description": ""
   },
   {
-    "name": "Mr. Reader",
+    "title": "Mr. Reader",
     "slug": "mr-reader",
     "img": "mr-reader.jpg",
     "img2x": "mr-reader@2x.jpg",
-    "url": "http://www.curioustimes.de/mrreader/",
+    "description": ""
-    "tags": [ "icon" ],
-    "slides": [
-      "mr-reader-1.jpg",
-      "mr-reader-2.jpg"
-    ]
   },
   {
-    "name": "IPP Halle",
+    "title": "IPP Halle",
     "slug": "ipp-halle",
     "img": "ipp-halle.png",
-    "url": "http://ipp-halle.de",
+    "links": {
-    "tags": [ "web", "photo", "ci", "code", "design" ],
+      "Link": "http://ipp-halle.de"
-    "slides": [
+    },
-      "ipp-halle-1.png",
+    "description": ""
-      "ipp-halle-2.png",
-      "ipp-halle-3.png"
-    ]
   },
   {
-    "name": "iPixelPad",
+    "title": "iPixelPad",
     "slug": "ipixelpad",
     "img": "ipixelpad.jpg",
-    "infourl": "http://www.kremalicious.com/2010/02/ipixelpad/",
+    "links": {
-    "tags": [ "icon" ]
+      "Info": "http://www.kremalicious.com/2010/02/ipixelpad/"
+    },
+    "description": ""
   },
   {
-    "name": "Shortmoves 10",
+    "title": "Shortmoves 10",
     "slug": "shortmoves10",
     "img": "shortmoves10.jpg",
-    "tags": [ "web", "photo", "ci", "code", "design" ],
+    "description": ""
-    "slides": [
-      "shortmoves10-1.png",
-      "shortmoves10-2.png",
-      "shortmoves10-3.png",
-      "shortmoves10-4.jpg",
-      "shortmoves10-5.jpg"
-    ]
   },
   {
-    "name": "Out Of Whale Oil",
+    "title": "Out Of Whale Oil",
     "slug": "out-of-whale-oil",
     "img": "out-of-whale-oil.jpg",
-    "infourl": "http://www.kremalicious.com/2009/02/out-of-whale-oil/",
+    "links": {
-    "tags": [ "wallpaper" ],
+      "Info": "http://www.kremalicious.com/2009/02/out-of-whale-oil/"
-    "slides": [
+    },
-      "out-of-whale-oil-1.png",
+    "description": ""
-      "out-of-whale-oil-2.jpg",
-      "out-of-whale-oil-3.jpg",
-      "out-of-whale-oil-4.jpg"
-    ]
   },
   {
-    "name": "mluBlogs",
+    "title": "mluBlogs",
     "slug": "mlublogs",
     "img": "mlublogs.png",
-    "url": "http://blogs.urz-uni-halle.de",
+    "links": {
-    "tags": [ "web", "icon", "code", "design" ],
+      "Link": "http://blogs.urz-uni-halle.de"
-    "slides": [
+    },
-      "mlublogs-1.png",
+    "description": ""
-      "mlublogs-2.png",
-      "mlublogs-3.png",
-      "mlublogs-4.jpg"
-    ]
   },
   {
-    "name": "Coffee Cup",
+    "title": "Coffee Cup",
     "slug": "coffee-cup",
     "img": "coffee-cup.jpg",
-    "infourl": "http://www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/",
+    "links": {
-    "tags": [ "icon" ]
+      "Info": "http://www.kremalicious.com/2008/10/the-finest-coffee-cups-most-incredible-coffee-icons-on-the-web/"
+    },
+    "description": ""
   },
   {
-    "name": "Aref Jdey",
+    "title": "Aref Jdey",
     "slug": "aref-jdey",
     "img": "aref-jdey.jpg",
-    "url": "http://arefjdey.com/",
+    "description": ""
-    "tags": [ "web", "icon", "code", "design" ],
-    "slides": [
-      "aref-jdey-1.png",
-      "aref-jdey-2.png",
-      "aref-jdey-3.jpg"
-    ]
   },
   {
-    "name": "Niépce's Camera Obscura",
+    "title": "Niépce's Camera Obscura",
     "slug": "camera-obscura",
     "img": "camera-obscura.jpg",
-    "infourl": "http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-and-the-history-of-the-first-photograph/",
+    "links": {
-    "tags": [ "icon", "wallpaper" ],
+      "Info": "http://www.kremalicious.com/2008/06/new-goodie-niepces-camera-obscura-and-the-history-of-the-first-photograph/"
-    "slides": [
+    },
-      "camera-obscura-1.jpg",
+    "description": ""
-      "camera-obscura-2.jpg",
-      "camera-obscura-3.jpg"
-    ]
   },
   {
-    "name": "Allinnia Creative Group Icons",
+    "title": "Allinnia Creative Group",
-    "slug": "allinnia-icons",
-    "img": "allinnia-icons.jpg",
-    "tags": [ "icon" ]
-  },
-  {
-    "name": "Allinnia Creative Group",
     "slug": "allinnia",
     "img": "allinnia.jpg",
-    "tags": [ "web", "code" ],
+    "description": ""
-    "slides": [
-      "allinnia-1.png",
-      "allinnia-2.png",
-      "allinnia-3.jpg"
-    ]
   },
   {
-    "name": "mkretschmann.com v1",
+    "title": "mkretschmann.com v1",
     "slug": "mkv1",
     "img": "mkv1.jpg",
-    "infourl": "http://www.kremalicious.com/2009/02/portal-thingy/",
+    "links": {
-    "tags": [ "web", "code", "design" ],
+      "Info": "http://www.kremalicious.com/2009/02/portal-thingy/"
-    "slides": [
+    },
-      "mkv1-2.jpg",
+    "description": ""
-      "mkv1-3.jpg",
-      "mkv1-1.jpg"
-    ]
   }
 ]

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { hydrate, render } from 'react-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
+import Router from 'react-router-dom/BrowserRouter'
 import './index.css'
 import App from './App'
 import registerServiceWorker from './registerServiceWorker'