mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-22 09:13:19 +01:00
project tweaks
This commit is contained in:
parent
83d6035999
commit
7c5fff1cdd
GPG Key ID:
606EEEF3C479A91F
@ -154,7 +154,7 @@
|
||||
"title": "ezeep",
|
||||
"slug": "ezeep",
|
||||
"img": "ezeep",
|
||||
"description": "At ezeep, I created an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors.\n\nThis included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand. I was leading the UI design & development of all ezeep web properties and marketing materials, on top of that I designed 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.",
|
||||
"description": "At ezeep, 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.",
|
||||
"img_more": [
|
||||
"ezeep01",
|
||||
"ezeep02",
|
||||
@ -204,22 +204,6 @@
|
||||
"img": "mrreader",
|
||||
"description": "Designing the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful RSS feed reader for iPad."
|
||||
},
|
||||
{
|
||||
"title": "IPP Halle",
|
||||
"slug": "ipp-halle",
|
||||
"img": "ipp-halle.png",
|
||||
"links": {
|
||||
"Link": "http://ipp-halle.de"
|
||||
},
|
||||
"description": "",
|
||||
"techstack": [
|
||||
"Photoshop",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"PHP",
|
||||
"WordPress"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "iPixelPad",
|
||||
"slug": "ipixelpad",
|
||||
@ -258,7 +242,7 @@
|
||||
"links": {
|
||||
"Link": "http://blogs.urz-uni-halle.de"
|
||||
},
|
||||
"description": "",
|
||||
"description": "Conceptualizing & implementing numerous in-house and public facing interfaces for thousands of students and staff. Additionally, conceptualizing, creating and maintaining the blog network & community for all students & staff.",
|
||||
"techstack": [
|
||||
"Photoshop",
|
||||
"SCSS",
|
||||
|
||||
@ -8,6 +8,7 @@ module.exports = {
|
||||
'gatsby-plugin-react-next',
|
||||
'gatsby-plugin-react-helmet',
|
||||
'gatsby-plugin-sitemap',
|
||||
'gatsby-transformer-json',
|
||||
{
|
||||
resolve: 'gatsby-plugin-sass',
|
||||
options: {
|
||||
@ -21,7 +22,6 @@ module.exports = {
|
||||
path: `${__dirname}/data/`,
|
||||
},
|
||||
},
|
||||
'gatsby-transformer-json',
|
||||
{
|
||||
resolve: 'gatsby-plugin-google-analytics',
|
||||
options: {
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"gatsby": "^1.9.250",
|
||||
"gatsby": "^1.9.251",
|
||||
"gatsby-link": "^1.6.39",
|
||||
"gatsby-plugin-google-analytics": "^1.0.29",
|
||||
"gatsby-plugin-google-analytics": "^1.0.30",
|
||||
"gatsby-plugin-react-helmet": "^2.0.8",
|
||||
"gatsby-plugin-react-next": "^1.0.11",
|
||||
"gatsby-plugin-sass": "^1.0.25",
|
||||
"gatsby-plugin-sitemap": "^1.2.21",
|
||||
"gatsby-source-filesystem": "^1.5.31",
|
||||
"gatsby-source-filesystem": "^1.5.32",
|
||||
"gatsby-transformer-json": "^1.0.16",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-markdown": "^3.3.0",
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
@import 'variables';
|
||||
|
||||
.footer {
|
||||
padding: $spacer;
|
||||
margin-top: $spacer * 4;
|
||||
padding: $spacer * 2;
|
||||
text-align: center;
|
||||
color: $brand-grey-light;
|
||||
|
||||
|
||||
49
src/components/molecules/ProjectNav.js
Normal file
49
src/components/molecules/ProjectNav.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Link from 'gatsby-link'
|
||||
import { Index } from '../atoms/Icons'
|
||||
import images from '../../images'
|
||||
import './ProjectNav.scss'
|
||||
|
||||
const ProjectNav = ({ previous, next }) => (
|
||||
<nav className="project__nav full-width">
|
||||
{previous && (
|
||||
<div className="project__nav__item">
|
||||
<Link className="project__nav__link prev" to={previous.slug}>
|
||||
<img
|
||||
className="project__nav__image"
|
||||
src={images[previous.img]}
|
||||
alt={previous.title}
|
||||
/>
|
||||
<h1 className="project__nav__title">{previous.title}</h1>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<Link
|
||||
className="project__nav__index"
|
||||
title="Back to projects"
|
||||
to={'/#projects'}
|
||||
>
|
||||
<Index />
|
||||
</Link>
|
||||
{next && (
|
||||
<div className="project__nav__item">
|
||||
<Link className="project__nav__link next" to={next.slug}>
|
||||
<img
|
||||
className="project__nav__image"
|
||||
src={images[next.img]}
|
||||
alt={next.title}
|
||||
/>
|
||||
<h1 className="project__nav__title">{next.title}</h1>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
|
||||
ProjectNav.propTypes = {
|
||||
previous: PropTypes.object,
|
||||
next: PropTypes.object,
|
||||
}
|
||||
|
||||
export default ProjectNav
|
||||
81
src/components/molecules/ProjectNav.scss
Normal file
81
src/components/molecules/ProjectNav.scss
Normal file
@ -0,0 +1,81 @@
|
||||
@import 'variables';
|
||||
|
||||
.project__nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project__nav__image {
|
||||
margin: 0;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
|
||||
}
|
||||
|
||||
.project__nav__item {
|
||||
flex: 0 0 48%;
|
||||
position: relative;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translate3d(-1rem, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child { // stylelint-disable-line
|
||||
text-align: right;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translate3d(1rem, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__title {
|
||||
font-size: $font-size-small;
|
||||
padding: $spacer / 2 $spacer / 4;
|
||||
margin: 0;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
font-size: $font-size-base;
|
||||
padding: $spacer / 2 $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__link {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.project__nav__title {
|
||||
color: $brand-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__index {
|
||||
height: 100%;
|
||||
display: block;
|
||||
align-self: center;
|
||||
margin-top: -$spacer;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 48.5%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $brand-grey-light;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -6,15 +6,19 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-left: -($spacer / 2);
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
flex: 0 0 (100% / 3);
|
||||
margin-bottom: $spacer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacer / 4;
|
||||
flex: 1 1 calc((100% / 3) - #{$spacer});
|
||||
margin-bottom: $spacer / 2;
|
||||
font-size: $font-size-small;
|
||||
text-align: center;
|
||||
background: rgba(#fff, .2);
|
||||
background: rgba(#fff, .15);
|
||||
margin-left: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,9 +18,16 @@
|
||||
border-radius: .25rem;
|
||||
transition-property: transform, background, box-shadow;
|
||||
|
||||
&,
|
||||
.icon {
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: $brand-grey-light;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -28,6 +35,10 @@
|
||||
background: $brand-light;
|
||||
transform: translate3d(0, -.2rem, 0);
|
||||
box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
|
||||
|
||||
.icon {
|
||||
fill: $brand-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.social--minimal & {
|
||||
@ -36,17 +47,8 @@
|
||||
margin-right: $spacer / 3;
|
||||
|
||||
.icon {
|
||||
fill: $brand-grey-light;
|
||||
transition: .2s ease-out;
|
||||
width: .85rem;
|
||||
height: .85rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.icon {
|
||||
fill: $brand-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Link from 'gatsby-link'
|
||||
import Helmet from 'react-helmet'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Content from '../atoms/Content'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
import ProjectTechstack from '../molecules/ProjectTechstack'
|
||||
import ProjectLinks from '../molecules/ProjectLinks'
|
||||
import { Index } from '../atoms/Icons'
|
||||
import ProjectNav from '../molecules/ProjectNav'
|
||||
import images from '../../images'
|
||||
import './Project.scss'
|
||||
|
||||
@ -58,23 +57,7 @@ const Project = ({ pathContext }) => {
|
||||
</Content>
|
||||
</article>
|
||||
|
||||
<nav className="project__nav full-width">
|
||||
{previous && <div className="project__nav__item">
|
||||
<Link className="project__nav__link prev" to={previous.slug}>
|
||||
<img className="project__image project__nav__image" src={images[previous.img]} alt={previous.title} />
|
||||
<h1 className="project__nav__title">{previous.title}</h1>
|
||||
</Link>
|
||||
</div>}
|
||||
<Link className="project__nav__index" title="Back to projects" to={'/'}>
|
||||
<Index />
|
||||
</Link>
|
||||
{next && <div className="project__nav__item">
|
||||
<Link className="project__nav__link next" to={next.slug}>
|
||||
<img className="project__image project__nav__image" src={images[next.img]} alt={next.title} />
|
||||
<h1 className="project__nav__title">{next.title}</h1>
|
||||
</Link>
|
||||
</div>}
|
||||
</nav>
|
||||
<ProjectNav previous={previous} next={next} />
|
||||
</main>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
}
|
||||
|
||||
.project__meta {
|
||||
margin-top: $spacer * 4;
|
||||
margin-bottom: $spacer * 4;
|
||||
margin-top: $spacer * 5;
|
||||
margin-bottom: $spacer * 5;
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
display: flex;
|
||||
@ -45,83 +45,3 @@
|
||||
color: $brand-grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project__nav__image {
|
||||
margin: 0;
|
||||
box-shadow: 0 3px 5px rgba($brand-main, .2), 0 5px 16px rgba($brand-main, .2);
|
||||
}
|
||||
|
||||
.project__nav__item {
|
||||
flex: 0 0 48%;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__link {
|
||||
&::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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__title {
|
||||
font-size: $font-size-small;
|
||||
padding: $spacer / 2 $spacer / 4;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
font-size: $font-size-base;
|
||||
padding: $spacer / 2 $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.project__nav__index {
|
||||
height: 100%;
|
||||
display: block;
|
||||
align-self: center;
|
||||
margin-top: -$spacer;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 48.5%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $brand-grey-light;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ const Projects = ({ data }) => {
|
||||
const projects = data.allProjectsJson.edges
|
||||
|
||||
return (
|
||||
<div className="projects full-width">
|
||||
<div className="projects full-width" id="projects">
|
||||
{projects.map(({ node }) => (
|
||||
<Link
|
||||
key={node.slug}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user