portfolio layout and first images

src/Routes.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Switch from 'react-router-dom/Switch'
 import Route from 'react-router-dom/Route'
 import Home from './components/pages/Home'
-import ProjectView from './components/organisms/ProjectView'
+import Project from './components/templates/Project'
 import NotFound from './components/pages/NotFound'
 import projects from './data/projects.json'
 
@@ -14,7 +14,7 @@ const Routes = () => (
         key={project.slug}
         path={`/${project.slug}`}
         render={(props) =>
-          <ProjectView
+          <Project
             {...props}
             project={project} />
         }

src/components/atoms/FullWidth.js

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

src/components/atoms/FullWidth.scss

@@ -0,0 +1,8 @@
+.full-width {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}

src/components/molecules/Header.scss

@@ -9,13 +9,75 @@
     text-align: center;
 }
 
+.header__logo {
+    display: block;
+    margin-top: -3rem;
+    font-size: 3rem;
+    color: $brand-grey-light;
+    margin-bottom: $spacer / 2;
+    transition: color .2s ease-out;
+}
+
+.header__title,
+.header__description {
+    display: inline-block;
+    margin-bottom: 0;
+}
+
+.header__title {
+    font-size: $font-size-h3;
+    margin-right: $spacer / 2;
+    color: $brand-main;
+}
+
+.header__description {
+    font-size: $font-size-large;
+    color: $brand-grey;
+}
+
+.header__name {
+    width: 100%;
+    pointer-events: none;
+}
+
 .header--minimal {
     min-height: 0;
     text-align: left;
     flex-wrap: nowrap;
     align-content: flex-start;
     justify-content: space-between;
-    margin-bottom: $spacer;
+
+    @media (min-width: 30rem) {
+        margin-bottom: $spacer * 2;
+    }
+
+    .header__title {
+        font-size: $font-size-h4;
+    }
+
+    .header__description {
+        font-size: $font-size-base;
+    }
+
+    .header__logo {
+        display: inline-block;
+        margin: 0;
+        font-size: 2rem;
+        margin-top: -2rem;
+        margin-bottom: 0;
+        margin-right: $spacer / 4;
+    }
+
+    .header__name {
+        pointer-events: all;
+
+        &:hover,
+        &:focus {
+            .header__logo {
+                color: $brand-cyan;
+            }
+        }
+    }
 
     .social {
         margin-top: 0;
@@ -36,62 +98,3 @@
         }
     }
 }
-
-.header__logo {
-    display: block;
-    margin-top: -3rem;
-    font-size: 3rem;
-    color: $brand-grey-light;
-    margin-bottom: $spacer / 2;
-
-    .header--minimal & {
-        margin: 0;
-        display: inline-block;
-        font-size: 2rem;
-        margin-top: -2rem;
-        margin-right: $spacer / 4;
-    }
-}
-
-.header__title,
-.header__description {
-    display: inline-block;
-    margin-bottom: 0;
-    transition: .2s ease-out;
-}
-
-.header__title {
-    font-size: $font-size-h3;
-    margin-right: $spacer / 2;
-    color: $brand-main;
-
-    .header--minimal & {
-        font-size: $font-size-h4;
-    }
-}
-
-.header__description {
-    font-size: $font-size-large;
-    color: $brand-grey;
-
-    .header--minimal & {
-        font-size: $font-size-small;
-    }
-}
-
-.header__name {
-    width: 100%;
-    pointer-events: none;
-
-    .header--minimal & {
-        pointer-events: all;
-    }
-
-    &:hover,
-    &:focus {
-        .header__title,
-        .header__description {
-            color: $brand-cyan;
-        }
-    }
-}

src/components/organisms/ProjectView.js

@@ -1,39 +0,0 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
-import Header from '../molecules/Header'
-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 (
-    <Fragment>
-      <Header minimal />
-      <main className="screen screen--project">
-        <Content>
-          <h1>{title}</h1>
-          <p>{description}</p>
-
-          {img}
-
-          <ul>
-            {!!links && Object.keys(links).map(key => (
-              <li key={key}>
-                <a href={links[key]}>{key}</a>
-              </li>
-            ))}
-          </ul>
-        </Content>
-      </main>
-    </Fragment>
-  )
-}
-
-Project.propTypes = {
-  project: PropTypes.object
-}
-
-export default Project

src/components/organisms/Projects.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import Link from 'react-router-dom/Link'
+import LazyLoad from 'react-lazyload'
+import FadeIn from '../atoms/FadeIn'
+import projects from '../../data/projects.json'
+import images from '../../images'
+import '../atoms/FullWidth'
+import './Projects.css'
+
+const Projects = () => (
+  <div className="projects full-width">
+    {projects.map(project => (
+      <LazyLoad key={project.slug} height={700} offset={200} once>
+        <FadeIn>
+          <Link
+            key={project.slug}
+            to={{ pathname: `/${project.slug}` }}
+            className="projects__project"
+          >
+            <h1 className="projects__project__title">{project.title}</h1>
+
+            <img className="projects__project__image" src={images[project.img]} alt={project.title} />
+          </Link>
+        </FadeIn>
+      </LazyLoad>
+    ))}
+  </div>
+)
+
+export default Projects

src/components/organisms/Projects.scss

