Initial commit

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,9 @@
+# kylegach_com
+
+_Note: Until I work out a proper license, you are free to take all code not in a *.md file for whatever purposes you wish. It is my intention that people be able to learn from this source code._
+
+A personal website & portfolio built with [Gatsby](https://github.com/gatsbyjs/gatsby/), a fantastic little static site generator powered by [React](https://facebook.github.io/react/).
+
+It is styled using [PostCSS](https://github.com/postcss/postcss) and the [cssnext](https://github.com/MoOx/postcss-cssnext) plugin, which allows me to use all sorts of cool future CSS right now. I based my styling system heavily on [Basscss](https://github.com/basscss/basscss), which is one of the most inspiring and mind-expanding things I’ve ever come across in this industry. I made two significant deviations from Basscss: 1) adopting Harry Roberts’ [clever syntax](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/#responsive-suffixes) for responsive suffixes, and 2) trying to adhere to a `propertyName-value` structure in the class names for consistency.
+
+_For more info, check the site’s [colophon](https://kylegach.com/colophon)._

app.js

@@ -0,0 +1,10 @@
+exports.loadContext = function (callback) {
+  let context = require.context('./pages', true)
+  if (module.hot) {
+    module.hot.accept(context.id, () => {
+      context = require.context('./pages', true)
+      return callback(context)
+    })
+  }
+  return callback(context)
+}

components/Breadcrumbs.js

@@ -0,0 +1,54 @@
+import { config } from 'config'
+import { prefixLink } from 'gatsby-helpers'
+import toTitleCase from 'to-title-case'
+import React, { Component, PropTypes } from 'react'
+import { Link } from 'react-router'
+
+
+class Breadcrumbs extends Component {
+
+  render() {
+    const { route } = this.props
+    const path = route.page.path
+    const title = route.page.data.title
+
+    const seperator = (<span className="mx-1">/</span>)
+
+    // Inserting a "/" between each directory in the path and linking up all but the last one
+    const pathBits = path.split('/').filter(function(n){ return n != '' })
+    let breadcrumbs = [], pathBit = {}, pathSoFar = ''
+
+    // TODO: Refactor
+    for ( let i=0; i < pathBits.length; i++ ) {
+      pathBit = toTitleCase(pathBits[i].replace('-',' '))
+
+      if ( i < pathBits.length - 1 ) {
+        pathBit = (<Link to={prefixLink('/' + pathSoFar + pathBits[i] + '/')} key={i}>{pathBit}</Link>)
+        breadcrumbs.push(pathBit, seperator)
+      } else {
+        if (title) {
+          pathBit = (<span key={i}>{title}</span>)
+        } else {
+          pathBit = (<span key={i}>{pathBit}</span>)
+        }
+        breadcrumbs.push(pathBit)
+      }
+
+      pathSoFar += pathBits[i] + '/'
+    }
+
+    return (
+      <nav className="fs-5">
+        <h1 className="inline fontSize-inherit"><Link to={prefixLink('/')}>{config.siteTitle}</Link></h1>
+        {seperator}
+        {breadcrumbs}
+      </nav>
+    )
+  }
+}
+
+Breadcrumbs.propTypes = {
+  route: PropTypes.object.isRequired
+}
+
+export default Breadcrumbs

components/Byline.js

@@ -0,0 +1,27 @@
+import moment from 'moment'
+import React, { Component, PropTypes } from 'react'
+
+
+class Byline extends Component {
+
+  render() {
+    const { date } = this.props
+
+    let postedOn = {}
+    if (process.env.NODE_ENV === 'static') {
+      postedOn = (<span>{moment(date).format('MMMM D, YYYY')}</span>)
+    } else {
+      postedOn = (<span title={moment(date).format('MMMM D, YYYY')}>{moment(date).fromNow()}</span>)
+    }
+
+    return (
+      <em className="normal fs-5">{postedOn}</em>
+    )
+  }
+}
+
+Byline.propTypes = {
+  date: PropTypes.string.isRequired
+}
+
+export default Byline

components/Figures/AFullyResponsiveCMS.css

@@ -0,0 +1,40 @@
+#deviceFrame {
+	background-color: #111;
+	border-radius: 8px;
+	box-sizing: content-box;
+	left: 50%;
+	padding: 3%;
+	position: absolute;
+	top:0;
+	transform: translateX(-50%);
+
+	@nest .is-reverse & {
+		background-color: white;
+	}
+
+	& > svg {
+		border: 1px solid black;
+	}
+}
+
+.white { fill: white }
+.black { fill: #333 }
+.accent { fill: #dae4f0 }
+.border { fill: #b0c0d0 }
+.blue { fill: #0b5486 }
+.darkBlue { fill: #003a5d }
+.red { fill: #e7243c }
+.text { opacity: 0.2 }
+.text.heading { opacity: 0.5 }
+.text.input-label,
+.text.input-label--filled { opacity: 0.2 }
+.button { fill: #a7c6e4 }
+.buttonBorder { fill: #8ea8c2 }
+.green { fill: #d3d657 }
+.greenBorder { fill: #b3b64a }
+.overlay { fill: black; opacity: 0 }
+.input { fill: white; stroke: #b0c0d0 }
+.input.filled { fill: #fafbfc }
+.icon { fill: none; stroke: #777 }
+.icon--blue { fill: none; stroke: #0b5486 }
+.icon--white { fill: none; stroke: white }

components/Figures/AnAllNewWayToBuildWebsites.css

@@ -0,0 +1,35 @@
+@import '../../styles/modules/_variables.css';
+
+.layout,
+.container,
+.widget {
+  fill: none;
+  stroke-width: 4;
+}
+
+.layout {
+  stroke: var(--blue);
+}
+
+.container {
+  stroke: var(--yellow);
+}
+
+.widget {
+  stroke: var(--green);
+  stroke-width: 16
+}
+
+.is-reverse {
+  & .layout {
+    stroke: var(--lavender);
+  }
+
+  & .container {
+    stroke: var(--lime);
+  }
+
+  & .widget {
+    stroke: var(--magenta);
+  }
+}