From 8ac1bd9be5dbbdee1ad61657bf2f35b7e13788a4 Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Tue, 5 Jul 2022 23:59:27 -0500 Subject: [PATCH 01/12] :triangular_flag_on_post: [UPDATE] index to react v18 --- src/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 9077e5ff..7a5b4e93 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import App from './containers/App'; - -ReactDOM.render(, document.getElementById('app')); +import { createRoot } from 'react-dom/client'; +const container = document.getElementById('app'); +const root = createRoot(container); // createRoot(container!) if you use TypeScript +root.render(); From ba470f98142e378577f7713efeaf3859bfe3820f Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 00:03:12 -0500 Subject: [PATCH 02/12] :lipstick: [ADD] dark theme and light theme [ADD] hook that toggle between dark and light --- src/components/About.jsx | 11 ++ src/components/Academic.jsx | 11 ++ src/components/Experience.jsx | 7 + src/components/Header.jsx | 18 +++ src/components/Interest.jsx | 15 +++ src/components/Languages.jsx | 15 +++ src/components/Profile.jsx | 11 ++ src/components/Skills.jsx | 15 +++ src/containers/App.jsx | 8 +- src/hooks/useTheme.js | 26 ++++ src/styles/_vars.css | 234 +++++++++++++++++++++++++++++++++ src/styles/components/App.styl | 4 +- 12 files changed, 370 insertions(+), 5 deletions(-) create mode 100644 src/components/About.jsx create mode 100644 src/components/Academic.jsx create mode 100644 src/components/Experience.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Interest.jsx create mode 100644 src/components/Languages.jsx create mode 100644 src/components/Profile.jsx create mode 100644 src/components/Skills.jsx create mode 100644 src/hooks/useTheme.js create mode 100644 src/styles/_vars.css diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..6e75c070 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const About = () => { + return ( +
+ About +
+ ); +}; + +export default About; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..4bef88f3 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Academic = () => { + return ( +
+

Academic

+
+ ); +}; + +export default Academic; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx new file mode 100644 index 00000000..a87bfc11 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Experience = () => { + return
Experiece
; +}; + +export default Experience; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..7c632cc1 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { useTheme } from '../hooks/useTheme'; +const Header = ({ children }) => { + const [theme, changeTheme] = useTheme(); + return ( +
+ changeTheme(!theme)} + type="checkbox" + value={theme} + /> +

Header

+
{children}
+
+ ); +}; + +export default Header; diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..987b4e37 --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +const Interest = () => { + return ( +
+
    +
  1. Interest
    2. +
  2. Interest
    3. +
  3. Interest
    4. +
+
+ ); +}; + +export default Interest; diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..8c4f2aaf --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +const Languages = () => { + return ( +
+
    +
  1. Languages
    2. +
  2. Languages
    3. +
  3. Languages
    4. +
+
+ ); +}; + +export default Languages; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..d66c8126 --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Profile = () => { + return ( +
+

Profile

+
+ ); +}; + +export default Profile; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..5759c1a2 --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +const Skills = () => { + return ( +
+
    +
  1. Skills
    2. +
  2. Skills
    3. +
  3. Skills
    4. +
+
+ ); +}; + +export default Skills; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..33b077da 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import '../styles/components/App.styl'; import Header from '../components/Header'; import About from '../components/About'; @@ -11,7 +11,7 @@ import Languages from '../components/Languages'; const App = () => { return ( - <> +
@@ -21,8 +21,8 @@ const App = () => { - - ) + + ); }; export default App; diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js new file mode 100644 index 00000000..fbe02eb5 --- /dev/null +++ b/src/hooks/useTheme.js @@ -0,0 +1,26 @@ +import { useEffect, useState } from 'react'; + +const useTheme = () => { + const [theme, setTheme] = useState(false); + + useEffect(() => { + const container = document.querySelector('html'); + container.classList.add('material-theme'); + + const initTheme = window.matchMedia( + '(prefers-color-scheme: light)' + ).matches; + setTheme(initTheme); + }, []); + + const changeTheme = (isLight) => { + let container = document.querySelector('html'); + container.classList.remove('dark-theme', 'light-theme'); + container.classList.add(isLight ? 'light-theme' : 'dark-theme'); + setTheme(isLight); + }; + + return [theme, changeTheme]; +}; + +export { useTheme }; diff --git a/src/styles/_vars.css b/src/styles/_vars.css new file mode 100644 index 00000000..cb19c6fc --- /dev/null +++ b/src/styles/_vars.css @@ -0,0 +1,234 @@ +.material-theme { + --md-sys-typescale-headline1-font: Roboto; + --md-sys-typescale-headline1-weight: Regular; + --md-sys-typescale-headline1-size: 36px; + --md-sys-typescale-headline1-line-height: 44px; + --md-sys-typescale-headline1-tracking: 0px; + --md-sys-typescale-display3-font: Roboto; + --md-sys-typescale-display3-weight: Regular; + --md-sys-typescale-display3-size: 45px; + --md-sys-typescale-display3-line-height: 52px; + --md-sys-typescale-display3-tracking: 0px; + --md-sys-typescale-display2-font: Roboto; + --md-sys-typescale-display2-weight: Regular; + --md-sys-typescale-display2-size: 57px; + --md-sys-typescale-display2-line-height: 64px; + --md-sys-typescale-display2-tracking: -0.25px; + --md-sys-typescale-headline4-font: Roboto; + --md-sys-typescale-headline4-weight: Regular; + --md-sys-typescale-headline4-size: 24px; + --md-sys-typescale-headline4-line-height: 32px; + --md-sys-typescale-headline4-tracking: 0px; + --md-sys-typescale-headline3-font: Roboto; + --md-sys-typescale-headline3-weight: Regular; + --md-sys-typescale-headline3-size: 28px; + --md-sys-typescale-headline3-line-height: 36px; + --md-sys-typescale-headline3-tracking: 0px; + --md-sys-typescale-headline2-font: Roboto; + --md-sys-typescale-headline2-weight: Regular; + --md-sys-typescale-headline2-size: 32px; + --md-sys-typescale-headline2-line-height: 40px; + --md-sys-typescale-headline2-tracking: 0px; + --md-sys-typescale-overline-font: Roboto; + --md-sys-typescale-overline-weight: Medium; + --md-sys-typescale-overline-size: 12px; + --md-sys-typescale-overline-line-height: 16px; + --md-sys-typescale-overline-tracking: 0.5px; + --md-sys-typescale-button-font: Roboto; + --md-sys-typescale-button-weight: Medium; + --md-sys-typescale-button-size: 14px; + --md-sys-typescale-button-line-height: 20px; + --md-sys-typescale-button-tracking: 0.10000000149011612px; + --md-sys-typescale-subhead2-font: Roboto; + --md-sys-typescale-subhead2-weight: Medium; + --md-sys-typescale-subhead2-size: 14px; + --md-sys-typescale-subhead2-line-height: 20px; + --md-sys-typescale-subhead2-tracking: 0.10000000149011612px; + --md-sys-typescale-subhead1-font: Roboto; + --md-sys-typescale-subhead1-weight: Medium; + --md-sys-typescale-subhead1-size: 16px; + --md-sys-typescale-subhead1-line-height: 24px; + --md-sys-typescale-subhead1-tracking: 0.15000000596046448px; + --md-sys-typescale-headline5-font: Roboto; + --md-sys-typescale-headline5-weight: Regular; + --md-sys-typescale-headline5-size: 22px; + --md-sys-typescale-headline5-line-height: 28px; + --md-sys-typescale-headline5-tracking: 0px; + --md-sys-typescale-caption-font: Roboto; + --md-sys-typescale-caption-weight: Regular; + --md-sys-typescale-caption-size: 12px; + --md-sys-typescale-caption-line-height: 16px; + --md-sys-typescale-caption-tracking: 0.4000000059604645px; + --md-sys-typescale-body2-font: Roboto; + --md-sys-typescale-body2-weight: Regular; + --md-sys-typescale-body2-size: 14px; + --md-sys-typescale-body2-line-height: 20px; + --md-sys-typescale-body2-tracking: 0.25px; + --md-sys-typescale-body1-font: Roboto; + --md-sys-typescale-body1-weight: Regular; + --md-sys-typescale-body1-size: 16px; + --md-sys-typescale-body1-line-height: 24px; + --md-sys-typescale-body1-tracking: 0.5px; + --md-sys-color-primary-light: #4c4fc6; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #e1e0ff; + --md-sys-color-on-primary-container-light: #05006d; + --md-sys-color-secondary-light: #695f00; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #fae531; + --md-sys-color-on-secondary-container-light: #201c00; + --md-sys-color-tertiary-light: #8b5000; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #ffdcbe; + --md-sys-color-on-tertiary-container-light: #2d1600; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-outline-light: #777680; + --md-sys-color-background-light: #fcfcff; + --md-sys-color-on-background-light: #001d31; + --md-sys-color-surface-light: #fcfcff; + --md-sys-color-on-surface-light: #001d31; + --md-sys-color-surface-variant-light: #e4e1ec; + --md-sys-color-on-surface-variant-light: #46464f; + --md-sys-color-inverse-surface-light: #003351; + --md-sys-color-inverse-on-surface-light: #e7f2ff; + --md-sys-color-primary-dark: #c0c1ff; + --md-sys-color-on-primary-dark: #171598; + --md-sys-color-primary-container-dark: #3235ad; + --md-sys-color-on-primary-container-dark: #e1e0ff; + --md-sys-color-secondary-dark: #dcc800; + --md-sys-color-on-secondary-dark: #373100; + --md-sys-color-secondary-container-dark: #4f4700; + --md-sys-color-on-secondary-container-dark: #fae531; + --md-sys-color-tertiary-dark: #ffb871; + --md-sys-color-on-tertiary-dark: #4a2800; + --md-sys-color-tertiary-container-dark: #6a3c00; + --md-sys-color-on-tertiary-container-dark: #ffdcbe; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-outline-dark: #918f9a; + --md-sys-color-background-dark: #001d31; + --md-sys-color-on-background-dark: #cde5ff; + --md-sys-color-surface-dark: #001d31; + --md-sys-color-on-surface-dark: #cde5ff; + --md-sys-color-surface-variant-dark: #46464f; + --md-sys-color-on-surface-variant-dark: #c7c5d0; + --md-sys-color-inverse-surface-dark: #cde5ff; + --md-sys-color-inverse-on-surface-dark: #001d31; +} +@media (prefers-color-scheme: light) { + .material-theme { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + } + .dark-theme { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + } +} +@media (prefers-color-scheme: dark) { + .material-theme { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + } + .light-theme { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + } +} \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..de434ffb 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,4 @@ +@import "../_vars.css"; + body - background-color blue \ No newline at end of file + background-color var(--md-sys-color-background) \ No newline at end of file From bf488a9b7eb96a179583c6db38afe6d489115e8b Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 17:15:46 -0500 Subject: [PATCH 03/12] :heavy_minus_sign: replace by @babel/eslint-parser change babel-eslint by @babel/eslinit-parser because in vscode show a error when I use import --- .eslintrc | 6 ++- package-lock.json | 131 ++++++++++++++++++++++++++-------------------- package.json | 2 +- 3 files changed, 80 insertions(+), 59 deletions(-) diff --git a/.eslintrc b/.eslintrc index 316d5e03..6a503984 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,7 +19,11 @@ "expect": true, "sinon": true }, - "parser": "babel-eslint", + "parser": "@babel/eslint-parser", + "parserOptions": { + "ecmaVersion": 8, + "requireConfigFile": false + }, "plugins": [ "react", "jsx-a11y", diff --git a/package-lock.json b/package-lock.json index 75c4a203..e231d7c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.18.2", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", @@ -105,6 +105,46 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/eslint-parser": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz", + "integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==", + "dev": true, + "dependencies": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || >=14.0.0" + }, + "peerDependencies": { + "@babel/core": ">=7.11.0", + "eslint": "^7.5.0 || ^8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, "node_modules/@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -3571,27 +3611,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, "node_modules/babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -5748,7 +5767,7 @@ "eslint": ">=5" } }, - "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { + "node_modules/eslint-visitor-keys": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", @@ -5757,15 +5776,6 @@ "node": ">=10" } }, - "node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/eslint/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -13360,6 +13370,35 @@ "semver": "^6.3.0" } }, + "@babel/eslint-parser": { + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.2.tgz", + "integrity": "sha512-oFQYkE8SuH14+uR51JVAmdqwKYXGRjEXx7s+WiagVjqQ+HPE+nnwyF2qlVG8evUsUHmPcA+6YXMEDbIhEyQc5A==", + "dev": true, + "requires": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "dependencies": { + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true + } + } + }, "@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -15917,20 +15956,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - } - }, "babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -17697,20 +17722,12 @@ "dev": true, "requires": { "eslint-visitor-keys": "^2.0.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", - "dev": true - } } }, "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", "dev": true }, "espree": { diff --git a/package.json b/package.json index d56de193..486ce06e 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.18.2", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", From 3a2e3431c5259936386a62d89b18f8d2fe08c70a Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 17:19:45 -0500 Subject: [PATCH 04/12] :white_check_mark: [UPDATE] use swallow for error in React 18 replace mount by shawoll --- src/__test__/components/About.test.js | 5 ++--- src/__test__/components/Academic.test.js | 5 ++--- src/__test__/components/Experience.test.js | 5 ++--- src/__test__/components/Header.test.js | 5 ++--- src/__test__/components/Interest.test.js | 5 ++--- src/__test__/components/Languages.test.js | 5 ++--- src/__test__/components/Profile.test.js | 5 ++--- src/__test__/components/Skills.test.js | 5 ++--- 8 files changed, 16 insertions(+), 24 deletions(-) diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..44eed891 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import About from '../../components/About'; describe('', () => { - const about = mount(); + const about = shallow(); test('About render', () => { expect(about.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('About haves 3 items', () => { expect(about.find('.About-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..ee38154e 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Academic from '../../components/Academic'; describe('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Academic has 3 items', () => { expect(academic.find('.Academic-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..0e4b4e8e 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Experience from '../../components/Experience'; describe('', () => { - const experience = mount(); + const experience = shallow(); test('Experience render', () => { expect(experience.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Experience haves 3 items', () => { expect(experience.find('.Experience-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index 894ec0ab..61c3922b 100644 --- a/src/__test__/components/Header.test.js +++ b/src/__test__/components/Header.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Header from '../../components/Header'; describe('
', () => { - const header = mount(
); + const header = shallow(
); test('Header render', () => { expect(header.length).toEqual(1); @@ -12,5 +12,4 @@ describe('
', () => { test('Header title', () => { expect(header.find('.Header-title').length).toEqual(1); }); - }); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..4ef2cc4b 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Interest from '../../components/Interest'; describe('', () => { - const interest = mount(); + const interest = shallow(); test('Interest render', () => { expect(interest.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Interest has 3 items', () => { expect(interest.find('.Interest-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 1d10e137..a1084256 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Languages from '../../components/Languages'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Languages has 3 items', () => { expect(languages.find('.Languages-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..fb478b7e 100644 --- a/src/__test__/components/Profile.test.js +++ b/src/__test__/components/Profile.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Profile from '../../components/Profile'; describe('', () => { - const profile = mount(); + const profile = shallow(); test('Profile render', () => { expect(profile.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Profile have a description', () => { expect(profile.find('.Profile-desc').length).toEqual(1); }); - }); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..4a39fd89 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Skills from '../../components/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Skills has 3 items', () => { expect(skills.find('.Skills-item').length).toBeGreaterThan(2); }); - }); From 4d60ebd33239503dc58ac3e348bdc445c5d9ee2b Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 18:18:39 -0500 Subject: [PATCH 05/12] :lipstick: Add style components --- src/styles/components/About.styl | 7 +++++++ src/styles/components/Academic.styl | 7 +++++++ src/styles/components/Experience.styl | 7 +++++++ src/styles/components/Header.styl | 7 +++++++ src/styles/components/Interest.styl | 7 +++++++ src/styles/components/Languages.styl | 7 +++++++ src/styles/components/Layout.styl | 29 +++++++++++++++++++++++++++ src/styles/components/Profile.styl | 7 +++++++ src/styles/components/Skills.styl | 7 +++++++ 9 files changed, 85 insertions(+) create mode 100644 src/styles/components/About.styl create mode 100644 src/styles/components/Academic.styl create mode 100644 src/styles/components/Experience.styl create mode 100644 src/styles/components/Header.styl create mode 100644 src/styles/components/Interest.styl create mode 100644 src/styles/components/Languages.styl create mode 100644 src/styles/components/Layout.styl create mode 100644 src/styles/components/Profile.styl create mode 100644 src/styles/components/Skills.styl diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl new file mode 100644 index 00000000..310df258 --- /dev/null +++ b/src/styles/components/About.styl @@ -0,0 +1,7 @@ +@import "../_vars.css" + +.About + + &-title + + &-item \ No newline at end of file diff --git a/src/styles/components/Academic.styl b/src/styles/components/Academic.styl new file mode 100644 index 00000000..4c177558 --- /dev/null +++ b/src/styles/components/Academic.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Academic + + &-title + + &-item \ No newline at end of file diff --git a/src/styles/components/Experience.styl b/src/styles/components/Experience.styl new file mode 100644 index 00000000..aeeb3256 --- /dev/null +++ b/src/styles/components/Experience.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Experience + + &-title + + &-item \ No newline at end of file diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl new file mode 100644 index 00000000..7231473e --- /dev/null +++ b/src/styles/components/Header.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Header + border: 2px solid var(--md-sys-color-on-background) + &title + color: var(--md-sys-color-on-background) + font-size: 40px diff --git a/src/styles/components/Interest.styl b/src/styles/components/Interest.styl new file mode 100644 index 00000000..7b49c80c --- /dev/null +++ b/src/styles/components/Interest.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Interest + + &-title + + &-item \ No newline at end of file diff --git a/src/styles/components/Languages.styl b/src/styles/components/Languages.styl new file mode 100644 index 00000000..82cc2d31 --- /dev/null +++ b/src/styles/components/Languages.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Languages + + &-title + + &-item \ No newline at end of file diff --git a/src/styles/components/Layout.styl b/src/styles/components/Layout.styl new file mode 100644 index 00000000..500c5133 --- /dev/null +++ b/src/styles/components/Layout.styl @@ -0,0 +1,29 @@ +.Layout + display: grid + grid-template-columns: repeat(2,1fr) + grid-template-rows: repeat(5,1fr) + grid-template-areas: "Header Header" "Profile Profile" "Experience Experience" "Academic Skills" "Interest Languages" + + & >:nth-child(n) + border: 2px solid var(--md-sys-color-on-background) + + & >:nth-child(1) + grid-area: Header + + & >:nth-child(2) + grid-area: Profile + + & >:nth-child(3) + grid-area: Experience + + & >:nth-child(4) + grid-area: Academic + + & >:nth-child(5) + grid-area: Skills + + & >:nth-child(6) + grid-area: Interest + + & >:nth-child(7) + grid-area: Languages \ No newline at end of file diff --git a/src/styles/components/Profile.styl b/src/styles/components/Profile.styl new file mode 100644 index 00000000..e958ffe8 --- /dev/null +++ b/src/styles/components/Profile.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Profile + + &-title + + &-desc \ No newline at end of file diff --git a/src/styles/components/Skills.styl b/src/styles/components/Skills.styl new file mode 100644 index 00000000..60ad771c --- /dev/null +++ b/src/styles/components/Skills.styl @@ -0,0 +1,7 @@ +@import "../_vars.css"; + +.Skills + + &-title + + &-item \ No newline at end of file From e1ceac681b69dfad8cae2be04cbb639357ce1810 Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 18:20:43 -0500 Subject: [PATCH 06/12] :sparkles: [ADD] Layout --- src/components/Layout.jsx | 9 +++++++++ src/containers/App.jsx | 11 ++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 src/components/Layout.jsx diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx new file mode 100644 index 00000000..876cbd9a --- /dev/null +++ b/src/components/Layout.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import '../styles/components/Layout.styl'; + +function Layout({ children }) { + return
{children}
; +} + +export default Layout; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 33b077da..444cdd43 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,5 +1,6 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import '../styles/components/App.styl'; +import Layout from '../components/Layout'; import Header from '../components/Header'; import About from '../components/About'; import Profile from '../components/Profile'; @@ -9,9 +10,9 @@ import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; -const App = () => { +function App() { return ( - +
@@ -21,8 +22,8 @@ const App = () => { - + ); -}; +} export default App; From 52a5d03d49836c01662c1bd176acc38423a27fc6 Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 18:24:52 -0500 Subject: [PATCH 07/12] :white_check_mark: [PASS] test, and [ADD] structure base add structure in components --- src/components/About.jsx | 14 ++++++++++---- src/components/Academic.jsx | 14 ++++++++++---- src/components/Experience.jsx | 16 +++++++++++++--- src/components/Header.jsx | 16 +++++++--------- src/components/Interest.jsx | 18 ++++++++++-------- src/components/Languages.jsx | 18 ++++++++++-------- src/components/Profile.jsx | 10 ++++++---- src/components/Skills.jsx | 18 ++++++++++-------- 8 files changed, 76 insertions(+), 48 deletions(-) diff --git a/src/components/About.jsx b/src/components/About.jsx index 6e75c070..a34ea7a4 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,11 +1,17 @@ import React from 'react'; +import '../styles/components/About.styl'; -const About = () => { +function About() { return ( -
- About +
+ About +
    +
  • +
  • +
  • +
); -}; +} export default About; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index 4bef88f3..4706c0f9 100644 --- a/src/components/Academic.jsx +++ b/src/components/Academic.jsx @@ -1,11 +1,17 @@ import React from 'react'; +import '../styles/components/Academic.styl'; -const Academic = () => { +function Academic() { return ( -
-

Academic

+
+ About +
    +
  • +
  • +
  • +
); -}; +} export default Academic; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index a87bfc11..998b1aea 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,7 +1,17 @@ import React from 'react'; +import '../styles/components/Experience.styl'; -const Experience = () => { - return
Experiece
; -}; +function Experience() { + return ( +
+ About +
    +
  • +
  • +
  • +
+
+ ); +} export default Experience; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 7c632cc1..98b10577 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,18 +1,16 @@ import React from 'react'; import { useTheme } from '../hooks/useTheme'; -const Header = ({ children }) => { +import '../styles/components/Header.styl'; + +function Header({ children }) { const [theme, changeTheme] = useTheme(); return ( -
- changeTheme(!theme)} - type="checkbox" - value={theme} - /> -

Header

+
+ changeTheme(!theme)} type='checkbox' value={theme} /> +

Rafael Livise

{children}
); -}; +} export default Header; diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index 987b4e37..08f4111f 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -1,15 +1,17 @@ import React from 'react'; +import '../styles/components/Interest.styl'; -const Interest = () => { +function Interest() { return ( -
-
    -
  1. Interest
    2. -
  2. Interest
    3. -
  3. Interest
    4. -
+
+ About +
    +
  • +
  • +
  • +
); -}; +} export default Interest; diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index 8c4f2aaf..31057ff8 100644 --- a/src/components/Languages.jsx +++ b/src/components/Languages.jsx @@ -1,15 +1,17 @@ import React from 'react'; +import '../styles/components/Languages.styl'; -const Languages = () => { +function Languages() { return ( -
-
    -
  1. Languages
    2. -
  2. Languages
    3. -
  3. Languages
    4. -
+
+ About +
    +
  • +
  • +
  • +
); -}; +} export default Languages; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index d66c8126..dd75617b 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -1,11 +1,13 @@ import React from 'react'; +import '../styles/components/Profile.styl'; -const Profile = () => { +function Profile() { return ( -
-

Profile

+
+

Profile

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam temporibus debitis ducimus voluptates repudiandae harum laudantium beatae consequatur, veniam ab esse accusantium labore vero! Magnam cumque itaque optio ex vitae!

); -}; +} export default Profile; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index 5759c1a2..d82c3099 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,15 +1,17 @@ import React from 'react'; +import '../styles/components/Skills.styl'; -const Skills = () => { +function Skills() { return ( -
-
    -
  1. Skills
    2. -
  2. Skills
    3. -
  3. Skills
    4. -
+
+ About +
    +
  • +
  • +
  • +
); -}; +} export default Skills; From 5abf0870c1e41977fd07b3478f31ce76634afdc2 Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 19:46:17 -0500 Subject: [PATCH 08/12] :lipstick: [UPDATE] style --- src/styles/components/About.styl | 3 ++- src/styles/components/Academic.styl | 5 +++-- src/styles/components/App.styl | 2 +- src/styles/components/Experience.styl | 3 ++- src/styles/components/Header.styl | 4 ++-- src/styles/components/Interest.styl | 3 ++- src/styles/components/Languages.styl | 3 ++- src/styles/components/Layout.styl | 5 ++++- src/styles/components/Profile.styl | 3 ++- src/styles/components/Skills.styl | 3 ++- 10 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl index 310df258..7ac0ae34 100644 --- a/src/styles/components/About.styl +++ b/src/styles/components/About.styl @@ -4,4 +4,5 @@ &-title - &-item \ No newline at end of file + &-item + font-size: 16px \ No newline at end of file diff --git a/src/styles/components/Academic.styl b/src/styles/components/Academic.styl index 4c177558..8f7e2f28 100644 --- a/src/styles/components/Academic.styl +++ b/src/styles/components/Academic.styl @@ -1,7 +1,8 @@ @import "../_vars.css"; .Academic - + &-title - &-item \ No newline at end of file + &-item + font-size: 16px diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index de434ffb..ad1c450c 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,4 +1,4 @@ @import "../_vars.css"; body - background-color var(--md-sys-color-background) \ No newline at end of file + background-color var(--md-sys-color-primary) \ No newline at end of file diff --git a/src/styles/components/Experience.styl b/src/styles/components/Experience.styl index aeeb3256..ba9a15c8 100644 --- a/src/styles/components/Experience.styl +++ b/src/styles/components/Experience.styl @@ -4,4 +4,5 @@ &-title - &-item \ No newline at end of file + &-item + font-size: 16px diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl index 7231473e..fa1a4fa2 100644 --- a/src/styles/components/Header.styl +++ b/src/styles/components/Header.styl @@ -1,7 +1,7 @@ @import "../_vars.css"; .Header - border: 2px solid var(--md-sys-color-on-background) - &title + + &-title color: var(--md-sys-color-on-background) font-size: 40px diff --git a/src/styles/components/Interest.styl b/src/styles/components/Interest.styl index 7b49c80c..ceca3998 100644 --- a/src/styles/components/Interest.styl +++ b/src/styles/components/Interest.styl @@ -4,4 +4,5 @@ &-title - &-item \ No newline at end of file + &-item + font-size: 16px diff --git a/src/styles/components/Languages.styl b/src/styles/components/Languages.styl index 82cc2d31..d01025d1 100644 --- a/src/styles/components/Languages.styl +++ b/src/styles/components/Languages.styl @@ -4,4 +4,5 @@ &-title - &-item \ No newline at end of file + &-item + font-size: 16px diff --git a/src/styles/components/Layout.styl b/src/styles/components/Layout.styl index 500c5133..40300399 100644 --- a/src/styles/components/Layout.styl +++ b/src/styles/components/Layout.styl @@ -3,8 +3,11 @@ grid-template-columns: repeat(2,1fr) grid-template-rows: repeat(5,1fr) grid-template-areas: "Header Header" "Profile Profile" "Experience Experience" "Academic Skills" "Interest Languages" - + gap: 20px + margin: 10px & >:nth-child(n) + padding: 15px + background-color: var(--md-sys-color-background) border: 2px solid var(--md-sys-color-on-background) & >:nth-child(1) diff --git a/src/styles/components/Profile.styl b/src/styles/components/Profile.styl index e958ffe8..2d0a095f 100644 --- a/src/styles/components/Profile.styl +++ b/src/styles/components/Profile.styl @@ -4,4 +4,5 @@ &-title - &-desc \ No newline at end of file + &-desc + font-size: 16px diff --git a/src/styles/components/Skills.styl b/src/styles/components/Skills.styl index 60ad771c..eec58181 100644 --- a/src/styles/components/Skills.styl +++ b/src/styles/components/Skills.styl @@ -4,4 +4,5 @@ &-title - &-item \ No newline at end of file + &-item + font-size: 16px From 7e69a0eb9aea0a5a5aa86d927602ac30fd4f596f Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Wed, 6 Jul 2022 21:46:35 -0500 Subject: [PATCH 09/12] :lipstick: [UPDATE] style color base --- src/styles/_vars.css | 148 ++++++++---------------------- src/styles/components/App.styl | 2 +- src/styles/components/Layout.styl | 14 ++- 3 files changed, 52 insertions(+), 112 deletions(-) diff --git a/src/styles/_vars.css b/src/styles/_vars.css index cb19c6fc..b9a345f8 100644 --- a/src/styles/_vars.css +++ b/src/styles/_vars.css @@ -1,124 +1,54 @@ .material-theme { - --md-sys-typescale-headline1-font: Roboto; - --md-sys-typescale-headline1-weight: Regular; - --md-sys-typescale-headline1-size: 36px; - --md-sys-typescale-headline1-line-height: 44px; - --md-sys-typescale-headline1-tracking: 0px; - --md-sys-typescale-display3-font: Roboto; - --md-sys-typescale-display3-weight: Regular; - --md-sys-typescale-display3-size: 45px; - --md-sys-typescale-display3-line-height: 52px; - --md-sys-typescale-display3-tracking: 0px; - --md-sys-typescale-display2-font: Roboto; - --md-sys-typescale-display2-weight: Regular; - --md-sys-typescale-display2-size: 57px; - --md-sys-typescale-display2-line-height: 64px; - --md-sys-typescale-display2-tracking: -0.25px; - --md-sys-typescale-headline4-font: Roboto; - --md-sys-typescale-headline4-weight: Regular; - --md-sys-typescale-headline4-size: 24px; - --md-sys-typescale-headline4-line-height: 32px; - --md-sys-typescale-headline4-tracking: 0px; - --md-sys-typescale-headline3-font: Roboto; - --md-sys-typescale-headline3-weight: Regular; - --md-sys-typescale-headline3-size: 28px; - --md-sys-typescale-headline3-line-height: 36px; - --md-sys-typescale-headline3-tracking: 0px; - --md-sys-typescale-headline2-font: Roboto; - --md-sys-typescale-headline2-weight: Regular; - --md-sys-typescale-headline2-size: 32px; - --md-sys-typescale-headline2-line-height: 40px; - --md-sys-typescale-headline2-tracking: 0px; - --md-sys-typescale-overline-font: Roboto; - --md-sys-typescale-overline-weight: Medium; - --md-sys-typescale-overline-size: 12px; - --md-sys-typescale-overline-line-height: 16px; - --md-sys-typescale-overline-tracking: 0.5px; - --md-sys-typescale-button-font: Roboto; - --md-sys-typescale-button-weight: Medium; - --md-sys-typescale-button-size: 14px; - --md-sys-typescale-button-line-height: 20px; - --md-sys-typescale-button-tracking: 0.10000000149011612px; - --md-sys-typescale-subhead2-font: Roboto; - --md-sys-typescale-subhead2-weight: Medium; - --md-sys-typescale-subhead2-size: 14px; - --md-sys-typescale-subhead2-line-height: 20px; - --md-sys-typescale-subhead2-tracking: 0.10000000149011612px; - --md-sys-typescale-subhead1-font: Roboto; - --md-sys-typescale-subhead1-weight: Medium; - --md-sys-typescale-subhead1-size: 16px; - --md-sys-typescale-subhead1-line-height: 24px; - --md-sys-typescale-subhead1-tracking: 0.15000000596046448px; - --md-sys-typescale-headline5-font: Roboto; - --md-sys-typescale-headline5-weight: Regular; - --md-sys-typescale-headline5-size: 22px; - --md-sys-typescale-headline5-line-height: 28px; - --md-sys-typescale-headline5-tracking: 0px; - --md-sys-typescale-caption-font: Roboto; - --md-sys-typescale-caption-weight: Regular; - --md-sys-typescale-caption-size: 12px; - --md-sys-typescale-caption-line-height: 16px; - --md-sys-typescale-caption-tracking: 0.4000000059604645px; - --md-sys-typescale-body2-font: Roboto; - --md-sys-typescale-body2-weight: Regular; - --md-sys-typescale-body2-size: 14px; - --md-sys-typescale-body2-line-height: 20px; - --md-sys-typescale-body2-tracking: 0.25px; - --md-sys-typescale-body1-font: Roboto; - --md-sys-typescale-body1-weight: Regular; - --md-sys-typescale-body1-size: 16px; - --md-sys-typescale-body1-line-height: 24px; - --md-sys-typescale-body1-tracking: 0.5px; - --md-sys-color-primary-light: #4c4fc6; + --md-sys-color-primary-light: #1360a8; --md-sys-color-on-primary-light: #ffffff; - --md-sys-color-primary-container-light: #e1e0ff; - --md-sys-color-on-primary-container-light: #05006d; - --md-sys-color-secondary-light: #695f00; + --md-sys-color-primary-container-light: #d4e3ff; + --md-sys-color-on-primary-container-light: #001c39; + --md-sys-color-secondary-light: #785a00; --md-sys-color-on-secondary-light: #ffffff; - --md-sys-color-secondary-container-light: #fae531; - --md-sys-color-on-secondary-container-light: #201c00; - --md-sys-color-tertiary-light: #8b5000; + --md-sys-color-secondary-container-light: #ffdf9c; + --md-sys-color-on-secondary-container-light: #251a00; + --md-sys-color-tertiary-light: #ad3300; --md-sys-color-on-tertiary-light: #ffffff; - --md-sys-color-tertiary-container-light: #ffdcbe; - --md-sys-color-on-tertiary-container-light: #2d1600; + --md-sys-color-tertiary-container-light: #ffdbd0; + --md-sys-color-on-tertiary-container-light: #3a0b00; --md-sys-color-error-light: #ba1a1a; --md-sys-color-on-error-light: #ffffff; --md-sys-color-error-container-light: #ffdad6; --md-sys-color-on-error-container-light: #410002; - --md-sys-color-outline-light: #777680; - --md-sys-color-background-light: #fcfcff; - --md-sys-color-on-background-light: #001d31; - --md-sys-color-surface-light: #fcfcff; - --md-sys-color-on-surface-light: #001d31; - --md-sys-color-surface-variant-light: #e4e1ec; - --md-sys-color-on-surface-variant-light: #46464f; - --md-sys-color-inverse-surface-light: #003351; - --md-sys-color-inverse-on-surface-light: #e7f2ff; - --md-sys-color-primary-dark: #c0c1ff; - --md-sys-color-on-primary-dark: #171598; - --md-sys-color-primary-container-dark: #3235ad; - --md-sys-color-on-primary-container-dark: #e1e0ff; - --md-sys-color-secondary-dark: #dcc800; - --md-sys-color-on-secondary-dark: #373100; - --md-sys-color-secondary-container-dark: #4f4700; - --md-sys-color-on-secondary-container-dark: #fae531; - --md-sys-color-tertiary-dark: #ffb871; - --md-sys-color-on-tertiary-dark: #4a2800; - --md-sys-color-tertiary-container-dark: #6a3c00; - --md-sys-color-on-tertiary-container-dark: #ffdcbe; + --md-sys-color-outline-light: #73777f; + --md-sys-color-background-light: #fdfcff; + --md-sys-color-on-background-light: #1a1c1e; + --md-sys-color-surface-light: #fdfcff; + --md-sys-color-on-surface-light: #1a1c1e; + --md-sys-color-surface-variant-light: #dfe2eb; + --md-sys-color-on-surface-variant-light: #43474e; + --md-sys-color-inverse-surface-light: #2f3033; + --md-sys-color-inverse-on-surface-light: #f1f0f4; + --md-sys-color-primary-dark: #a4c9ff; + --md-sys-color-on-primary-dark: #00315d; + --md-sys-color-primary-container-dark: #004883; + --md-sys-color-on-primary-container-dark: #d4e3ff; + --md-sys-color-secondary-dark: #f9bd00; + --md-sys-color-on-secondary-dark: #3f2e00; + --md-sys-color-secondary-container-dark: #5b4300; + --md-sys-color-on-secondary-container-dark: #ffdf9c; + --md-sys-color-tertiary-dark: #ffb59e; + --md-sys-color-on-tertiary-dark: #5e1700; + --md-sys-color-tertiary-container-dark: #842500; + --md-sys-color-on-tertiary-container-dark: #ffdbd0; --md-sys-color-error-dark: #ffb4ab; --md-sys-color-on-error-dark: #690005; --md-sys-color-error-container-dark: #93000a; --md-sys-color-on-error-container-dark: #ffdad6; - --md-sys-color-outline-dark: #918f9a; - --md-sys-color-background-dark: #001d31; - --md-sys-color-on-background-dark: #cde5ff; - --md-sys-color-surface-dark: #001d31; - --md-sys-color-on-surface-dark: #cde5ff; - --md-sys-color-surface-variant-dark: #46464f; - --md-sys-color-on-surface-variant-dark: #c7c5d0; - --md-sys-color-inverse-surface-dark: #cde5ff; - --md-sys-color-inverse-on-surface-dark: #001d31; + --md-sys-color-outline-dark: #8d9199; + --md-sys-color-background-dark: #1a1c1e; + --md-sys-color-on-background-dark: #e3e2e6; + --md-sys-color-surface-dark: #1a1c1e; + --md-sys-color-on-surface-dark: #e3e2e6; + --md-sys-color-surface-variant-dark: #43474e; + --md-sys-color-on-surface-variant-dark: #c3c6cf; + --md-sys-color-inverse-surface-dark: #e3e2e6; + --md-sys-color-inverse-on-surface-dark: #1a1c1e; } @media (prefers-color-scheme: light) { .material-theme { diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index ad1c450c..68e84505 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,4 +1,4 @@ @import "../_vars.css"; body - background-color var(--md-sys-color-primary) \ No newline at end of file + background-color var(--md-sys-color-surface-variant) \ No newline at end of file diff --git a/src/styles/components/Layout.styl b/src/styles/components/Layout.styl index 40300399..193ebb94 100644 --- a/src/styles/components/Layout.styl +++ b/src/styles/components/Layout.styl @@ -8,9 +8,11 @@ & >:nth-child(n) padding: 15px background-color: var(--md-sys-color-background) - border: 2px solid var(--md-sys-color-on-background) + color: var(--md-sys-color-secondary) & >:nth-child(1) + background-color: var(--md-sys-color-primary-container) + color: var(--md-sys-color-primary) grid-area: Header & >:nth-child(2) @@ -21,12 +23,20 @@ & >:nth-child(4) grid-area: Academic + // background-color: var(--md-sys-color-tertiary-container) + color: var(--md-sys-color-tertiary) & >:nth-child(5) grid-area: Skills + // background-color: var(--md-sys-color-tertiary-container) + color: var(--md-sys-color-tertiary) & >:nth-child(6) grid-area: Interest + // background-color: var(--md-sys-color-tertiary-container) + color: var(--md-sys-color-tertiary) & >:nth-child(7) - grid-area: Languages \ No newline at end of file + grid-area: Languages + // background-color: var(--md-sys-color-tertiary-container) + color: var(--md-sys-color-tertiary) \ No newline at end of file From 40c4744a48ef461bb53a889fe0c041398fef6dfe Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Thu, 7 Jul 2022 00:45:10 -0500 Subject: [PATCH 10/12] :lipstick: [UPDATE] distibution Header --- src/components/Header.jsx | 21 ++++++++++++--- src/index.js | 3 ++- src/styles/components/App.styl | 3 ++- src/styles/components/Header.styl | 45 ++++++++++++++++++++++++++++--- src/styles/components/Layout.styl | 9 ++++--- 5 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 98b10577..918a140a 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -6,9 +6,24 @@ function Header({ children }) { const [theme, changeTheme] = useTheme(); return (
- changeTheme(!theme)} type='checkbox' value={theme} /> -

Rafael Livise

-
{children}
+
+ +
+
+
+ changeTheme(!theme)} type='checkbox' value={theme} /> +

Rafael Livise Livise

+

Header-job-title

+
+ +
+

+00-000000

+

Header@email

+

header.com

+

Header-job-title

+
+
{children}
+
); } diff --git a/src/index.js b/src/index.js index 7a5b4e93..a97182d2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; -import App from './containers/App'; import { createRoot } from 'react-dom/client'; +import App from './containers/App'; + const container = document.getElementById('app'); const root = createRoot(container); // createRoot(container!) if you use TypeScript root.render(); diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 68e84505..d7dd2a21 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,4 +1,5 @@ @import "../_vars.css"; body - background-color var(--md-sys-color-surface-variant) \ No newline at end of file + background-color var(--md-sys-color-surface-variant) + font-family: 'Roboto', sans-serif \ No newline at end of file diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl index fa1a4fa2..9223f2f1 100644 --- a/src/styles/components/Header.styl +++ b/src/styles/components/Header.styl @@ -1,7 +1,46 @@ @import "../_vars.css"; .Header - + --dimention-image: 300px + display: grid + grid-template-columns: var(--dimention-image) auto + gap: 50px + + &-image + width: var(--dimention-image) + height: var(--dimention-image) + border-radius: var(--dimention-image) + background-color: var(--md-sys-color-primary) + margin: 0 + &-title - color: var(--md-sys-color-on-background) - font-size: 40px + color: var(--md-sys-color-primary) + position relative + & input + position: absolute + right:0 + top:0 + + & h1 + margin-block-start: 0.5em + margin-block-end: 0.5em + + &-body + display: grid + grid-template-columns: repeat(3, 1fr) + +@media screen and (max-width: 900px) + .Header + --dimention-image: 200px + &-body + grid-template-columns: 1fr + +@media screen and (max-width: 600px) + .Header + --dimention-image: 300px + grid-template-columns: 1fr + grid-template-rows: var(--dimention-image) auto + + + + diff --git a/src/styles/components/Layout.styl b/src/styles/components/Layout.styl index 193ebb94..e4c722e2 100644 --- a/src/styles/components/Layout.styl +++ b/src/styles/components/Layout.styl @@ -3,12 +3,15 @@ grid-template-columns: repeat(2,1fr) grid-template-rows: repeat(5,1fr) grid-template-areas: "Header Header" "Profile Profile" "Experience Experience" "Academic Skills" "Interest Languages" - gap: 20px - margin: 10px + gap: 50px + margin: 30px & >:nth-child(n) - padding: 15px + padding: 2em background-color: var(--md-sys-color-background) color: var(--md-sys-color-secondary) + box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + -webkit-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + -moz-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); & >:nth-child(1) background-color: var(--md-sys-color-primary-container) From d37ea9fd6645830999018751cc47a75d3cf8366e Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Fri, 15 Jul 2022 13:20:08 -0500 Subject: [PATCH 11/12] feat: deacorate compoente --- .env.example | 1 + package-lock.json | 380 +++++++++++++----- package.json | 1 + src/components/About.jsx | 23 +- src/components/Academic.jsx | 33 +- src/components/DecoratorContainer.jsx | 14 + src/components/Experience.jsx | 43 +- src/components/Header.jsx | 31 +- src/components/Interest.jsx | 28 +- src/components/Languages.jsx | 32 +- src/components/Profile.jsx | 22 +- src/components/Skills.jsx | 28 +- src/components/SvgArrowPaper.jsx | 12 + src/containers/App.jsx | 42 +- src/styles/_vars.css | 11 + src/styles/components/Academic.styl | 6 +- src/styles/components/DecoratorContainer.styl | 19 + src/styles/components/Experience.styl | 8 +- src/styles/components/Header.styl | 23 +- src/styles/components/Interest.styl | 5 +- src/styles/components/Languages.styl | 5 +- src/styles/components/Layout.styl | 9 +- src/styles/components/Profile.styl | 6 +- src/styles/components/Skills.styl | 5 +- src/styles/mixins.styl | 11 + src/utils/getData.js | 7 + 26 files changed, 599 insertions(+), 206 deletions(-) create mode 100644 .env.example create mode 100644 src/components/DecoratorContainer.jsx create mode 100644 src/components/SvgArrowPaper.jsx create mode 100644 src/styles/components/DecoratorContainer.styl create mode 100644 src/styles/mixins.styl diff --git a/.env.example b/.env.example new file mode 100644 index 00000000..168771e4 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +REACT_APP_API_URL \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e231d7c2..b331055f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-loader-spinner": "^5.1.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" @@ -2979,14 +2980,115 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.6.tgz", + "integrity": "sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/type-utils": "5.30.6", + "@typescript-eslint/utils": "5.30.6", + "debug": "^4.3.4", + "functional-red-black-tree": "^1.0.1", + "ignore": "^5.2.0", + "regexpp": "^3.2.0", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^5.0.0", + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.6.tgz", + "integrity": "sha512-gfF9lZjT0p2ZSdxO70Xbw8w9sPPJGfAdjK7WikEjB3fcUI/yr9maUVEdqigBjKincUYNKOmf7QBMiTf719kbrA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/typescript-estree": "5.30.6", + "debug": "^4.3.4" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/@typescript-eslint/scope-manager": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz", - "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.6.tgz", + "integrity": "sha512-Hkq5PhLgtVoW1obkqYH0i4iELctEKixkhWLPTYs55doGUKCASvkjOXOd/pisVeLdO24ZX9D6yymJ/twqpJiG3g==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/visitor-keys": "5.30.5" + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/visitor-keys": "5.30.6" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.6.tgz", + "integrity": "sha512-GFVVzs2j0QPpM+NTDMXtNmJKlF842lkZKDSanIxf+ArJsGeZUIaeT4jGg+gAgHt7AcQSFwW7htzF/rbAh2jaVA==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@typescript-eslint/utils": "5.30.6", + "debug": "^4.3.4", + "tsutils": "^3.21.0" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -2994,12 +3096,20 @@ "funding": { "type": "opencollective", "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, "node_modules/@typescript-eslint/types": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz", - "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.6.tgz", + "integrity": "sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -3010,13 +3120,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz", - "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.6.tgz", + "integrity": "sha512-Z7TgPoeYUm06smfEfYF0RBkpF8csMyVnqQbLYiGgmUSTaSXTP57bt8f0UFXstbGxKIreTwQCujtaH0LY9w9B+A==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/visitor-keys": "5.30.5", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/visitor-keys": "5.30.6", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -3052,15 +3162,15 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz", - "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.6.tgz", + "integrity": "sha512-xFBLc/esUbLOJLk9jKv0E9gD/OH966M40aY9jJ8GiqpSkP2xOV908cokJqqhVd85WoIvHVHYXxSFE4cCSDzVvA==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.30.5", - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/typescript-estree": "5.30.5", + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/typescript-estree": "5.30.6", "eslint-scope": "^5.1.1", "eslint-utils": "^3.0.0" }, @@ -3098,12 +3208,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz", - "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.6.tgz", + "integrity": "sha512-41OiCjdL2mCaSDi2SvYbzFLlqqlm5v1ZW9Ym55wXKL/Rx6OOB1IbuFGo71Fj6Xy90gJDFTlgOS+vbmtGHPTQQA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.30.5", + "@typescript-eslint/types": "5.30.6", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -3310,9 +3420,9 @@ } }, "node_modules/acorn": { - "version": "6.4.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", - "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==", + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true, "peer": true, "bin": { @@ -4384,6 +4494,14 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz", "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==" }, + "node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, "node_modules/commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", @@ -6128,17 +6246,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/execa/node_modules/is-stream": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", - "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/execa/node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -7464,6 +7571,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-string": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", @@ -11006,6 +11124,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-loader-spinner": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.1.5.tgz", + "integrity": "sha512-kHSBa3pNPNzd3UGOiOsHCC33qx5bZA7IHKau+YSTVn36Jib4eBVx/TNMggudbzW5CTnRCbP5bnYU4ACAX3mA6g==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -12845,14 +12972,6 @@ } } }, - "node_modules/webpack-cli/node_modules/commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", - "engines": { - "node": ">= 10" - } - }, "node_modules/webpack-dev-middleware": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz", @@ -13282,6 +13401,15 @@ "node": ">=8" } }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -13314,15 +13442,6 @@ "engines": { "node": ">=12" } - }, - "node_modules/yargs/node_modules/y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "dev": true, - "engines": { - "node": ">=10" - } } }, "dependencies": { @@ -15479,30 +15598,89 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "@typescript-eslint/eslint-plugin": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.6.tgz", + "integrity": "sha512-J4zYMIhgrx4MgnZrSDD7sEnQp7FmhKNOaqaOpaoQ/SfdMfRB/0yvK74hTnvH+VQxndZynqs5/Hn4t+2/j9bADg==", + "dev": true, + "optional": true, + "peer": true, + "requires": { + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/type-utils": "5.30.6", + "@typescript-eslint/utils": "5.30.6", + "debug": "^4.3.4", + "functional-red-black-tree": "^1.0.1", + "ignore": "^5.2.0", + "regexpp": "^3.2.0", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "dependencies": { + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dev": true, + "optional": true, + "peer": true, + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, + "@typescript-eslint/parser": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.30.6.tgz", + "integrity": "sha512-gfF9lZjT0p2ZSdxO70Xbw8w9sPPJGfAdjK7WikEjB3fcUI/yr9maUVEdqigBjKincUYNKOmf7QBMiTf719kbrA==", + "dev": true, + "optional": true, + "peer": true, + "requires": { + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/typescript-estree": "5.30.6", + "debug": "^4.3.4" + } + }, "@typescript-eslint/scope-manager": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz", - "integrity": "sha512-NJ6F+YHHFT/30isRe2UTmIGGAiXKckCyMnIV58cE3JkHmaD6e5zyEYm5hBDv0Wbin+IC0T1FWJpD3YqHUG/Ydg==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.30.6.tgz", + "integrity": "sha512-Hkq5PhLgtVoW1obkqYH0i4iELctEKixkhWLPTYs55doGUKCASvkjOXOd/pisVeLdO24ZX9D6yymJ/twqpJiG3g==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/visitor-keys": "5.30.6" + } + }, + "@typescript-eslint/type-utils": { + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.30.6.tgz", + "integrity": "sha512-GFVVzs2j0QPpM+NTDMXtNmJKlF842lkZKDSanIxf+ArJsGeZUIaeT4jGg+gAgHt7AcQSFwW7htzF/rbAh2jaVA==", "dev": true, + "optional": true, + "peer": true, "requires": { - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/visitor-keys": "5.30.5" + "@typescript-eslint/utils": "5.30.6", + "debug": "^4.3.4", + "tsutils": "^3.21.0" } }, "@typescript-eslint/types": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.5.tgz", - "integrity": "sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.30.6.tgz", + "integrity": "sha512-HdnP8HioL1F7CwVmT4RaaMX57RrfqsOMclZc08wGMiDYJBsLGBM7JwXM4cZJmbWLzIR/pXg1kkrBBVpxTOwfUg==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz", - "integrity": "sha512-qGTc7QZC801kbYjAr4AgdOfnokpwStqyhSbiQvqGBLixniAKyH+ib2qXIVo4P9NgGzwyfD9I0nlJN7D91E1VpQ==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.6.tgz", + "integrity": "sha512-Z7TgPoeYUm06smfEfYF0RBkpF8csMyVnqQbLYiGgmUSTaSXTP57bt8f0UFXstbGxKIreTwQCujtaH0LY9w9B+A==", "dev": true, "requires": { - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/visitor-keys": "5.30.5", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/visitor-keys": "5.30.6", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -15522,15 +15700,15 @@ } }, "@typescript-eslint/utils": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.5.tgz", - "integrity": "sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.30.6.tgz", + "integrity": "sha512-xFBLc/esUbLOJLk9jKv0E9gD/OH966M40aY9jJ8GiqpSkP2xOV908cokJqqhVd85WoIvHVHYXxSFE4cCSDzVvA==", "dev": true, "requires": { "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.30.5", - "@typescript-eslint/types": "5.30.5", - "@typescript-eslint/typescript-estree": "5.30.5", + "@typescript-eslint/scope-manager": "5.30.6", + "@typescript-eslint/types": "5.30.6", + "@typescript-eslint/typescript-estree": "5.30.6", "eslint-scope": "^5.1.1", "eslint-utils": "^3.0.0" }, @@ -15554,12 +15732,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "5.30.5", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.5.tgz", - "integrity": "sha512-D+xtGo9HUMELzWIUqcQc0p2PO4NyvTrgIOK/VnSH083+8sq0tiLozNRKuLarwHYGRuA6TVBQSuuLwJUDWd3aaA==", + "version": "5.30.6", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.6.tgz", + "integrity": "sha512-41OiCjdL2mCaSDi2SvYbzFLlqqlm5v1ZW9Ym55wXKL/Rx6OOB1IbuFGo71Fj6Xy90gJDFTlgOS+vbmtGHPTQQA==", "dev": true, "requires": { - "@typescript-eslint/types": "5.30.5", + "@typescript-eslint/types": "5.30.6", "eslint-visitor-keys": "^3.3.0" }, "dependencies": { @@ -15742,9 +15920,9 @@ } }, "acorn": { - "version": "6.4.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", - "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==", + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true, "peer": true }, @@ -16534,6 +16712,11 @@ "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz", "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==" }, + "commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" + }, "commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", @@ -17824,11 +18007,6 @@ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==" }, - "is-stream": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", - "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==" - }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -18781,6 +18959,11 @@ "call-bind": "^1.0.2" } }, + "is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==" + }, "is-string": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", @@ -21435,6 +21618,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-loader-spinner": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-5.1.5.tgz", + "integrity": "sha512-kHSBa3pNPNzd3UGOiOsHCC33qx5bZA7IHKau+YSTVn36Jib4eBVx/TNMggudbzW5CTnRCbP5bnYU4ACAX3mA6g==", + "requires": {} + }, "readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -22845,13 +23034,6 @@ "interpret": "^2.2.0", "rechoir": "^0.7.0", "webpack-merge": "^5.7.3" - }, - "dependencies": { - "commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==" - } } }, "webpack-dev-middleware": { @@ -23101,6 +23283,12 @@ "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==", "dev": true }, + "y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -23120,14 +23308,6 @@ "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.0.0" - }, - "dependencies": { - "y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "dev": true - } } }, "yargs-parser": { diff --git a/package.json b/package.json index 486ce06e..182ebc83 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-loader-spinner": "^5.1.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" diff --git a/src/components/About.jsx b/src/components/About.jsx index a34ea7a4..97709b13 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,15 +1,24 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; import '../styles/components/About.styl'; -function About() { +function About({ loading, about }) { return (
- About -
    -
  • -
  • -
  • -
