Skip to content

tubone24/portfolio

Repository files navigation

portfolio

Twitter URL Gitpod Ready-to-Code DeployToNetlifyPRD DeployToNetlifyPreview This project is using Percy.io for visual regression testing. CodeFactor code style: prettier storybook

tubone's Portfolio

https://portfolio.tubone-project24.xyz/

About

This project uses Gatsby.js, an SSG tool that uses React with TypeScript, and React coding is developed using TypeScript and Styled Components for styles.

Use GitHub Actions to build, and deploy to Netlify

Setup and Develop

Run locally

Run Gatsby develop

npm install

npm start

Build static HTMLs

Run Gatsby build, output to a public directory

npm run build

Type Check

This project is developed using TypeScript, so it can be type-checked by TSC.

npm run typecheck

Testing

Unit Testing

You can use jest to perform unit tests on React components.

npm test

E2E Testing

E2E testing can be performed using Cypress.

npm run test:e2e

Visual Testing

You can use Percy to check your PR for unexpected changes in your design.

Percy

Formatting

Prettier

You can use Prettier to keep the code format constant.

npm run format

CodeFactor

The codefactor will be started at the timing of the PR.

CodeFactor

UI catalog

Storybook

This project uses Storybook to catalog the UI of the components used.

# Run local
npm run storybook

# Publish
npm run build-storybook

And also the catalog is available on GitHub Pages.

Storybook

Chromatic

You can use Chromatic to detect unexpected changes on a per-component basis.

Chromatic

Design

The UI design for this project is managed by Figma.

Figma