@@ -0,0 +1,50 @@
+@import 'variables';
+
+.projects {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.projects__project {
+    max-height: 100vh;
+    position: relative;
+    background-color: $brand-grey-light;
+    margin-bottom: $spacer * 4;
+
+    @media (min-width: 70rem) {
+        flex: 0 0 calc(50% - #{$spacer / 2});
+        margin-bottom: $spacer;
+    }
+
+    &::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);
+        }
+    }
+}
+
+.projects__project__title {
+    visibility: hidden;
+    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/components/pages/Home.js

@@ -1,9 +1,7 @@
 import React, { Component, Fragment } 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 '../organisms/Projects'
-import projects from '../../data/projects.json'
+
 import './Home.css'
 
 class Home extends Component {
@@ -13,24 +11,7 @@ class Home extends Component {
         <Header />
 
         <main className="screen screen--home">
-
+          <Projects />
-          <div className="projects">
-              {projects.map(project => (
-                <LazyLoad key={project.slug} height={700} offset={200} once>
-                  <FadeIn>
-                    <Link
-                      key={project.slug}
-                      to={{pathname: `/${project.slug}`}}
-                    >
-                      <article className="project">
-                        <h1 className="project__title">{project.title}</h1>
-                      </article>
-                    </Link>
-                  </FadeIn>
-                </LazyLoad>
-              ))}
-          </div>
-
         </main>
       </Fragment>
     )

src/components/pages/Home.scss

@@ -1,28 +0,0 @@
-@import 'variables';
-
-.projects {
-    margin: auto;
-}
-
-.project {
-    margin-bottom: $spacer * 4;
-    min-height: 100vh;
-    position: relative;
-    background-color: $brand-grey;
-    margin-left: -$spacer;
-    margin-right: -$spacer;
-}
-
-.project__title {
-    margin: 0;
-    font-size: $font-size-h2;
-    position: absolute;
-    bottom: $spacer;
-    left: $spacer;
-    z-index: 1;
-    color: $brand-light;
-}
-
-.project__image {
-    margin: 0;
-}

src/components/templates/Project.js

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import Header from '../molecules/Header'
+import Content from '../atoms/Content'
+import FullWidth from '../atoms/FullWidth'
+import images from '../../images'
+import './Project.css'
+
+const Project = ({ project }) => {
+  const title = project.title
+  const img = project.img
+  const description = project.description
+  const links = project.links
+
+  return (
+    <Fragment>
+      <Header minimal />
+      <main className="screen screen--project">
+        <article className="project">
+          <Content>
+            <h1 className="project__title">{title}</h1>
+            <p className="project__description">{description}</p>
+
+            <FullWidth>
+              <img className="project__image" src={images[img]} alt={title} />
+            </FullWidth>
+
+            <ul>
+              {!!links && Object.keys(links).map(key => (
+                <li key={key}>
+                  <a href={links[key]}>{key}</a>
+                </li>
+              ))}
+            </ul>
+          </Content>
+        </article>
+      </main>
+    </Fragment>
+  )
+}
+
+Project.propTypes = {
+  project: PropTypes.object
+}
+
+export default Project

src/components/templates/Project.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+
+.project__title {
+    font-size: $font-size-h2;
+
+    @media (min-width: 30rem) {
+        font-size: $font-size-h1;
+    }
+}
+
+.project__description {
+    font-size: $font-size-large;
+    color: $brand-grey-light;
+    margin-bottom: $spacer * 4;
+}
+
+.project__image {
+    box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
+}

src/data/projects.json

@@ -2,8 +2,7 @@
   {
     "title": "Ocean Protocol",
     "slug": "oceanprotocol",
-    "img": "oceanprotocol.png",
+    "img": "oceanprotocol",
-    "img2x": "oceanprotocol@2x.png",
     "links": {
       "Link": "https://oceanprotocol.com"
     },
@@ -12,34 +11,40 @@
   {
     "title": "IPDB",
     "slug": "ipdb",
-    "img": "ipdb.png",
+    "img": "ipdb",
-    "img2x": "ipdb@2x.png",
     "links": {
       "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."
   },
+  {
+    "title": "Berlin Innovation Ventures",
+    "slug": "biv",
+    "img": "biv",
+    "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."
+  },
   {
     "title": "9984 >> Summit 2017",
     "slug": "9984",
-    "img": "9984.png",
+    "img": "ninenineeightfour",
-    "img2x": "9984@2x.png",
     "links": {
       "Link": "https://2017.9984.io",
       "GitHub": "https://github.com/9984/2017.9984.io"
     },
-    "description": ""
+    "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."
   },
   {
     "title": "BigchainDB",
     "slug": "bigchaindb",
-    "img": "bigchaindb.png",
+    "img": "bigchaindb",
-    "img2x": "bigchaindb@2x.png",
     "links": {
       "Link": "https://www.bigchaindb.com"
     },
-    "description": ""
+    "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."
   },
   {
     "title": "ChartMogul",

src/images/index.js

@@ -0,0 +1,13 @@
+import oceanprotocol from './portfolio-oceanprotocol.png'
+import ipdb from './portfolio-ipdb.png'
+import biv from './portfolio-biv.png'
+import ninenineeightfour from './portfolio-9984.png'
+import bigchaindb from './portfolio-bigchaindb.png'
+
+export default {
+  oceanprotocol,
+  ipdb,
+  biv,
+  ninenineeightfour,
+  bigchaindb
+}

src/stylesheets/_variables.scss

@@ -6,7 +6,7 @@ $brand-cyan:            #43a699;
 $brand-light:           #e7eef4;
 
 $brand-grey:			#6b7f88;
-$brand-grey-light:		lighten($brand-grey, 20%);
+$brand-grey-light:		lighten($brand-grey, 10%);
 $brand-grey-dimmed:     lighten($brand-grey, 50%);