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

updated projects

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-04-05 00:11:51 +02:00
parent 6dfe97ccf5
commit a16deedfd7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 158 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

6
public/manifest.json
View File

@ -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
src/components/pages/Home.js
View File

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

40
src/components/templates/Project.js
View File

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

47
src/components/templates/Project.scss
View File

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

74
src/data/projects.json
View File

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

8
src/images/index.js
View File

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

BIN
src/images/portfolio-9984.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 570 KiB

After

Width:  |  Height:  |  Size: 822 KiB

BIN
src/images/portfolio-bigchaindb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/images/portfolio-biv.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/images/portfolio-chartmogul-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

BIN
src/images/portfolio-chartmogul-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

BIN
src/images/portfolio-chartmogul.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 KiB

BIN
src/images/portfolio-ipdb.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 KiB

After

Width:  |  Height:  |  Size: 526 KiB

BIN
src/images/portfolio-oceanprotocol.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 KiB

After

Width:  |  Height:  |  Size: 651 KiB

4
src/stylesheets/_variables.scss
View File

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