updated projects
This commit is contained in:
parent
6dfe97ccf5
commit
a16deedfd7
GPG Key ID:
606EEEF3C479A91F
|
|
@ -9,6 +9,7 @@
|
|||
"react-dom": "^16.3.0",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-lazyload": "^2.3.0",
|
||||
"react-markdown": "^3.3.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.1.1",
|
||||
"react-transition-group": "^2.3.0"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"short_name": "Matthias Kretschmann",
|
||||
"name": "Portfolio of Matthias Kretschmann",
|
||||
"name": "Portfolio of Designer & Developer Matthias Kretschmann",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
|
@ -10,6 +10,6 @@
|
|||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"theme_color": "#015565",
|
||||
"background_color": "#e7eef4"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { Component, Fragment } from 'react'
|
||||
import Header from '../molecules/Header'
|
||||
import Projects from '../organisms/Projects'
|
||||
import './Home.css'
|
||||
|
||||
class Home extends Component {
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet/es/Helmet'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Header from '../molecules/Header'
|
||||
import Content from '../atoms/Content'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
|
|
@ -10,8 +11,10 @@ import './Project.css'
|
|||
const Project = ({ project }) => {
|
||||
const title = project.title
|
||||
const img = project.img
|
||||
const img_more = project.img_more
|
||||
const description = project.description
|
||||
const links = project.links
|
||||
const techstack = project.techstack
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
@ -25,19 +28,42 @@ const Project = ({ project }) => {
|
|||
<article className="project">
|
||||
<Content>
|
||||
<h1 className="project__title">{title}</h1>
|
||||
<p className="project__description">{description}</p>
|
||||
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
|
||||
|
||||
<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>
|
||||
<FullWidth>
|
||||
{!!img_more && img_more.map(key => (
|
||||
<img key={key} className="project__image" src={images[key]} alt={title} />
|
||||
))}
|
||||
</ul>
|
||||
</FullWidth>
|
||||
|
||||
<footer className="project__meta">
|
||||
<div className="project__techstack">
|
||||
<h3 className="project__meta__title">Technologies <span>The tech stack I was involved with.</span></h3>
|
||||
<ul>
|
||||
{!!techstack && techstack.map(tech => (
|
||||
<li key={tech}>
|
||||
{tech}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="project__links">
|
||||
<h3 className="project__meta__title">Links <span>See the project live on the interwebz.</span></h3>
|
||||
<ul>
|
||||
{!!links && Object.keys(links).map(key => (
|
||||
<li key={key}>
|
||||
<a href={links[key]}>{key}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</Content>
|
||||
</article>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -16,4 +16,51 @@
|
|||
|
||||
.project__image {
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
.project__meta {
|
||||
margin-top: $spacer;
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
flex: 0 0 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project__techstack {
|
||||
ul {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: $spacer / 4;
|
||||
background: darken($brand-light, 3%);
|
||||
flex: 0 0 28%;
|
||||
margin-bottom: 4%;
|
||||
text-align: center;
|
||||
border-radius: 4rem;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
.project__meta__title {
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: $spacer / 3;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-base;
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,15 @@
|
|||
"links": {
|
||||
"Link": "https://oceanprotocol.com"
|
||||
},
|
||||
"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."
|
||||
"description": "Conceptualizing and executing the creative and visual direction of the Ocean Protocol brand. Leading the UI design & development of all Ocean Protocol web properties. \n\nInitial website in collaboration with [Balance](https://balance.io/).",
|
||||
"techstack": [
|
||||
"React",
|
||||
"SCSS",
|
||||
"JavaScript",
|
||||
"Travis",
|
||||
"AWS S3",
|
||||
"Cloudflare"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "IPDB",
|
||||
|
|
@ -16,7 +24,16 @@
|
|||
"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."
|
||||
"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.",
|
||||
"techstack": [
|
||||
"Jekyll",
|
||||
"Gulp",
|
||||
"SCSS",
|
||||
"JavaScript",
|
||||
"Travis",
|
||||
"AWS S3",
|
||||
"Cloudflare"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Berlin Innovation Ventures",
|
||||
|
|
@ -25,7 +42,13 @@
|
|||
"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."
|
||||
"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.",
|
||||
"techstack": [
|
||||
"Jekyll",
|
||||
"Gulp",
|
||||
"SCSS",
|
||||
"JavaScript"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "9984 >> Summit 2017",
|
||||
|
|
@ -35,26 +58,59 @@
|
|||
"Link": "https://2017.9984.io",
|
||||
"GitHub": "https://github.com/9984/2017.9984.io"
|
||||
},
|
||||
"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."
|
||||
"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.",
|
||||
"techstack": [
|
||||
"Jekyll",
|
||||
"Gulp",
|
||||
"SCSS",
|
||||
"JavaScript",
|
||||
"Travis",
|
||||
"AWS S3",
|
||||
"Cloudflare"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "BigchainDB",
|
||||
"slug": "bigchaindb",
|
||||
"img": "bigchaindb",
|
||||
"links": {
|
||||
"Link": "https://www.bigchaindb.com"
|
||||
"Link": "https://www.bigchaindb.com",
|
||||
"GitHub": "https://github.com/bigchaindb/site"
|
||||
},
|
||||
"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."
|
||||
"description": "Conceptualizing and executing the creative and visual direction of the BigchainDB brand. Leading the UI design & development of all BigchainDB web properties.",
|
||||
"techstack": [
|
||||
"Jekyll",
|
||||
"Gulp",
|
||||
"SCSS",
|
||||
"JavaScript",
|
||||
"Travis",
|
||||
"AWS S3",
|
||||
"Cloudflare"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "ChartMogul",
|
||||
"slug": "chartmogul",
|
||||
"img": "chartmogul.png",
|
||||
"img2x": "chartmogul@2x.png",
|
||||
"img": "chartmogul",
|
||||
"img_more": [
|
||||
"chartmogul01",
|
||||
"chartmogul02"
|
||||
],
|
||||
"links": {
|
||||
"Link": "https://chartmogul.com/stripe/"
|
||||
},
|
||||
"description": ""
|
||||
"description": "Co-designing and leading the front-end development of various ChartMogul web properties. Creating and implementing a UI design system into the ChartMogul application.",
|
||||
"techstack": [
|
||||
"Jekyll",
|
||||
"Gulp",
|
||||
"SCSS",
|
||||
"JavaScript",
|
||||
"Travis",
|
||||
"AWS S3",
|
||||
"Cloudflare",
|
||||
"Ruby on Rails",
|
||||
"Backbone.js"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "ShareTheMeal ",
|
||||
|
|
|
|||
|
|
@ -3,11 +3,17 @@ import ipdb from './portfolio-ipdb.png'
|
|||
import biv from './portfolio-biv.png'
|
||||
import ninenineeightfour from './portfolio-9984.png'
|
||||
import bigchaindb from './portfolio-bigchaindb.png'
|
||||
import chartmogul from './portfolio-chartmogul.png'
|
||||
import chartmogul01 from './portfolio-chartmogul-01.png'
|
||||
import chartmogul02 from './portfolio-chartmogul-02.png'
|
||||
|
||||
export default {
|
||||
oceanprotocol,
|
||||
ipdb,
|
||||
biv,
|
||||
ninenineeightfour,
|
||||
bigchaindb
|
||||
bigchaindb,
|
||||
chartmogul,
|
||||
chartmogul01,
|
||||
chartmogul02
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 570 KiB After Width: | Height: | Size: 822 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 801 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 327 KiB After Width: | Height: | Size: 526 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 304 KiB After Width: | Height: | Size: 651 KiB |
|
|
@ -24,7 +24,7 @@ $font-size-root : 16px;
|
|||
$font-size-base : 1rem;
|
||||
$font-size-large : 1.2rem;
|
||||
$font-size-small : .8rem;
|
||||
$font-size-mini : .6rem;
|
||||
$font-size-mini : .7rem;
|
||||
|
||||
$font-size-h1 : 3rem;
|
||||
$font-size-h2 : 2rem;
|
||||
|
|
@ -43,7 +43,7 @@ $font-color-base : $text-color;
|
|||
$font-family-monospace : Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
|
||||
$font-family-headings : 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
$font-weight-headings : 500;
|
||||
$font-weight-headings : 400;
|
||||
$line-height-headings : 1.1;
|
||||
$color-headings: $brand-main;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue