diff --git a/assets.sketch b/assets.sketch new file mode 100644 index 0000000..0fb6972 Binary files /dev/null and b/assets.sketch differ diff --git a/package.json b/package.json index 90e17c4..7a19aa1 100644 --- a/package.json +++ b/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" diff --git a/public/manifest.json b/public/manifest.json index 3f8b846..c5ea104 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Portfolio", - "name": "Portfolio", + "short_name": "Matthias Kretschmann", + "name": "Portfolio of Matthias Kretschmann", "icons": [ { "src": "favicon.ico", diff --git a/src/components/atoms/Icons.js b/src/components/atoms/Icons.js new file mode 100644 index 0000000..cda32a2 --- /dev/null +++ b/src/components/atoms/Icons.js @@ -0,0 +1,28 @@ +import React from 'react' +import './Icons.css' + +export const Facebook = props => ( + + + +) + +export const GitHub = props => ( + + + +) + +export const Twitter = props => ( + + + +) diff --git a/src/components/atoms/Icons.scss b/src/components/atoms/Icons.scss new file mode 100644 index 0000000..1ee0288 --- /dev/null +++ b/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; +} diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 61f57ac..efaeceb 100644 --- a/src/components/molecules/Header.js +++ b/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 + } else if (title === 'GitHub') { + return + } else if (title === 'Facebook') { + return + } +} const Header = () => (
-

Matthias Kretschmann

-

Designer & Developer

+
+

{meta.title}

+

{meta.tagline}

+
+
) diff --git a/src/components/molecules/Header.scss b/src/components/molecules/Header.scss index eb0252e..892d7fd 100644 --- a/src/components/molecules/Header.scss +++ b/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; +} diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index 8129413..3d16279 100644 --- a/src/components/pages/Home.js +++ b/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 (
- +
+ {projects.map(project => ( + + +
+

{project.name}

+
+ + + ))} +
-
    - {projects.map(project => ( -
  • {project.name}
    • - ))} -
) } diff --git a/src/components/pages/Home.scss b/src/components/pages/Home.scss new file mode 100644 index 0000000..8a14a4d --- /dev/null +++ b/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; +} diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..7fdb2c0 --- /dev/null +++ b/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' + } +] diff --git a/src/data/projects.json b/src/data/projects.json index 836219a..5b000bb 100644 --- a/src/data/projects.json +++ b/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", diff --git a/src/images/artboard.png b/src/images/artboard.png new file mode 100644 index 0000000..efea3c6 Binary files /dev/null and b/src/images/artboard.png differ diff --git a/src/index.scss b/src/index.scss index d6eb81d..e98ac29 100644 --- a/src/index.scss +++ b/src/index.scss @@ -47,6 +47,55 @@ h6 { margin: 0 0 $spacer; } -.screen { - padding: $spacer / 2; +h1 { + 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; } diff --git a/src/stylesheets/_variables.scss b/src/stylesheets/_variables.scss index e20c397..5f88198 100644 --- a/src/stylesheets/_variables.scss +++ b/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;