- What I Do:
+
From ab8ce14b92e5eda3b901342bdfcc6388f4999973 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 3 Jun 2022 15:35:49 -0500
Subject: [PATCH 2/7] refactored navbar for drawer
---
src/App.js | 8 +---
src/components/Navbar.js | 93 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 95 insertions(+), 6 deletions(-)
create mode 100644 src/components/Navbar.js
diff --git a/src/App.js b/src/App.js
index a1eb25f..3349830 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import Projects from './pages/Projects';
import Technologies from './pages/Technologies';
import Links from './pages/Links';
import CreativeWorks from './pages/CreativeWorks';
+import Navbar from './components/Navbar';
function App() {
return (
@@ -23,14 +24,9 @@ function App() {
*/}
-
- Mikayla Dobson
-
-
+
+ Mikayla Dobson
+ setOpen(false)}>
+
+
+ )
+}
\ No newline at end of file
From 4c6083634b4a0510d25324b60679fa8d4d6578c6 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 3 Jun 2022 16:35:27 -0500
Subject: [PATCH 3/7] working on rebuilding some components
---
package-lock.json | 516 +++++++++++++++++++++++++++++++++++++++
package.json | 1 +
src/App.scss | 50 +++-
src/components/Navbar.js | 21 +-
src/pages/Welcome.js | 125 +---------
src/styles/Style.js | 1 +
6 files changed, 586 insertions(+), 128 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 96aaf8e..082c0d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
+ "@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.5.1",
"@mui/material": "^5.5.3",
"@testing-library/jest-dom": "^5.16.3",
@@ -2902,6 +2903,179 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
+ "node_modules/@material-ui/core": {
+ "version": "4.12.4",
+ "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
+ "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/styles": "^4.11.5",
+ "@material-ui/system": "^4.12.2",
+ "@material-ui/types": "5.1.0",
+ "@material-ui/utils": "^4.11.3",
+ "@types/react-transition-group": "^4.2.0",
+ "clsx": "^1.0.4",
+ "hoist-non-react-statics": "^3.3.2",
+ "popper.js": "1.16.1-lts",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0 || ^17.0.0",
+ "react-transition-group": "^4.4.0"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@material-ui/icons": {
+ "version": "4.11.3",
+ "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
+ "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
+ "dependencies": {
+ "@babel/runtime": "^7.4.4"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ },
+ "peerDependencies": {
+ "@material-ui/core": "^4.0.0",
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@material-ui/styles": {
+ "version": "4.11.5",
+ "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
+ "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.4.4",
+ "@emotion/hash": "^0.8.0",
+ "@material-ui/types": "5.1.0",
+ "@material-ui/utils": "^4.11.3",
+ "clsx": "^1.0.4",
+ "csstype": "^2.5.2",
+ "hoist-non-react-statics": "^3.3.2",
+ "jss": "^10.5.1",
+ "jss-plugin-camel-case": "^10.5.1",
+ "jss-plugin-default-unit": "^10.5.1",
+ "jss-plugin-global": "^10.5.1",
+ "jss-plugin-nested": "^10.5.1",
+ "jss-plugin-props-sort": "^10.5.1",
+ "jss-plugin-rule-value-function": "^10.5.1",
+ "jss-plugin-vendor-prefixer": "^10.5.1",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@material-ui/styles/node_modules/csstype": {
+ "version": "2.6.20",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+ "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+ "peer": true
+ },
+ "node_modules/@material-ui/system": {
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
+ "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/utils": "^4.11.3",
+ "csstype": "^2.5.2",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@material-ui/system/node_modules/csstype": {
+ "version": "2.6.20",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+ "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+ "peer": true
+ },
+ "node_modules/@material-ui/types": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+ "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+ "peer": true,
+ "peerDependencies": {
+ "@types/react": "*"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@material-ui/utils": {
+ "version": "4.11.3",
+ "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+ "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.4.4",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0 || ^17.0.0"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0"
+ }
+ },
"node_modules/@mui/base": {
"version": "5.0.0-alpha.74",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.74.tgz",
@@ -6123,6 +6297,16 @@
"node": ">=0.10.0"
}
},
+ "node_modules/css-vendor": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+ "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.8.3",
+ "is-in-browser": "^1.0.2"
+ }
+ },
"node_modules/css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -8808,6 +8992,12 @@
"node": ">=10.17.0"
}
},
+ "node_modules/hyphenate-style-name": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+ "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==",
+ "peer": true
+ },
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -9112,6 +9302,12 @@
"node": ">=0.10.0"
}
},
+ "node_modules/is-in-browser": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+ "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==",
+ "peer": true
+ },
"node_modules/is-module": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -11297,6 +11493,96 @@
"node": ">=0.10.0"
}
},
+ "node_modules/jss": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+ "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "csstype": "^3.0.2",
+ "is-in-browser": "^1.1.3",
+ "tiny-warning": "^1.0.2"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/jss"
+ }
+ },
+ "node_modules/jss-plugin-camel-case": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+ "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "hyphenate-style-name": "^1.0.3",
+ "jss": "10.9.0"
+ }
+ },
+ "node_modules/jss-plugin-default-unit": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+ "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "node_modules/jss-plugin-global": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+ "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "node_modules/jss-plugin-nested": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+ "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "node_modules/jss-plugin-props-sort": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+ "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "node_modules/jss-plugin-rule-value-function": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+ "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "node_modules/jss-plugin-vendor-prefixer": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+ "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
+ "peer": true,
+ "dependencies": {
+ "@babel/runtime": "^7.3.1",
+ "css-vendor": "^2.0.8",
+ "jss": "10.9.0"
+ }
+ },
"node_modules/jsx-ast-utils": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz",
@@ -12422,6 +12708,12 @@
"node": ">=4"
}
},
+ "node_modules/popper.js": {
+ "version": "1.16.1-lts",
+ "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+ "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
+ "peer": true
+ },
"node_modules/portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -15532,6 +15824,12 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
+ "node_modules/tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+ "peer": true
+ },
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -18840,6 +19138,104 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
+ "@material-ui/core": {
+ "version": "4.12.4",
+ "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
+ "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/styles": "^4.11.5",
+ "@material-ui/system": "^4.12.2",
+ "@material-ui/types": "5.1.0",
+ "@material-ui/utils": "^4.11.3",
+ "@types/react-transition-group": "^4.2.0",
+ "clsx": "^1.0.4",
+ "hoist-non-react-statics": "^3.3.2",
+ "popper.js": "1.16.1-lts",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0 || ^17.0.0",
+ "react-transition-group": "^4.4.0"
+ }
+ },
+ "@material-ui/icons": {
+ "version": "4.11.3",
+ "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz",
+ "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==",
+ "requires": {
+ "@babel/runtime": "^7.4.4"
+ }
+ },
+ "@material-ui/styles": {
+ "version": "4.11.5",
+ "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
+ "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@emotion/hash": "^0.8.0",
+ "@material-ui/types": "5.1.0",
+ "@material-ui/utils": "^4.11.3",
+ "clsx": "^1.0.4",
+ "csstype": "^2.5.2",
+ "hoist-non-react-statics": "^3.3.2",
+ "jss": "^10.5.1",
+ "jss-plugin-camel-case": "^10.5.1",
+ "jss-plugin-default-unit": "^10.5.1",
+ "jss-plugin-global": "^10.5.1",
+ "jss-plugin-nested": "^10.5.1",
+ "jss-plugin-props-sort": "^10.5.1",
+ "jss-plugin-rule-value-function": "^10.5.1",
+ "jss-plugin-vendor-prefixer": "^10.5.1",
+ "prop-types": "^15.7.2"
+ },
+ "dependencies": {
+ "csstype": {
+ "version": "2.6.20",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+ "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+ "peer": true
+ }
+ }
+ },
+ "@material-ui/system": {
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
+ "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/utils": "^4.11.3",
+ "csstype": "^2.5.2",
+ "prop-types": "^15.7.2"
+ },
+ "dependencies": {
+ "csstype": {
+ "version": "2.6.20",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+ "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
+ "peer": true
+ }
+ }
+ },
+ "@material-ui/types": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+ "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+ "peer": true,
+ "requires": {}
+ },
+ "@material-ui/utils": {
+ "version": "4.11.3",
+ "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
+ "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0 || ^17.0.0"
+ }
+ },
"@mui/base": {
"version": "5.0.0-alpha.74",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.74.tgz",
@@ -21129,6 +21525,16 @@
}
}
},
+ "css-vendor": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+ "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.8.3",
+ "is-in-browser": "^1.0.2"
+ }
+ },
"css-what": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -23105,6 +23511,12 @@
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
},
+ "hyphenate-style-name": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+ "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==",
+ "peer": true
+ },
"iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -23309,6 +23721,12 @@
"is-extglob": "^2.1.1"
}
},
+ "is-in-browser": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+ "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==",
+ "peer": true
+ },
"is-module": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -24878,6 +25296,92 @@
"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz",
"integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg=="
},
+ "jss": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+ "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "csstype": "^3.0.2",
+ "is-in-browser": "^1.1.3",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-camel-case": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+ "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "hyphenate-style-name": "^1.0.3",
+ "jss": "10.9.0"
+ }
+ },
+ "jss-plugin-default-unit": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+ "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "jss-plugin-global": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+ "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "jss-plugin-nested": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+ "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-props-sort": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+ "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0"
+ }
+ },
+ "jss-plugin-rule-value-function": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+ "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "10.9.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-vendor-prefixer": {
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+ "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
+ "peer": true,
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "css-vendor": "^2.0.8",
+ "jss": "10.9.0"
+ }
+ },
"jsx-ast-utils": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz",
@@ -25690,6 +26194,12 @@
}
}
},
+ "popper.js": {
+ "version": "1.16.1-lts",
+ "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+ "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
+ "peer": true
+ },
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -27839,6 +28349,12 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
+ "tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+ "peer": true
+ },
"tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/package.json b/package.json
index 559a90b..0ecfb4b 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
+ "@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.5.1",
"@mui/material": "^5.5.3",
"@testing-library/jest-dom": "^5.16.3",
diff --git a/src/App.scss b/src/App.scss
index 667edb2..853c4cb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,12 +6,29 @@ $purple200: #ce93d8;
.App {
text-align: center;
- header {
+
+ .app-navbar {
background-color: $purple200;
display: flex;
- align-items: center;
border-bottom: 1px solid black;
font-family: 'Open Sans', sans-serif;
+
+ .navbar-left {
+ display: flex;
+ flex-direction: row;
+ width: 50%;
+ justify-content: flex-start;
+ align-items: baseline;
+ }
+
+ .navbar-right {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ padding-right: 1rem;
+ width: 50%;
+ }
+
a {
transition: color 150ms ease;
color: black;
@@ -37,6 +54,35 @@ $purple200: #ce93d8;
}
}
+.welcome-page {
+ @keyframes sideToSide {
+ from {
+ transform: rotate(-1deg);
+ }
+
+ 50% {
+ transform: rotate(1deg);
+ }
+
+ to {
+ transform: rotate(-1deg);
+ }
+ }
+
+ #header-card {
+ height: 18rem;
+ animation: sideToSide 10s infinite;
+ }
+ #welcome-info {
+ margin: 2rem 0;
+ width: 75%;
+ font-size: 1rem;
+ font-weight: 500;
+ padding: 0.6rem;
+ animation: sideToSide 15s infinite;
+ }
+}
+
.technologies-page {
.tech-scrollbar {
height: 5rem;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 6236ead..e08fe7f 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -2,6 +2,8 @@ import { Button, Drawer, List, ListItem } from "@mui/material"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom";
+import MenuIcon from '@material-ui/icons/Menu';
+
export default function Navbar() {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState(null);
@@ -34,19 +36,18 @@ export default function Navbar() {
}
}, [selected, navigate]);
- //
- Mikayla Dobson
- setOpen(false)}>
What I Do:
Web Design Contractor
-Drawer
- Web Design Contractor
+ + + +-
+
+
Web Design Contractor
+
+ Mikayla Dobson
+
-
+ Web Design Contractor
+
+
+
-
diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js
index 928cacc..42b330c 100644
--- a/src/pages/Welcome.js
+++ b/src/pages/Welcome.js
@@ -1,140 +1,33 @@
import '../App.scss';
import { useEffect, useState, useRef } from 'react';
-
-// MUI components
-
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import { Avatar, Button, Card, Divider } from '@mui/material';
import profile from '../media/profile.jpeg';
// SX style object imports
import { DocumentStyle, WelcomePage } from '../styles/Style';
-const {
- pageTheme, galleryTheme, galleryRow,
- galleryPages, welcomeFooter,
- mainHeaderCard
-} = WelcomePage;
-
+const { pageTheme, galleryTheme, galleryRow, galleryPages, welcomeFooter, mainHeaderCard } = WelcomePage;
const { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle;
// Web page logic
export default function Welcome() {
- const [gallery, setGallery] = useState([0,1]);
- const [rendered, setRendered] = useState();
-
- // identifiers
- const cardOne = useRef();
- const cardTwo = useRef();
- const cardThree = useRef();
- const cardFour = useRef();
- const cardFive = useRef();
-
- const buttonOne = useRef();
- const buttonTwo = useRef();
- const buttonThree = useRef();
- const buttonFour = useRef();
- const buttonFive = useRef();
-
-
- // change active page indicator beneath gallery
- useEffect(() => {
-
- const allCardRefs = [cardOne, cardTwo, cardThree, cardFour, cardFive];
- const galleryButtons = [
- ,
- ,
- ,
- ,
-
- ];
-
- setRendered([
- galleryButtons[gallery[0]], galleryButtons[gallery[1]]
- ]);
-
- for (let each of allCardRefs) {
- // inactive style
- each.current.style.backgroundColor = '#ede7f6';
- }
-
- for (let each of gallery) {
- // active style
- allCardRefs[each].current.style.backgroundColor = "#673ab7";
- }
-
- }, [gallery, setRendered]);
-
- // gallery page change logic
-
- /**
- *
- * TO DO: port these functions to external utils
- * these will need to take parameters: array as state, callback function to set state
- * @param1 = array (stateful object)
- * @param2 = array of React components to map through
- * @param3 = callback function to set state
- *
- * In below:
- * @param1 = gallery
- * @param2 = galleryButtons
- * @param3 = setGallery
- *
- */
-
- const handleDecrement = () => {
- let newState = [];
- for (let each of gallery) {
- let newNum = each - 1;
- if (newNum === -1) {
- newNum = 4;
- }
- newState.push(newNum);
- }
- setGallery(newState);
- }
-
- const handleIncrement = () => {
- let newState = [];
- for (let each of gallery) {
- let newNum = (each + 1) % 5;
- newState.push(newNum);
- }
- setGallery(newState);
- }
-
- // render
return (
-
+
+
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- ]
+ const [results, setResults] = useState();
+ const [filter, setFilter] = useState();
- const [galleryIndex, setGalleryIndex] = useState(0);
+ const searchInput = useRef();
+ const languageFilter = useRef();
- const handleDecrement = () => {
- setGalleryIndex((prev) => {
- let newValue = prev - 1;
- if (newValue === -1) {
- newValue = galleryArray.length - 1;
+ useEffect(() => {
+ const galleryArray = [
+ {
+ name: "Mikayla's E-Commerce Store",
+ languages: ["TypeScript", "React", "PERN", "REST_API"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Procedural Drones",
+ languages: ["JavaScript", "HTML/CSS"],
+ inProgress: true,
+ deployed: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Reddit, but it's all cats",
+ languages: ["React", "Redux"],
+ inProgress: false,
+ deployed: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Personal Timestamp Generator",
+ languages: ["Python", "SQLite"],
+ inProgress: false,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Musical Counterpoint Bot",
+ languages: ["HTML/CSS", "JavaScript"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Password Game",
+ languages: ["React", "MongoDB", "MERN", "React", "REST_API", "Socket.io", "Sass", "MaterialUI"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Splinter",
+ languages: ["React", "PERN", "Socket.io"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Carenest",
+ languages: ["React"],
+ inProgress: false,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "This Site",
+ languages: ["React", "Sass", "MaterialUI"],
+ inProgress: true,
+ jsx: (
+
+
+ )
}
- return newValue;
- });
+ ]
+
+ if (!filter) {
+ setResults(galleryArray.map(each => each.jsx));
+ } else {
+ let filteredRes = galleryArray;
+
+ if (filter.language) {
+ for (let element of filteredRes) {
+ if (filter.language === "Express" && element.languages.includes("PERN" || "MERN")) {
+ continue;
+ } else if (filter.language === "PostgreSQL" && element.languages.includes("PERN")) {
+ continue;
+ } else if (element.languages.includes(filter.language)) {
+ continue;
+ } else {
+ filteredRes.splice(filteredRes.indexOf(element), 0, '');
+ continue;
+ }
+ }
+ }
+
+ if (filter.searchTerm) {
+ let caseSafeTerm = filter.searchTerm.toLowerCase();
+
+ for (let element of filteredRes) {
+ for (let each of element.languages) {
+ if (each.toLowerCase().includes(caseSafeTerm)) {
+ continue;
+ }
+ }
+
+ if (element.name.toLowerCase().includes(caseSafeTerm)) {
+ continue;
+ } else {
+ filteredRes.splice(filteredRes.indexOf(element), 0, '');
+ continue;
+ }
+ }
+ }
+
+ for (let element of filteredRes) {
+ if (element.inProgress === filter.inProgress) {
+ continue;
+ } else {
+ filteredRes.splice(filteredRes.indexOf(element), 0, '');
+ continue;
+ }
+ }
+
+ setResults(filteredRes.map(each => each.jsx));
+ }
+ }, [filter]);
+
+ const handleChange = (e) => {
+ e.preventDefault();
+ setFilter({
+ ...filter,
+ language: e.target.value
+ })
}
- const handleIncrement = () => {
- setGalleryIndex(prev => (prev + 1) % galleryArray.length);
+ const handleReset = () => {
+ setFilter(defaultFilter);
+ searchInput.current.value = '';
+ languageFilter.current.value = '';
}
return (
+
+
+
)
}
\ No newline at end of file
From 276b976e30e1880000e2b29038664093863b3257 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 3 Jun 2022 19:57:48 -0500
Subject: [PATCH 5/7] fixed bugs in search feature
---
src/App.scss | 2 ++
src/pages/Projects.js | 60 +++++++++++--------------------------------
2 files changed, 17 insertions(+), 45 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index ac93886..afe2483 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -234,6 +234,8 @@ $purple200: #ce93d8;
flex-direction: column;
align-items: center;
background-color: lightblue;
+ // min-width: 80%;
+ // max-width: 80%;
width: 80%;
height: auto;
margin-bottom: 2rem;
diff --git a/src/pages/Projects.js b/src/pages/Projects.js
index d793ac0..20af3c0 100644
--- a/src/pages/Projects.js
+++ b/src/pages/Projects.js
@@ -157,56 +157,26 @@ export default function Projects() {
)
}
]
-
+
if (!filter) {
setResults(galleryArray.map(each => each.jsx));
- } else {
- let filteredRes = galleryArray;
-
- if (filter.language) {
- for (let element of filteredRes) {
- if (filter.language === "Express" && element.languages.includes("PERN" || "MERN")) {
- continue;
- } else if (filter.language === "PostgreSQL" && element.languages.includes("PERN")) {
- continue;
- } else if (element.languages.includes(filter.language)) {
- continue;
- } else {
- filteredRes.splice(filteredRes.indexOf(element), 0, '');
- continue;
- }
- }
- }
-
+ }
+
+ if (filter) {
+ let result = galleryArray;
if (filter.searchTerm) {
- let caseSafeTerm = filter.searchTerm.toLowerCase();
-
- for (let element of filteredRes) {
- for (let each of element.languages) {
- if (each.toLowerCase().includes(caseSafeTerm)) {
- continue;
- }
- }
-
- if (element.name.toLowerCase().includes(caseSafeTerm)) {
- continue;
- } else {
- filteredRes.splice(filteredRes.indexOf(element), 0, '');
- continue;
- }
- }
+ let termLower = filter.searchTerm.toLowerCase();
+ result = result.filter(obj => obj.name.toLowerCase().includes(termLower));
}
-
- for (let element of filteredRes) {
- if (element.inProgress === filter.inProgress) {
- continue;
- } else {
- filteredRes.splice(filteredRes.indexOf(element), 0, '');
- continue;
- }
+ if (filter.language) {
+ let adjustedLang = ((filter.language === 'PostgreSQL' || filter.language === "Express") ? "PERN" : filter.language);
+ result = result.filter(obj => obj.languages.includes(adjustedLang));
}
-
- setResults(filteredRes.map(each => each.jsx));
+ if (filter.inProgress) {
+ result = result.filter(obj => obj.inProgress === filter.inProgress);
+ }
+
+ setResults(result.map(each => each.jsx));
}
}, [filter]);
From cfb884d16975ca6b415f1694a85041606bd1c3bd Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 3 Jun 2022 20:07:16 -0500
Subject: [PATCH 6/7] refactoring, documentation
---
src/components/ProjectsArray.js | 136 ++++++++++++++++++++++++++++++++
1 file changed, 136 insertions(+)
create mode 100644 src/components/ProjectsArray.js
diff --git a/src/components/ProjectsArray.js b/src/components/ProjectsArray.js
new file mode 100644
index 0000000..6d971c4
--- /dev/null
+++ b/src/components/ProjectsArray.js
@@ -0,0 +1,136 @@
+import { Card } from "@mui/material";
+
+export const projectsArray = [
+ {
+ name: "Mikayla's E-Commerce Store",
+ languages: ["TypeScript", "React", "PERN", "REST_API"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Procedural Drones",
+ languages: ["JavaScript", "HTML/CSS"],
+ inProgress: true,
+ deployed: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Reddit, but it's all cats",
+ languages: ["React", "Redux"],
+ inProgress: false,
+ deployed: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Personal Timestamp Generator",
+ languages: ["Python", "SQLite"],
+ inProgress: false,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Musical Counterpoint Bot",
+ languages: ["HTML/CSS", "JavaScript"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Password Game",
+ languages: ["React", "MongoDB", "MERN", "React", "REST_API", "Socket.io", "Sass", "MaterialUI"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Splinter",
+ languages: ["React", "PERN", "Socket.io"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "Carenest",
+ languages: ["React"],
+ inProgress: false,
+ jsx: (
+
+
+ )
+ },
+ {
+ name: "This Site",
+ languages: ["React", "Sass", "MaterialUI"],
+ inProgress: true,
+ jsx: (
+
+
+ )
+ }
+]
\ No newline at end of file
From 028c0843d4d59a1e4d043af403c74327f5ede4bb Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 3 Jun 2022 21:00:21 -0500
Subject: [PATCH 7/7] scroll animation on projects page for filter panel
---
src/App.js | 10 +--
src/App.scss | 57 ++++++++++--
src/pages/Projects.js | 201 ++++++++++--------------------------------
src/styles/Style.js | 3 +-
4 files changed, 102 insertions(+), 169 deletions(-)
diff --git a/src/App.js b/src/App.js
index 3349830..2686c13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,9 +24,9 @@ function App() {
*/}
-
-
-
+
-
-
+
+
);
diff --git a/src/App.scss b/src/App.scss
index afe2483..8edb413 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,17 +1,40 @@
+// STYLESHEET FOR ABOUT MIKAYLA SITE
+// STRUCTURE OF THIS FILE AS FOLLOWS:
+
+// font imports
+// variable declarations
+// main app styles:
+// ---- navbar
+// welcome page
+// technologies page
+// about me page
+// projects page
+
+////////////////
+////////////////
+////////////////
+////////////////
+////////////////
+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
$pink50: #fce4ec;
+$purple100: #e1bee7;
$purple200: #ce93d8;
.App {
text-align: center;
-
.app-navbar {
background-color: $purple200;
+ height: 4.5rem;
display: flex;
border-bottom: 1px solid black;
font-family: 'Open Sans', sans-serif;
+ position: fixed;
+ top: 0;
+ width: 100vw;
+ z-index: 9;
.navbar-left {
display: flex;
@@ -52,6 +75,10 @@ $purple200: #ce93d8;
padding-left: 1rem;
}
}
+ main {
+ position: relative;
+ top: 4.5rem;
+ }
}
.welcome-page {
@@ -212,30 +239,46 @@ $purple200: #ce93d8;
.projects-page {
.filter-panel {
display: flex;
+ position: static;
flex-direction: column;
background-color: white;
align-items: center;
- padding: 2rem;
- width: 50%;
+ padding: 1rem;
+ width: 40vw;
+ border-radius: 12px;
+ margin-bottom: 2rem;
+ transition: align-items 1s ease,
+ position 1s ease
+ ;
+
.filter-controls {
- display: inline-flex;
+ display: flex;
justify-content: space-between;
- width: 65%;
+ width: 80%;
}
+
+ }
+ .filter-anim-one {
+ position: sticky;
+ left: 2rem;
+ top: 6rem;
+ justify-content: flex-start;
+ }
+ .filter-anim-two {
+
}
.project-cards {
display: flex;
flex-direction: column;
align-items: center;
+ margin-top: 2rem;
> * {
display: flex;
flex-direction: column;
align-items: center;
background-color: lightblue;
- // min-width: 80%;
- // max-width: 80%;
width: 80%;
height: auto;
margin-bottom: 2rem;
diff --git a/src/pages/Projects.js b/src/pages/Projects.js
index 20af3c0..216bfcd 100644
--- a/src/pages/Projects.js
+++ b/src/pages/Projects.js
@@ -1,169 +1,31 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { DocumentStyle } from '../styles/Style';
+import { projectsArray } from '../components/ProjectsArray';
+import { Divider } from '@mui/material';
import '../App.scss';
-import { useState, useEffect, useRef } from 'react';
-import { DocumentStyle, ProjectsPage } from '../styles/Style';
-
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-
-const { htmlTheme, stockGallery } = DocumentStyle;
-const { projectsButton } = ProjectsPage;
+const { htmlTheme, dividerStyle } = DocumentStyle;
const defaultFilter = {
language: '',
searchTerm: '',
- inProgress: null
+ inProgress: false
}
export default function Projects() {
const [results, setResults] = useState();
- const [filter, setFilter] = useState();
+ const [filter, setFilter] = useState(defaultFilter);
+ const [panelStyle, setPanelStyle] = useState('');
const searchInput = useRef();
const languageFilter = useRef();
+ const projectPage = useRef();
useEffect(() => {
- const galleryArray = [
- {
- name: "Mikayla's E-Commerce Store",
- languages: ["TypeScript", "React", "PERN", "REST_API"],
- inProgress: true,
- jsx: (
- Hi, my name is Mikayla! I'm a junior-level full stack web developer.
-I excel in building well-structured and maintainable web applications, managing algorithmic complexity, - and adapting my workflow to fit the needs of any environment I should find myself in. -
Thanks for visiting! Feel free to peruse below:
-
+
+
-
- {rendered}
-
-
-
-
- + I am a junior-level full stack web developer based in Nashville, Tennessee. I build responsive, well-designed web applications with emphasis on concise solutions to problems, self-documenting code, and elegance of design. Some of my most frequently used technologies include React, Redux, Node.js, Express, TypeScript, Vite, PostgreSQL, MongoDB, and Sass, among others. +
+Reddit, but it's all cats
-A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.
-This was built on Reddit's JSON API, using React/Redux and CSS.
-And yes, it's all cats.
- View the deployed project! -Personal Timestamp Generator
-A small-scale timestamp/productivity management tool for individual use and logging of - time, including compartmentalization by task and some aggregate functions based on queries. -
-Command-line interface built on Python with a SQLite Database.
- View the repo here! -Musical Counterpoint Bot
-A web-based program with functionality to evaluate sample solutions of problems in - species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
-This project is intended to be used as a practical application of linked lists and - other compound data structures in JavaScript.
-In progress. Using vanilla HTML/CSS/JS.
-(untitled) Online Guess-the-Word Game
-As part of a mentorship program hosted by Metazu Studio
-Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.
-In progress, building in collaboration with others at Metazu Studio.
-Splinter
-A clone of a popular card-based resource gathering game
-Local multiplayer, with plans to build out online multiplayer and solo vs. CPU
-In progress. Using React, Node/Express, and PostgreSQL.
-Carenest
-Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean - as a submission for #HACKTN in March 2022.
-Produced using React. View the repo here!
-And, last but not least, the site you see here!
-This site is built using React, Material UI, and SCSS, and is hosted on Github Pages.
-Mikayla's E-Commerce Store
+A fully-featured e-commerce platform
+Built in React with TypeScript, Node/Express, and PostgreSQL
+Payment processing supported through Stripe
+REST API fully documented in Swagger
+IN PROGRESS
+Procedural Drones
+An experimental space for building out procedural music generation using vanilla JavaScript
+Uses Tone.js to interact with the Web Audio API
+Features a plain HTML/CSS front end to interact with the program
+
+ GitHub Repo
+ Deployed version
+
+ Reddit, but it's all cats
+A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.
+This was built on Reddit's JSON API, using React/Redux and CSS.
+And yes, it's all cats.
+
+ GitHub Repo
+ Deployed version
+
+ Personal Timestamp Generator
+A small-scale timestamp/productivity management tool for individual use and logging of + time, including compartmentalization by task and some aggregate functions based on queries. +
+Command-line interface built on Python with a SQLite Database.
+ View the repo here! +Musical Counterpoint Bot
+A web-based program with functionality to evaluate sample solutions of problems in + species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
+This project is intended to be used as a practical application of linked lists and + other compound data structures in JavaScript.
+In progress. Using vanilla HTML/CSS/JS.
+Password Game
+As part of a mentorship program hosted by Metazu Studio
+Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.
+In progress, building in collaboration with others at Metazu Studio.
+Splinter
+A clone of a popular card-based resource gathering game
+Local multiplayer, with plans to build out online multiplayer and solo vs. CPU
+In progress. Using React, Node/Express, and PostgreSQL.
+Carenest
+Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean + as a submission for #HACKTN in March 2022.
+Produced using React. View the repo here!
+And, last but not least, the site you see here!
+This site is built using React, Material UI, and SCSS, and is hosted with Netlify.
+ View the site repo here! +Here are some sample projects from my portfolio!
-
-
- {galleryArray[galleryIndex]}
-
-
+ Filter by:
+
+ setFilter({...filter, searchTerm: e.target.value})}
+ placeholder="Enter a search term">
+
+
+
+
+
+ {results}
Mikayla's E-Commerce Store
+A fully-featured e-commerce platform
+Built in React with TypeScript, Node/Express, and PostgreSQL
+Payment processing supported through Stripe
+REST API fully documented in Swagger
+IN PROGRESS
+Procedural Drones
+An experimental space for building out procedural music generation using vanilla JavaScript
+Uses Tone.js to interact with the Web Audio API
+Features a plain HTML/CSS front end to interact with the program
+
+ GitHub Repo
+ Deployed version
+
+ Reddit, but it's all cats
+A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.
+This was built on Reddit's JSON API, using React/Redux and CSS.
+And yes, it's all cats.
+
+ GitHub Repo
+ Deployed version
+
+ Personal Timestamp Generator
+A small-scale timestamp/productivity management tool for individual use and logging of + time, including compartmentalization by task and some aggregate functions based on queries. +
+Command-line interface built on Python with a SQLite Database.
+ View the repo here! +Musical Counterpoint Bot
+A web-based program with functionality to evaluate sample solutions of problems in + species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
+This project is intended to be used as a practical application of linked lists and + other compound data structures in JavaScript.
+In progress. Using vanilla HTML/CSS/JS.
+Password Game
+As part of a mentorship program hosted by Metazu Studio
+Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.
+In progress, building in collaboration with others at Metazu Studio.
+Splinter
+A clone of a popular card-based resource gathering game
+Local multiplayer, with plans to build out online multiplayer and solo vs. CPU
+In progress. Using React, Node/Express, and PostgreSQL.
+Carenest
+Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean + as a submission for #HACKTN in March 2022.
+Produced using React. View the repo here!
+And, last but not least, the site you see here!
+This site is built using React, Material UI, and SCSS, and is hosted with Netlify.
+ View the site repo here! +Mikayla's E-Commerce Store
-A fully-featured e-commerce platform
-Built in React with TypeScript, Node/Express, and PostgreSQL
-Payment processing supported through Stripe
-REST API fully documented in Swagger
-IN PROGRESS
-Procedural Drones
-An experimental space for building out procedural music generation using vanilla JavaScript
-Uses Tone.js to interact with the Web Audio API
-Features a plain HTML/CSS front end to interact with the program
-
- GitHub Repo
- Deployed version
-
- Reddit, but it's all cats
-A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.
-This was built on Reddit's JSON API, using React/Redux and CSS.
-And yes, it's all cats.
-
- GitHub Repo
- Deployed version
-
- Personal Timestamp Generator
-A small-scale timestamp/productivity management tool for individual use and logging of - time, including compartmentalization by task and some aggregate functions based on queries. -
-Command-line interface built on Python with a SQLite Database.
- View the repo here! -Musical Counterpoint Bot
-A web-based program with functionality to evaluate sample solutions of problems in - species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.
-This project is intended to be used as a practical application of linked lists and - other compound data structures in JavaScript.
-In progress. Using vanilla HTML/CSS/JS.
-Password Game
-As part of a mentorship program hosted by Metazu Studio
-Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.
-In progress, building in collaboration with others at Metazu Studio.
-Splinter
-A clone of a popular card-based resource gathering game
-Local multiplayer, with plans to build out online multiplayer and solo vs. CPU
-In progress. Using React, Node/Express, and PostgreSQL.
-Carenest
-Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean - as a submission for #HACKTN in March 2022.
-Produced using React. View the repo here!
-And, last but not least, the site you see here!
-This site is built using React, Material UI, and SCSS, and is hosted with Netlify.
- View the site repo here! -
-
+
-
)
}
\ No newline at end of file
diff --git a/src/styles/Style.js b/src/styles/Style.js
index 5cc53e8..d285dc7 100644
--- a/src/styles/Style.js
+++ b/src/styles/Style.js
@@ -6,7 +6,8 @@ export const DocumentStyle = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- height: '100vh',
+ minHeight: '100vh',
+ height: '100%',
},
linkStyle: {
color: deepPurple[300],
Here are some sample projects from my portfolio!
+Check out these projects from my portfolio!
-Filter by:
SQLite
-
+
{results}
+
+ {results}
+