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

more project links tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-04-09 21:35:34 +02:00
parent ffdc004e0e
commit 3a3b431ce1
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 85 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/atoms/Icons.js
View File

@ -15,8 +15,7 @@ export const GitHub = props => (
</svg>
)
export const Twitter = props => (
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
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
@ -24,5 +23,13 @@ export const Twitter = props => (
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>
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}>
<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>

38
src/components/molecules/ProjectLinks.js Normal file
View File

@ -0,0 +1,38 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Chain, GitHub, Dribbble } from '../atoms/Icons'
import './ProjectLinks.scss'
const LinkIcon = ({ title }) => {
if (title === 'Link') {
return <Chain />
} else if (title === 'GitHub') {
return <GitHub />
} else if (title === 'Dribbble') {
return <Dribbble />
} else {
return null
}
}
const ProjectLinks = ({ links }) => (
<ul className="projectlinks">
{!!links &&
Object.keys(links).map(key => {
if (links[key]) {
return <li key={key}>
<a href={links[key]}>
<LinkIcon title={key} />
{key}
</a>
</li>
}
})}
</ul>
)
ProjectLinks.propTypes = {
links: PropTypes.object,
}
export default ProjectLinks

27
src/components/molecules/ProjectLinks.scss Normal file
View File

@ -0,0 +1,27 @@
@import 'variables';
.projectlinks {
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
li {
display: block;
flex: 0 0 48%;
margin-bottom: 2%;
}
a {
display: block;
background: darken($brand-light, 5%);
text-align: center;
border-radius: .25rem;
padding: $spacer / 4;
}
.icon {
margin-right: $spacer / 3;
}
}

26
src/components/organisms/Project.js
View File

@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
import ReactMarkdown from 'react-markdown'
import Content from '../atoms/Content'
import FullWidth from '../atoms/FullWidth'
import ProjectLinks from '../molecules/ProjectLinks'
import images from '../../images'
import './Project.scss'
@ -16,8 +17,7 @@ const Project = props => {
const links = project.links
const techstack = project.techstack
return (
<Fragment>
return <Fragment>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
@ -27,11 +27,7 @@ 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} />
@ -52,7 +48,9 @@ const Project = props => {
<footer className="project__meta">
<div className="project__techstack">
<h3 className="project__meta__title">
Technologies <span>The tech stack I was involved with.</span>
Technologies <span>
The tech stack I was involved with.
</span>
</h3>
<ul>
{!!techstack &&
@ -64,23 +62,13 @@ const Project = props => {
<h3 className="project__meta__title">
Links <span>See the project live on the interwebz.</span>
</h3>
<ul>
{!!links &&
Object.keys(links).map(key => {
if (links[key]) {
return <li key={key}>
<a href={links[key]}>{key}</a>
</li>
}
})}
</ul>
<ProjectLinks links={links} />
</div>
</footer>
</Content>
</article>
</main>
</Fragment>
)
}
Project.propTypes = {

8
src/components/organisms/Project.scss
View File

@ -42,11 +42,9 @@
li {
display: inline-block;
padding: $spacer / 4;
background: darken($brand-light, 3%);
flex: 0 0 28%;
margin-bottom: 4%;
text-align: center;
padding: 0;
flex: 0 0 (100% / 3);
margin-bottom: $spacer;
border-radius: 4rem;
font-size: $font-size-small;
}