Add environment variables

.env

@@ -0,0 +1,2 @@
+ACCESS_TOKEN=MI2LL0RIPT9qZAajoI3G4ZvNXxdeMWeADrrgrTP6NiQ
+SPACE_ID=2xw6by082cwg

.eslintrc

@@ -26,6 +26,7 @@
     "jsx-quotes": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "react/prop-types": "off",
-    "react/jsx-one-expression-per-line": "off"
+    "react/jsx-one-expression-per-line": "off",
+    "comma-dangle": "off"
   }
 }

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .cache/
 public
+.env

README.md

@@ -1,54 +1,56 @@
-<p align="center">
-  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby minimal starter
-</h1>
-
-## 🚀 Quick start
-
-1.  **Create a Gatsby site.**
+<h3 align="center">Portfolio</h3>
 
-    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+## Project Overview 🎉
 
-    ```shell
-    # create a new Gatsby site using the minimal starter
-    npm init gatsby
-    ```
+It's my portfolio page made in Gatsby.js. I used this technology because gatsby is a static page generator which was perfect for this project. I organized the structure of the projects, splitting them into assets, components, hooks, templates and pages. On this page you can find information about me You can also send an email directly from the website. This functionality was done using the <a href="https://www.emailjs.com/">EmailJS</a> tool. Remember about the correct data in the form as it is validated!
 
-2.  **Start developing.**
+## Installation 💾
 
-    Navigate into your new site’s directory and start it up.
+Download the project to your computer and install needed packages with command:
 
-    ```shell
-    cd my-gatsby-site/
-    npm run develop
-    ```
+```sh
+npm install
+```
 
-3.  **Open the code and start customizing!**
+Then start the project on the local server with the command:
 
-    Your site is now running at http://localhost:8000!
+```sh
+npm start
+```
 
-    Edit `src/pages/index.js` to see your site update in real-time!
+and open http://localhost:8000/ to see this app.
 
-4.  **Learn more**
+## Live 📍
 
-    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+Link to the live version: https://michalskolak.netlify.app/
 
-    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+## Tech/framework used 🔧
 
-    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+| Tech              | Description                                                                                                                                                                                         |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Gatsby.js         | It's a static site generator based on react.                                                                                                                                                        |
+| Styled-components | Great library for styling components in an application. The biggest advantage of this library is writing styles in js, so we can use conditional statements and other things from javascript there. |
+| EmailJS           | It's technology for sending e-mails from the website without back-end functions.                                                                                                                    |
+| GSAP              | It's library for advenced animations. I used it with ScrollTrigger plugin                                                                                                                           |
+| Formik, Yup       | These library help maintain and validate form.                                                                                                                                                      |
+| Eslint, Prettier  | These tools help keep code clean in project.                                                                                                                                                        |
 
-    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+## Screenshots 📺
 
-    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/76774237/188315065-7d8cfbbc-4a80-4e6b-a066-f9963357a14a.png" alt="Screenshot">
+</p>
 
-    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/76774237/188315072-d6029ee5-9e8d-4843-af82-79f37856c766.png" alt="Screenshot">
+</p>
 
-## 🚀 Quick start (Gatsby Cloud)
+## Available scripts
 
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
+| Command         | Description            |
+| --------------- | ---------------------- |
+| `npm run start` | Open local server      |
+| `npm run build` | Create optimized build |
+| `npm run clean` | Clean .cache folder    |
 
-[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)
+If you encounter a problem, write to this e-mail address: [skolakmichal1@gmail.com](mailto:skolakmichal1@gmail.com)

gatsby-config.js

@@ -6,9 +6,13 @@ const gatsbyRequiredRules = path.join(
   'gatsby',
   'dist',
   'utils',
-  'eslint-rules',
+  'eslint-rules'
 );
 
+require('dotenv').config({
+  path: '.env',
+});
+
 module.exports = {
   siteMetadata: {
     title: 'Michał Skolak - Portfolio',
@@ -31,8 +35,8 @@ module.exports = {
     {
       resolve: 'gatsby-source-contentful',
       options: {
-        accessToken: 'MI2LL0RIPT9qZAajoI3G4ZvNXxdeMWeADrrgrTP6NiQ',
-        spaceId: '2xw6by082cwg',
+        accessToken: process.env.ACCESS_TOKEN,
+        spaceId: process.env.SPACE_ID,
       },
     },
     'gatsby-plugin-styled-components',