From 85f7c04f7633efd7e85f075241ebb5c2230deb6f Mon Sep 17 00:00:00 2001 From: Cobular <22972550+Cobular@users.noreply.github.com> Date: Thu, 31 Dec 2020 15:14:01 -0800 Subject: [PATCH] Sort of works with grid, now trying masonry --- .eslintcache | 2 +- .idea/PersonalWebsite_Static.iml | 5 + .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/jsLibraryMappings.xml | 6 + .idea/misc.xml | 6 + package-lock.json | 180 +++++++++++++++++++++++++++ package.json | 7 +- src/App.tsx | 10 +- src/components/Contact.tsx | 7 ++ src/components/Header.scss | 22 +++- src/components/Header.tsx | 45 +++---- src/components/Home.scss | 13 ++ src/components/Home.tsx | 15 +++ src/components/Main.tsx | 16 +++ src/components/ProjectGrid.scss | 57 +++++++++ src/components/ProjectGrid.tsx | 87 +++++++++++++ src/components/Resume.tsx | 7 ++ src/imports.scss | 2 + src/index.tsx | 18 +-- 19 files changed, 474 insertions(+), 36 deletions(-) create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 src/components/Contact.tsx create mode 100644 src/components/Home.scss create mode 100644 src/components/Home.tsx create mode 100644 src/components/Main.tsx create mode 100644 src/components/ProjectGrid.scss create mode 100644 src/components/ProjectGrid.tsx create mode 100644 src/components/Resume.tsx create mode 100644 src/imports.scss diff --git a/.eslintcache b/.eslintcache index 8703345..bc84d0c 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4"},{"size":501,"mtime":1609115799705,"results":"5","hashOfConfig":"6"},{"size":425,"mtime":499162500000,"results":"7","hashOfConfig":"6"},{"size":202,"mtime":1609116003697,"results":"8","hashOfConfig":"6"},{"size":646,"mtime":1609219827682,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"145y8x7",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\index.tsx",[],["19","20"],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\cover\\Documents\\CS Projects\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],{"ruleId":"21","replacedBy":"22"},{"ruleId":"23","replacedBy":"24"},"no-native-reassign",["25"],"no-negated-in-lhs",["26"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx":"1","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts":"2","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx":"3","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx":"4","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx":"5","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx":"6","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx":"7","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx":"8","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx":"9"},{"size":560,"mtime":1609455390298,"results":"10","hashOfConfig":"11"},{"size":440,"mtime":1609445337674,"results":"12","hashOfConfig":"11"},{"size":262,"mtime":1609448057026,"results":"13","hashOfConfig":"11"},{"size":885,"mtime":1609448882867,"results":"14","hashOfConfig":"11"},{"size":402,"mtime":1609452953574,"results":"15","hashOfConfig":"11"},{"size":424,"mtime":1609448271170,"results":"16","hashOfConfig":"11"},{"size":142,"mtime":1609448138377,"results":"17","hashOfConfig":"11"},{"size":132,"mtime":1609448124025,"results":"18","hashOfConfig":"11"},{"size":2612,"mtime":1609456026589,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lcbj9u",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"29","usedDeprecatedRules":"24"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],["40","41"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",["42","43"],"import React from \"react\";\nimport \"./Header.scss\";\nimport {Button, Space, Typography} from \"antd\";\nimport {Link} from \"react-router-dom\";\n\nconst {Title} = Typography;\n\nexport const Header = () => {\n return (\n
\n \n

Jake Cover

\n \n\n \n \n

Home

\n \n\n \n

Contact

\n \n \n

Resume

\n \n \n

GitHub

\n \n \n
\n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Home.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Main.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Contact.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Resume.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\ProjectGrid.tsx",["44","45"],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":3,"column":9,"nodeType":"52","messageId":"53","endLine":3,"endColumn":15},{"ruleId":"50","severity":1,"message":"54","line":6,"column":8,"nodeType":"52","messageId":"53","endLine":6,"endColumn":13},{"ruleId":"50","severity":1,"message":"55","line":44,"column":7,"nodeType":"52","messageId":"53","endLine":44,"endColumn":11},{"ruleId":"50","severity":1,"message":"56","line":45,"column":7,"nodeType":"52","messageId":"53","endLine":45,"endColumn":12},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"@typescript-eslint/no-unused-vars","'Button' is defined but never used.","Identifier","unusedVar","'Title' is assigned a value but never used.","'elem' is assigned a value but never used.","'msnry' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/.idea/PersonalWebsite_Static.iml b/.idea/PersonalWebsite_Static.iml index 0c8867d..77f595c 100644 --- a/.idea/PersonalWebsite_Static.iml +++ b/.idea/PersonalWebsite_Static.iml @@ -8,5 +8,10 @@ + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..f930822 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6e767ac..a4d741e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2252,6 +2252,11 @@ "@types/node": "*" } }, + "@types/history": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", + "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" + }, "@types/html-minifier-terser": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", @@ -2287,6 +2292,14 @@ "pretty-format": "^26.0.0" } }, + "@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -2297,6 +2310,14 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" }, + "@types/masonry-layout": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-ECvuWgThpmH3RQNt5at14G5Ov5DBlcJlQAQEE9aDBjXK1dRAgZ33YVo2Hv99ncEEpewXokOu3xzlPJJ9GKZLJw==", + "requires": { + "@types/jquery": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -2349,6 +2370,25 @@ "@types/react": "^16" } }, + "@types/react-router": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.9.tgz", + "integrity": "sha512-US6C0rq2Wt/7uje1roqO0R++Sr0jqplKaBChDY5sNg5k7GC/79YFK0ZsLEdemqUjW05wq1Y/9YYEUgfNZ8TlvA==", + "requires": { + "@types/history": "*", + "@types/react": "*" + } + }, + "@types/react-router-dom": { + "version": "5.1.7", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz", + "integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==", + "requires": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", @@ -2357,6 +2397,11 @@ "@types/node": "*" } }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -5160,6 +5205,11 @@ "minimalistic-assert": "^1.0.0" } }, + "desandro-matches-selector": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz", + "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE=" + }, "destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", @@ -6234,6 +6284,11 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, + "ev-emitter": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz", + "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==" + }, "eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -6678,6 +6733,14 @@ "path-exists": "^4.0.0" } }, + "fizzy-ui-utils": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz", + "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==", + "requires": { + "desandro-matches-selector": "^2.0.0" + } + }, "flat-cache": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -7104,6 +7167,11 @@ "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==" }, + "get-size": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz", + "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==" + }, "get-stdin": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", @@ -7362,6 +7430,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7804,6 +7885,11 @@ "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz", "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==" }, + "include-media": { + "version": "1.4.9", + "resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.9.tgz", + "integrity": "sha1-0AILe+PrLVSGiiCUNZXOOA4LxDs=" + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -10152,6 +10238,15 @@ "object-visit": "^1.0.0" } }, + "masonry-layout": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz", + "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==", + "requires": { + "get-size": "^2.0.2", + "outlayer": "^2.1.0" + } + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -10406,6 +10501,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -11255,6 +11359,16 @@ "os-tmpdir": "^1.0.0" } }, + "outlayer": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz", + "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=", + "requires": { + "ev-emitter": "^1.0.0", + "fizzy-ui-utils": "^2.0.0", + "get-size": "^2.0.2" + } + }, "p-each-series": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz", @@ -13444,6 +13558,52 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.1.tgz", @@ -13933,6 +14093,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -15784,6 +15949,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "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==" + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -16277,6 +16452,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index dbc724c..52315ec 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,19 @@ "@types/node": "^12.19.11", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", + "@types/react-router-dom": "^5.1.7", + "@types/masonry-layout": "^4.2.2", "antd": "^4.9.4", + "react-router-dom": "^5.2.0", "node-sass": "^4.14.1", "prettier": "^2.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", + "include-media": "^1.4.9", "typescript": "^4.1.3", - "web-vitals": "^0.2.4" + "web-vitals": "^0.2.4", + "masonry-layout": "^4.2.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.tsx b/src/App.tsx index e1e1d2f..f00cd5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,13 @@ -import React from 'react'; -import './App.scss'; -import {Header} from "./components/Header"; +import React from "react"; +import "./App.scss"; +import { Header } from "./components/Header"; +import { Main } from "./components/Main"; function App() { return (
-
+
+
); } diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx new file mode 100644 index 0000000..73a5d07 --- /dev/null +++ b/src/components/Contact.tsx @@ -0,0 +1,7 @@ +export const Contact = () => { + return ( +
+

Contact

+
+ ) +} diff --git a/src/components/Header.scss b/src/components/Header.scss index 4f1f773..8121657 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -1,8 +1,28 @@ header { display: flex; flex-direction: row; + align-content: center; :nth-child(2) { margin-left: auto; } -} \ No newline at end of file + + h2:last-of-type { + margin-right: 5px; + } + + margin: 10px; + padding: 10px; + border-radius: 5px; + background: #66bb6a; + font-family: "Fira Code", monospace; + + h1 { + font-weight: 600; + margin: 0 0 0 5px; + } + + h2 { + margin: 0 + } +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d738610..62cbf7b 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,29 +1,32 @@ import React from "react"; import "./Header.scss"; -import { Button, Typography } from "antd"; +import {Button, Space, Typography} from "antd"; +import {Link} from "react-router-dom"; -const { Title } = Typography; +const {Title} = Typography; export const Header = () => { - return ( -
- + return ( +
+ +

Jake Cover

+ - - Home - + + +

Home

+ - - Contact - - - Resume - - - GitHub - -
- ); + +

