docs: 📝 split readme into smaller ones

README-continuous-integration-deployment.md

@@ -0,0 +1,115 @@
+# 🚀 CI/CD - Continuous Integration / Deployment
+
+This project uses GitHub Actions for CI and Netlify for CD.
+
+**Table of Contents:**
+
+- [🚀 CI/CD - Continuous Integration / Deployment](#-cicd---continuous-integration--deployment)
+  - [🛠️ CI - Continuous Integration](#️-ci---continuous-integration)
+    - [Status](#status)
+    - [GitHub Actions](#github-actions)
+      - [Workflow for Jest 🃏](#workflow-for-jest-)
+      - [Workflow for Playwright 🎭](#workflow-for-playwright--)
+  - [✅ CD - Continuous Deployment](#-cd---continuous-deployment)
+    - [Status](#status-1)
+    - [Netlify](#netlify)
+
+---
+
+## 🛠️ CI - Continuous Integration
+
+This app uses GitHub Actions for CI.
+
+### Status
+
+[![Jest Tests](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/jest.yml/badge.svg)](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/jest.yml) [![Playwright Tests](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/playwright.yml/badge.svg)](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/playwright.yml)
+
+### GitHub Actions
+
+Workflows are defined in `.github/workflows` directory.
+
+#### Workflow for Jest 🃏
+
+- Workflow file: [jest.yml](.github/workflows/jest.yml)
+- View the results on GitHub: [actions/workflows/jest.yml](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/jest.yml)
+
+<details>
+<summary>Click to read workflow description 👀</summary>
+
+---
+
+This workflow is triggered in 2 scenarios:
+
+1. When a push is made to the `master` branch.
+2. When a pull request is opened against the `master` branch.
+
+The workflow consists of a single job named `build`, which is executed on the latest version of Ubuntu.
+
+The `build` job follows these steps:
+
+1. Checkout the repository using the `actions/checkout@v3` action.
+2. Setup Node.js environment using the `actions/setup-node@v3` action with Node.js version 18.
+3. It installs the dependencies of your project using `npm ci`. This command is similar to `npm install`, but it's designed to be used in automated environments such as this one.
+4. Run JEST tests using `npm test`.
+5. Upload the test report as an artifact:
+   - Using the `actions/upload-artifact@v3` action.
+   - This step is always executed regardless of the success or failure of previous steps.
+   - The artifact is named `jest-report`
+   - It is located at path `jest-report/`
+   - It is retained for 7 days.
+
+</details>
+
+#### Workflow for Playwright 🎭
+
+- Workflow file: [playwright.yml](.github/workflows/playwright.yml)
+- View the results on GitHub: [actions/workflows/playwright.yml](https://github.com/krsiakdaniel/portfolio-website-krsiak-cz/actions/workflows/playwright.yml)
+
+<details>
+<summary>Click to read workflow description 👀</summary>
+
+---
+
+This workflow is triggered in 2 scenarios:
+
+1. When a push is made to the `master` branch.
+2. When a pull request is opened against `master` branch.
+
+The workflow consists of a single job named `test`, which is executed on the latest version of Ubuntu.
+
+The `test` job follows these steps:
+
+1. Checkout the repository using the `actions/checkout@v3` action.
+2. Setup Node.js environment using the `actions/setup-node@v3` action with Node.js version 18.
+3. It installs the dependencies of your project using `npm ci`. This command is similar to `npm install`, but it's designed to be used in automated environments such as this one.
+4. Install Playwright browsers using `npx playwright install --with-deps`.
+5. Run Playwright tests using `npx playwright test`.
+6. Upload the test report as an artifact:
+   - Using the `actions/upload-artifact@v3` action.
+   - This step is always executed regardless of the success or failure of previous steps.
+   - The artifact is named `playwright-report`
+   - It is located at path `playwright-report/`
+   - It is retained for 7 days.
+
+</details>
+
+## ✅ CD - Continuous Deployment
+
+This app is deployed on Netlify.
+
+### Status
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/eb322254-0169-4941-9416-3806b0bd5be6/deploy-status)](https://app.netlify.com/sites/portfolio-website-krsiak-cz/deploys)
+
+### Netlify
+
+Build starts when a new commit is pushed to the `master` branch.
+
+Using build plugin:
+
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) to automatically run audit on website after every build.
+
+Deploys:
+
+- Netlify page [portfolio-website-krsiak-cz/deploys](https://app.netlify.com/sites/portfolio-website-krsiak-cz/deploys)
+- You can click on the last 2 deploys to see the details.

README-development.md

@@ -0,0 +1,43 @@
+# Development
+
+Development environment for the project.
+
+**Table of Contents:**
+
+- [Development](#development)
+  - [💻 Commands](#-commands)
+  - [💅 Prettier](#-prettier)
+
+---
+
+## 💻 Commands
+
+Install dependencies.
+
+```bash
+npm i
+```
+
+Runs the app in the development mode.
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+## 💅 Prettier
+
+This project uses Prettier for code formatting.
+
+Check if the code is formatted correctly.
+
+```bash
+npm run prettier:check
+```
+
+Format the code via Prettier.
+
+```bash
+npm run prettier:fix
+```

README-testing.md

@@ -0,0 +1,99 @@
+# 🐛 Testing
+
+This project uses the following tools.
+
+**Table of Contents:**
+
+- [🐛 Testing](#-testing)
+  - [🃏 JEST](#-jest)
+    - [Test Coverage for Jest](#test-coverage-for-jest)
+  - [🎭 Playwright](#-playwright)
+    - [Test Coverage for Playwright](#test-coverage-for-playwright)
+    - [Other Commands](#other-commands)
+
+---
+
+## 🃏 JEST
+
+Jest is JavaScript Testing Framework.
+
+- Test are located folder in `__tests__/jest`
+- Naming is `file.test.ts`
+
+Runs the unit tests.
+
+```bash
+npm run test
+```
+
+### Test Coverage for Jest
+
+Jest will generate a code coverage report.
+
+- The report will be output to the console.
+- It will also be saved to a `/coverage` directory in project root as HTML file.
+
+```bash
+npm run test:coverage
+```
+
+## 🎭 Playwright
+
+Playwright is library for browser automation E2E testing.
+
+- Test are located folder in `__tests__/playwright`
+- Naming is `file.spec.ts`
+
+Runs the E2E tests.
+
+```bash
+npx playwright test
+```
+
+Runs the E2E tests using alias for `npx playwright test`
+
+```bash
+npm run test:e2e
+```
+
+### Test Coverage for Playwright
+
+Playwright will generate a code coverage report.
+
+- It serves HTML report on new localhost port.
+
+```bash
+  npx playwright show-report
+```
+
+### Other Commands
+
+Starts the interactive UI mode.
+
+```bash
+npx playwright test --ui
+```
+
+Runs the tests only on Desktop Chrome.
+
+```bash
+npx playwright test --project=chromium
+```
+
+Runs the tests in a specific file.
+
+```bash
+npx playwright test file.spec.ts
+```
+
+Runs the tests in debug mode.
+
+```bash
+npx playwright test --debug
+```
+
+Auto generate tests with Codegen.
+
+```bash
+npx playwright codegen
+```