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/.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..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", @@ -20,12 +21,13 @@ "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" }, "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 +107,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", @@ -2939,14 +2981,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.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/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" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -2954,12 +3097,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" @@ -2970,13 +3121,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", @@ -3012,15 +3163,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" }, @@ -3058,12 +3209,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": { @@ -3270,9 +3421,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": { @@ -3571,27 +3722,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", @@ -4365,6 +4495,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", @@ -5046,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", @@ -5748,7 +5916,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 +5925,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", @@ -6118,17 +6277,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", @@ -7454,6 +7602,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", @@ -10996,6 +11155,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", @@ -12835,14 +13003,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", @@ -13272,6 +13432,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", @@ -13304,15 +13473,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": { @@ -13360,6 +13520,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", @@ -15440,30 +15629,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", @@ -15483,15 +15731,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" }, @@ -15515,12 +15763,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": { @@ -15703,9 +15951,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 }, @@ -15917,20 +16165,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", @@ -16509,6 +16743,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", @@ -17021,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", @@ -17697,20 +17957,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": { @@ -17807,11 +18059,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", @@ -18764,6 +19011,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", @@ -21418,6 +21670,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", @@ -22828,13 +23086,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": { @@ -23084,6 +23335,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", @@ -23103,14 +23360,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 d56de193..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", @@ -29,12 +30,13 @@ "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" }, "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", 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); }); - }); diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..97709b13 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import '../styles/components/About.styl'; + +function About({ loading, about }) { + return ( +
+

Acerca de mi:

+ {!loading ? ( +
    + {about.map((abt, idx) => ( +
  • + {abt} +
    • + ))} +
+ ) : ( +
+ +
+ )} +
+ ); +} + +export default About; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..76baf6d1 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import DecoratorContainer from './DecoratorContainer'; +import '../styles/components/Academic.styl'; + +function Academic({ academics, loading }) { + return ( + +

Academico 🎓

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

    {acd.organism}

    +

    + Estudie: + {acd.career} +

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + + ); +} + +export default Academic; 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 new file mode 100644 index 00000000..87392fb2 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import DecoratorContainer from './DecoratorContainer'; +import '../styles/components/Experience.styl'; + +function Experience({ experiences, loading }) { + return ( + +

Experiencia 🆙

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

    {exp.title}

    +

    + Posicion: + {exp.position} +

    +

    + year: + {exp.year} +

    +

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

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

adadasd

+ + +
+ )} + + ); +} + +export default Experience; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..aea74c14 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { useTheme } from '../hooks/useTheme'; +import '../styles/components/Header.styl'; + +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} /> +

{name}

+

{position}

+
+ +
+

+ Celular: + {phone} +

+

+ Correo: + {email} +

+ +

+ Web: + {web} +

+

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

+
+
{children}
+
+
+ ); +} + +export default Header; diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..ab1a1f1e --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import '../styles/components/Interest.styl'; +import DecoratorContainer from './DecoratorContainer'; + +function Interest({ interests, loading }) { + return ( + +

Intereses 👍

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

    {interest}

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + + ); +} + +export default Interest; diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..e3dc1e30 --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import '../styles/components/Languages.styl'; +import DecoratorContainer from './DecoratorContainer'; + +function Languages({ languages, loading }) { + return ( + +

Idiomas 🗣️

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

    {acd.title}

    +

    + Estudie: + {acd.level} +

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + + ); +} + +export default Languages; 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/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..439e81e0 --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import '../styles/components/Profile.styl'; +import DecoratorContainer from './DecoratorContainer'; + +function Profile({ profile, loading }) { + return ( + +

Perfil 👤

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

+ {prf.description} +

+ )) + ) : ( +
+ +
+ )} + + ); +} + +export default Profile; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..44014b6c --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ThreeDots } from 'react-loader-spinner'; +import '../styles/components/Skills.styl'; +import DecoratorContainer from './DecoratorContainer'; + +function Skills({ skills, loading }) { + return ( + +

Habilidades 💪

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

    {sk}

    +
    • + ))} +
+ ) : ( +
+ +
+ )} + + ); +} + +export default Skills; 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 57224430..b681820d 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,5 +1,6 @@ -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'; import Profile from '../components/Profile'; @@ -8,21 +9,43 @@ 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 App = () => { +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 ( - <> -
- + +
+
- - - - - - - - ) -}; + + + + + + + + ); +} 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/index.js b/src/index.js index 9077e5ff..a97182d2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App from './containers/App'; -ReactDOM.render(, document.getElementById('app')); +const container = document.getElementById('app'); +const root = createRoot(container); // createRoot(container!) if you use TypeScript +root.render(); diff --git a/src/styles/_vars.css b/src/styles/_vars.css new file mode 100644 index 00000000..0c412d06 --- /dev/null +++ b/src/styles/_vars.css @@ -0,0 +1,175 @@ +: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; + --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: #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: #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: #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: #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 { + --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/About.styl b/src/styles/components/About.styl new file mode 100644 index 00000000..7ac0ae34 --- /dev/null +++ b/src/styles/components/About.styl @@ -0,0 +1,8 @@ +@import "../_vars.css" + +.About + + &-title + + &-item + font-size: 16px \ 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..28aab76f --- /dev/null +++ b/src/styles/components/Academic.styl @@ -0,0 +1,8 @@ +@import "../_vars.css"; +@import "../mixins.styl"; +.Academic + &-title + title-base() + + &-item + color var(--md-sys-color-on-surface) diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..d7dd2a21 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,5 @@ +@import "../_vars.css"; + body - background-color blue \ 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/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 new file mode 100644 index 00000000..533116e4 --- /dev/null +++ b/src/styles/components/Experience.styl @@ -0,0 +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 new file mode 100644 index 00000000..a36d00b0 --- /dev/null +++ b/src/styles/components/Header.styl @@ -0,0 +1,49 @@ +@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) + 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) + 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 + grid-template-columns: repeat(2, 1fr) + &-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 \ No newline at end of file diff --git a/src/styles/components/Interest.styl b/src/styles/components/Interest.styl new file mode 100644 index 00000000..ad0e71c5 --- /dev/null +++ b/src/styles/components/Interest.styl @@ -0,0 +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 new file mode 100644 index 00000000..26f6812a --- /dev/null +++ b/src/styles/components/Languages.styl @@ -0,0 +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 new file mode 100644 index 00000000..90b13b91 --- /dev/null +++ b/src/styles/components/Layout.styl @@ -0,0 +1,40 @@ +.Layout + display: grid + grid-template-columns: repeat(2,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) + background-color: var(--md-sys-color-background) + + + & >:nth-child(1) + background-color: var(--md-sys-color-primary-container) + grid-area: Header + + & >:nth-child(2) + grid-area: Profile + + & >:nth-child(3) + grid-area: Experience + + & >: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 + // background-color: var(--md-sys-color-tertiary-container) + color: var(--md-sys-color-tertiary) \ 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..9f469919 --- /dev/null +++ b/src/styles/components/Profile.styl @@ -0,0 +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 new file mode 100644 index 00000000..d67040ac --- /dev/null +++ b/src/styles/components/Skills.styl @@ -0,0 +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; 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(), ], };