From 838b523ebdf8b81a0b92fc0e19b77c03bca79863 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Wed, 17 Jul 2024 19:18:47 -0400 Subject: [PATCH 1/4] Added Page Shell --- package-lock.json | 241 ++++++++++++++++++++++++ package.json | 16 +- src/App.tsx | 3 +- src/Components/Home/Content/content.css | 57 ++++++ src/Components/Home/Content/content.tsx | 18 ++ 5 files changed, 327 insertions(+), 8 deletions(-) create mode 100644 src/Components/Home/Content/content.css create mode 100644 src/Components/Home/Content/content.tsx diff --git a/package-lock.json b/package-lock.json index 82f3a20..56913e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,8 @@ "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "react-scripts": "5.0.1", + "react-typical": "^0.1.3", + "styled-components": "^6.1.12", "typescript": "^5.5.3", "web-vitals": "^2.1.4" } @@ -2036,6 +2038,11 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "node_modules/@camwiegert/typical": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@camwiegert/typical/-/typical-0.1.1.tgz", + "integrity": "sha512-4xAtH3F3uJ8boe9IPahdYFCBELmyOBwHGAn0rDO6C1rx0TuZb5f4UqfuiOQF7YiMJGCOsUIW7LyucMNnVQYsRg==" + }, "node_modules/@csstools/normalize.css": { "version": "12.1.1", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz", @@ -2306,6 +2313,24 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -4503,6 +4528,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -5985,6 +6015,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6412,6 +6450,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -6553,6 +6599,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -15225,6 +15281,23 @@ } } }, + "node_modules/react-typical": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/react-typical/-/react-typical-0.1.3.tgz", + "integrity": "sha512-VynIYVQvAZ1Nco4C+QNEqR17STGK/xw6Dc1zNj/LuYm8fISw1Qp3q9n3hv6O3iQDLD0OWwdWKHun5oj6mCMB4A==", + "dependencies": { + "@camwiegert/typical": "^0.1.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "prop-types": "^15.5.4", + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16022,6 +16095,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -16592,6 +16670,65 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.1.12", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz", + "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -16607,6 +16744,11 @@ "postcss": "^8.2.15" } }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -19795,6 +19937,11 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "@camwiegert/typical": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@camwiegert/typical/-/typical-0.1.1.tgz", + "integrity": "sha512-4xAtH3F3uJ8boe9IPahdYFCBELmyOBwHGAn0rDO6C1rx0TuZb5f4UqfuiOQF7YiMJGCOsUIW7LyucMNnVQYsRg==" + }, "@csstools/normalize.css": { "version": "12.1.1", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz", @@ -19921,6 +20068,24 @@ "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "requires": { + "@emotion/memoize": "^0.8.1" + } + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -21556,6 +21721,11 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "@types/testing-library__jest-dom": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz", @@ -22632,6 +22802,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -22947,6 +23122,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz", @@ -23019,6 +23199,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -29054,6 +29244,14 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-typical": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/react-typical/-/react-typical-0.1.3.tgz", + "integrity": "sha512-VynIYVQvAZ1Nco4C+QNEqR17STGK/xw6Dc1zNj/LuYm8fISw1Qp3q9n3hv6O3iQDLD0OWwdWKHun5oj6mCMB4A==", + "requires": { + "@camwiegert/typical": "^0.1.1" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -29629,6 +29827,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -30057,6 +30260,39 @@ "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==", "requires": {} }, + "styled-components": { + "version": "6.1.12", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.12.tgz", + "integrity": "sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==", + "requires": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "dependencies": { + "postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "requires": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + } + }, + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -30066,6 +30302,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", diff --git a/package.json b/package.json index 0179379..b7bd6e3 100644 --- a/package.json +++ b/package.json @@ -16,17 +16,19 @@ "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "react-scripts": "5.0.1", + "react-typical": "^0.1.3", + "styled-components": "^6.1.12", "typescript": "^5.5.3", "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "predeploy": "npm run build", - "deploy": "gh-pages -d build", - "test": "react-scripts test", - "eject": "react-scripts eject" -}, + "start": "react-scripts start", + "build": "react-scripts build", + "predeploy": "npm run build", + "deploy": "gh-pages -d build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, "eslintConfig": { "extends": [ "react-app", diff --git a/src/App.tsx b/src/App.tsx index ca3ec31..9bdbdea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,10 @@ import React from 'react'; +import Container from './Components/Home/Content/content'; const App: React.FC = () => { return (
-

Hello, world!

