The Concept Creators

Creating a digital and visual diary for The Concept Creators, a creative studio based in Amsterdam.

Debrief

• A generative grid with images, gifs and videos of projects and current moods.
• Integration with CMS for maintainibility

Features

• HTML5 Canvas with Konva.js

Inspiration

Can't build anything without any inspiration, we based our idea on the following two awesome websites:

• Whirlwind
• Thatschic

---

Based on Gatsby Universal

Features

• 🤩 Page Transitions, component-based (with no-js support)
• 👮‍♂️ IntersectionObserver, component-based (with polyfill)
• 🌿 React Context for global UI state, with SSR
• 💅 styled-components v4
• 💯 Optimized with Google Lighthouse (including test)
• 🔥 Code Splitting of CSS and JS (component based)
• 🔪 Inline SVG support
• ⚙️ One config file for site-wide settings
• 💙 Most social + meta tags in one component
• 🖼 All favicons generated, only one icon file needed
• 🌐 Offline support
• 📄 Manifest support
• 🗺 Sitemap support
• 📱 Generated media queries for easy use
• 😎 Prettier for code style
• 👷‍♂️ CircleCI support
• 🐙 Schema JSONLD
• 🔎 size-plugin to keep an eye on your bundle sizes
• 👨‍🏫 ESLint (based on eslint-plugin-react)

Do you have suggestions or feedback? Open an issue!

Lighthouse scores (on Netlify)

Usage

# Installation with `gatsby-cli`
gatsby new my-site https://github.com/devign-it/the-concept-creators

# Installation with `git clone`
git clone my-site https://github.com/devign-it/the-concept-creators
cd my-site
yarn install

# To develop
yarn develop

# To build
yarn build

# To test SSR (for Lighthouse etc.)
yarn ssr

# To format JS (precommit)
yarn format

# To generate favicons (included in `build`)
yarn build:favicons

Folder structure

├── gatsby-browser.js # Specify how Gatsby renders pages in the browser
├── gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
├── gatsby-node.js # Modify webpack config
├── gatsby-ssr.js # Specify how Gatsby builds pages
├── site-config.js # Global settings for the whole site, used by multiple scripts
├── content # Content & data, in both json and markdown
├── src
│   ├── components
│   │   ├── head # All meta tags etc.
│   │   ├── io # Intersection Observer component, uses render props
│   │   ├── layout # Layout component
│   │   │   ├── layout.css.js # .css.js for component's `styled-components`
│   │   │   └── layout.js
│   │   └── transition # Page Transition component, used by Gatsby APIs
│   ├── constants # Site-wide constants (breakpoints, colors, etc.)
│   ├── containers # Container components if store is needed
│   ├── helpers
│   │   ├── schemaGenerator.js # Generates JSON-LD schema.org snippets
│   │   └── mediaTemplates.js # Creates media queries for styled-components
│   ├── images # Images needed by the site/theme (not content)
│   ├── pages
│   ├── store # Store and provider of a React.createContext instance
│   └── global.css.js # Global CSS
└── scripts
    ├── lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    └── favicons.js # Generates favicons and manifest using one png only.

Author

Original author of the Gatsby Universal

• Fabian Schultz (@fschultz_) - Stink Studios