mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-23 01:29:41 +01:00
switch to YAML data
This commit is contained in:
parent
a6625b2c0e
commit
e3d8ce14e1
GPG Key ID:
606EEEF3C479A91F
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"title": "Matthias Kretschmann",
|
|
||||||
"tagline": "Designer & Developer",
|
|
||||||
"description": "Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.",
|
|
||||||
"url": "https://matthiaskretschmann.com",
|
|
||||||
"social": {
|
|
||||||
"Email": "mailto:m@kretschmann.io",
|
|
||||||
"Blog": "https://kremalicious.com",
|
|
||||||
"Twitter": "https://twitter.com/kremalicious",
|
|
||||||
"GitHub": "https://github.com/kremalicious",
|
|
||||||
"Dribbble": "https://dribbble.com/kremalicious"
|
|
||||||
},
|
|
||||||
"availability": {
|
|
||||||
"status": false,
|
|
||||||
"available": "👔 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s talk</a>!",
|
|
||||||
"unavailable": "Not available for new projects."
|
|
||||||
},
|
|
||||||
"typekit": "dtg3zui",
|
|
||||||
"googleanalytics": "UA-1441794-4"
|
|
||||||
}
|
|
||||||
18
data/meta.yml
Normal file
18
data/meta.yml
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
---
|
||||||
|
title: Matthias Kretschmann
|
||||||
|
tagline: Designer & Developer
|
||||||
|
description: Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.
|
||||||
|
url: https://matthiaskretschmann.com
|
||||||
|
social:
|
||||||
|
Email: mailto:m@kretschmann.io
|
||||||
|
Blog: https://kremalicious.com
|
||||||
|
Twitter: https://twitter.com/kremalicious
|
||||||
|
GitHub: https://github.com/kremalicious
|
||||||
|
Dribbble: https://dribbble.com/kremalicious
|
||||||
|
availability:
|
||||||
|
status: false
|
||||||
|
available: "\U0001F454 Available for new projects. <a href=\"mailto:m@kretschmann.io\">Let’s
|
||||||
|
talk</a>!"
|
||||||
|
unavailable: Not available for new projects.
|
||||||
|
typekit: dtg3zui
|
||||||
|
googleanalytics: UA-1441794-4
|
||||||
@ -1,348 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"title": "Ocean Protocol",
|
|
||||||
"slug": "/oceanprotocol/",
|
|
||||||
"img": "../src/images/portfolio-oceanprotocol-01.png",
|
|
||||||
"description":
|
|
||||||
"Since 2017 I'm leading the UI design & development of all Ocean Protocol web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.\n\nThe main website is a single-page JavaScript application built with React, pulling its data from JSON files and various micro services I've built over time. All design & development is embedded in a continous deployment process via GitHub & Travis.\n\nInitial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://oceanprotocol.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Styleguide",
|
|
||||||
"url": "https://oceanprotocol.com/art"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "GitHub",
|
|
||||||
"url": "https://github.com/oceanprotocol/art"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Affinity Designer",
|
|
||||||
"React",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "IPDB",
|
|
||||||
"slug": "/ipdb/",
|
|
||||||
"img": "../src/images/portfolio-ipdb-01.png",
|
|
||||||
"description":
|
|
||||||
"From 2015-2017 I was leading the UI design & development of all IPDB web properties. Additionally, I iterated on the creative and visual direction of the IPDB brand.\n\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.\n\nBranding and key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://ipdb.io"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Styleguide",
|
|
||||||
"url": "https://ipdb.io/styleguide/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "GitHub",
|
|
||||||
"url": "https://github.com/ipdb/website"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Berlin Innovation Ventures",
|
|
||||||
"slug": "/biv/",
|
|
||||||
"img": "../src/images/portfolio-biv.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "http://berlininnovation.vc"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description":
|
|
||||||
"I designed & developed the website and a basic branding for the new Berlin-based VC firm Berlin Innovation Ventures. The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it.",
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "9984 >> Summit 2017",
|
|
||||||
"slug": "/9984/",
|
|
||||||
"img": "../src/images/portfolio-9984.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://2017.9984.io"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Styleguide",
|
|
||||||
"url": "https://2017.9984.io/styleguide/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "GitHub",
|
|
||||||
"url": "https://github.com/9984/2017.9984.io"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description":
|
|
||||||
"In 2017 I was leading the UI design & development for the 9984 >> Summit, the first joint summit of BigchainDB & IPDB. Additionally, I conceptualized, executed and iterated on the creative and visual direction of the 9984 brand.\n\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.\n\nBranding and key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "BigchainDB",
|
|
||||||
"slug": "/bigchaindb/",
|
|
||||||
"img": "../src/images/portfolio-bigchaindb-01.png",
|
|
||||||
"description":
|
|
||||||
"Since 2016 I'm leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualize, execute and iterate on the creative and visual direction of BigchainDB.\n\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, pulling data from various external sources and microservices. All design & development is embedded in a continous deployment process via GitHub & Travis.\n\nBranding & key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Affinity Designer",
|
|
||||||
"Illustrator",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare"
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://www.bigchaindb.com"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Styleguide",
|
|
||||||
"url": "https://www.bigchaindb.com/styleguide/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "GitHub",
|
|
||||||
"url": "https://github.com/bigchaindb/site"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Dribbble",
|
|
||||||
"url": "https://dribbble.com/shots/2522184-BigchainDB-site"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "ChartMogul",
|
|
||||||
"slug": "/chartmogul/",
|
|
||||||
"img": "../src/images/portfolio-chartmogul-01.png",
|
|
||||||
"description":
|
|
||||||
"From 2015-2017 I was co-designing and leading the UI design & development of various ChartMogul web properties.\n\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it.\n\nWithin the ChartMogul application I created and implemented a UI design system.",
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Affinity Designer",
|
|
||||||
"Illustrator",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"PHP",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"WordPress",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare",
|
|
||||||
"Ruby on Rails",
|
|
||||||
"Backbone.js"
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://chartmogul.com/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Styleguide",
|
|
||||||
"url": "https://chartmogul.com/styleguide/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Dribbble",
|
|
||||||
"url": "https://dribbble.com/kremalicious/projects/311439-ChartMogul"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "ShareTheMeal",
|
|
||||||
"slug": "/sharethemeal/",
|
|
||||||
"img": "../src/images/portfolio-sharethemeal.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "https://sharethemeal.org/"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "Co-designing and leading the front-end development of the ShareTheMeal website.",
|
|
||||||
"techstack": [
|
|
||||||
"Sketch",
|
|
||||||
"Illustrator",
|
|
||||||
"Jekyll",
|
|
||||||
"Gulp",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"Travis",
|
|
||||||
"AWS S3",
|
|
||||||
"Cloudflare",
|
|
||||||
"Node.js"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "ezeep",
|
|
||||||
"slug": "/ezeep/",
|
|
||||||
"img": "../src/images/portfolio-ezeep-01.png",
|
|
||||||
"description": "From 2012 to 2015 I worked at ezeep, where I created an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.\n\nI was leading the UI design & development of all ezeep touch points and - as a product designer - defined the ezeep product based on user and market research in an iterative process. On top of that, I designed and helped building all app experiences of ezeep on Windows, macOS, iOS, and Android.\n\nezeep was acquired by [Cortado AG](https://www.cortado.com) in 2015 and became part of their [ThinPrint Cloud Services](https://www.thinprintcloud.com) suite of products.",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Info",
|
|
||||||
"url": "https://kremalicious.com/enterprise-software-sucks/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Dribbble",
|
|
||||||
"url": "https://dribbble.com/kremalicious/projects/84318-ezeep"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop",
|
|
||||||
"Illustrator",
|
|
||||||
"InDesign",
|
|
||||||
"Sketch",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"PHP",
|
|
||||||
"WordPress",
|
|
||||||
"Travis",
|
|
||||||
"AWS",
|
|
||||||
"Cloudflare",
|
|
||||||
"Node.js",
|
|
||||||
"Backbone.js",
|
|
||||||
"Electron"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Mr. Reader",
|
|
||||||
"slug": "/mrreader/",
|
|
||||||
"img": "../src/images/portfolio-mrreader.png",
|
|
||||||
"description": "I designed the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful RSS feed reader for iPad.",
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "iPixelPad",
|
|
||||||
"slug": "/ipixelpad/",
|
|
||||||
"img": "../src/images/portfolio-ipixelpad.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Download",
|
|
||||||
"url": "https://kremalicious.com/ipixelpad/"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad in the sizes 48px, 32px and 16px.",
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Out Of Whale Oil",
|
|
||||||
"slug": "/outofwhaleoil/",
|
|
||||||
"img": "../src/images/portfolio-outofwhaleoil-01.png",
|
|
||||||
"description": "Tribute wallpaper pack inspired by the Futurama movie _Into The Wild Green Yonder_.",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Download",
|
|
||||||
"url": "https://kremalicious.com/out-of-whale-oil/"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Martin-Luther-Universität Halle-Wittenberg",
|
|
||||||
"slug": "/unihalle/",
|
|
||||||
"img": "../src/images/portfolio-unihalle-01.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Link",
|
|
||||||
"url": "http://blogs.urz-uni-halle.de"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Dribbble",
|
|
||||||
"url": "https://dribbble.com/kremalicious/projects/690029-MLU"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "From 2009 to 2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized & implemented numerous in-house and public facing interfaces for thousands of students and staff.\n\nAdditionally, I conceptualized, designed, created, and maintained the blog network & community for all students & staff.",
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop",
|
|
||||||
"Illustrator",
|
|
||||||
"HTML",
|
|
||||||
"SCSS",
|
|
||||||
"JavaScript",
|
|
||||||
"PHP",
|
|
||||||
"Ruby on Rails",
|
|
||||||
"WordPress",
|
|
||||||
"Ilias",
|
|
||||||
"Stud.IP"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Coffee Cup",
|
|
||||||
"slug": "/coffeecup/",
|
|
||||||
"img": "../src/images/portfolio-coffeecup.png",
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"title": "Download",
|
|
||||||
"url": "https://kremalicious.com/coffee-cup-icon/"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"description": "Desktop icons showing the fuel of most designers. Released as a goodie on [kremalicious.com](https://kremalicious.com/coffee-cup-icon/).",
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Allinnia Creative Group",
|
|
||||||
"slug": "/allinnia/",
|
|
||||||
"img": "../src/images/portfolio-allinnia-01.png",
|
|
||||||
"description": "",
|
|
||||||
"techstack": [
|
|
||||||
"Photoshop",
|
|
||||||
"HTML",
|
|
||||||
"CSS",
|
|
||||||
"JavaScript",
|
|
||||||
"PHP"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
330
data/projects.yml
Normal file
330
data/projects.yml
Normal file
@ -0,0 +1,330 @@
|
|||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Ocean Protocol
|
||||||
|
slug: "/oceanprotocol/"
|
||||||
|
img: "../src/images/portfolio-oceanprotocol-01.png"
|
||||||
|
description: >
|
||||||
|
Since 2017 I'm leading the UI design & development of all Ocean Protocol web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.
|
||||||
|
|
||||||
|
The main website is a single-page JavaScript application built with React, pulling its data from JSON files and various micro services I've built over time. All design & development is embedded in a continous deployment process via GitHub & Travis.
|
||||||
|
|
||||||
|
Initial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://oceanprotocol.com
|
||||||
|
- title: Styleguide
|
||||||
|
url: https://oceanprotocol.com/art
|
||||||
|
- title: GitHub
|
||||||
|
url: https://github.com/oceanprotocol/art
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Affinity Designer
|
||||||
|
- React
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: IPDB
|
||||||
|
slug: "/ipdb/"
|
||||||
|
img: "../src/images/portfolio-ipdb-01.png"
|
||||||
|
description: >
|
||||||
|
From 2015-2017 I was leading the UI design & development of all IPDB web properties. Additionally, I iterated on the creative and visual direction of the IPDB brand.
|
||||||
|
|
||||||
|
The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.
|
||||||
|
|
||||||
|
Branding and key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
|
||||||
|
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://ipdb.io
|
||||||
|
- title: Styleguide
|
||||||
|
url: https://ipdb.io/styleguide/
|
||||||
|
- title: GitHub
|
||||||
|
url: https://github.com/ipdb/website
|
||||||
|
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Berlin Innovation Ventures
|
||||||
|
slug: "/biv/"
|
||||||
|
img: "../src/images/portfolio-biv.png"
|
||||||
|
description: I designed & developed the website and a basic branding for the new
|
||||||
|
Berlin-based VC firm Berlin Innovation Ventures. The main website is a static
|
||||||
|
site built with Jekyll and a custom Gulp-based build pipeline in front of it.
|
||||||
|
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: http://berlininnovation.vc
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: 9984 >> Summit 2017
|
||||||
|
slug: "/9984/"
|
||||||
|
img: "../src/images/portfolio-9984.png"
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://2017.9984.io
|
||||||
|
- title: Styleguide
|
||||||
|
url: https://2017.9984.io/styleguide/
|
||||||
|
- title: GitHub
|
||||||
|
url: https://github.com/9984/2017.9984.io
|
||||||
|
description: >
|
||||||
|
In 2017 I was leading the UI design & development for the 9984 >> Summit, the first joint summit of BigchainDB & IPDB. Additionally, I conceptualized, executed and iterated on the creative and visual direction of the 9984 brand.
|
||||||
|
|
||||||
|
The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.
|
||||||
|
|
||||||
|
Branding and key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: BigchainDB
|
||||||
|
slug: "/bigchaindb/"
|
||||||
|
img: "../src/images/portfolio-bigchaindb-01.png"
|
||||||
|
description: >
|
||||||
|
Since 2016 I'm leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualize, execute and iterate on the creative and visual direction of BigchainDB.
|
||||||
|
|
||||||
|
The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, pulling data from various external sources and microservices. All design & development is embedded in a continous deployment process via GitHub & Travis.
|
||||||
|
|
||||||
|
Branding & key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
|
||||||
|
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Affinity Designer
|
||||||
|
- Illustrator
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://www.bigchaindb.com
|
||||||
|
- title: Styleguide
|
||||||
|
url: https://www.bigchaindb.com/styleguide/
|
||||||
|
- title: GitHub
|
||||||
|
url: https://github.com/bigchaindb/site
|
||||||
|
- title: Dribbble
|
||||||
|
url: https://dribbble.com/shots/2522184-BigchainDB-site
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: ChartMogul
|
||||||
|
slug: "/chartmogul/"
|
||||||
|
img: "../src/images/portfolio-chartmogul-01.png"
|
||||||
|
description: >
|
||||||
|
From 2015-2017 I was co-designing and leading the UI design & development of various ChartMogul web properties.
|
||||||
|
|
||||||
|
The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it.
|
||||||
|
|
||||||
|
Within the ChartMogul application I created and implemented a UI design system.
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Affinity Designer
|
||||||
|
- Illustrator
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- PHP
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- WordPress
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
- Ruby on Rails
|
||||||
|
- Backbone.js
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://chartmogul.com/
|
||||||
|
- title: Styleguide
|
||||||
|
url: https://chartmogul.com/styleguide/
|
||||||
|
- title: Dribbble
|
||||||
|
url: https://dribbble.com/kremalicious/projects/311439-ChartMogul
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: ShareTheMeal
|
||||||
|
slug: "/sharethemeal/"
|
||||||
|
img: "../src/images/portfolio-sharethemeal.png"
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: https://sharethemeal.org/
|
||||||
|
description: Co-designing and leading the front-end development of the ShareTheMeal
|
||||||
|
website.
|
||||||
|
techstack:
|
||||||
|
- Sketch
|
||||||
|
- Illustrator
|
||||||
|
- Jekyll
|
||||||
|
- Gulp
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- Travis
|
||||||
|
- AWS S3
|
||||||
|
- Cloudflare
|
||||||
|
- Node.js
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: ezeep
|
||||||
|
slug: "/ezeep/"
|
||||||
|
img: "../src/images/portfolio-ezeep-01.png"
|
||||||
|
description: >
|
||||||
|
From 2012 to 2015 I worked at ezeep, where I created an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.
|
||||||
|
|
||||||
|
I was leading the UI design & development of all ezeep touch points and - as a product designer - defined the ezeep product based on user and market research in an iterative process. On top of that, I designed and helped building all app experiences of ezeep on Windows, macOS, iOS, and Android.
|
||||||
|
|
||||||
|
ezeep was acquired by [Cortado AG](https://www.cortado.com) in 2015 and became part of their [ThinPrint Cloud Services](https://www.thinprintcloud.com) suite of products.
|
||||||
|
links:
|
||||||
|
- title: Info
|
||||||
|
url: https://kremalicious.com/enterprise-software-sucks/
|
||||||
|
- title: Dribbble
|
||||||
|
url: https://dribbble.com/kremalicious/projects/84318-ezeep
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
- Illustrator
|
||||||
|
- InDesign
|
||||||
|
- Sketch
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- PHP
|
||||||
|
- WordPress
|
||||||
|
- Travis
|
||||||
|
- AWS
|
||||||
|
- Cloudflare
|
||||||
|
- Node.js
|
||||||
|
- Backbone.js
|
||||||
|
- Electron
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Mr. Reader
|
||||||
|
slug: "/mrreader/"
|
||||||
|
img: "../src/images/portfolio-mrreader.png"
|
||||||
|
description: I designed the app icon, a custom theme, and various promotion materials
|
||||||
|
for Mr. Reader, a powerful RSS feed reader for iPad.
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: iPixelPad
|
||||||
|
slug: "/ipixelpad/"
|
||||||
|
img: "../src/images/portfolio-ipixelpad.png"
|
||||||
|
links:
|
||||||
|
- title: Download
|
||||||
|
url: https://kremalicious.com/ipixelpad/
|
||||||
|
description: So, what to do when everyone seem to release iPad icons but fail to
|
||||||
|
include some crisp small size icons? Pushing the pixels for yourself of course.
|
||||||
|
So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad
|
||||||
|
in the sizes 48px, 32px and 16px.
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Out Of Whale Oil
|
||||||
|
slug: "/outofwhaleoil/"
|
||||||
|
img: "../src/images/portfolio-outofwhaleoil-01.png"
|
||||||
|
description: Tribute wallpaper pack inspired by the Futurama movie _Into The Wild
|
||||||
|
Green Yonder_.
|
||||||
|
links:
|
||||||
|
- title: Download
|
||||||
|
url: https://kremalicious.com/out-of-whale-oil/
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Martin-Luther-Universität Halle-Wittenberg
|
||||||
|
slug: "/unihalle/"
|
||||||
|
img: "../src/images/portfolio-unihalle-01.png"
|
||||||
|
links:
|
||||||
|
- title: Link
|
||||||
|
url: http://blogs.urz-uni-halle.de
|
||||||
|
- title: Dribbble
|
||||||
|
url: https://dribbble.com/kremalicious/projects/690029-MLU
|
||||||
|
description: >
|
||||||
|
From 2009 to 2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized & implemented numerous in-house and public facing interfaces for thousands of students and staff.
|
||||||
|
|
||||||
|
Additionally, I conceptualized, designed, created, and maintained the blog network & community for all students & staff.
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
- Illustrator
|
||||||
|
- HTML
|
||||||
|
- SCSS
|
||||||
|
- JavaScript
|
||||||
|
- PHP
|
||||||
|
- Ruby on Rails
|
||||||
|
- WordPress
|
||||||
|
- Ilias
|
||||||
|
- Stud.IP
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Coffee Cup
|
||||||
|
slug: "/coffeecup/"
|
||||||
|
img: "../src/images/portfolio-coffeecup.png"
|
||||||
|
description: Desktop icons showing the fuel of most designers. Released as a goodie
|
||||||
|
on [kremalicious.com](https://kremalicious.com/coffee-cup-icon/).
|
||||||
|
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
|
||||||
|
links:
|
||||||
|
- title: Download
|
||||||
|
url: https://kremalicious.com/coffee-cup-icon/
|
||||||
|
|
||||||
|
-
|
||||||
|
|
||||||
|
title: Allinnia Creative Group
|
||||||
|
slug: "/allinnia/"
|
||||||
|
img: "../src/images/portfolio-allinnia-01.png"
|
||||||
|
description: ''
|
||||||
|
techstack:
|
||||||
|
- Photoshop
|
||||||
|
- HTML
|
||||||
|
- CSS
|
||||||
|
- JavaScript
|
||||||
|
- PHP
|
||||||
|
|
||||||
@ -2,7 +2,11 @@
|
|||||||
|
|
||||||
set -e;
|
set -e;
|
||||||
|
|
||||||
aws s3 sync ./public s3://beta.matthiaskretschmann.com --delete --acl public-read
|
aws s3 sync \
|
||||||
|
--delete \
|
||||||
|
--acl public-read \
|
||||||
|
./public \
|
||||||
|
s3://beta.matthiaskretschmann.com
|
||||||
|
|
||||||
echo "---------------------------------------------"
|
echo "---------------------------------------------"
|
||||||
echo " ✓ done deployment "
|
echo " ✓ done deployment "
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
const path = require('path')
|
const path = require('path')
|
||||||
const meta = require('./data/meta.json')
|
const yaml = require('js-yaml')
|
||||||
|
const meta = yaml.load('./data/meta.yml')
|
||||||
const { url, googleanalytics } = meta
|
const { url, googleanalytics } = meta
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -9,7 +10,7 @@ module.exports = {
|
|||||||
plugins: [
|
plugins: [
|
||||||
'gatsby-plugin-react-next',
|
'gatsby-plugin-react-next',
|
||||||
'gatsby-plugin-react-helmet',
|
'gatsby-plugin-react-helmet',
|
||||||
'gatsby-transformer-json',
|
'gatsby-transformer-yaml',
|
||||||
'gatsby-transformer-sharp',
|
'gatsby-transformer-sharp',
|
||||||
'gatsby-plugin-sharp',
|
'gatsby-plugin-sharp',
|
||||||
{
|
{
|
||||||
|
|||||||
@ -32,7 +32,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
|||||||
|
|
||||||
resolve(graphql(`
|
resolve(graphql(`
|
||||||
{
|
{
|
||||||
allProjectsJson {
|
allProjectsYaml {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
slug
|
slug
|
||||||
@ -83,7 +83,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
|||||||
reject(result.errors)
|
reject(result.errors)
|
||||||
}
|
}
|
||||||
|
|
||||||
result.data.allProjectsJson.edges.forEach(
|
result.data.allProjectsYaml.edges.forEach(
|
||||||
({ node, previous, next }) => {
|
({ node, previous, next }) => {
|
||||||
const slug = node.slug
|
const slug = node.slug
|
||||||
|
|
||||||
|
|||||||
@ -24,9 +24,10 @@
|
|||||||
"gatsby-plugin-sharp": "^1.6.44",
|
"gatsby-plugin-sharp": "^1.6.44",
|
||||||
"gatsby-plugin-svgr": "^1.0.0",
|
"gatsby-plugin-svgr": "^1.0.0",
|
||||||
"gatsby-source-filesystem": "^1.5.35",
|
"gatsby-source-filesystem": "^1.5.35",
|
||||||
"gatsby-transformer-json": "^1.0.17",
|
|
||||||
"gatsby-transformer-sharp": "^1.6.24",
|
"gatsby-transformer-sharp": "^1.6.24",
|
||||||
|
"gatsby-transformer-yaml": "^1.5.16",
|
||||||
"intersection-observer": "^0.5.0",
|
"intersection-observer": "^0.5.0",
|
||||||
|
"js-yaml": "^3.11.0",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-markdown": "^3.3.0",
|
"react-markdown": "^3.3.0",
|
||||||
"react-transition-group": "^2.3.1"
|
"react-transition-group": "^2.3.1"
|
||||||
|
|||||||
@ -16,7 +16,7 @@ const Head = ({ meta, location }) => {
|
|||||||
<meta content="noindex,nofollow" name="robots" />
|
<meta content="noindex,nofollow" name="robots" />
|
||||||
)}
|
)}
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<SEO />
|
<SEO meta={meta} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Helmet from 'react-helmet'
|
import Helmet from 'react-helmet'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import meta from '../../../data/meta.json'
|
|
||||||
|
|
||||||
const SEO = ({ postMeta }) => {
|
const SEO = ({ postMeta, meta }) => {
|
||||||
const title = postMeta.title || meta.title
|
const title = postMeta.title || meta.title
|
||||||
const description = postMeta.description || meta.description
|
const description = postMeta.description || meta.description
|
||||||
const image = postMeta.img || meta.img || null
|
const image = postMeta.img || meta.img || null
|
||||||
@ -39,7 +38,7 @@ SEO.propTypes = {
|
|||||||
|
|
||||||
SEO.defaultProps = {
|
SEO.defaultProps = {
|
||||||
postMeta: {},
|
postMeta: {},
|
||||||
meta,
|
meta: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SEO
|
export default SEO
|
||||||
|
|||||||
@ -20,7 +20,7 @@ class TransitionHandler extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const TemplateWrapper = ({ data, location, children }) => {
|
const TemplateWrapper = ({ data, location, children }) => {
|
||||||
const meta = data.dataJson
|
const meta = data.dataYaml
|
||||||
const isHomepage = location.pathname === '/'
|
const isHomepage = location.pathname === '/'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -61,7 +61,7 @@ export default withRouter(TemplateWrapper)
|
|||||||
|
|
||||||
export const query = graphql`
|
export const query = graphql`
|
||||||
query metaQuery {
|
query metaQuery {
|
||||||
dataJson {
|
dataYaml {
|
||||||
title
|
title
|
||||||
tagline
|
tagline
|
||||||
description
|
description
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import FullWidth from '../components/atoms/FullWidth'
|
|||||||
import './index.scss'
|
import './index.scss'
|
||||||
|
|
||||||
const Home = ({ data }) => {
|
const Home = ({ data }) => {
|
||||||
const projects = data.allProjectsJson.edges
|
const projects = data.allProjectsYaml.edges
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FullWidth id="projects" className="projects">
|
<FullWidth id="projects" className="projects">
|
||||||
@ -34,7 +34,7 @@ export default Home
|
|||||||
|
|
||||||
export const IndexQuery = graphql`
|
export const IndexQuery = graphql`
|
||||||
query IndexQuery {
|
query IndexQuery {
|
||||||
allProjectsJson {
|
allProjectsYaml {
|
||||||
edges {
|
edges {
|
||||||
node {
|
node {
|
||||||
title
|
title
|
||||||
|
|||||||
@ -17,7 +17,8 @@ class Project extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const project = this.props.data.projectsJson
|
const meta = this.props.data.dataYaml
|
||||||
|
const project = this.props.data.projectsYaml
|
||||||
const projectImages = this.props.data.projectImages.edges
|
const projectImages = this.props.data.projectImages.edges
|
||||||
const pathContext = this.props.pathContext
|
const pathContext = this.props.pathContext
|
||||||
|
|
||||||
@ -30,20 +31,20 @@ class Project extends Component {
|
|||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
|
|
||||||
<SEO postMeta={project} />
|
<SEO meta={meta} postMeta={project} />
|
||||||
|
|
||||||
<article className="project">
|
<article className="project">
|
||||||
<Content>
|
<Content>
|
||||||
<h1 className="project__title">{title}</h1>
|
<h1 className="project__title">{title}</h1>
|
||||||
<ReactMarkdown
|
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
|
||||||
source={description}
|
|
||||||
escapeHtml={false}
|
|
||||||
className="project__description"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FullWidth>
|
<FullWidth>
|
||||||
{projectImages.map(({ node }) => (
|
{projectImages.map(({ node }) => (
|
||||||
<ProjectImage key={node.id} sizes={node.sizes} alt={title} />
|
<ProjectImage
|
||||||
|
key={node.id}
|
||||||
|
sizes={node.sizes}
|
||||||
|
alt={title}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</FullWidth>
|
</FullWidth>
|
||||||
|
|
||||||
@ -69,7 +70,7 @@ export default Project
|
|||||||
|
|
||||||
export const projectQuery = graphql`
|
export const projectQuery = graphql`
|
||||||
query ProjectBySlug($slug: String!) {
|
query ProjectBySlug($slug: String!) {
|
||||||
projectsJson(slug: { eq: $slug }) {
|
projectsYaml(slug: { eq: $slug }) {
|
||||||
title
|
title
|
||||||
slug
|
slug
|
||||||
description
|
description
|
||||||
@ -79,6 +80,26 @@ export const projectQuery = graphql`
|
|||||||
}
|
}
|
||||||
techstack
|
techstack
|
||||||
}
|
}
|
||||||
|
dataYaml {
|
||||||
|
title
|
||||||
|
tagline
|
||||||
|
description
|
||||||
|
url
|
||||||
|
social {
|
||||||
|
Email
|
||||||
|
Blog
|
||||||
|
Twitter
|
||||||
|
GitHub
|
||||||
|
Dribbble
|
||||||
|
}
|
||||||
|
availability {
|
||||||
|
status
|
||||||
|
available
|
||||||
|
unavailable
|
||||||
|
}
|
||||||
|
typekit
|
||||||
|
googleanalytics
|
||||||
|
}
|
||||||
projectImages: allImageSharp(
|
projectImages: allImageSharp(
|
||||||
filter: { id: { regex: $slug } }
|
filter: { id: { regex: $slug } }
|
||||||
sort: { fields: [id], order: ASC }
|
sort: { fields: [id], order: ASC }
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user