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

portfolio layout and first images

This commit is contained in:
Matthias Kretschmann 2018-04-03 22:35:53 +02:00
parent b1537caa40
commit 76e8c6e779
Signed by: m
GPG Key ID: 606EEEF3C479A91F
21 changed files with 265 additions and 162 deletions

Binary file not shown.

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 '../../data/projects.json'
import Projects from '../organisms/Projects'
import './Home.css'
class Home extends Component {
@ -13,24 +11,7 @@ class Home extends Component {
<Header />
<main className="screen screen--home">
<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>
<Projects />
</main>
</Fragment>
)

View File

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

View File

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

View File

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

View File

@ -2,8 +2,7 @@
{
"title": "Ocean Protocol",
"slug": "oceanprotocol",
"img": "oceanprotocol.png",
"img2x": "oceanprotocol@2x.png",
"img": "oceanprotocol",
"links": {
"Link": "https://oceanprotocol.com"
},
@ -12,34 +11,40 @@
{
"title": "IPDB",
"slug": "ipdb",
"img": "ipdb.png",
"img2x": "ipdb@2x.png",
"img": "ipdb",
"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",
"img2x": "9984@2x.png",
"img": "ninenineeightfour",
"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",
"img2x": "bigchaindb@2x.png",
"img": "bigchaindb",
"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",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 MiB

13
src/images/index.js Normal file
View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 570 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

View File

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