Piyushbhai Mehta Personal Website

This is the personal website for Piyushkumar Mehta. It is built with React and Emotion, using Gatsby as a static site generator. It is then deployed and served via Netlify. Tests are also run on every PR using Cypress.

🚀 Quick start

1. Clone this repo.

   git clone https://github.com/viralganatra/piyushkumarmehta

2. Copy the .env.example file and create a .env in the root:

   cp .env.example .env

3. Build and start the app:

   Run the make command in your terminal:

   make start

4. Start developing.

   Your site is now running at http://localhost:8000!

The Docker build can be slow, you can of course run this outside of docker; run yarn && yarn start and visit the url above.

🧐 Directory Structure

A quick look at the important top-level files and directories you'll see in this repo.

.
└── cypress
    └── integration
├── node_modules
├── public
└── src
    └── assets
        ├── fonts
        └── images
    ├── components
    ├── pages
    └── utils
├── static
├── .eslintrc.js
├── .prettierrc.js
├── aliases.js
├── gatsby-config.js
└── gatsby-node.js

1. /cypress/integration: This contains all the end to end tests that are run as part of the deploy process. They can be run manually using yarn test:e2e.

2. /node_modules: This directory contains all of the modules of code that this project depends on (npm packages).

3. /src/assets: This contains all the fonts and images used by the site. Each image will have various sizes and types (jpg/webp) to ensure we serve optimised responsive images to the user.

4. /src/components: This contains common components used to build up each page, such as buttons and things.

5. /src/pages: This contains the entrypoint for each page in the app. See Gatsby Pages.

6. /src/utils: Helper functions for abstracting repeated functions/tasks.

7. /static: This directory contains files that are used outside of Gatsbys module system.

8. .prettierrc.js: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

9. aliases.js: This is a map of alias names to paths to make file importing easier.

10. gatsby-config.js: This is the main configuration file for a Gatsby site. This includes plugins for Emotion, offline support and modifying the head tags. (Check out the config docs for more detail).

11. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). This is where we customise the aliases that Webpack uses to make file imports a little nicer.