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:
parent
b1537caa40
commit
76e8c6e779
BIN
assets.sketch
BIN
assets.sketch
Binary file not shown.
@ -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} />
|
||||
}
|
||||
|
15
src/components/atoms/FullWidth.js
Normal file
15
src/components/atoms/FullWidth.js
Normal 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
|
8
src/components/atoms/FullWidth.scss
Normal file
8
src/components/atoms/FullWidth.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.full-width {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
30
src/components/organisms/Projects.js
Normal file
30
src/components/organisms/Projects.js
Normal 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
|
50
src/components/organisms/Projects.scss
Normal file
50
src/components/organisms/Projects.scss
Normal 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);
|
||||
}
|
@ -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>
|
||||
)
|
||||
|
@ -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;
|
||||
}
|
46
src/components/templates/Project.js
Normal file
46
src/components/templates/Project.js
Normal 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
|
19
src/components/templates/Project.scss
Normal file
19
src/components/templates/Project.scss
Normal 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);
|
||||
}
|
@ -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
13
src/images/index.js
Normal 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
|
||||
}
|
BIN
src/images/portfolio-9984.png
Normal file
BIN
src/images/portfolio-9984.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 570 KiB |
BIN
src/images/portfolio-bigchaindb.png
Normal file
BIN
src/images/portfolio-bigchaindb.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 MiB |
BIN
src/images/portfolio-biv.png
Normal file
BIN
src/images/portfolio-biv.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 MiB |
BIN
src/images/portfolio-ipdb.png
Normal file
BIN
src/images/portfolio-ipdb.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 327 KiB |
BIN
src/images/portfolio-oceanprotocol.png
Normal file
BIN
src/images/portfolio-oceanprotocol.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 304 KiB |
@ -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%);
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user