so much stuff

data/meta.json

@@ -10,6 +10,7 @@
     "GitHub": "https://github.com/kremalicious",
     "Dribbble": "https://dribbble.com/kremalicious"
   },
-  "available": false,
+  "availability": false,
+  "typekit": "dtg3zui",
   "googleanalytics": "UA-1441794-4"
 }

gatsby-config.js

@@ -1,8 +1,9 @@
 const meta = require('./data/meta.json')
+const { url, googleanalytics } = meta
 
 module.exports = {
   siteMetadata: {
-    siteUrl: `${meta.url}`,
+    siteUrl: `${url}`,
   },
   plugins: [
     'gatsby-plugin-react-next',
@@ -37,7 +38,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {
-        trackingId: `${meta.googleanalytics}`,
+        trackingId: `${googleanalytics}`,
         head: false,
         anonymize: true,
         respectDNT: true,

gatsby-node.js

@@ -72,3 +72,13 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       }))
   })
 }
+
+// https://github.com/gatsbyjs/gatsby/issues/2285#issuecomment-333343938
+exports.modifyWebpackConfig = ({ config, stage }) => {
+  if (stage === 'build-html') {
+    config.loader('null', {
+      test: /webfontloader/,
+      loader: 'null-loader',
+    })
+  }
+}

package.json

@@ -17,7 +17,8 @@
     "gatsby-transformer-sharp": "^1.6.23",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
-    "react-transition-group": "^2.3.1"
+    "react-transition-group": "^2.3.1",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.3",

