move content images around

README.md

@@ -42,19 +42,19 @@ The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single P
 
 ### 💍 One data file to rule all pages
 
-All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file int HTML on build time.
+All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file into HTML on build time.
 
 Gatsby automatically creates pages from each item in that file utilizing the [`Project.jsx`](src/templates/Project.jsx) template.
 
 - [`gatsby-node.js`](gatsby-node.js)
-- [`data/projects.yml`](data/projects.yml)
+- [`content/projects.yml`](content/projects.yml)
 - [`src/templates/Project.jsx`](src/templates/Project.jsx)
 
 ### 💅 Theme switcher
 
 Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's local sunset and sunrise times. Uses Cloudflare's geo location HTTP header functionality.
 
-If a visitor has set the theme manually that selection is remembered in localStorage, and is restored on next visit.
+If a visitor has set the theme manually that selection is remembered in `localStorage`, and is restored on next visit.
 
 If you want to know how, have a look at the respective components:
 
@@ -71,7 +71,7 @@ If you want to know how, have a look at the respective component:
 
 ### 📇 Client-side vCard creation
 
-The _Add to addressbook_ link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in `data/meta.yml`.
+The _Add to addressbook_ link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in `content/meta.yml`.
 
 If you want to know how, have a look at the respective component:
 
@@ -96,7 +96,7 @@ Site sends usage statistics to my own [Matomo](https://matomo.org) installation.
 
 ### 🖼 Project images
 
-All project images live under `src/images` and are automatically attached to each project based on the inclusion of the project's `slug` in their filenames.
+All project images live under `content/images` and are automatically attached to each project based on the inclusion of the project's `slug` in their filenames.
 
 All project images make use of the excellent [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) plugin, working in tandem with [gatsby-plugin-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp) and [gatsby-transformer-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp).
 
@@ -163,14 +163,14 @@ To add a new project, run the following command. This adds a new item to the top
 npm run new -- "Hello"
 ```
 
-Then continue modifying the new entry in [`data/projects.yml`](data/projects.yml).
+Then continue modifying the new entry in [`content/projects.yml`](content/projects.yml).
 
-Finally, add as many images as needed with the file name format and put into `src/images/`:
+Finally, add as many images as needed with the file name format and put into `content/images/`:
 
 ```text
-portfolio-SLUG-01.png
+SLUG-01.png
-portfolio-SLUG-02.png
+SLUG-02.png
-portfolio-SLUG-03.png
+SLUG-03.png
 ...
 ```
 

content/projects.yml

@@ -1,6 +1,6 @@
 - title: Ocean Protocol
   slug: '/oceanprotocol/'
-  img: '../src/images/portfolio-oceanprotocol-01.png'
+  img: 'images/oceanprotocol-01.png'
   description: >
     Since 2017 I'm leading the UI design & development of Ocean Protocol, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.
 
@@ -36,7 +36,7 @@
 
 - title: IPDB
   slug: '/ipdb/'
-  img: '../src/images/portfolio-ipdb-01.png'
+  img: 'images/ipdb-01.png'
   description: >
     From 2015–2017 I was leading the UI design & development of all IPDB web properties and additonally iterated on the creative and visual direction of the IPDB brand.
 
@@ -66,7 +66,7 @@
 
 - title: Berlin Innovation Ventures
   slug: '/biv/'
-  img: '../src/images/portfolio-biv-01.png'
+  img: 'images/biv-01.png'
   description: >
     I designed & developed the website and a basic branding for the Berlin-based VC firm Berlin Innovation Ventures. The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it.
 
@@ -84,7 +84,7 @@
 
 - title: '9984 >> Summit 2017'
   slug: '/9984/'
-  img: '../src/images/portfolio-9984-01.png'
+  img: 'images/9984-01.png'
   links:
     - title: Link
       url: https://2017.9984.io
@@ -111,7 +111,7 @@
 
 - title: BigchainDB
   slug: '/bigchaindb/'
-  img: '../src/images/portfolio-bigchaindb-01.png'
+  img: 'images/bigchaindb-01.png'
   description: >
     Since 2016 I'm leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualize, execute and iterate on the creative and visual direction of BigchainDB. This includes creating and iterating on a components-based UI design system for all of BigchainDB's web properties.
 
@@ -144,7 +144,7 @@
 
 - title: ChartMogul
   slug: '/chartmogul/'
-  img: '../src/images/portfolio-chartmogul-01.png'
+  img: 'images/chartmogul-01.png'
   description: >
     From 2015–2017 I was co-designing and leading the UI design & development of various ChartMogul web properties. This included the creation of a components-based UI design system and implementing it across all web touch points.
 
@@ -181,7 +181,7 @@
 
 - title: ShareTheMeal
   slug: '/sharethemeal/'
-  img: '../src/images/portfolio-sharethemeal-01.png'
+  img: 'images/sharethemeal-01.png'
   description: >
     ShareTheMeal is an app from the United Nations World Food Programme (WFP) that enables people to "share their meals" with children in need. In 2015 I was consulting, co-designing and leading the front-end development of the ShareTheMeal website and various parts of the ShareTheMeal apps for iOS & Android.
 
@@ -206,7 +206,7 @@
 
 - title: ezeep
   slug: '/ezeep/'
-  img: '../src/images/portfolio-ezeep-01.png'
+  img: 'images/ezeep-01.png'
   description: >
     From 2012–2015 I worked at ezeep, where I helped creating an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.
 
@@ -239,7 +239,7 @@
 
 - title: Mr. Reader
   slug: '/mrreader/'
-  img: '../src/images/portfolio-mrreader-01.png'
+  img: 'images/mrreader-01.png'
   description: >
     While working with indy iOS developer Curious Times in 2012, I designed the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful and highly loved RSS feed reader for iPad.
   techstack:
@@ -247,7 +247,7 @@
 
 - title: iPixelPad
   slug: '/ipixelpad/'
-  img: '../src/images/portfolio-ipixelpad-01.png'
+  img: 'images/ipixelpad-01.png'
   description: >
     So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad.
 
@@ -262,7 +262,7 @@
 
 - title: Out Of Whale Oil
   slug: '/outofwhaleoil/'
-  img: '../src/images/portfolio-outofwhaleoil-01.jpg'
+  img: 'images/outofwhaleoil-01.jpg'
   description: >
     Tribute wallpaper pack inspired by the Futurama movie _Into The Wild Green Yonder_. Released as a goodie on [kremalicious.com](https://kremalicious.com/out-of-whale-oil/).
   links:
@@ -273,7 +273,7 @@
 
 - title: Martin-Luther-Universität Halle-Wittenberg
   slug: '/unihalle/'
-  img: '../src/images/portfolio-unihalle-01.png'
+  img: 'images/unihalle-01.png'
   description: >
     From 2009–2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized, designed & implemented numerous in-house and public facing interfaces for thousands of students and staff.
 
@@ -299,7 +299,7 @@
 
 - title: Coffee Cup
   slug: '/coffeecup/'
-  img: '../src/images/portfolio-coffeecup-01.png'
+  img: 'images/coffeecup-01.png'
   description: >
     Desktop icons showing the fuel of most designers. Released as a goodie
     on [kremalicious.com](https://kremalicious.com/coffee-cup-icon/).
@@ -313,7 +313,7 @@
 
 - title: Project Purple
   slug: '/projectpurple/'
-  img: '../src/images/portfolio-projectpurple-01.png'
+  img: 'images/projectpurple-01.png'
   description: >
     It had been revealed the original iPhone was developed in a locked down building under the name Project Purple and because of the secrecy involved, the team decorated the building with Fight Club references. Perfect story to create a wallpaper out of it.
 
@@ -328,7 +328,7 @@
 
 - title: Allinnia Creative Group
   slug: '/allinnia/'
-  img: '../src/images/portfolio-allinnia-01.png'
+  img: 'images/allinnia-01.png'
   description: >
     In 2009 I created the branding, website, and various key visuals for professional music production studio Allinnia Creative Group, reflecting their own musical compositions.
 
@@ -342,7 +342,7 @@
 
 - title: Aperture Loupe
   slug: '/apertureloupe/'
-  img: '../src/images/portfolio-apertureloupe-01.png'
+  img: 'images/apertureloupe-01.png'
   description: >
     When Apple released their professional photography app _Aperture_ in 2008, the loupe tool in there was something really novel and just fun to play with. Inspired by that, I created this macOS desktop icon.
 
@@ -351,7 +351,7 @@
 
 - title: Adiumeetie
   slug: '/adiumeetie/'
-  img: '../src/images/portfolio-adiumeetie-01.png'
+  img: 'images/adiumeetie-01.png'
   description: >
     A macOS replacement desktop icon created in 2009 for the popular Mac IM client Adium following the style of atebit’s excellent Tweetie for Mac icon. Released as a goodie on [kremalicious.com](https://kremalicious.com/adiumeetie/).
 
@@ -364,7 +364,7 @@
 
 - title: "Niépce's Camera Obscura"
   slug: '/niepces-camera-obscura/'
-  img: '../src/images/portfolio-niepces-camera-obscura-01.jpg'
+  img: 'images/niepces-camera-obscura-01.jpg'
   description: >
     In 2008 I used the camera obscura as it was used by Nicéphore Niépce in 1826 to create an Aperture and iPhoto replacement icon.
 

gatsby-config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
-const meta = yaml.load(fs.readFileSync('./data/meta.yml', 'utf8'))
+const meta = yaml.load(fs.readFileSync('./content/meta.yml', 'utf8'))
 const { title, description, url, matomoSite, matomoUrl } = meta
 
 module.exports = {
@@ -16,8 +16,8 @@ module.exports = {
           {
             resolve: 'gatsby-source-filesystem',
             options: {
-              name: 'data',
+              name: 'content',
-              path: path.join(__dirname, 'data')
+              path: path.join(__dirname, 'content')
             }
           }
         ]

scripts/new.js

@@ -17,7 +17,7 @@ const title = process.argv[2]
 spinner.text = `Adding '${title}'.`
 
 const titleSlug = slugify(title, { lower: true })
-const projects = path.join(__dirname, '..', 'data', 'projects.yml')
+const projects = path.join(__dirname, '..', 'content', 'projects.yml')
 const newContents = template
   .split('TITLE')
   .join(title)

scripts/new.yml

@@ -1,6 +1,6 @@
 - title: TITLE
   slug: '/SLUG/'
-  img: '../src/images/portfolio-SLUG-01.png'
+  img: 'images/SLUG-01.png'
   description: >
     Markdown can be used here.
   links:

src/components/atoms/SEO.jsx

@@ -5,7 +5,7 @@ import { StaticQuery, graphql } from 'gatsby'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       title
       tagline
       description
@@ -75,7 +75,7 @@ export default class SEO extends PureComponent {
         query={query}
         render={data => {
           const { project } = this.props
-          const meta = data.dataYaml
+          const meta = data.contentYaml
           const title = (project && project.title) || null
           const description =
             (project && project.fields.excerpt) || meta.description

src/components/atoms/Typekit.jsx

@@ -19,7 +19,7 @@ const TypekitScript = typekitID => (
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       typekitID
     }
   }
@@ -29,7 +29,7 @@ const Typekit = () => (
   <StaticQuery
     query={query}
     render={data => {
-      const { typekitID } = data.dataYaml
+      const { typekitID } = data.contentYaml
 
       return (
         typekitID && (

src/components/atoms/Vcard.jsx

@@ -5,7 +5,7 @@ import vCard from 'vcf'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       title
       tagline
       description
@@ -37,7 +37,7 @@ export default class Vcard extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const meta = data.dataYaml
+          const meta = data.contentYaml
 
           const handleAddressbookClick = e => {
             e.preventDefault()

src/components/molecules/Availability.jsx

@@ -7,7 +7,7 @@ import styles from './Availability.module.scss'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       availability {
         status
         available
@@ -27,7 +27,7 @@ export default class Availability extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const { availability } = data.dataYaml
+          const { availability } = data.contentYaml
           const { status, available, unavailable } = availability
           const className = status
             ? `${styles.availability} ${styles.available}`

src/components/molecules/LogoUnit.jsx

@@ -9,7 +9,7 @@ import styles from './LogoUnit.module.scss'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       title
       tagline
     }
@@ -34,7 +34,7 @@ export default class LogoUnit extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const { title, tagline } = data.dataYaml
+          const { title, tagline } = data.contentYaml
 
           return (
             <div className={wrapClasses}>

src/components/molecules/Networks.jsx

@@ -16,7 +16,7 @@ import styles from './Networks.module.scss'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       social {
         Email
         Blog
@@ -75,7 +75,7 @@ export default class Networks extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const meta = data.dataYaml
+          const meta = data.contentYaml
 
           return (
             !this.props.hide && (

src/components/organisms/Footer.jsx

@@ -16,7 +16,7 @@ const query = graphql`
       bugs
     }
 
-    dataYaml {
+    contentYaml {
       title
       url
       gpg
@@ -62,7 +62,7 @@ export default class Footer extends PureComponent {
         query={query}
         render={data => {
           const pkg = data.portfolioJson
-          const meta = data.dataYaml
+          const meta = data.contentYaml
 
           return (
             <this.FooterMarkup year={this.state.year} pkg={pkg} meta={meta} />

src/components/organisms/Header.jsx

@@ -10,7 +10,7 @@ import styles from './Header.module.scss'
 
 const query = graphql`
   query {
-    dataYaml {
+    contentYaml {
       availability {
         status
       }
@@ -30,7 +30,7 @@ export default class Header extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const meta = data.dataYaml
+          const meta = data.contentYaml
 
           let headerClasses = classNames([styles.header], {
             [styles.minimal]: minimal