A static website generated from Gatsby and React. Intended to replace my legacy portfolio website built with vanilla JavaScript and Bootstrap V3.
npm install
npm start
npm install
npm run build
npm install
npm run build
npm run serve
This project leverages Gatsby, which sits atop React to generate a static website. Development and build tasks are handled through NPM scripts. We lint both JavaScript and SCSS with eslint and sass-lint respectively. For component development, Storybook is used.
This project follows a CDD (Component-Driven Development) philosophy, where components are defined as our smallest, reusable building blocks. Components may or may not contain state, but typically should not. Components may contain the composition of other components.
From components, the next step up is templates. Templates typically contain reusable page layouts. For example, all projects use the same layout. Some templates may be one-offs however, such as the landing page or a contact page.
Finally, we leverage pages to define our website architecture. Pages identify our routing structure and contain page-specific data, but should not contain any logic or styling. Their use is to simply mate page data with the styling of a given template.
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
In each existing component, you will find a stories.js file. This file contains all stories related to that given component. When creating a new component, generate a new stories.js and populate with all component options.
Running Storybook allows us to develop new React components in isolation. To run an instance, issue the following commands:
npm install
npm run storybook
Storybook provides us with the option to generate a static website from its library, similar to Gatsby. To regenerate this instance, issue the following commands:
npm install
npm run build-storybook