00mjk / vanhelbergen-com-v3

My website

vanhelbergen.com

The www.vanhelbergen.com website.

🚀 Quick start

• yarn

• yarn develop

  • Your site is now running with hot reloading at http://localhost:8000!

  • Query data through http://localhost:8000/___graphql.

• yarn storybook

  • Storybook is running to view individual components at http://localhost:6006

Tips

• To get a sitemap, enter the URL of any nonexisting page. http://localhost:8000/asdf
• Design files are on Figma. https://www.figma.com/files/project/3988002/vanhelbergen.com
• SVGs
  • importing file directly will inline it as base64.
  • Set filename to [name].inline.svg and it gatsby-plugin-react-svg will include it as a React component (that you can style!).
  • Include it through gatsby-image and it will have fancy loading animations.

💫 Deploy

• yarn build

  • Run the production build to check there are no errors. You can check a deploy preview for your branch on Netlify.

  • Once the branch gets merged to master, Netlify deploys automatically to https://vanhelbergen-com.netlify.com/.

Made with Gatsby

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

/.
├── /.storybook
├── /src
    ├── /components
    ├── /content
    ├── /images
    ├── /pages
    ├── /templates
    └── /theme
├── /static
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── gatsby-ssr.js

Folders

1. /.storybook: Storybook configuration files.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”.

   1. __stories__: Stories for all non-component type things. Otherwise stories are kept next to the components in the components folder.

   2. /components: React components for across the site.

   3. /content: Markdown and MDX files for blogs and portfolio entries. Assets for entries should be included withing this folders.

   4. /images: Assets that need to be dynamically included in random places, e.g. global styles, and the home logo.

   5. /pages: Components under src/pages become pages automatically with paths based on their file name. Check out the pages docs for more detail.

   6. /templates: By convention, templates used across multiple pages are stored here. Contains templates for programmatically creating pages. Check out the templates docs for more detail.

   7. /theme: Contains all over-arching style files (styles for components are stored with their components). Not to be confused with Gatsby Themes.

3. /static: If you put a file into the static folder, it will not be processed by Webpack. Instead it will be copied into the public folder untouched. Check out the assets docs for more detail.

Autogenerated folders

1. /.cache This folder is an internal cache created automatically by Gatsby from. The files inside this folder are not meant for modification. Should be .gitignore-d.

2. /public The output of gatsby build process will be exposed inside this folder. Should be .gitignore-d.

Files

1. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

2. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

3. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

4. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

5. src/html.js Add it for custom configuration of default .cache/default_html.js. Check out the custom html docs for more detail.

🎓 Related documentation

• Gatsby documentation
• Styled components
• GraphQL
• Storybook

👏 Thanks

I couldn't have built any of this without all the awesome people out on the web. Definitely forgetting some people here, but it's a start. :)

• Gatsby, Greater-gatsby
• Storybook, Styled-components, Style-dictionary
• Bootstrap, Tailwind
• CCS tricks, A List apart, Smashing Mag
• Egghead.io, TylerMcGinnes, Master Games