+

Acerca de mi:

+ {!loading ? ( +
    + {about.map((abt, idx) => ( +
  • + {abt} +
    • + ))} +
+ ) : ( +
+ +
+ )}
); } diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index 4706c0f9..76baf6d1 100644 --- a/src/components/Academic.jsx +++ b/src/components/Academic.jsx @@ -1,16 +1,31 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import DecoratorContainer from './DecoratorContainer'; import '../styles/components/Academic.styl'; -function Academic() { +function Academic({ academics, loading }) { return ( -
- About -
    -
  • -
  • -
  • -
-
+ +

Academico 🎓

+ + {!loading ? ( +
    + {academics.map((acd) => ( +
  • +

    {acd.organism}

    +

    + Estudie: + {acd.career} +

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + ); } diff --git a/src/components/DecoratorContainer.jsx b/src/components/DecoratorContainer.jsx new file mode 100644 index 00000000..542d6822 --- /dev/null +++ b/src/components/DecoratorContainer.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import SvgArrowPaper from './SvgArrowPaper'; +import '../styles/components/DecoratorContainer.styl'; + +function DecoratorContainer({ children }) { + return ( +
+ + {children} +
+ ); +} + +export default DecoratorContainer; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 998b1aea..87392fb2 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,16 +1,41 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import DecoratorContainer from './DecoratorContainer'; import '../styles/components/Experience.styl'; -function Experience() { +function Experience({ experiences, loading }) { return ( -
- About -
    -
  • -
  • -
  • -
-
+ +

Experiencia 🆙

+ + {!loading ? ( +
    + {experiences.map((exp, idx) => ( +
  • +

    {exp.title}

    +

    + Posicion: + {exp.position} +

    +

    + year: + {exp.year} +

    +

    + tools: + {exp.tools.join(' - ')} +

    +
    • + ))} +
+ ) : ( +
+

adadasd

+ + +
+ )} + ); } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 918a140a..aea74c14 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -2,25 +2,40 @@ import React from 'react'; import { useTheme } from '../hooks/useTheme'; import '../styles/components/Header.styl'; -function Header({ children }) { +function Header({ myself, children }) { const [theme, changeTheme] = useTheme(); + console.log(myself); + const { image, name, position, phone, email, web, city, country } = myself; + return (
- + {name}
changeTheme(!theme)} type='checkbox' value={theme} /> -

Rafael Livise Livise

-

Header-job-title

+

{name}

+

{position}

-

+00-000000

-

Header@email

-

header.com

-

Header-job-title

+

+ Celular: + {phone} +

+

+ Correo: + {email} +

+ +

+ Web: + {web} +

+

+ {`${city} - ${country}`} +

{children}
diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index 08f4111f..ab1a1f1e 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -1,16 +1,26 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; import '../styles/components/Interest.styl'; +import DecoratorContainer from './DecoratorContainer'; -function Interest() { +function Interest({ interests, loading }) { return ( -
- About -
    -
  • -
  • -
  • -
-
+ +

Intereses 👍

+ {!loading ? ( +
    + {interests.map((interest) => ( +
  • +

    {interest}

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + ); } diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index 31057ff8..e3dc1e30 100644 --- a/src/components/Languages.jsx +++ b/src/components/Languages.jsx @@ -1,16 +1,30 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; import '../styles/components/Languages.styl'; +import DecoratorContainer from './DecoratorContainer'; -function Languages() { +function Languages({ languages, loading }) { return ( -
- About -
    -
  • -
  • -
  • -
-
+ +

Idiomas 🗣️

+ {!loading ? ( +
    + {languages.map((acd) => ( +
  • +

    {acd.title}

    +

    + Estudie: + {acd.level} +

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + ); } diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index dd75617b..439e81e0 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -1,12 +1,24 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; import '../styles/components/Profile.styl'; +import DecoratorContainer from './DecoratorContainer'; -function Profile() { +function Profile({ profile, loading }) { return ( -
-

Profile

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam temporibus debitis ducimus voluptates repudiandae harum laudantium beatae consequatur, veniam ab esse accusantium labore vero! Magnam cumque itaque optio ex vitae!

-
+ +

Perfil 👤

+ {!loading ? ( + profile.map((prf, idx) => ( +

+ {prf.description} +

+ )) + ) : ( +
+ +
+ )} + ); } diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index d82c3099..44014b6c 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,16 +1,26 @@ import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; import '../styles/components/Skills.styl'; +import DecoratorContainer from './DecoratorContainer'; -function Skills() { +function Skills({ skills, loading }) { return ( -
- About -
    -
  • -
  • -
  • -
-
+ +

Habilidades 💪

+ {!loading ? ( +
    + {skills.map((sk) => ( +
  • +

    {sk}

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + ); } diff --git a/src/components/SvgArrowPaper.jsx b/src/components/SvgArrowPaper.jsx new file mode 100644 index 00000000..37bb56dc --- /dev/null +++ b/src/components/SvgArrowPaper.jsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +function SvgArrowPaper(props) { + return ( + + + + + ); +} + +export default SvgArrowPaper; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 444cdd43..b681820d 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,5 +1,5 @@ -import React from 'react'; -import '../styles/components/App.styl'; +import React, { useEffect, useState } from 'react'; +import getData from '../utils/getData'; import Layout from '../components/Layout'; import Header from '../components/Header'; import About from '../components/About'; @@ -9,19 +9,41 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; +import '../styles/components/App.styl'; + +const initState = { + myself: { image: '', name: '', position: '', phone: '', email: '', web: '', city: '', country: '' }, + about: [], + profile: [], + experiences: [], + academics: [], + skills: [], + intereses: [], + languages: [], +}; function App() { + const [myself, setMyself] = useState(initState); + const [loading, setLoading] = useState(false); + useEffect(() => { + setLoading(true); + const URL = process.env.REACT_APP_API_URL; + getData(URL).then((res) => { + setMyself(res); + setLoading(false); + }); + }, []); return ( -
- +
+
- - - - - - + + + + + + ); } diff --git a/src/styles/_vars.css b/src/styles/_vars.css index b9a345f8..0c412d06 100644 --- a/src/styles/_vars.css +++ b/src/styles/_vars.css @@ -1,3 +1,14 @@ +:root{ + --size-title: 2em +} + +ul{ + list-style-type: square; +} + +.center div{ + justify-content: center; +} .material-theme { --md-sys-color-primary-light: #1360a8; --md-sys-color-on-primary-light: #ffffff; diff --git a/src/styles/components/Academic.styl b/src/styles/components/Academic.styl index 8f7e2f28..28aab76f 100644 --- a/src/styles/components/Academic.styl +++ b/src/styles/components/Academic.styl @@ -1,8 +1,8 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Academic - &-title + title-base() &-item - font-size: 16px + color var(--md-sys-color-on-surface) diff --git a/src/styles/components/DecoratorContainer.styl b/src/styles/components/DecoratorContainer.styl new file mode 100644 index 00000000..b1ecbfc1 --- /dev/null +++ b/src/styles/components/DecoratorContainer.styl @@ -0,0 +1,19 @@ +@import "../_vars.css"; +@import '../mixins.styl'; + +.DecoratorContainer + position relative; + container-base() + &-svg-arrow + position absolute + transform scale(0.35); + top -15px + left -81.5px + & path:nth-child(1) + stroke-width:2px + fill: var(--md-sys-color-on-tertiary-container) + + & path:nth-child(2) + fill: var(--md-sys-color-tertiary-container) + stroke: var(--md-sys-color-on-tertiary-container) + stroke-width:5px \ No newline at end of file diff --git a/src/styles/components/Experience.styl b/src/styles/components/Experience.styl index ba9a15c8..533116e4 100644 --- a/src/styles/components/Experience.styl +++ b/src/styles/components/Experience.styl @@ -1,8 +1,12 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Experience &-title - + title-base() + &-container + display: grid + grid-template-columns:repeat(3,1fr) &-item + color: var(--md-sys-color-on-surface) font-size: 16px diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl index 9223f2f1..a36d00b0 100644 --- a/src/styles/components/Header.styl +++ b/src/styles/components/Header.styl @@ -1,17 +1,23 @@ @import "../_vars.css"; - +@import '../mixins.styl'; .Header --dimention-image: 300px display: grid grid-template-columns: var(--dimention-image) auto gap: 50px + container-base() + padding-top 2em + color: var(--md-sys-color-on-surface) &-image width: var(--dimention-image) height: var(--dimention-image) - border-radius: var(--dimention-image) - background-color: var(--md-sys-color-primary) margin: 0 + & img + width: var(--dimention-image) + height: var(--dimention-image) + border-radius: var(--dimention-image) + background-color: var(--md-sys-color-primary) &-title color: var(--md-sys-color-primary) @@ -31,16 +37,13 @@ @media screen and (max-width: 900px) .Header - --dimention-image: 200px + --dimention-image 200px + grid-template-columns: repeat(2, 1fr) &-body grid-template-columns: 1fr @media screen and (max-width: 600px) .Header - --dimention-image: 300px + --dimention-image 300px grid-template-columns: 1fr - grid-template-rows: var(--dimention-image) auto - - - - + grid-template-rows: var(--dimention-image) auto \ No newline at end of file diff --git a/src/styles/components/Interest.styl b/src/styles/components/Interest.styl index ceca3998..ad0e71c5 100644 --- a/src/styles/components/Interest.styl +++ b/src/styles/components/Interest.styl @@ -1,8 +1,9 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Interest &-title - + title-base() &-item + color var(--md-sys-color-on-surface) font-size: 16px diff --git a/src/styles/components/Languages.styl b/src/styles/components/Languages.styl index d01025d1..26f6812a 100644 --- a/src/styles/components/Languages.styl +++ b/src/styles/components/Languages.styl @@ -1,8 +1,9 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Languages &-title - + title-base() &-item + color var(--md-sys-color-on-surface) font-size: 16px diff --git a/src/styles/components/Layout.styl b/src/styles/components/Layout.styl index e4c722e2..90b13b91 100644 --- a/src/styles/components/Layout.styl +++ b/src/styles/components/Layout.styl @@ -1,21 +1,16 @@ .Layout display: grid grid-template-columns: repeat(2,1fr) - grid-template-rows: repeat(5,1fr) + grid-template-rows: repeat(5,auto) grid-template-areas: "Header Header" "Profile Profile" "Experience Experience" "Academic Skills" "Interest Languages" gap: 50px margin: 30px & >:nth-child(n) - padding: 2em background-color: var(--md-sys-color-background) - color: var(--md-sys-color-secondary) - box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); - -webkit-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); - -moz-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + & >:nth-child(1) background-color: var(--md-sys-color-primary-container) - color: var(--md-sys-color-primary) grid-area: Header & >:nth-child(2) diff --git a/src/styles/components/Profile.styl b/src/styles/components/Profile.styl index 2d0a095f..9f469919 100644 --- a/src/styles/components/Profile.styl +++ b/src/styles/components/Profile.styl @@ -1,8 +1,8 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Profile - &-title - + title-base() &-desc + color var(--md-sys-color-on-surface) font-size: 16px diff --git a/src/styles/components/Skills.styl b/src/styles/components/Skills.styl index eec58181..d67040ac 100644 --- a/src/styles/components/Skills.styl +++ b/src/styles/components/Skills.styl @@ -1,8 +1,9 @@ @import "../_vars.css"; - +@import "../mixins.styl"; .Skills &-title - + title-base() &-item + color var(--md-sys-color-on-surface) font-size: 16px diff --git a/src/styles/mixins.styl b/src/styles/mixins.styl new file mode 100644 index 00000000..f5284aec --- /dev/null +++ b/src/styles/mixins.styl @@ -0,0 +1,11 @@ +container-base() + padding: 1em 2em + padding-left 3em + color: var(--md-sys-color-secondary) + box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + -webkit-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + -moz-box-shadow: 3px 3px 7px 3px rgba(0,0,0,0.39); + +title-base() + font-size: var(--size-title) + margin: 0.5em 0 0.75em \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..cfef2f25 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,7 @@ + +const getData = async (url) => { + const res = await fetch(url); + return res.json(); +}; + +export default getData; From 44422bcad4299b74d2384aefce38b2214775ecd6 Mon Sep 17 00:00:00 2001 From: Rafael Livise Date: Fri, 15 Jul 2022 13:26:58 -0500 Subject: [PATCH 12/12] fix: [ADD] weback config dot env --- package-lock.json | 52 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + webpack.config.js | 2 ++ 3 files changed, 55 insertions(+) diff --git a/package-lock.json b/package-lock.json index b331055f..fd5cdd50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@babel/preset-env": "7.18.6", "@babel/preset-react": "7.18.6", "babel-loader": "8.2.5", + "dotenv-webpack": "^8.0.0", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.6", "html-loader": "3.1.2", @@ -5183,6 +5184,36 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "engines": { + "node": ">=10" + } + }, + "node_modules/dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dependencies": { + "dotenv": "^8.2.0" + } + }, + "node_modules/dotenv-webpack": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.0.tgz", + "integrity": "sha512-vsWj11yWbIxLUPcQDbifCGW1+Mp03XfApFHJTC+/Ag9g3D/AnxoaVZcp76LpuBmReRwIJ+YO1fVdhmpzh+LL1A==", + "dependencies": { + "dotenv-defaults": "^2.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "webpack": "^4 || ^5" + } + }, "node_modules/duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", @@ -17229,6 +17260,27 @@ "is-obj": "^2.0.0" } }, + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==" + }, + "dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "requires": { + "dotenv": "^8.2.0" + } + }, + "dotenv-webpack": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.0.0.tgz", + "integrity": "sha512-vsWj11yWbIxLUPcQDbifCGW1+Mp03XfApFHJTC+/Ag9g3D/AnxoaVZcp76LpuBmReRwIJ+YO1fVdhmpzh+LL1A==", + "requires": { + "dotenv-defaults": "^2.0.2" + } + }, "duplexer3": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", diff --git a/package.json b/package.json index 182ebc83..c9952e88 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@babel/preset-env": "7.18.6", "@babel/preset-react": "7.18.6", "babel-loader": "8.2.5", + "dotenv-webpack": "^8.0.0", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.6", "html-loader": "3.1.2", diff --git a/webpack.config.js b/webpack.config.js index f05a5c0e..65065d9d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const Dotenv = require('dotenv-webpack'); module.exports = { entry: './src/index.js', @@ -48,5 +49,6 @@ module.exports = { new MiniCssExtractPlugin({ filename: 'assets/[name].css', }), + new Dotenv(), ], };