more project links tweaks

src/components/atoms/Icons.js

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

src/components/molecules/ProjectLinks.js

@@ -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

src/components/molecules/ProjectLinks.scss

@@ -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;
+    }
+}

src/components/organisms/Project.js

@@ -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 (
+  return <Fragment>
-    <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
+            <ReactMarkdown source={description} escapeHtml={false} className="project__description" />
-              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>
+                <ProjectLinks links={links} />
-                  {!!links &&
-                    Object.keys(links).map(key => {
-                      if (links[key]) {
-                        return <li key={key}>
-                            <a href={links[key]}>{key}</a>
-                          </li>
-                      }
-                    })}
-                </ul>
               </div>
             </footer>
           </Content>
         </article>
       </main>
     </Fragment>
-  )
 }
 
 Project.propTypes = {

src/components/organisms/Project.scss

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