Add Dribbble to work page

source/pages/Work/Dribbble.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import './dribbble.sass';
+
+class Dribbble extends React.Component {
+  getDribbbleFeed() {
+    const populateDribbbleList = this.populateDribbbleList;
+    const request = new XMLHttpRequest();
+    const user = 'joshuaogle';
+    const token = '916a8ccf0526e148068589aa369f00e34084a34be8ed525faf699c1ef963cd45';
+    request.open('GET', `https://api.dribbble.com/v1/users/${user}/shots?access_token=${token}`, true);
+    request.send();
+
+    request.onload = function() {
+      if (request.status >= 200 && request.status < 400) {
+        const shots = JSON.parse(request.responseText);
+        if (shots.length) {
+          populateDribbbleList(shots);
+        }
+      }
+    };
+  }
+
+  populateDribbbleList(shots) {
+    const firstEight = shots.slice(0, 8);
+    const dribbbleSection = document.getElementsByClassName("dribbble")[0];
+    const dribbbleList = document.getElementsByClassName("dribbble-list")[0];
+    for (const shot of firstEight) {
+      console.log(shot.images);
+      const image_url = (shot.images.hidpi != null) ? shot.images.hidpi : shot.images.normal;
+      const image = `<img src='${image_url}' alt='${shot.title}' />`;
+      const imageLink = `<a href='${shot.html_url}' target='_new'>${image}</a>`;
+      dribbbleList.innerHTML += `<li>${imageLink}</li>`;
+    }
+    dribbbleSection.classList.add("active");
+  }
+
+  componentDidMount() {
+    this.getDribbbleFeed();
+  }
+
+  render() {
+    return (
+      <section className="dribbble">
+        <div className="section-title">On Dribbble</div>
+        <h2>A peak of some smaller designs</h2>
+
+        <ul className="dribbble-list" />
+
+        <div className="section-footer">
+          <a href="http://dribbble.com/joshuaogle" target="_new" className="button">
+            More on Dribbble
+          </a>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Dribbble;

source/pages/Work/dribbble.sass

@@ -0,0 +1,55 @@
+@import "../../stylesheets/variables"
+
+.dribbble
+  display: none
+
+  &.active
+    display: block
+
+.dribbble-list
+  display: flex
+  flex-wrap: wrap
+  list-style: none
+  margin-top: $base-spacing
+  padding: 0
+
+  li
+    align-items: center
+    background-color: mix($offwhite, $light-brown, 75%)
+    border-radius: $base-border-radius
+    box-shadow: $small-shadow
+    justify-content: center
+    margin: 0 0 $base-spacing
+    overflow: hidden
+    position: relative
+    transition: background-color $fast-timing, transform $fast-timing
+    width: 100%
+
+    @media (min-width: $break-small)
+      display: flex
+      flex-direction: column
+      margin-right: 2%
+      width: 48%
+
+      &:nth-child(2n)
+        margin-right: 0
+
+    @media (min-width: $break-medium)
+      width: 23%
+
+      &:nth-child(2n)
+        margin-right: 2%
+
+      &:nth-child(4n)
+        margin-right: 0
+
+    &:hover
+      box-shadow: $base-shadow
+      transform: scale(1.15)
+
+    a
+      display: block
+      width: 100%
+
+    img
+      width: 100%

source/pages/Work/index.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import BodyClass from '../../components/BodyClass';
 import InteractionDesign from './InteractionDesign';
 import Branding from './Branding';
+import Dribbble from './Dribbble';
 
 class Work extends React.Component {
   render() {
@@ -26,6 +27,8 @@ class Work extends React.Component {
               </p>
             </blockquote>
           </section>
+
+          <Dribbble />
         </div>
       </BodyClass>
     );