mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-22 17:23:22 +01:00
code formatting
This commit is contained in:
parent
1dca5be43a
commit
cf420fa282
GPG Key ID:
606EEEF3C479A91F
@ -2,14 +2,10 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import './Content.scss'
|
||||
|
||||
const Content = ({children}) => (
|
||||
<div className="content">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
const Content = ({ children }) => <div className="content">{children}</div>
|
||||
|
||||
Content.propTypes = {
|
||||
children: PropTypes.node
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
export default Content
|
||||
|
||||
@ -8,7 +8,8 @@ const FadeIn = props => (
|
||||
classNames="fadein"
|
||||
appear={true}
|
||||
in={true}
|
||||
timeout={400} />
|
||||
timeout={400}
|
||||
/>
|
||||
)
|
||||
|
||||
export default FadeIn
|
||||
|
||||
@ -2,14 +2,10 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import './FullWidth.scss'
|
||||
|
||||
const FullWidth = ({ children }) => (
|
||||
<div className="full-width">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
const FullWidth = ({ children }) => <div className="full-width">{children}</div>
|
||||
|
||||
FullWidth.propTypes = {
|
||||
children: PropTypes.node
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
export default FullWidth
|
||||
|
||||
@ -3,10 +3,15 @@ import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
|
||||
const Head = ({ meta }) => {
|
||||
return <Helmet defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`} titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}>
|
||||
return (
|
||||
<Helmet
|
||||
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
>
|
||||
<meta name="description" content={meta.description} />
|
||||
<link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
|
||||
</Helmet>
|
||||
)
|
||||
}
|
||||
|
||||
Head.propTypes = {
|
||||
|
||||
@ -1,47 +1,66 @@
|
||||
import React from 'react'
|
||||
import './Icons.scss'
|
||||
|
||||
export const Logo = props => <svg width="146" height="146" viewBox="0 0 146 146" {...props}>
|
||||
<path d="M307.015625,177.53125 L317.421875,188.078125 L182.421875,322.515625 L172.4375,312.390625 L307.015625,177.53125 Z M307.015625,217.328125 L317.421875,227.875 L222.21875,322.515625 L212.234375,312.390625 L307.015625,217.328125 Z M267.359375,177.53125 L277.625,188.078125 L182.421875,282.71875 L172.4375,272.59375 L267.359375,177.53125 Z" transform="translate(-172 -177)" />
|
||||
export const Logo = props => (
|
||||
<svg width="146" height="146" viewBox="0 0 146 146" {...props}>
|
||||
<path
|
||||
d="M307.015625,177.53125 L317.421875,188.078125 L182.421875,322.515625 L172.4375,312.390625 L307.015625,177.53125 Z M307.015625,217.328125 L317.421875,227.875 L222.21875,322.515625 L212.234375,312.390625 L307.015625,217.328125 Z M267.359375,177.53125 L277.625,188.078125 L182.421875,282.71875 L172.4375,272.59375 L267.359375,177.53125 Z"
|
||||
transform="translate(-172 -177)"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const GitHub = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801 C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08
|
||||
c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2 C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301 c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301 C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369 c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531 c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799 c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"/>
|
||||
</svg>
|
||||
<path
|
||||
d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801 C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08
|
||||
c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2 C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301 c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301 C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369 c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531 c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799 c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Twitter = props => <svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
|
||||
export const Twitter = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
<path
|
||||
d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
|
||||
c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621
|
||||
c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047
|
||||
c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898
|
||||
C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773
|
||||
c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088
|
||||
c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"/>
|
||||
</svg>
|
||||
c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Dribbble = props => <svg className="icon" viewBox="0 0 24 24" width="24" height="24" {...props}>
|
||||
<path d="M13.626 9.504C14.139 10.469 14.58 11.467 14.96 12.491 16.501 12.19 18.08 12.032 19.692 12.032 20.74 12.032 22.328 12.162 23.484 12.303 23.566 9.437 22.606 6.801 20.895 4.714 18.714 6.748 16.263 8.368 13.626 9.504zM19.692 13.032C18.196 13.032 16.729 13.177 15.296 13.447 16.082 15.86 16.5 18.404 16.5 21 16.5 21.36 16.474 22.007 16.442 22.609 20.205 21.032 22.946 17.511 23.421 13.303 22.287 13.162 20.689 13.032 19.692 13.032zM.641 10.292C1.815 10.423 3.143 10.5 4 10.5 6.821 10.5 9.584 9.983 12.19 9.004 10.636 6.384 8.555 4.066 6.06 2.165 3.196 3.9 1.155 6.843.641 10.292zM15.42 22.983C15.46 22.298 15.5 21.421 15.5 21 15.5 18.475 15.085 16.002 14.311 13.657 10.31 14.598 6.613 16.611 3.386 19.602 5.493 21.987 8.566 23.5 12 23.5 13.191 23.5 14.34 23.319 15.42 22.983z" />
|
||||
<path d="M13.977 12.707C13.611 11.739 13.183 10.795 12.693 9.883 9.931 10.94 6.998 11.5 4 11.5 3.095 11.5 1.749 11.419.536 11.283.521 11.522.5 11.758.5 12 .5 14.557 1.345 16.911 2.756 18.821 6.072 15.761 9.868 13.691 13.977 12.707zM7.024 1.645C9.506 3.607 11.574 5.974 13.128 8.631 15.704 7.535 18.098 5.958 20.225 3.971 18.137 1.832 15.226.5 12 .5 10.215.5 8.532.919 7.024 1.645z" />
|
||||
</svg>
|
||||
export const Dribbble = props => (
|
||||
<svg className="icon" viewBox="0 0 24 24" width="24" height="24" {...props}>
|
||||
<path d="M13.626 9.504C14.139 10.469 14.58 11.467 14.96 12.491 16.501 12.19 18.08 12.032 19.692 12.032 20.74 12.032 22.328 12.162 23.484 12.303 23.566 9.437 22.606 6.801 20.895 4.714 18.714 6.748 16.263 8.368 13.626 9.504zM19.692 13.032C18.196 13.032 16.729 13.177 15.296 13.447 16.082 15.86 16.5 18.404 16.5 21 16.5 21.36 16.474 22.007 16.442 22.609 20.205 21.032 22.946 17.511 23.421 13.303 22.287 13.162 20.689 13.032 19.692 13.032zM.641 10.292C1.815 10.423 3.143 10.5 4 10.5 6.821 10.5 9.584 9.983 12.19 9.004 10.636 6.384 8.555 4.066 6.06 2.165 3.196 3.9 1.155 6.843.641 10.292zM15.42 22.983C15.46 22.298 15.5 21.421 15.5 21 15.5 18.475 15.085 16.002 14.311 13.657 10.31 14.598 6.613 16.611 3.386 19.602 5.493 21.987 8.566 23.5 12 23.5 13.191 23.5 14.34 23.319 15.42 22.983z" />
|
||||
<path d="M13.977 12.707C13.611 11.739 13.183 10.795 12.693 9.883 9.931 10.94 6.998 11.5 4 11.5 3.095 11.5 1.749 11.419.536 11.283.521 11.522.5 11.758.5 12 .5 14.557 1.345 16.911 2.756 18.821 6.072 15.761 9.868 13.691 13.977 12.707zM7.024 1.645C9.506 3.607 11.574 5.974 13.128 8.631 15.704 7.535 18.098 5.958 20.225 3.971 18.137 1.832 15.226.5 12 .5 10.215.5 8.532.919 7.024 1.645z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Chain = props => <svg className="icon" viewBox="0 0 18 8" width="18" height="8" {...props}>
|
||||
export const Chain = props => (
|
||||
<svg className="icon" viewBox="0 0 18 8" width="18" height="8" {...props}>
|
||||
<path d="M1.9,4 C1.9,2.84 2.84,1.9 4,1.9 L8,1.9 L8,0 L4,0 C1.79,0 0,1.79 0,4 C0,6.21 1.79,8 4,8 L8,8 L8,6.1 L4,6.1 C2.84,6.1 1.9,5.16 1.9,4 Z M14,0 L10,0 L10,1.9 L14,1.9 C15.16,1.9 16.1,2.84 16.1,4 C16.1,5.16 15.16,6.1 14,6.1 L10,6.1 L10,8 L14,8 C16.21,8 18,6.21 18,4 C18,1.79 16.21,0 14,0 Z M6,5 L12,5 L12,3 L6,3 L6,5 Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Blog = props => <svg className="icon" viewBox="0 0 22 22" width="22" height="22" {...props}>
|
||||
export const Blog = props => (
|
||||
<svg className="icon" viewBox="0 0 22 22" width="22" height="22" {...props}>
|
||||
<g>
|
||||
<path d="M0.394,21.61 C0.542,21.757 0.765,21.795 0.945,21.714 L5.533,19.747 L2.254,16.47 L0.287,21.059 C0.207,21.246 0.249,21.464 0.394,21.61 Z" />
|
||||
<polygon points="6.368 19.169 15.662 9.877 12.136 6.352 2.833 15.635" />
|
||||
<path d="M21.607,3.224 L18.778,0.395 C18.583,0.201 18.266,0.201 18.071,0.395 L17.682,0.785 C17.276,0.515 16.801,0.37 16.303,0.37 C15.635,0.37 15.007,0.63 14.535,1.103 L8.879,6.761 C8.684,6.956 8.684,7.272 8.879,7.467 C9.075,7.662 9.392,7.661 9.586,7.467 L15.243,1.811 C15.686,1.367 16.385,1.275 16.941,1.527 L12.833,5.634 L16.368,9.17 L21.606,3.931 C21.803,3.736 21.802,3.419 21.607,3.224 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const Email = props => <svg className="icon" viewBox="0 0 22 15" width="22" height="15" {...props}>
|
||||
export const Email = props => (
|
||||
<svg className="icon" viewBox="0 0 22 15" width="22" height="15" {...props}>
|
||||
<g>
|
||||
<path d="M11.002,8.36 L21.097,0.33 C20.782,0.123 20.406,0 20.001,0 L2.001,0 C1.614,0 1.255,0.115 0.948,0.307 L11.002,8.36 Z" />
|
||||
<path d="M21.764,1.076 L11.296,9.391 C11.118,9.525 10.88,9.525 10.702,9.39 L0.26,1.036 C0.1,1.323 0.001,1.648 0,2 L0,13 C0.001,14.103 0.898,15 2.001,15 L19.999,15 C21.102,15 21.999,14.103 22,13 L22,2 C22,1.665 21.91,1.353 21.764,1.076 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -6,12 +6,14 @@ import './Footer.scss'
|
||||
const Footer = ({ meta }) => {
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
return <footer className="footer">
|
||||
return (
|
||||
<footer className="footer">
|
||||
<Social meta={meta} minimal />
|
||||
<small>
|
||||
© {year} {meta.title} — All Rights Reserved
|
||||
</small>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
Footer.propTypes = {
|
||||
|
||||
@ -5,7 +5,7 @@ import Social from './Social'
|
||||
import { Logo } from '../atoms/Icons'
|
||||
import './Header.scss'
|
||||
|
||||
const Header = ({ meta, isHomepage}) => {
|
||||
const Header = ({ meta, isHomepage }) => {
|
||||
const classes = isHomepage ? 'header' : 'header header--minimal'
|
||||
|
||||
return (
|
||||
|
||||
@ -25,12 +25,14 @@ const ProjectLinks = ({ links }) => (
|
||||
<ul>
|
||||
{Object.keys(links).map(key => {
|
||||
if (links[key]) {
|
||||
return <li key={key}>
|
||||
<OutboundLink href={links[key]}>
|
||||
<LinkIcon title={key} />
|
||||
{key}
|
||||
</OutboundLink>
|
||||
</li>
|
||||
return (
|
||||
<li key={key}>
|
||||
<OutboundLink href={links[key]}>
|
||||
<LinkIcon title={key} />
|
||||
{key}
|
||||
</OutboundLink>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
|
||||
@ -7,9 +7,7 @@ const ProjectTechstack = ({ techstack }) => (
|
||||
<h3 className="project__meta__title">
|
||||
Tools & Technologies <span>The tech stack I was involved with.</span>
|
||||
</h3>
|
||||
<ul>
|
||||
{techstack.map(tech => <li key={tech}>{tech}</li>)}
|
||||
</ul>
|
||||
<ul>{techstack.map(tech => <li key={tech}>{tech}</li>)}</ul>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
@ -28,7 +28,12 @@ const Social = ({ meta, minimal }) => {
|
||||
return (
|
||||
<aside className={classes}>
|
||||
{Object.keys(social).map((key, i) => (
|
||||
<OutboundLink className="social__link" href={social[key]} key={i} title={key}>
|
||||
<OutboundLink
|
||||
className="social__link"
|
||||
href={social[key]}
|
||||
key={i}
|
||||
title={key}
|
||||
>
|
||||
<SocialIcon title={key} />
|
||||
</OutboundLink>
|
||||
))}
|
||||
|
||||
@ -18,7 +18,8 @@ const Project = props => {
|
||||
const links = project.links
|
||||
const techstack = project.techstack
|
||||
|
||||
return <Fragment>
|
||||
return (
|
||||
<Fragment>
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
@ -28,13 +29,17 @@ const Project = props => {
|
||||
<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>
|
||||
<img className="project__image" src={images[img]} alt={title} />
|
||||
</FullWidth>
|
||||
|
||||
{!!img_more &&
|
||||
{!!img_more && (
|
||||
<FullWidth>
|
||||
{img_more.map(key => (
|
||||
<img
|
||||
@ -45,7 +50,7 @@ const Project = props => {
|
||||
/>
|
||||
))}
|
||||
</FullWidth>
|
||||
}
|
||||
)}
|
||||
|
||||
<footer className="project__meta">
|
||||
{!!techstack && <ProjectTechstack techstack={techstack} />}
|
||||
@ -55,6 +60,7 @@ const Project = props => {
|
||||
</article>
|
||||
</main>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
Project.propTypes = {
|
||||
|
||||
@ -7,17 +7,24 @@ import './Projects.scss'
|
||||
const Projects = ({ data }) => {
|
||||
const projects = data.allProjectsJson.edges
|
||||
|
||||
return <div className="projects full-width">
|
||||
{projects.map(({ node }) =>
|
||||
return (
|
||||
<div className="projects full-width">
|
||||
{projects.map(({ node }) => (
|
||||
<Link
|
||||
key={node.slug}
|
||||
to={`/${node.slug}`}
|
||||
className="projects__project">
|
||||
|
||||
className="projects__project"
|
||||
>
|
||||
<h1 className="projects__project__title">{node.title}</h1>
|
||||
<img className="projects__project__image" src={images[node.img]} alt={node.title} />
|
||||
</Link>)}
|
||||
<img
|
||||
className="projects__project__image"
|
||||
src={images[node.img]}
|
||||
alt={node.title}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Projects.propTypes = {
|
||||
|
||||
@ -10,12 +10,14 @@ const TemplateWrapper = props => {
|
||||
const meta = props.data.allDataJson.edges[0].node
|
||||
const isHomepage = props.location.pathname === '/'
|
||||
|
||||
return <div className="app">
|
||||
return (
|
||||
<div className="app">
|
||||
<Head meta={meta} />
|
||||
<Header meta={meta} isHomepage={isHomepage} />
|
||||
<FadeIn>{props.children()}</FadeIn>
|
||||
<Footer meta={meta} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user