Contact

+ + +

Resume

+ + +

GitHub

+ + +
+ ); }; diff --git a/src/components/Home.scss b/src/components/Home.scss new file mode 100644 index 0000000..723b319 --- /dev/null +++ b/src/components/Home.scss @@ -0,0 +1,13 @@ +#about-me { + background: #61dafb; + border-radius: 5px; + margin: 10px auto; + padding: 10px; + width: fit-content; + + p { + font-family: "Montserrat", sans-serif; + font-size: 16px; + } +} + diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..1cce8c4 --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,15 @@ +import "./Home.scss" +import {ProjectGrid} from "./ProjectGrid"; + +export const Home = () => { + return ( +
+
+

+ Hi! I'm Julie, a CS student from the west coast! Take a look at some of my projects below! +

+
+ +
+ ) +} diff --git a/src/components/Main.tsx b/src/components/Main.tsx new file mode 100644 index 0000000..3592fa3 --- /dev/null +++ b/src/components/Main.tsx @@ -0,0 +1,16 @@ +import { Route, Switch } from "react-router-dom"; +import { Contact } from "./Contact"; +import { Home } from "./Home"; +import { Resume } from "./Resume"; + +export const Main = () => { + return ( +
+ + + + + +
+ ); +}; diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss new file mode 100644 index 0000000..181d672 --- /dev/null +++ b/src/components/ProjectGrid.scss @@ -0,0 +1,57 @@ +@import "~include-media/dist/_include-media.scss"; + +$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px); + +#project-grid { + display: grid; + + margin: 10px; + background: #FFD43B; + border-radius: 5px; + + + + //@include media(">phone") { + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 5px; + justify-items: stretch; + align-items: stretch; + //} + +} + +.OneByOneGridElement { + display: flex; + flex-direction: column; + width: available; + + padding: 10px; + + img { + width: 100%; + } + + p { + + } +} + +.FourByOneGridElement { + grid-column: span 2; + display: flex; + flex-direction: row; + + .image { + flex: 1; + + img { + width: 100%; + max-width: 100%; + } + } + + p { + min-width: 20ch; + width: 30ch; + } +} diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx new file mode 100644 index 0000000..5ff896f --- /dev/null +++ b/src/components/ProjectGrid.tsx @@ -0,0 +1,87 @@ +import "./ProjectGrid.scss"; +import Masonry from "masonry-layout"; + + +type GridElementProps = { + image_url: string; + image_alt: string; + text: string; +}; + +const OneByOneGridElement = ({ + image_url, + image_alt, + text, +}: GridElementProps) => { + return ( +
+
+ {image_alt} +
+
+

{text}

+
+
+ ); +}; + +const FourByOneGridElement = ({ + image_url, + image_alt, + text, +}: GridElementProps) => { + return ( +
+
+ {image_alt} +
+
+

{text}

+
+
+ ); +}; + +export const ProjectGrid = () => { + + + return ( +
+ + + + + +
+ ); +}; diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx new file mode 100644 index 0000000..4dbaf05 --- /dev/null +++ b/src/components/Resume.tsx @@ -0,0 +1,7 @@ +export const Resume = () => { + return ( +
+

Resume

+
+) +} diff --git a/src/imports.scss b/src/imports.scss new file mode 100644 index 0000000..919bdfc --- /dev/null +++ b/src/imports.scss @@ -0,0 +1,2 @@ +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400,600&family=Montserrat:wght@400;600;700&display=swap'); + diff --git a/src/index.tsx b/src/index.tsx index aa79a95..10feac5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,16 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.scss'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.scss"; +import "./imports.scss" +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import { HashRouter } from "react-router-dom"; ReactDOM.render( - + - , - document.getElementById('root') + , + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function