src/components/atoms/Head.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
+import WebFont from 'webfontloader'
 
 const Head = ({ meta }) => {
-  const { title, tagline, description } = meta
+  const { title, tagline, description, url, typekit } = meta
+
+  WebFont.load({ typekit: { id: typekit } })
 
   return (
     <Helmet
@@ -11,7 +14,9 @@ const Head = ({ meta }) => {
       titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
     >
       <meta name="description" content={description} />
-      <link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
+
+      {window.location.protocol + '//' + window.location.hostname !==
+        `${url}` && <meta content="noindex,nofollow" name="robots" />}
     </Helmet>
   )
 }

src/components/molecules/Availability.js

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import FadeIn from '../atoms/FadeIn'
+import './Availability.scss'
+
+const Availability = ({ meta, hide }) => {
+  const { availability, social } = meta
+
+  const available = `👔 Available for new projects. <a href="${social.Email}">Let’s talk</a>!`
+  const unavailable = 'Not available for new projects.'
+
+  return (
+    <Fragment>
+      {!hide && (
+        <FadeIn>
+          <aside className={availability ? 'availability available' : 'availability unavailable'}>
+              <p dangerouslySetInnerHTML={{
+                  __html: availability ? available : unavailable
+                }}
+              />
+          </aside>
+        </FadeIn>
+      )}
+    </Fragment>
+  )
+}
+
+Availability.propTypes = {
+  meta: PropTypes.object,
+  hide: PropTypes.bool,
+}
+
+export default Availability

src/components/molecules/Availability.scss

@@ -0,0 +1,19 @@
+@import 'variables';
+
+.availability {
+    position: absolute;
+    bottom: 0;
+    background: rgba($brand-light, .8);
+    border-radius: .25rem;
+    color: $brand-grey-light;
+    z-index: 1;
+    padding: $spacer / 2;
+
+    p { margin-bottom: 0; }
+
+    &.available {
+        color: $brand-main;
+        position: fixed;
+        bottom: $spacer;
+    }
+}

src/components/molecules/Footer.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 
 .footer {
-    margin-top: $spacer;
     padding: $spacer * 2;
     text-align: center;
     color: $brand-grey-light;

src/components/molecules/Header.js

@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import Link from 'gatsby-link'
 import PropTypes from 'prop-types'
 import FadeIn from '../atoms/FadeIn'
 import { Logo } from '../atoms/Icons'
 import Social from './Social'
+import Availability from './Availability'
 import './Header.scss'
 
 const Header = ({ meta, isHomepage }) => {
@@ -12,7 +13,6 @@ const Header = ({ meta, isHomepage }) => {
   return (
     <header className={classes}>
       <FadeIn>
-        <Fragment>
         <Link className="header__name" to={'/'}>
           <Logo className="header__logo" />
           <h1 className="header__title">{meta.title.toLowerCase()}</h1>
@@ -21,9 +21,11 @@ const Header = ({ meta, isHomepage }) => {
             <span>{' }'}</span>
           </p>
         </Link>
-          <Social meta={meta} minimal={!isHomepage} hide={!isHomepage} />
-        </Fragment>
       </FadeIn>
+
+      <Social meta={meta} minimal={!isHomepage} hide={!isHomepage} />
+
+      <Availability meta={meta} hide={!isHomepage} />
     </header>
   )
 }

src/components/molecules/Header.scss

@@ -1,12 +1,15 @@
 @import 'variables';
 
 .header {
+    position: relative;
     padding: $spacer;
-    min-height: calc(100vh - #{$spacer});
+    height: calc(100vh - #{$spacer});
+    max-height: 1000px;
     display: flex;
     flex-wrap: wrap;
     align-content: center;
     justify-content: center;
+    text-align: center;
 }
 
 .header__logo {
@@ -41,15 +44,14 @@
 }
 
 .header__name {
-    height: 100%;
     pointer-events: none;
 }
 
 .header--minimal {
-    min-height: 0;
+    height: auto;
 
     @media (min-width: 30rem) {
-        margin-top: $spacer / 2;
+        margin-top: $spacer;
         margin-bottom: $spacer;
     }
 

src/components/molecules/ProjectLinks.scss

@@ -28,9 +28,7 @@
         width: 100%;
         color: $brand-cyan;
         text-align: center;
-        border-top-left-radius: .25rem;
+        border-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);

src/components/molecules/ProjectNav.scss

@@ -63,7 +63,27 @@
     height: 100%;
     display: block;
     align-self: center;
+    margin-top: $spacer * 8;
+    transition: .2s ease-out;
+
+    @media (min-width: 45rem) {
         margin-top: -$spacer;
+    }
+
+    .icon {
+        fill: $brand-grey-light;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    &:hover,
+    &:focus {
+        transform: translate3d(0, -.3rem, 0);
+
+        .icon {
+            fill: $brand-cyan;
+        }
+    }
 
     &:first-child {
         margin-left: 48.5%;
@@ -72,10 +92,4 @@
     &:last-child {
         margin-right: auto;
     }
-
-    .icon {
-        fill: $brand-grey-light;
-        width: 1.5rem;
-        height: 1.5rem;
-    }
 }

src/components/molecules/Social.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { Email, Blog, Twitter, GitHub, Dribbble } from '../atoms/Icons'
+import FadeIn from '../atoms/FadeIn'
 import './Social.scss'
 
 const SocialIcon = ({ title }) => {
@@ -28,6 +29,7 @@ const Social = ({ meta, minimal, hide }) => {
   return (
     <Fragment>
       {!hide && (
+        <FadeIn>
           <aside className={classes}>
             {Object.keys(social).map((key, i) => (
               <OutboundLink
@@ -40,6 +42,7 @@ const Social = ({ meta, minimal, hide }) => {
               </OutboundLink>
             ))}
           </aside>
+        </FadeIn>
       )}
     </Fragment>
   )

src/components/organisms/Project.scss

@@ -2,8 +2,12 @@
 
 .project {
     .project__image {
+        margin-bottom: $spacer * 3;
+
+        @media (min-width: 30rem) {
             margin-bottom: $spacer * 6;
         }
+    }
 }
 
 .project__title {

src/components/organisms/Projects.scss

@@ -4,23 +4,16 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
-    .project__image {
-        @media (min-width: 90rem) {
-            max-width: 100%;
-        }
-    }
 }
 
 .projects__project {
+    display: block;
     position: relative;
     background-color: $brand-grey-light;
     margin: 0 auto $spacer * 4 auto;
 
-    @media (min-width: 90rem) {
+    @media (min-width: 30rem) {
-        flex: 0 0 calc(50% - #{$spacer * 2});
+        margin-bottom: $spacer * 8;
-        margin: 0;
-        margin-bottom: $spacer * 4;
     }
 
     &::after {

src/layouts/index.js

@@ -44,6 +44,9 @@ export const query = graphql`
             GitHub
             Dribbble
           }
+          availability
+          typekit
+          googleanalytics
         }
       }
     }