m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 09:13:19 +01:00
Code Releases Activity

first layout prototype

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-03-25 23:40:10 +02:00
parent adb6900b41
commit 866c6b46ee
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 212 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets.sketch Normal file
View File

Binary file not shown.

1
package.json
View File

@ -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"

4
public/manifest.json
View File

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

28
src/components/atoms/Icons.js Normal file
View File

@ -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>
)

10
src/components/atoms/Icons.scss Normal file
View File

@ -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;
}

25
src/components/molecules/Header.js
View File

@ -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>
<p className="header__description">Designer & Developer</p>
<hgroup className="name">
<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>
)

27
src/components/molecules/Header.scss
View File

@ -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;
}

25
src/components/pages/Home.js
View File

@ -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">
<a href="https://kremalicious.com">Blog</a>
<a href="https://github.com/kremalicious">GitHub</a>
<a href="https://dribbble.com/kremalicious">Dribbble</a>
<a href="https://twitter.com/kremalicious">Twitter</a>
</aside>
<div className="projects">
{projects.map(project => (
<LazyLoad key={project.slug} height={700} once>
<FadeIn>
<article className="project" key={project.slug}>
<h1 className="project__title">{project.name}</h1>
</article>
</FadeIn>
</LazyLoad>
))}
</div>
<ul>
{projects.map(project => (
<li key={project.slug}>{project.name}</li>
))}
</ul>
</main>
)
}

26
src/components/pages/Home.scss Normal file
View File

@ -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;
}

19
src/constants.js Normal file
View File

@ -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'
}
]

16
src/data/projects.json
View File

@ -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",

BIN
src/images/artboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

53
src/index.scss
View File

@ -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;
}

6
src/stylesheets/_variables.scss
View File

@ -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;