From db8ec4ebed650db633e72d04ce49282b5f5f93c4 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 07:53:22 -0600 Subject: [PATCH 1/7] Install eslint --- package-lock.json | 103 +++++++++++++++++++++++++--------------------- package.json | 1 + 2 files changed, 56 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 686b133..3fd6814 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "aos": "^2.3.4", + "eslint": "^8.50.0", "firebase": "^9.22.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -24,6 +25,14 @@ "web-vitals": "^2.1.4" } }, + "node_modules/@aashutoshrathi/word-wrap": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", + "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@adobe/css-tools": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz", @@ -2311,21 +2320,21 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.5.1", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz", - "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz", + "integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==", "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, "node_modules/@eslint/eslintrc": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz", - "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", + "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==", "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", - "espree": "^9.5.2", + "espree": "^9.6.0", "globals": "^13.19.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", @@ -2346,9 +2355,9 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.20.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz", - "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==", + "version": "13.22.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz", + "integrity": "sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw==", "dependencies": { "type-fest": "^0.20.2" }, @@ -2382,9 +2391,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz", - "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz", + "integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } @@ -2992,9 +3001,9 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.8", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", - "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==", + "version": "0.11.11", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", + "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==", "dependencies": { "@humanwhocodes/object-schema": "^1.2.1", "debug": "^4.1.1", @@ -5773,9 +5782,9 @@ } }, "node_modules/acorn": { - "version": "8.8.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", - "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", + "version": "8.10.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", + "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", "bin": { "acorn": "bin/acorn" }, @@ -8222,26 +8231,26 @@ } }, "node_modules/eslint": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", - "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz", + "integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.4.0", - "@eslint/eslintrc": "^2.0.3", - "@eslint/js": "8.41.0", - "@humanwhocodes/config-array": "^0.11.8", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.2", + "@eslint/js": "8.50.0", + "@humanwhocodes/config-array": "^0.11.11", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.10.0", + "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", "debug": "^4.3.2", "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.2.0", - "eslint-visitor-keys": "^3.4.1", - "espree": "^9.5.2", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -8251,7 +8260,6 @@ "globals": "^13.19.0", "graphemer": "^1.4.0", "ignore": "^5.2.0", - "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "is-path-inside": "^3.0.3", @@ -8261,9 +8269,8 @@ "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", - "optionator": "^0.9.1", + "optionator": "^0.9.3", "strip-ansi": "^6.0.1", - "strip-json-comments": "^3.1.0", "text-table": "^0.2.0" }, "bin": { @@ -8567,9 +8574,9 @@ } }, "node_modules/eslint-scope": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz", - "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" @@ -8582,9 +8589,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz", - "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, @@ -8816,11 +8823,11 @@ } }, "node_modules/espree": { - "version": "9.5.2", - "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz", - "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==", + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", "dependencies": { - "acorn": "^8.8.0", + "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^3.4.1" }, @@ -13687,16 +13694,16 @@ } }, "node_modules/optionator": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", - "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz", + "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==", "dependencies": { + "@aashutoshrathi/word-wrap": "^1.2.3", "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", - "type-check": "^0.4.0", - "word-wrap": "^1.2.3" + "type-check": "^0.4.0" }, "engines": { "node": ">= 0.8.0" diff --git a/package.json b/package.json index afeb27c..f018c1e 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "aos": "^2.3.4", + "eslint": "^8.50.0", "firebase": "^9.22.1", "react": "^18.2.0", "react-dom": "^18.2.0", From 1f2294ff31d1d119bebd43e309ab146e38afcf95 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 08:01:04 -0600 Subject: [PATCH 2/7] Define the eslint into the GitHub Actions --- .github/workflows/automate-qa.yml | 35 +++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 .github/workflows/automate-qa.yml diff --git a/.github/workflows/automate-qa.yml b/.github/workflows/automate-qa.yml new file mode 100644 index 0000000..b3eedb3 --- /dev/null +++ b/.github/workflows/automate-qa.yml @@ -0,0 +1,35 @@ +name: Lint + +on: + # Trigger the workflow on push or pull request, + # but only for the main branch + push: + branches: + - master + pull_request: + branches: + - master + +jobs: + run-linters: + name: Run linters + runs-on: ubuntu-latest + + steps: + - name: Check out Git repository + uses: actions/checkout@v3 + + - name: Set up Node.js + uses: actions/setup-node@v1 + with: + node-version: 14 + + # ESLint and Prettier must be in `package.json` + - name: Install Node.js dependencies + run: npm ci + + - name: Run linters + uses: wearerequired/lint-action@v2 + with: + eslint: true + prettier: true From 00d1c449378dfe6d1d5d26cbdfb10964c6846149 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 08:11:06 -0600 Subject: [PATCH 3/7] Fix the emotion package --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3fd6814..c973084 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "portfolio2.0", "version": "0.1.0", "dependencies": { - "@emotion/react": "^11.11.0", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.2", @@ -2221,9 +2221,9 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "node_modules/@emotion/react": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz", - "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==", + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", diff --git a/package.json b/package.json index f018c1e..cca95f4 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@emotion/react": "^11.11.0", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.2", From 9f20a5a9e82ac614e24f7457dd060ad68f77c2e1 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 08:12:50 -0600 Subject: [PATCH 4/7] Increase the node version --- .github/workflows/automate-qa.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/automate-qa.yml b/.github/workflows/automate-qa.yml index b3eedb3..156b15c 100644 --- a/.github/workflows/automate-qa.yml +++ b/.github/workflows/automate-qa.yml @@ -22,7 +22,7 @@ jobs: - name: Set up Node.js uses: actions/setup-node@v1 with: - node-version: 14 + node-version: 16 # ESLint and Prettier must be in `package.json` - name: Install Node.js dependencies From 1291b08bfd077f81309a56026f09d8c0323fb174 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 08:15:11 -0600 Subject: [PATCH 5/7] Install prettier --- package-lock.json | 15 +++++++++++++++ package.json | 1 + 2 files changed, 16 insertions(+) diff --git a/package-lock.json b/package-lock.json index c973084..9c53e51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "aos": "^2.3.4", "eslint": "^8.50.0", "firebase": "^9.22.1", + "prettier": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -15209,6 +15210,20 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index cca95f4..2ca7667 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "aos": "^2.3.4", "eslint": "^8.50.0", "firebase": "^9.22.1", + "prettier": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", From 04c43f5d8b50ab7ff917a401a8802cf8c553df23 Mon Sep 17 00:00:00 2001 From: David Leon Date: Tue, 3 Oct 2023 08:18:37 -0600 Subject: [PATCH 6/7] Autofix enable --- .github/workflows/automate-qa.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/automate-qa.yml b/.github/workflows/automate-qa.yml index 156b15c..450ace8 100644 --- a/.github/workflows/automate-qa.yml +++ b/.github/workflows/automate-qa.yml @@ -31,5 +31,6 @@ jobs: - name: Run linters uses: wearerequired/lint-action@v2 with: + auto_fix: true eslint: true prettier: true From a2d6a3736a108bc08ff559eddb1c947051493a3c Mon Sep 17 00:00:00 2001 From: Lint Action Date: Tue, 3 Oct 2023 14:19:54 +0000 Subject: [PATCH 7/7] Fix code style issues with Prettier --- firebase.json | 6 +-- public/index.html | 2 +- src/Aboutme.css | 101 +++++++++++++++++++------------------- src/Aboutme.js | 36 +++++++++----- src/App.css | 26 +++++----- src/App.js | 50 +++++++++++-------- src/App.test.js | 6 +-- src/Footer.css | 39 +++++++-------- src/Footer.js | 47 +++++++++++------- src/Headerbar.css | 48 +++++++++--------- src/Headerbar.js | 16 +++--- src/Logoslider.css | 42 ++++++++-------- src/Logoslider.js | 6 +-- src/Skillset.css | 107 ++++++++++++++++++++--------------------- src/index.css | 11 ++--- src/index.js | 22 ++++----- src/reportWebVitals.js | 4 +- src/setupTests.js | 2 +- 18 files changed, 293 insertions(+), 278 deletions(-) diff --git a/firebase.json b/firebase.json index d9aec3c..f6b7ff0 100644 --- a/firebase.json +++ b/firebase.json @@ -2,11 +2,7 @@ "hosting": { "site": "thanurarukshan", "public": "build", - "ignore": [ - "firebase.json", - "**/.*", - "**/node_modules/**" - ], + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", diff --git a/public/index.html b/public/index.html index e575222..b10f8d7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/src/Aboutme.css b/src/Aboutme.css index 1d01348..db48bf2 100644 --- a/src/Aboutme.css +++ b/src/Aboutme.css @@ -1,73 +1,72 @@ @keyframes grow { - 0% { - scale: 100%; - } - 50% { - scale: 101%; - } - 100% { - scale: 100%; - } + 0% { + scale: 100%; + } + 50% { + scale: 101%; + } + 100% { + scale: 100%; + } } .Aboutme { - color: white; - min-width: 100vw; - min-height: 100vh; - /*background-color: black; */ - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; + color: white; + min-width: 100vw; + min-height: 100vh; + /*background-color: black; */ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } -.Aboutme-aboutme{ - font-size: 80px; +.Aboutme-aboutme { + font-size: 80px; } .Aboutme-dis { - max-width: 1000px; - text-align: justify; - font-size: 20px; + max-width: 1000px; + text-align: justify; + font-size: 20px; } .Aboutme-me { - width: 300px; - animation:grow 2s ease-in-out infinite; + width: 300px; + animation: grow 2s ease-in-out infinite; } .Aboutme-me:hover { - animation-play-state: paused; + animation-play-state: paused; } .Aboutme-edu-edu { - font-size: 40px; + font-size: 40px; } .Aboutme-cv { - color: black; - text-decoration: none; - padding: 20px; - background-color: white; - margin-top: 50px; - border-radius: 200px; - transition: 1s; - font-weight: 600; - user-select: none; - + color: black; + text-decoration: none; + padding: 20px; + background-color: white; + margin-top: 50px; + border-radius: 200px; + transition: 1s; + font-weight: 600; + user-select: none; } .Aboutme-cv:hover { - background-color: aqua; - transition: 1s !important; + background-color: aqua; + transition: 1s !important; } @media (max-width: 1200px) { - .Aboutme-dis { - max-width: 70%; - } - .Aboutme-aboutme { - font-size: 12vw; - } - .Aboutme-dis { - font-size: 16px; - } - .Aboutme-me { - width: 250px; - } -} \ No newline at end of file + .Aboutme-dis { + max-width: 70%; + } + .Aboutme-aboutme { + font-size: 12vw; + } + .Aboutme-dis { + font-size: 16px; + } + .Aboutme-me { + width: 250px; + } +} diff --git a/src/Aboutme.js b/src/Aboutme.js index 82fe7c0..38098c5 100644 --- a/src/Aboutme.js +++ b/src/Aboutme.js @@ -1,13 +1,13 @@ import "./Aboutme.css"; -import React, { useEffect } from 'react'; -import AOS from 'aos'; -import 'aos/dist/aos.css'; -import New from "./assets/New.pdf"; +import React, { useEffect } from "react"; +import AOS from "aos"; +import "aos/dist/aos.css"; +import New from "./assets/New.pdf"; function Aboutme() { const handleDownloadCV = () => { - window.open(New); - } + window.open(New); + }; useEffect(() => { AOS.init(); @@ -15,12 +15,26 @@ function Aboutme() { return (
- - Aboutme - Hey there! I am an engineering undergraduate with an IT background. I am self-motivated and a fun, friendly person who is always willing to try new things. I work well in groups as well as on my own because I like to set goals for myself that I can achieve, and I have good listening and communication skills. - Download CV + + + Aboutme + + + Hey there! I am an engineering undergraduate with an IT background. I am + self-motivated and a fun, friendly person who is always willing to try + new things. I work well in groups as well as on my own because I like to + set goals for myself that I can achieve, and I have good listening and + communication skills. + + + Download CV +
- ) + ); } export default Aboutme; diff --git a/src/App.css b/src/App.css index 01695ab..2759665 100644 --- a/src/App.css +++ b/src/App.css @@ -1,18 +1,16 @@ @font-face { - font-family:"masque" ; + font-family: "masque"; src: url(../public/MASQUE__.ttf); - } @font-face { - font-family:"sans" ; + font-family: "sans"; src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); } - body { background-image: url(../public/flat-mountains.svg); - background-size:cover; - background-attachment: fixed; + background-size: cover; + background-attachment: fixed; display: flex; justify-content: center; align-items: center; @@ -26,7 +24,7 @@ body { justify-content: center; align-items: center; min-height: 100vh; - animation-name:appear; + animation-name: appear; animation-duration: 4s; } @@ -42,8 +40,6 @@ body { .App-name { font-family: "masque"; font-size: 50px; - - } @keyframes appear { from { @@ -107,26 +103,26 @@ body { animation: scroll 2s infinite; } .App-scroll span:nth-child(2) { - animation-delay: -.2s; + animation-delay: -0.2s; } .App-scroll span:nth-child(3) { - animation-delay: -.4s; + animation-delay: -0.4s; } @keyframes scroll { 0% { opacity: 0; - transform: rotate(45deg) translate(-20px,-20px); + transform: rotate(45deg) translate(-20px, -20px); } 50% { opacity: 1; } 100% { opacity: 0; - transform: rotate(45deg) translate(20px,20px); + transform: rotate(45deg) translate(20px, 20px); } } -@media (max-width:1200px) { +@media (max-width: 1200px) { .App-name { font-size: 7vw; } @@ -140,4 +136,4 @@ body { margin-top: 6px; max-width: 80%; } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index e7b2779..cd51a30 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,20 @@ -import React from 'react'; -import './App.css'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import EmailIcon from '@mui/icons-material/Email'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import {useTypewriter, Cursor} from 'react-simple-typewriter'; -import { GitHub } from '@mui/icons-material'; +import React from "react"; +import "./App.css"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import EmailIcon from "@mui/icons-material/Email"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import { useTypewriter, Cursor } from "react-simple-typewriter"; +import { GitHub } from "@mui/icons-material"; function App() { const [text] = useTypewriter({ - words: ['Engineering Undergraduate','Web Developer','App Developer','Graphic Designer'], + words: [ + "Engineering Undergraduate", + "Web Developer", + "App Developer", + "Graphic Designer", + ], loop: {}, }); @@ -31,23 +36,30 @@ function App() { H A N - -
+
# - - {text} - + {text}
diff --git a/src/App.test.js b/src/App.test.js index 1f03afe..9382b9a 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,7 +1,7 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; +import { render, screen } from "@testing-library/react"; +import App from "./App"; -test('renders learn react link', () => { +test("renders learn react link", () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/Footer.css b/src/Footer.css index 399be98..bc06ea3 100644 --- a/src/Footer.css +++ b/src/Footer.css @@ -1,34 +1,31 @@ - .footer-main { - display: flex; - color: white; - background-color: #091d36; - padding: 200px 0px; - justify-content: center; - align-items: center; - min-width: 100vw; - + display: flex; + color: white; + background-color: #091d36; + padding: 200px 0px; + justify-content: center; + align-items: center; + min-width: 100vw; } .footer-main-flex { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - scale: 150%; - + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + scale: 150%; } .footer-main-icons a { - display: inline-flex; - color: white; - margin: 1px; + display: inline-flex; + color: white; + margin: 1px; } .footer-main-icons a:hover { - color:aqua; - transition: 0.5s; + color: aqua; + transition: 0.5s; } .footer-main-flex span { - font-size: 60%; + font-size: 60%; } diff --git a/src/Footer.js b/src/Footer.js index a4b8b1b..be5cbfd 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,29 +1,40 @@ import "./Footer.css"; -import React from 'react'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import EmailIcon from '@mui/icons-material/Email'; +import React from "react"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import EmailIcon from "@mui/icons-material/Email"; import { GitHub } from "@mui/icons-material"; function Footer() { return (
-
-
- - - - - -
- Copyright © 2023 | All Rights Reserved - Thanks for Visit - +
+ + + Copyright © 2023 | All Rights Reserved + + Thanks for Visit +
- ) + ); } -export default Footer \ No newline at end of file +export default Footer; diff --git a/src/Headerbar.css b/src/Headerbar.css index d9de4ce..4514aa3 100644 --- a/src/Headerbar.css +++ b/src/Headerbar.css @@ -1,42 +1,40 @@ @font-face { - font-family:"sans" ; - src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); - } + font-family: "sans"; + src: url(../public/OpenSans-VariableFont_wdth,wght.ttf); +} body { - font-family: sans ; - scroll-behavior: smooth; + font-family: sans; + scroll-behavior: smooth; } .headerbar { - display: flex; - flex-direction: row; - justify-content: center; - padding: 2% 2%; - background-color: white; - color: black; - + display: flex; + flex-direction: row; + justify-content: center; + padding: 2% 2%; + background-color: white; + color: black; } .headerbar a { - text-decoration: none; - color: inherit; - padding: 10px; + text-decoration: none; + color: inherit; + padding: 10px; } .headerbar a:hover { - color: #BF40BF; - transition: 0.5s; + color: #bf40bf; + transition: 0.5s; } .headerbar-main { - - position: sticky; - top: 0px; - z-index: 100; + position: sticky; + top: 0px; + z-index: 100; } @media (orientation: portrait) { - .headerbar { - padding: 6% 4%; - } -} \ No newline at end of file + .headerbar { + padding: 6% 4%; + } +} diff --git a/src/Headerbar.js b/src/Headerbar.js index c6973f8..bdfff8d 100644 --- a/src/Headerbar.js +++ b/src/Headerbar.js @@ -1,9 +1,9 @@ import "./Headerbar.css"; -import React from 'react'; -import FacebookIcon from '@mui/icons-material/Facebook'; -import LinkedInIcon from '@mui/icons-material/LinkedIn'; -import WhatsAppIcon from '@mui/icons-material/WhatsApp'; -import EmailIcon from '@mui/icons-material/Email'; +import React from "react"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import LinkedInIcon from "@mui/icons-material/LinkedIn"; +import WhatsAppIcon from "@mui/icons-material/WhatsApp"; +import EmailIcon from "@mui/icons-material/Email"; function Headerbar() { return ( @@ -12,7 +12,7 @@ function Headerbar() { +
{/*
@@ -21,7 +21,7 @@ function Headerbar() {
*/}
- ) + ); } -export default Headerbar \ No newline at end of file +export default Headerbar; diff --git a/src/Logoslider.css b/src/Logoslider.css index 15ed1c8..019ee10 100644 --- a/src/Logoslider.css +++ b/src/Logoslider.css @@ -1,35 +1,33 @@ .logos { - width: 100vw; - overflow: hidden; - white-space: nowrap; - position: relative; - - + width: 100vw; + overflow: hidden; + white-space: nowrap; + position: relative; } .logo-slider img { - max-height: 100px; - padding: 10px 20px; + max-height: 100px; + padding: 10px 20px; } .logo-slider { - display: inline-block; - white-space: nowrap; - animation: 10s slide linear infinite; - opacity: 50%; + display: inline-block; + white-space: nowrap; + animation: 10s slide linear infinite; + opacity: 50%; } @keyframes slide { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-100%); - } + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-100%); + } } @media (max-width: 1200px) { - .logo-slider img { - max-height: 10vh; - padding: 10px 12px; - } + .logo-slider img { + max-height: 10vh; + padding: 10px 12px; + } } diff --git a/src/Logoslider.js b/src/Logoslider.js index 952c78c..85858e4 100644 --- a/src/Logoslider.js +++ b/src/Logoslider.js @@ -1,5 +1,5 @@ import "./Logoslider.css"; -import React from 'react' +import React from "react"; function Logoslider() { return ( @@ -35,7 +35,7 @@ function Logoslider() { - ) + ); } -export default Logoslider \ No newline at end of file +export default Logoslider; diff --git a/src/Skillset.css b/src/Skillset.css index 7982d08..48fce5a 100644 --- a/src/Skillset.css +++ b/src/Skillset.css @@ -1,83 +1,78 @@ @font-face { - font-family:"masque" ; - src: url(../public/MASQUE__.ttf); + font-family: "masque"; + src: url(../public/MASQUE__.ttf); } .Skillset { - color: black; - background-color: white; - min-width: 100vw; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - + color: black; + background-color: white; + min-width: 100vw; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } .Skillset-skill-name { - font-family: "sans"; - font-size: 80px; + font-family: "sans"; + font-size: 80px; } .Skillset-skill { - display: flex; - align-items: center; - flex-direction: column; + display: flex; + align-items: center; + flex-direction: column; } .Skillset-skill-des { - max-width: 1200px; - display: grid; - grid-template-columns: repeat(3,1fr); + max-width: 1200px; + display: grid; + grid-template-columns: repeat(3, 1fr); } .Skillset-skill-des div { - display: flex; - flex-direction: column; - background-color: #091d36; - background-image: linear-gradient(315deg, #091d36 0%, #37d5d6 90%); - color: white; - margin: 10px; - padding: 30px 40px; - border-radius: 30px; - align-items: center; - justify-content: center; - transition: 1s; + display: flex; + flex-direction: column; + background-color: #091d36; + background-image: linear-gradient(315deg, #091d36 0%, #37d5d6 90%); + color: white; + margin: 10px; + padding: 30px 40px; + border-radius: 30px; + align-items: center; + justify-content: center; + transition: 1s; } .Skillset-skill-des div:hover { - scale: 105%; - transition: 1s; - color: aqua; + scale: 105%; + transition: 1s; + color: aqua; } #title { - font-weight: 600; - font-size: 30px; + font-weight: 600; + font-size: 30px; } -#title-content{ - font-weight: 200; +#title-content { + font-weight: 200; } @media (max-width: 1200px) { - .Skillset-skill-name { - font-size: 12vw; - margin: 20px; - } - .Skillset-skill-des { - display: flex; - flex-direction: column; - max-width: 95%; - } - #title { - font-size: 25px; - } + .Skillset-skill-name { + font-size: 12vw; + margin: 20px; + } + .Skillset-skill-des { + display: flex; + flex-direction: column; + max-width: 95%; + } + #title { + font-size: 25px; + } - #title-content { - font-size: 15px; - } + #title-content { + font-size: 15px; + } } - - - - diff --git a/src/index.css b/src/index.css index a610412..22a6b2c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,18 +1,17 @@ -html{ +html { scroll-behavior: smooth; } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - scroll-behavior:smooth; + scroll-behavior: smooth; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } - diff --git a/src/index.js b/src/index.js index 710b2c5..fbd246b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,20 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; -import Aboutme from './Aboutme'; -import Skillset from './Skillset'; -import Footer from './Footer'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import Aboutme from "./Aboutme"; +import Skillset from "./Skillset"; +import Footer from "./Footer"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( -