mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-22 09:13:19 +01:00
Make links an array
This commit is contained in:
parent
db26ecf237
commit
a7744ef8d0
GPG Key ID:
606EEEF3C479A91F
@ -7,9 +7,10 @@
|
||||
"oceanprotocol01",
|
||||
"oceanprotocol02"
|
||||
],
|
||||
"links": {
|
||||
"Link": "https://oceanprotocol.com"
|
||||
},
|
||||
"links": [
|
||||
{ "title": "Link", "url": "https://oceanprotocol.com" },
|
||||
{ "title": "GitHub", "url": "https://github.com/oceanprotocol/art" }
|
||||
],
|
||||
"description": "Conceptualizing, executing and iterating on 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/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -31,10 +32,16 @@
|
||||
"ipdb01",
|
||||
"ipdb02"
|
||||
],
|
||||
"links": {
|
||||
"Link": "https://ipdb.io",
|
||||
"GitHub": "https://github.com/ipdb/website"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "https://ipdb.io"
|
||||
},
|
||||
{
|
||||
"title": "GitHub",
|
||||
"url": "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.\n\nKey visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -52,9 +59,12 @@
|
||||
"title": "Berlin Innovation Ventures",
|
||||
"slug": "biv",
|
||||
"img": "biv",
|
||||
"links": {
|
||||
"Link": "http://berlininnovation.vc"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "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.",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -69,10 +79,16 @@
|
||||
"title": "9984 >> Summit 2017",
|
||||
"slug": "9984",
|
||||
"img": "ninenineeightfour",
|
||||
"links": {
|
||||
"Link": "https://2017.9984.io",
|
||||
"GitHub": "https://github.com/9984/2017.9984.io"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "https://2017.9984.io"
|
||||
},
|
||||
{
|
||||
"title": "GitHub",
|
||||
"url": "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.",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -95,11 +111,20 @@
|
||||
"bigchaindb02",
|
||||
"bigchaindb03"
|
||||
],
|
||||
"links": {
|
||||
"Link": "https://www.bigchaindb.com",
|
||||
"GitHub": "https://github.com/bigchaindb/site",
|
||||
"Dribbble": "https://dribbble.com/shots/2522184-BigchainDB-site"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "https://www.bigchaindb.com"
|
||||
},
|
||||
{
|
||||
"title": "GitHub",
|
||||
"url": "https://github.com/bigchaindb/site"
|
||||
},
|
||||
{
|
||||
"title": "Dribbble",
|
||||
"url": "https://dribbble.com/shots/2522184-BigchainDB-site"
|
||||
}
|
||||
],
|
||||
"description": "Conceptualizing and executing the creative and visual direction of the BigchainDB brand. Leading the UI design & development of all BigchainDB web properties.\n\nKey visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -123,10 +148,16 @@
|
||||
"chartmogul01",
|
||||
"chartmogul02"
|
||||
],
|
||||
"links": {
|
||||
"Link": "https://chartmogul.com/stripe/",
|
||||
"Dribbble": "https://dribbble.com/kremalicious/projects/311439-ChartMogul"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "https://chartmogul.com/"
|
||||
},
|
||||
{
|
||||
"title": "Dribbble",
|
||||
"url": "https://dribbble.com/kremalicious/projects/311439-ChartMogul"
|
||||
}
|
||||
],
|
||||
"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": [
|
||||
"Sketch",
|
||||
@ -150,9 +181,12 @@
|
||||
"title": "ShareTheMeal",
|
||||
"slug": "sharethemeal",
|
||||
"img": "sharethemeal",
|
||||
"links": {
|
||||
"Link": "https://sharethemeal.org/"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "https://sharethemeal.org/"
|
||||
}
|
||||
],
|
||||
"description": "Co-designing and leading the front-end development of the ShareTheMeal website.",
|
||||
"techstack": [
|
||||
"Sketch",
|
||||
@ -180,10 +214,16 @@
|
||||
"ezeep04",
|
||||
"ezeep05"
|
||||
],
|
||||
"links": {
|
||||
"Info": "https://kremalicious.com/enterprise-software-sucks/",
|
||||
"Dribbble": "https://dribbble.com/kremalicious/projects/84318-ezeep"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Info",
|
||||
"url": "https://kremalicious.com/enterprise-software-sucks/"
|
||||
},
|
||||
{
|
||||
"title": "Dribbble",
|
||||
"url": "https://dribbble.com/kremalicious/projects/84318-ezeep"
|
||||
}
|
||||
],
|
||||
"techstack": [
|
||||
"Photoshop",
|
||||
"Illustrator",
|
||||
@ -215,9 +255,12 @@
|
||||
"title": "iPixelPad",
|
||||
"slug": "ipixelpad",
|
||||
"img": "ipixelpad",
|
||||
"links": {
|
||||
"Download": "https://kremalicious.com/ipixelpad/"
|
||||
},
|
||||
"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"
|
||||
@ -232,9 +275,12 @@
|
||||
"outofwhaleoil02"
|
||||
],
|
||||
"description": "Tribute wallpaper pack inspired by the Futurama movie _Into The Wild Green Yonder_.",
|
||||
"links": {
|
||||
"Download": "https://kremalicious.com/out-of-whale-oil/"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Download",
|
||||
"url": "https://kremalicious.com/out-of-whale-oil/"
|
||||
}
|
||||
],
|
||||
"techstack": [
|
||||
"Photoshop"
|
||||
]
|
||||
@ -247,9 +293,16 @@
|
||||
"unihalle01",
|
||||
"unihalle02"
|
||||
],
|
||||
"links": {
|
||||
"Link": "http://blogs.urz-uni-halle.de"
|
||||
},
|
||||
"links": [
|
||||
{
|
||||
"title": "Link",
|
||||
"url": "http://blogs.urz-uni-halle.de"
|
||||
},
|
||||
{
|
||||
"title": "Dribbble",
|
||||
"url": "https://dribbble.com/kremalicious/projects/690029-MLU"
|
||||
}
|
||||
],
|
||||
"description": "I worked for over 3 years 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",
|
||||
@ -268,9 +321,12 @@
|
||||
"title": "Coffee Cup",
|
||||
"slug": "coffee-cup-icon",
|
||||
"img": "coffeecup",
|
||||
"links": {
|
||||
"Download": "https://kremalicious.com/coffee-cup-icon/"
|
||||
},
|
||||
"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"
|
||||
|
||||
@ -17,22 +17,22 @@ module.exports = {
|
||||
includePaths: [
|
||||
`${__dirname}/node_modules`,
|
||||
`${__dirname}/src/styles`
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'data',
|
||||
path: `${__dirname}/data/`,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'images',
|
||||
path: `${__dirname}/src/images`,
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-google-analytics',
|
||||
@ -41,7 +41,7 @@ module.exports = {
|
||||
head: false,
|
||||
anonymize: true,
|
||||
respectDNT: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -13,17 +13,14 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
||||
node {
|
||||
title
|
||||
slug
|
||||
description
|
||||
img
|
||||
img_more
|
||||
links {
|
||||
Link
|
||||
GitHub
|
||||
Info
|
||||
Dribbble
|
||||
Download
|
||||
}
|
||||
description
|
||||
techstack
|
||||
links {
|
||||
title
|
||||
url
|
||||
}
|
||||
}
|
||||
previous {
|
||||
title
|
||||
|
||||
@ -3,12 +3,14 @@ import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
|
||||
const Head = ({ meta }) => {
|
||||
const { title, tagline, description } = meta
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
defaultTitle={`${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
|
||||
titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
|
||||
>
|
||||
<meta name="description" content={meta.description} />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
|
||||
</Helmet>
|
||||
)
|
||||
|
||||
@ -65,19 +65,25 @@ export const Email = props => (
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Index = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<rect width="9" height="5" />
|
||||
<rect width="9" height="5" y="7" />
|
||||
<rect width="9" height="5" y="14" />
|
||||
<rect width="9" height="5" x="11" />
|
||||
<rect width="9" height="5" x="11" y="7" />
|
||||
<rect width="9" height="5" x="11" y="14" />
|
||||
export const Index = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<rect width="9" height="5" />
|
||||
<rect width="9" height="5" y="7" />
|
||||
<rect width="9" height="5" y="14" />
|
||||
<rect width="9" height="5" x="11" />
|
||||
<rect width="9" height="5" x="11" y="7" />
|
||||
<rect width="9" height="5" x="11" y="14" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Info = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M10,19 C5.02943725,19 1,14.9705627 1,10 C1,5.02943725 5.02943725,1 10,1 C14.9705627,1 19,5.02943725 19,10 C19,14.9705627 14.9705627,19 10,19 Z M11.2903086,6.10848407 C11.2903086,5.93461182 11.2559923,5.77218098 11.1873585,5.62118666 C11.1187247,5.47019234 11.0272144,5.33979011 10.9128247,5.22997606 C10.7984351,5.12016201 10.6611696,5.03322719 10.5010241,4.969169 C10.3408786,4.9051108 10.1738722,4.87308219 10,4.87308219 C9.81697658,4.87308219 9.64768246,4.90739856 9.49211256,4.97603234 C9.33654266,5.04466612 9.19927715,5.1338887 9.08031193,5.24370275 C8.96134671,5.3535168 8.86983638,5.48391903 8.80577818,5.63491335 C8.74171998,5.78590766 8.70969137,5.94376299 8.70969137,6.10848407 C8.70969137,6.44707739 8.83323032,6.7376227 9.08031193,6.98012873 C9.32739354,7.22263476 9.63395317,7.34388595 10,7.34388595 C10.1738722,7.34388595 10.3408786,7.31185733 10.5010241,7.24779914 C10.6611696,7.18374094 10.7984351,7.09680612 10.9128247,6.98699207 C11.0272144,6.87717802 11.1187247,6.7467758 11.1873585,6.59578148 C11.2559923,6.44478716 11.2903086,6.28235631 11.2903086,6.10848407 Z M8.87441162,15.1269178 L11.1255884,15.1269178 L11.1255884,8.2910274 L8.87441162,8.2910274 L8.87441162,15.1269178 Z" />
|
||||
</svg>
|
||||
export const Info = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M10,19 C5.02943725,19 1,14.9705627 1,10 C1,5.02943725 5.02943725,1 10,1 C14.9705627,1 19,5.02943725 19,10 C19,14.9705627 14.9705627,19 10,19 Z M11.2903086,6.10848407 C11.2903086,5.93461182 11.2559923,5.77218098 11.1873585,5.62118666 C11.1187247,5.47019234 11.0272144,5.33979011 10.9128247,5.22997606 C10.7984351,5.12016201 10.6611696,5.03322719 10.5010241,4.969169 C10.3408786,4.9051108 10.1738722,4.87308219 10,4.87308219 C9.81697658,4.87308219 9.64768246,4.90739856 9.49211256,4.97603234 C9.33654266,5.04466612 9.19927715,5.1338887 9.08031193,5.24370275 C8.96134671,5.3535168 8.86983638,5.48391903 8.80577818,5.63491335 C8.74171998,5.78590766 8.70969137,5.94376299 8.70969137,6.10848407 C8.70969137,6.44707739 8.83323032,6.7376227 9.08031193,6.98012873 C9.32739354,7.22263476 9.63395317,7.34388595 10,7.34388595 C10.1738722,7.34388595 10.3408786,7.31185733 10.5010241,7.24779914 C10.6611696,7.18374094 10.7984351,7.09680612 10.9128247,6.98699207 C11.0272144,6.87717802 11.1187247,6.7467758 11.1873585,6.59578148 C11.2559923,6.44478716 11.2903086,6.28235631 11.2903086,6.10848407 Z M8.87441162,15.1269178 L11.1255884,15.1269178 L11.1255884,8.2910274 L8.87441162,8.2910274 L8.87441162,15.1269178 Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Download = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M10,19 C14.9707692,19 19,14.9707692 19,10 C19,5.03061538 14.9707692,1 10,1 C5.02923077,1 1,5.03061538 1,10 C1,14.9707692 5.02923077,19 10,19 Z M6.53846154,10.6923077 C6.80846154,10.4223077 7.24738462,10.4223077 7.51738462,10.6923077 L9.30769231,12.4826154 L9.30769231,5.84615385 C9.30769231,5.464 9.61784615,5.15384615 10,5.15384615 C10.3821538,5.15384615 10.6923077,5.464 10.6923077,5.84615385 L10.6923077,12.4826154 L12.4826154,10.6923077 C12.7526154,10.4223077 13.1915385,10.4223077 13.4615385,10.6923077 C13.7315385,10.9623077 13.7315385,11.4012308 13.4615385,11.6712308 L10.4901538,14.644 C10.2201538,14.9126154 9.78123077,14.9126154 9.51123077,14.644 L6.53846154,11.6712308 C6.26846154,11.4012308 6.26846154,10.9623077 6.53846154,10.6923077 Z" />
|
||||
</svg>
|
||||
export const Download = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M10,19 C14.9707692,19 19,14.9707692 19,10 C19,5.03061538 14.9707692,1 10,1 C5.02923077,1 1,5.03061538 1,10 C1,14.9707692 5.02923077,19 10,19 Z M6.53846154,10.6923077 C6.80846154,10.4223077 7.24738462,10.4223077 7.51738462,10.6923077 L9.30769231,12.4826154 L9.30769231,5.84615385 C9.30769231,5.464 9.61784615,5.15384615 10,5.15384615 C10.3821538,5.15384615 10.6923077,5.464 10.6923077,5.84615385 L10.6923077,12.4826154 L12.4826154,10.6923077 C12.7526154,10.4223077 13.1915385,10.4223077 13.4615385,10.6923077 C13.7315385,10.9623077 13.7315385,11.4012308 13.4615385,11.6712308 L10.4901538,14.644 C10.2201538,14.9126154 9.78123077,14.9126154 9.51123077,14.644 L6.53846154,11.6712308 C6.26846154,11.4012308 6.26846154,10.9623077 6.53846154,10.6923077 Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import React from 'react'
|
||||
import './ProjectImage.scss'
|
||||
|
||||
const ProjectImage = (props) => (
|
||||
<img
|
||||
className="project__image"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
const ProjectImage = props => <img className="project__image" {...props} />
|
||||
|
||||
export default ProjectImage
|
||||
|
||||
@ -16,7 +16,10 @@ const Header = ({ meta, isHomepage }) => {
|
||||
<Link className="header__name" to={'/'}>
|
||||
<Logo className="header__logo" />
|
||||
<h1 className="header__title">{meta.title.toLowerCase()}</h1>
|
||||
<p className="header__description"><span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span></p>
|
||||
<p className="header__description">
|
||||
<span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
|
||||
<span>{' }'}</span>
|
||||
</p>
|
||||
</Link>
|
||||
<Social meta={meta} minimal={!isHomepage} hide={!isHomepage} />
|
||||
</Fragment>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
@media (min-width: 30rem) {
|
||||
margin-top: $spacer / 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.header__title,
|
||||
|
||||
@ -24,28 +24,28 @@ const LinkIcon = ({ title }) => {
|
||||
const ProjectLinks = ({ links }) => (
|
||||
<div className="project__links">
|
||||
<h3 className="project__meta__title">
|
||||
Links <span>See the project live on the interwebz.</span>
|
||||
Links <span>Learn more on the interwebz.</span>
|
||||
</h3>
|
||||
|
||||
<ul>
|
||||
{Object.keys(links).map(key => {
|
||||
if (links[key]) {
|
||||
return (
|
||||
<li key={key}>
|
||||
<OutboundLink href={links[key]}>
|
||||
<LinkIcon title={key} />
|
||||
{key}
|
||||
</OutboundLink>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{links.map(link => {
|
||||
const { title, url } = link
|
||||
|
||||
return (
|
||||
<li key={title}>
|
||||
<OutboundLink href={url}>
|
||||
<LinkIcon title={title} />
|
||||
{title}
|
||||
</OutboundLink>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
ProjectLinks.propTypes = {
|
||||
links: PropTypes.object,
|
||||
links: PropTypes.array,
|
||||
}
|
||||
|
||||
export default ProjectLinks
|
||||
|
||||
@ -4,10 +4,15 @@
|
||||
ul {
|
||||
padding: 0;
|
||||
margin-left: -($spacer / 2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 calc(50% - #{$spacer / 2});
|
||||
margin-left: $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
@ -19,28 +24,30 @@
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $brand-cyan;
|
||||
text-align: center;
|
||||
border-radius: .25rem;
|
||||
padding: $spacer / 4 $spacer;
|
||||
border-top-left-radius: .25rem;
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom: 1px solid $brand-cyan;
|
||||
padding: $spacer / 4 $spacer / 2;
|
||||
transition-property: all;
|
||||
background: rgba(#fff, .15);
|
||||
|
||||
.icon {
|
||||
fill: $brand-cyan;
|
||||
opacity: .85;
|
||||
fill: $brand-grey;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $brand-light;
|
||||
transform: translate3d(0, -.2rem, 0);
|
||||
transform: translate3d(0, -.1rem, 0);
|
||||
box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
background: darken($brand-cyan, 5%);
|
||||
background: rgba(#fff, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,11 +14,11 @@
|
||||
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, .15);
|
||||
color: $brand-grey-light;
|
||||
flex: 1 1 calc((100% / 3) - #{$spacer});
|
||||
margin-left: $spacer / 2;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ const SocialIcon = ({ title }) => {
|
||||
}
|
||||
|
||||
const Social = ({ meta, minimal, hide }) => {
|
||||
const social = meta.social
|
||||
const { social } = meta
|
||||
const classes = minimal ? 'social social--minimal' : 'social'
|
||||
|
||||
return (
|
||||
|
||||
@ -35,26 +35,23 @@ const Project = ({ pathContext }) => {
|
||||
<article className="project">
|
||||
<Content>
|
||||
<h1 className="project__title">{title}</h1>
|
||||
<ReactMarkdown source={description} escapeHtml={false} className="project__description" />
|
||||
<ReactMarkdown
|
||||
source={description}
|
||||
escapeHtml={false}
|
||||
className="project__description"
|
||||
/>
|
||||
|
||||
<FullWidth>
|
||||
<ProjectImage
|
||||
src={images[img]}
|
||||
alt={title}
|
||||
/>
|
||||
<ProjectImage src={images[img]} alt={title} />
|
||||
</FullWidth>
|
||||
|
||||
{!!img_more &&
|
||||
{!!img_more && (
|
||||
<FullWidth>
|
||||
{img_more.map(key => (
|
||||
<ProjectImage
|
||||
key={key}
|
||||
src={images[key]}
|
||||
alt={title}
|
||||
/>
|
||||
<ProjectImage key={key} src={images[key]} alt={title} />
|
||||
))}
|
||||
</FullWidth>
|
||||
}
|
||||
)}
|
||||
|
||||
<footer className="project__meta">
|
||||
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
.project__description {
|
||||
font-size: $font-size-large;
|
||||
color: $brand-grey;
|
||||
margin-bottom: $spacer * 4;
|
||||
margin-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
.project__meta {
|
||||
|
||||
@ -17,10 +17,7 @@ const Projects = ({ data }) => {
|
||||
className="projects__project"
|
||||
>
|
||||
<h1 className="projects__project__title">{node.title}</h1>
|
||||
<ProjectImage
|
||||
src={images[node.img]}
|
||||
alt={node.title}
|
||||
/>
|
||||
<ProjectImage src={images[node.img]} alt={node.title} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.8 MiB |
Loading…
Reference in New Issue
Block a user