+
); } diff --git a/src/Components/Home/Content/content.css b/src/Components/Home/Content/content.css new file mode 100644 index 0000000..9741a9b --- /dev/null +++ b/src/Components/Home/Content/content.css @@ -0,0 +1,57 @@ +.ContentContainer { + display: flex; + flex-direction: column; + height: 100vh; + background-color: #f9fbf7; + color: #1c2211; + overflow: hidden; + } + + @media (min-width: 768px) { + .ContentContainer { + flex-direction: row; + } + } + + .LeftContainer { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 120px 40px 60px 80px; /* top, right, bottom, left */ + } + + @media (max-width: 768px) { + .LeftContainer { + flex: 0 0 25%; + padding-left: 40px; + } + } + + @media (min-width: 768px) { + .LeftContainer { + flex: 0 0 35%; + } + } + + .RightContainer { + flex: 1; + position: relative; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + @media (min-width: 768px) { + .RightContainer { + flex: 0 0 65%; + } + } + + @media (max-width: 768px) { + .RightContainer { + flex: 0 0 75%; + } + } + \ No newline at end of file diff --git a/src/Components/Home/Content/content.tsx b/src/Components/Home/Content/content.tsx new file mode 100644 index 0000000..de116ed --- /dev/null +++ b/src/Components/Home/Content/content.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './content.css'; + +const Content: React.FC = () => { + return ( +
+
+

Hi, I'm Carson

+

I like building cool things.

+
+
+ {/* Add content for the RightContainer if needed */} +
+
+ ); +}; + +export default Content; From 5ef52ec79635726abc903c3ea8e9f361e5701807 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Wed, 17 Jul 2024 19:49:25 -0400 Subject: [PATCH 2/4] Adding MapleStory character Animation for home page - Added 4 standing animation images to `public` - Modified the Content component to have non-empty right component - Implemented animation logic leveraging React's `useState` and `useEffect` hooks - Implemented animation logic to enforce a loop effect as seen in the game --- public/stand1_0.png | Bin 0 -> 7127 bytes public/stand1_1.png | Bin 0 -> 7215 bytes public/stand1_2.png | Bin 0 -> 7199 bytes public/stand1_3.png | Bin 0 -> 7127 bytes src/Components/Home/Content/content.tsx | 29 ++++++++++++++++++++++-- 5 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 public/stand1_0.png create mode 100644 public/stand1_1.png create mode 100644 public/stand1_2.png create mode 100644 public/stand1_3.png diff --git a/public/stand1_0.png b/public/stand1_0.png new file mode 100644 index 0000000000000000000000000000000000000000..73008869c853629180f4a9b3bacfcf24c4cbbe34 GIT binary patch literal 7127 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 JPr_oU{{ie}x@rIb literal 0 HcmV?d00001 diff --git a/public/stand1_1.png b/public/stand1_1.png new file mode 100644 index 0000000000000000000000000000000000000000..27a98d8d5b93a95dd39a76d1d6c36cd7d865d2c2 GIT binary patch literal 7215 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 literal 0 HcmV?d00001 diff --git a/public/stand1_2.png b/public/stand1_2.png new file mode 100644 index 0000000000000000000000000000000000000000..a6c24cfaa4a6fa41e87740793e19bb466d16b543 GIT binary patch literal 7199 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 Ay#N3J literal 0 HcmV?d00001 diff --git a/public/stand1_3.png b/public/stand1_3.png new file mode 100644 index 0000000000000000000000000000000000000000..b32ad5394a890ac114d43f32549206ca2879548c GIT binary patch literal 7127 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%0DA?Fu}-!W;G zNti^fXZLL&uX-7v;x{0C+k$4`c|3P1gfo>k#%Plb4vOSmpYeJaj3oGM+ByX08bM&d2s3b@For0mXGn67Oy9TZj87+77h2;_fnp2T*N}gBXN$8S zk(E8F_JR4v#4c`o?E-)P+N(mnfec)c35eEJ746~ zWQI>4l_&T2#8jlZt?@M_-kFah{+uwhkb~-&!Ic}|^qd=c@%$BAeaBtH zJPqY^ma{=q)bgIZeX`AltpA}d5Y_I<;IgXt*HNQ+WeXY{Bu+deLAA+jp6pDw`d9gF z;_(8mltpV|zHu+Akz{%4s9xaxteb4{J97iI%b(K@J$|RUR%$<*x!x(CE1eWBZoAEI zYv<1UCDvT%$1$0mfZ{2XN(*mzn$y^K#*mp+DlT{u#iip_HwGV}L~wVuG=8g8;=c}A zqS0s=<}Hxncgse{D`#_$79=w4N89`!4kl@<-7*10cpfIRroXtjnDGAiZw3u`$-%F2ej}=B3=Z}7$F6x z-m0p!k#jtD%6~MFtUogR$rCqs_c(E>{V3;cKpijsHqq!kH?xCUv($yi*1_@fOb}B9 z!2-%CkRCW@4q&?_}ta7a-}&=zfmj zPT{Ve?%;LOGdVdq1zc_Y{Ms58ETm%22WT3sGMk+rk(~?Hj5!#yohU7?b6eNwY)#Me zfg>YP(o`Hm)F8+#<|<|`Xw}k(UzWlq6zqZ_haSTF>-S@FPyyb8#fBeGa8}Lc8qocZ zEX3&Y)U|yVDdQP$2c91pc@b@+85xO5OiFm!7)C-PmKE#bZ79<=ltb-YoMa`&XPe<# zEPrx8qWxCKFI$1UD+3as2VVT46F7vczL5kgf?&C_2W}w_R?j*=_f+{SS=2CVWJx4V zu>{&732e)sU(PnGF|HydSG2!RK7Dy-^!9L@Y+wYLm_(x~K6D36lnqc^?;{d=Y_2fc z9=CH52M*Pt-0Le+H~82Y1KJ%IaK+`VT4`oOF%8(Ho0#CZg;b!*^xpFLtpVV<`RU=d zAgvoCgLolaPqTQ19S=(BBUB{_?9)7xjAPXKq;$U+C2f5v;E%}fEhn0I&G zGFe=>y6VRgPrP`KlhZNmo)6s}tjJ$CdTvWN&Wxh{jTJk5@?(d z1B7Jzm?tyGr^{QOygsw}VOJ^rdGmO!y7t-;;}mS+_(On_qJrCgOFl1b=!3F8L^M!8 z#GXgagznh6{+U&P2!7Bg?;+(uB6Owv*agPwF_|nVv6BI!l1K<($OPr2U1eqn&+K6w zlg7$`3}|FZThQ^~;)xx(QGvRlp?fK>KS*XNK;nz^sIIQAwxH@}J}eUfj60%UH=k>t zIL@BBx!IT(&*tWX|6s19lF8CSZ#icDM?JYkXFU;#L}l2YAf~?D*iF!SPJQ2c7o&2U zWyccx0NrPHNCmsNu+SA7K9lNClcMS!8hD886*YCE`RQn0&ZOX@9Pj5vg= zI_=sd=O14+cfjaYVUgC~xu7kdtDfzSwnAbVj*S6mFw4fbw4z>WP0U#!&WJY~YD7Nz zpMC&?Z|C&3WXmy0BF2@9HI{GU{w}m*`A0RZF62_%=mzKBoV?I>f=JIgQbv4 zWv|d4y$$@Xq8=JcRdAL$ zsBwM6ln>Q?VsMZfK3ytloR_S3^Gy4?FviBI02l}w9^>!#&wU=T9}yTRF?$_v)MWbc z^ZMF@fksJb^tS=MZ3fhG@;eS%4*bMna>V!27}>`_DyUBBH<%(ESmRb8fCKd!r!xAsFX< zknkwzzH`pNCUOD}*x(d?KE??X9i9-5Aw?!QZHNA_-Nhw_6p23)0la{@I6FH#056gv z6B1*HgbyD94;NQA;CVaL%i;g7-}}iMocFpwU7;V&2q(ng!%4s?C&KZO|9etIWK=jA zM*`k`5(;M*7iaLN0S7J$Ao-M2Ap4#7e&QLf&U^QL;uZ*S6Sq%+wbvO6_~*ZEaf%>P z2smPR#0QooM1COP_auM|F3v8lj?PfWy-=Hj}?)x{O!>bf@=Sc;D%h1 { + const [currentIndex, setCurrentIndex] = useState(0); + const [direction, setDirection] = useState(1); + const imageNames = ['stand1_0.png', 'stand1_1.png', 'stand1_2.png', 'stand1_3.png']; + const totalImages = imageNames.length; + + useEffect(() => { + const interval = setInterval(() => { + setCurrentIndex((prevIndex) => { + let nextIndex = prevIndex + direction; + + if (nextIndex >= totalImages) { + nextIndex = totalImages - 2; + setDirection(-1); + } else if (nextIndex < 0) { + nextIndex = 1; + setDirection(1); + } + + return nextIndex; + }); + }, 500); + + return () => clearInterval(interval); + }, [totalImages, direction]); + return (
@@ -9,7 +34,7 @@ const Content: React.FC = () => {

I like building cool things.

- {/* Add content for the RightContainer if needed */} + {`stand1_${currentIndex}.png`}
); From fada590aed86755f0636fb304411a7d3aa084b3c Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Wed, 17 Jul 2024 19:59:56 -0400 Subject: [PATCH 3/4] Added Hover image differentiation - When hovering the animation, the image changes to a different sprite --- public/hover_stand1_0.png | Bin 0 -> 6962 bytes public/hover_stand1_1.png | Bin 0 -> 7053 bytes public/hover_stand1_2.png | Bin 0 -> 7036 bytes public/hover_stand1_3.png | Bin 0 -> 6963 bytes src/Components/Home/Content/content.tsx | 26 ++++++++++++++++++++---- 5 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 public/hover_stand1_0.png create mode 100644 public/hover_stand1_1.png create mode 100644 public/hover_stand1_2.png create mode 100644 public/hover_stand1_3.png diff --git a/public/hover_stand1_0.png b/public/hover_stand1_0.png new file mode 100644 index 0000000000000000000000000000000000000000..fbfe60f5d92309fc63922058395598f5e87e8dc0 GIT binary patch literal 6962 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 KBvA>3tp5ch_=8RW literal 0 HcmV?d00001 diff --git a/public/hover_stand1_3.png b/public/hover_stand1_3.png new file mode 100644 index 0000000000000000000000000000000000000000..c1c825dbed482d028398b0cb636b543bde5871f7 GIT binary patch literal 6963 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 XxNm?jJQi9?#AYV!hOR9HLe_r+Nc@A% literal 0 HcmV?d00001 diff --git a/src/Components/Home/Content/content.tsx b/src/Components/Home/Content/content.tsx index 0c3b08a..00fce75 100644 --- a/src/Components/Home/Content/content.tsx +++ b/src/Components/Home/Content/content.tsx @@ -4,7 +4,9 @@ import './content.css'; const Content: React.FC = () => { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); + const [hoverIndex, setHoverIndex] = useState(0); const imageNames = ['stand1_0.png', 'stand1_1.png', 'stand1_2.png', 'stand1_3.png']; + const hoverImageNames = ['hover_stand1_0.png', 'hover_stand1_1.png', 'hover_stand1_2.png', 'hover_stand1_3.png']; const totalImages = imageNames.length; useEffect(() => { @@ -22,10 +24,18 @@ const Content: React.FC = () => { return nextIndex; }); - }, 500); + }, 500); // Interval time in milliseconds - return () => clearInterval(interval); - }, [totalImages, direction]); + return () => clearInterval(interval); // Cleanup interval on component unmount + }, [totalImages, direction]); // Dependencies for useEffect + + const handleMouseEnter = (index: number) => { + setHoverIndex(index); + }; + + const handleMouseLeave = () => { + setHoverIndex(0); // Reset to default image when not hovered + }; return (
@@ -34,7 +44,15 @@ const Content: React.FC = () => {

I like building cool things.

- {`stand1_${currentIndex}.png`} + {`stand1_${currentIndex}.png`} handleMouseEnter(currentIndex + 1)} + onMouseLeave={handleMouseLeave} + width="200" + />
); From 89bf82829b90182dffb29a79a0f5103445634444 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Wed, 17 Jul 2024 20:18:56 -0400 Subject: [PATCH 4/4] Fix on-hover animation freezing - Updated animation logic for simulateneous animations to work - Hovering image now triggers the on-hover animation without stopping the main animation --- ...over_stand1_0.png => hoverIdleSprite0.png} | Bin ...over_stand1_1.png => hoverIdleSprite1.png} | Bin ...over_stand1_2.png => hoverIdleSprite2.png} | Bin ...over_stand1_3.png => hoverIdleSprite3.png} | Bin public/{stand1_0.png => idleSprite0.png} | Bin public/{stand1_1.png => idleSprite1.png} | Bin public/{stand1_2.png => idleSprite2.png} | Bin public/{stand1_3.png => idleSprite3.png} | Bin src/Components/Home/Content/content.tsx | 53 +++++++++++------- 9 files changed, 32 insertions(+), 21 deletions(-) rename public/{hover_stand1_0.png => hoverIdleSprite0.png} (100%) rename public/{hover_stand1_1.png => hoverIdleSprite1.png} (100%) rename public/{hover_stand1_2.png => hoverIdleSprite2.png} (100%) rename public/{hover_stand1_3.png => hoverIdleSprite3.png} (100%) rename public/{stand1_0.png => idleSprite0.png} (100%) rename public/{stand1_1.png => idleSprite1.png} (100%) rename public/{stand1_2.png => idleSprite2.png} (100%) rename public/{stand1_3.png => idleSprite3.png} (100%) diff --git a/public/hover_stand1_0.png b/public/hoverIdleSprite0.png similarity index 100% rename from public/hover_stand1_0.png rename to public/hoverIdleSprite0.png diff --git a/public/hover_stand1_1.png b/public/hoverIdleSprite1.png similarity index 100% rename from public/hover_stand1_1.png rename to public/hoverIdleSprite1.png diff --git a/public/hover_stand1_2.png b/public/hoverIdleSprite2.png similarity index 100% rename from public/hover_stand1_2.png rename to public/hoverIdleSprite2.png diff --git a/public/hover_stand1_3.png b/public/hoverIdleSprite3.png similarity index 100% rename from public/hover_stand1_3.png rename to public/hoverIdleSprite3.png diff --git a/public/stand1_0.png b/public/idleSprite0.png similarity index 100% rename from public/stand1_0.png rename to public/idleSprite0.png diff --git a/public/stand1_1.png b/public/idleSprite1.png similarity index 100% rename from public/stand1_1.png rename to public/idleSprite1.png diff --git a/public/stand1_2.png b/public/idleSprite2.png similarity index 100% rename from public/stand1_2.png rename to public/idleSprite2.png diff --git a/public/stand1_3.png b/public/idleSprite3.png similarity index 100% rename from public/stand1_3.png rename to public/idleSprite3.png diff --git a/src/Components/Home/Content/content.tsx b/src/Components/Home/Content/content.tsx index 00fce75..f40ba80 100644 --- a/src/Components/Home/Content/content.tsx +++ b/src/Components/Home/Content/content.tsx @@ -4,38 +4,51 @@ import './content.css'; const Content: React.FC = () => { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); - const [hoverIndex, setHoverIndex] = useState(0); - const imageNames = ['stand1_0.png', 'stand1_1.png', 'stand1_2.png', 'stand1_3.png']; - const hoverImageNames = ['hover_stand1_0.png', 'hover_stand1_1.png', 'hover_stand1_2.png', 'hover_stand1_3.png']; + const [hoverIndex, setHoverIndex] = useState(-1); + const imageNames = ['idleSprite0.png', 'idleSprite1.png', 'idleSprite2.png', 'idleSprite3.png']; + const hoverImageNames = ['hoverIdleSprite0.png', 'hoverIdleSprite1.png', 'hoverIdleSprite2.png', 'hoverIdleSprite3.png']; const totalImages = imageNames.length; useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => { let nextIndex = prevIndex + direction; - if (nextIndex >= totalImages) { - nextIndex = totalImages - 2; + nextIndex = totalImages - 1; setDirection(-1); } else if (nextIndex < 0) { - nextIndex = 1; + nextIndex = 0; setDirection(1); } - return nextIndex; }); - }, 500); // Interval time in milliseconds + }, 500); - return () => clearInterval(interval); // Cleanup interval on component unmount - }, [totalImages, direction]); // Dependencies for useEffect + return () => clearInterval(interval); + }, [totalImages, direction]); - const handleMouseEnter = (index: number) => { - setHoverIndex(index); - }; + useEffect(() => { + let hoverInterval: NodeJS.Timeout | null = null; + if (hoverIndex !== -1) { + hoverInterval = setInterval(() => { + setHoverIndex((prevIndex) => { + let nextIndex = prevIndex + direction; + if (nextIndex >= totalImages) { + nextIndex = totalImages - 1; + setDirection(-1); + } else if (nextIndex < 0) { + nextIndex = 0; + setDirection(1); + } + return nextIndex; + }); + }, 500); + } + return () => { if (hoverInterval) clearInterval(hoverInterval); }; + }, [hoverIndex, totalImages, direction]); - const handleMouseLeave = () => { - setHoverIndex(0); // Reset to default image when not hovered - }; + const handleMouseEnter = (index: number) => setHoverIndex(index); + const handleMouseLeave = () => setHoverIndex(-1); return (
@@ -45,11 +58,9 @@ const Content: React.FC = () => {
{`stand1_${currentIndex}.png`} handleMouseEnter(currentIndex + 1)} + src={`${process.env.PUBLIC_URL}/${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`} + alt={`Sprite ${currentIndex}`} + onMouseEnter={() => handleMouseEnter(currentIndex)} onMouseLeave={handleMouseLeave} width="200" />