first layout prototype

package.json

@@ -7,6 +7,7 @@
     "npm-run-all": "^4.1.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-lazyload": "^2.3.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "react-transition-group": "^2.2.1"

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Portfolio",
+  "short_name": "Matthias Kretschmann",
-  "name": "Portfolio",
+  "name": "Portfolio of Matthias Kretschmann",
   "icons": [
     {
       "src": "favicon.ico",

src/components/atoms/Icons.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import './Icons.css'
+
+export const Facebook = props => (
+  <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+    <path d="M17,1H3C1.9,1,1,1.9,1,3v14c0,1.101,0.9,2,2,2h7v-7H8V9.525h2V7.475c0-2.164,1.212-3.684,3.766-3.684l1.803,0.002v2.605
+	h-1.197C13.378,6.398,13,7.144,13,7.836v1.69h2.568L15,12h-2v7h4c1.1,0,2-0.899,2-2V3C19,1.9,18.1,1,17,1z"/>
+</svg>
+)
+
+export const GitHub = props => (
+  <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+    <path d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801 C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08
+    c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2 C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301 c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301 C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369 c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531 c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799 c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"/>
+</svg>
+)
+
+export const Twitter = props => (
+  <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
+    <path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
+	c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621
+	c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047
+	c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898
+	C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773
+	c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088
+	c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"/>
+</svg>
+)

src/components/atoms/Icons.scss

@@ -0,0 +1,10 @@
+@import 'variables';
+
+.icon {
+    width: $font-size-base;
+    height: $font-size-base;
+    fill: $brand-grey;
+    stroke: none;
+    vertical-align: baseline;
+    margin-bottom: -.04rem;
+}

src/components/molecules/Header.js

@@ -1,10 +1,31 @@
 import React from 'react'
 import './Header.css'
+import { meta, social } from '../../constants'
+import { Twitter, GitHub, Facebook } from '../atoms/Icons'
+
+const SocialIcon = ({title}) => {
+  if (title === 'Twitter') {
+    return <Twitter />
+  } else if (title === 'GitHub') {
+    return <GitHub />
+  } else if (title === 'Facebook') {
+    return <Facebook />
+  }
+}
 
 const Header = () => (
   <header className="header">
-    <h1 className="header__title">Matthias Kretschmann</h1>
+    <hgroup className="name">
-    <p className="header__description">Designer & Developer</p>
+      <h1 className="header__title">{meta.title}</h1>
+      <p className="header__description">{meta.tagline}</p>
+    </hgroup>
+    <aside className="social">
+      {social.map(link => (
+        <a className="social__link" href={link.url} key={link.title} title={link.title}>
+          <SocialIcon title={link.title} />
+        </a>
+      ))}
+    </aside>
   </header>
 )
 

src/components/molecules/Header.scss

@@ -2,6 +2,16 @@
 
 .header {
     padding: $spacer / 2;
+    min-height: calc(100vh - #{$spacer});
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+
+    .name,
+    .social {
+        width: 100%;
+        text-align: center;
+    }
 }
 
 .header__title,
@@ -19,3 +29,20 @@
 .header__description {
     font-size: $font-size-large;
 }
+
+.social { // stylelint-disable-line
+    margin-top: $spacer;
+}
+
+.social__link {
+    margin-left: $spacer / 2;
+    margin-right: $spacer / 2;
+    background: $brand-grey-dimmed;
+    padding: $spacer / 4;
+    text-align: center;
+    display: inline-block;
+    width: 1.35rem;
+    height: 1.35rem;
+    box-shadow: 0 1px 3px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .15);
+    border-radius: .25rem;
+}

src/components/pages/Home.js

@@ -1,23 +1,26 @@
 import React, { Component } from 'react'
+import LazyLoad from 'react-lazyload'
+import FadeIn from '../atoms/FadeIn'
 import projects from '../../data/projects.json'
+import './Home.css'
 
 class Home extends Component {
   render() {
     return (
       <main className="screen screen--home">
 
-        <aside className="social">
+        <div className="projects">
-          <a href="https://kremalicious.com">Blog</a>
+            {projects.map(project => (
-          <a href="https://github.com/kremalicious">GitHub</a>
+              <LazyLoad key={project.slug} height={700} once>
-          <a href="https://dribbble.com/kremalicious">Dribbble</a>
+                <FadeIn>
-          <a href="https://twitter.com/kremalicious">Twitter</a>
+                  <article className="project" key={project.slug}>
-        </aside>
+                    <h1 className="project__title">{project.name}</h1>
+                  </article>
+                </FadeIn>
+              </LazyLoad>
+            ))}
+        </div>
 
-        <ul>
-          {projects.map(project => (
-            <li key={project.slug}>{project.name}</li>
-          ))}
-        </ul>
       </main>
     )
   }

src/components/pages/Home.scss

@@ -0,0 +1,26 @@
+@import 'variables';
+
+.projects {
+    margin: auto;
+}
+
+.project {
+    margin-bottom: $spacer * 4;
+    min-height: 100vh;
+    position: relative;
+    background-color: $brand-grey;
+}
+
+.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/constants.js

@@ -0,0 +1,19 @@
+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/projects.json

@@ -1,6 +1,6 @@
 [
   {
-    "name": "Ocean Protocol Website & CI",
+    "name": "Ocean Protocol",
     "slug": "ocean-site",
     "img": "ocean-site.png",
     "img2x": "ocean-site@2x.png",
@@ -9,7 +9,7 @@
     "slides": [ "ocean-site-1.png" ]
   },
   {
-    "name": "IPDB Website & CI",
+    "name": "IPDB",
     "slug": "ipdb-site",
     "img": "ipdb-site.png",
     "img2x": "ipdb-site@2x.png",
@@ -19,7 +19,7 @@
     "slides": [ "ipdb-site-1.png", "ipdb-site-2.png", "ipdb-site-3.png" ]
   },
   {
-    "name": "9984 >> Summit 2017 Website & CI",
+    "name": "9984 >> Summit 2017",
     "slug": "9984-site",
     "img": "9984-site.png",
     "img2x": "9984-site@2x.png",
@@ -29,7 +29,7 @@
     "slides": [ "9984-site-1.png", "9984-site-2.png", "9984-site-3.png" ]
   },
   {
-    "name": "BigchainDB Website & CI",
+    "name": "BigchainDB",
     "slug": "bigchaindb-site",
     "img": "bigchaindb-site.png",
     "img2x": "bigchaindb-site@2x.png",
@@ -43,7 +43,7 @@
     ]
   },
   {
-    "name": "ChartMogul Systems Landing Page",
+    "name": "ChartMogul",
     "slug": "chartmogul-landing",
     "img": "chartmogul-landing.png",
     "img2x": "chartmogul-landing@2x.png",
@@ -52,7 +52,7 @@
     "slides": [ "chartmogul-landing-1.png" ]
   },
   {
-    "name": "ShareTheMeal Website",
+    "name": "ShareTheMeal ",
     "slug": "sharethemeal-site",
     "img": "sharethemeal-site.png",
     "img2x": "sharethemeal-site@2x.png",
@@ -120,7 +120,7 @@
     "tags": [ "icon" ]
   },
   {
-    "name": "Mr. Reader Theme Coffee",
+    "name": "Mr. Reader",
     "slug": "mr-reader-theme",
     "img": "mr-reader-theme.jpg",
     "url": "http://www.curioustimes.de/mrreader/themes/",
@@ -146,7 +146,7 @@
     "tags": [ "web", "icon", "ci", "code", "design" ]
   },
   {
-    "name": "Mr. Reader iPad Icon",
+    "name": "Mr. Reader",
     "slug": "mr-reader",
     "img": "mr-reader.jpg",
     "img2x": "mr-reader@2x.jpg",

src/index.scss

@@ -47,6 +47,55 @@ h6 {
     margin: 0 0 $spacer;
 }
 
-.screen {
+h1 {
-    padding: $spacer / 2;
+    font-size: $font-size-h1;
+}
+
+h2 {
+    font-size: $font-size-h2;
+}
+
+h3 {
+    font-size: $font-size-h3;
+}
+
+h4 {
+    font-size: $font-size-h4;
+}
+
+h5 {
+    font-size: $font-size-h5;
+}
+
+h6 {
+    font-size: $font-size-h6;
+}
+
+// Links
+/////////////////////////////////////
+
+a {
+    color: $brand-cyan;
+    text-decoration: none;
+    transition: .2s ease-out;
+
+    &:hover,
+    &:focus {
+        color: lighten($brand-cyan, 10%);
+    }
+}
+
+
+// Media
+/////////////////////////////////////
+
+img,
+video,
+svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.screen {
+    padding: $spacer / 2 0;
 }

src/stylesheets/_variables.scss

@@ -7,7 +7,7 @@ $brand-light:           #e7eef4;
 
 $brand-grey:			#6b7f88;
 $brand-grey-light:		lighten($brand-grey, 20%);
-$brand-grey-dimmed:     lighten($brand-grey, 60%);
+$brand-grey-dimmed:     lighten($brand-grey, 50%);
 
 
 // Text Colors
@@ -36,13 +36,13 @@ $font-size-h6               : $font-size-small;
 $line-height                : 1.5;
 $line-height-small          : 1.1428571429;
 
-$font-family-base           : 'ff-tisa-sans-web-pro', 'futura-pt', 'le-havre', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-base           : 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $font-weight-base           : 400;
 $font-color-base            : $text-color;
 
 $font-family-monospace      : Menlo, Monaco, Consolas, 'Courier New', monospace;
 
-$font-family-headings       : 'brandon-grotesque', 'futura-pt', 'le-havre', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
+$font-family-headings       : 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
 $font-weight-headings       : 500;
 $line-height-headings       : 1.1;
 $color-headings:            $brand-main;