From d95456e196a86797d605643536e262bf064f97e3 Mon Sep 17 00:00:00 2001 From: Jake Date: Mon, 4 Jan 2021 10:51:36 -0800 Subject: [PATCH] Added ImagesLoaded reflowing for the grid --- .eslintcache | 2 +- package-lock.json | 16 ++++++++++++++++ package.json | 8 +++++--- src/components/ProjectGrid.tsx | 21 ++++++++++++++------- 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/.eslintcache b/.eslintcache index 4f55081..221927d 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"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","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx":"12"},{"size":560,"mtime":1609455390298,"results":"13","hashOfConfig":"14"},{"size":440,"mtime":1609445337674,"results":"15","hashOfConfig":"14"},{"size":384,"mtime":1609720686967,"results":"16","hashOfConfig":"14"},{"size":1395,"mtime":1609720686979,"results":"17","hashOfConfig":"14"},{"size":235,"mtime":1609720686977,"results":"18","hashOfConfig":"14"},{"size":424,"mtime":1609644947153,"results":"19","hashOfConfig":"14"},{"size":142,"mtime":1609448138377,"results":"20","hashOfConfig":"14"},{"size":132,"mtime":1609448124025,"results":"21","hashOfConfig":"14"},{"size":9456,"mtime":1609720687002,"results":"22","hashOfConfig":"14"},{"size":1072,"mtime":1609462531624,"results":"23","hashOfConfig":"14"},{"size":1241,"mtime":1609720686985,"results":"24","hashOfConfig":"14"},{"size":5418,"mtime":1609720686980,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"lcbj9u",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"45","usedDeprecatedRules":"28"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"52","usedDeprecatedRules":"53"},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["54","55"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],"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",["56"],"/**\n * TODO:\n * - For things that can't be linked, use to signal that clicking will open a modal https://ant.design/components/modal/\n * in order to give a more complex writeup and some pictures\n * - Tooltip for modal and linkable items, possibly which displays a modal with an example card with tooltips or explanations\n * - Footer\n * - Responsive top bar\n *\n */\n\nimport \"./ProjectGrid.scss\";\nimport Masonry from \"masonry-layout\";\nimport { useEffect } from \"react\";\nimport {LinkOutlined} from \"@ant-design/icons\";\nimport CodeDaySD from \"../images/SanDiego.svg\";\nimport Foresight from \"../images/foresightsports.png\";\nimport Distest from \"../images/distest.svg\";\nimport Scoresaver from \"../images/scoresaver.svg\";\nimport Hashicorp from \"../images/HashiCorp_Logo_no_text.png\";\n\n\ntype GridElementImageProps = {\n image_url: string;\n image_alt: string;\n title: string;\n text: string;\n link?: string;\n org?: string;\n};\n\ntype GridElementProps = {\n title: string;\n text: string;\n link?: string;\n org?: string;\n};\n\nconst OneWide = ({ title, text, link, org }: GridElementProps) => {\n if (link === undefined) {\n return (\n
\n
\n
\n

{title}

\n {org &&

{org}

}\n
\n
\n

{text}

\n
\n
\n
\n );\n }\n return (\n \n
\n
\n

{title}

\n {org &&

{org}

}\n \n
\n
\n

{text}

\n
\n
\n \n );\n};\n\nconst OneWidePic = ({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) => {\n if (link === undefined) {\n return (\n
\n
\n
\n {image_alt}\n
\n
\n

{title}

\n {org &&

{org}

}\n\n

{text}

\n
\n
\n
\n );\n }\n return (\n \n
\n
\n {image_alt}\n \n
\n
\n

{title}

\n {org &&

{org}

}\n

{text}

\n
\n
\n \n );\n};\n\nconst FourByOneGridElement = ({\n image_url,\n image_alt,\n title,\n text,\n link,\n org,\n}: GridElementImageProps) => {\n if (link === undefined) {\n return (\n
\n
\n
\n {image_alt}\n
\n
\n

{title}

\n {org &&

{org}

}\n

{text}

\n
\n
\n
\n );\n }\n return (\n \n
\n
\n {image_alt}\n \n
\n
\n

{title}

\n {org &&

{org}

}\n

{text}

\n
\n
\n \n );\n};\n\nexport const ProjectGrid = () => {\n useEffect(() => {\n var elem = document.querySelector(\"#project-grid\");\n\n // @ts-ignore\n var msnry = new Masonry(elem, {\n itemSelector: \".GridElement\",\n gutter: 0,\n columnWidth: \".GridSizer\",\n percentPosition: true,\n });\n });\n\n return (\n
\n
\n
\n

</> My Projects

\n

\n A gallery of some of my most interesting projects. Look for , click those projects for more information!\n

\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n );\n};\n","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx",["57","58","59","60","61"],"import \"./AboutMe.scss\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Tooltip } from \"antd\";\r\nimport { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\n\r\nconst TelegramOutlinedSvg = () => {\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst LastFmLi = () => {\r\n const [nowPlayingSong, setNowPlayingSong] = useState(\"nothing\");\r\n const [nowPlayingArtist, setNowPlayingArtist] = useState(\"no-one\");\r\n\r\n const updateNowPlaying = async () => {\r\n try {\r\n const songData = await axios.get(\r\n \"https://jsonplaceholder.typicode.com/posts\"\r\n );\r\n\r\n console.log(songData.data);\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n updateNowPlaying();\r\n\r\n const interval = setInterval(updateNowPlaying, 10000);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []);\r\n return
  • listening to ____ by ____
    • ;\r\n};\r\n\r\nconst Age = () => {\r\n const [age, setAge] = useState(\r\n Math.round((new Date().getTime() - 1021004428000) / 1000)\r\n );\r\n\r\n const UpdateAge = () => {\r\n setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));\r\n };\r\n\r\n useEffect(() => {\r\n UpdateAge();\r\n\r\n const interval = setInterval(UpdateAge, 1000);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []);\r\n\r\n return (\r\n
  • \r\n {age} seconds old{\" \"}\r\n
    • \r\n );\r\n};\r\n\r\nexport const AboutMe = () => {\r\n const EmailHandler = () => {\r\n const email = \"Y29udGFjdEBqYWtlY292ZXIubWU=\";\r\n window.prompt(\"Thanks for being a human! Here's my email:\", atob(email));\r\n };\r\n\r\n return (\r\n
    \r\n
    \r\n

    Hi! I'm Jake!

    \r\n\r\n
    \r\n
    \r\n

    A bit about me:

    \r\n\r\n
      \r\n
    • \r\n Name: Jake Cover\r\n
      • \r\n
    • Occupation: Student
      • \r\n
    • Location: Southern California
      • \r\n
    • \r\n Projects:{\" \"}\r\n \r\n document.getElementById(\"project-header\")?.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"start\",\r\n })\r\n }\r\n >\r\n Down there\r\n \r\n
      • \r\n
    • \r\n Resume: Over here\r\n
      • \r\n
    • \r\n Find Me:\r\n
        \r\n
      • \r\n Email: \r\n
        • \r\n
      • \r\n Twitter:{\" \"}\r\n \r\n \r\n @cobular_\r\n \r\n \r\n
        • \r\n
      • \r\n GitHub:{\" \"}\r\n \r\n JakeCover\r\n \r\n
        • \r\n
      • \r\n Telegram:{\" \"}\r\n \r\n @cobular\r\n \r\n
        • \r\n
      • Elsewhere: Probably @cobular
        • \r\n
      \r\n
      • \r\n
    \r\n
    \r\n
    \r\n

    I'm:

    \r\n
      \r\n \r\n \r\n
    • \r\n doing (general stuff - in class, projects, sleeping, games)\r\n
      • \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n );\r\n};\r\n",["62","63"],{"ruleId":"64","replacedBy":"65"},{"ruleId":"66","replacedBy":"67"},{"ruleId":"68","severity":1,"message":"69","line":158,"column":9,"nodeType":"70","messageId":"71","endLine":158,"endColumn":14},{"ruleId":"68","severity":1,"message":"72","line":7,"column":7,"nodeType":"70","messageId":"71","endLine":7,"endColumn":26},{"ruleId":"68","severity":1,"message":"73","line":30,"column":10,"nodeType":"70","messageId":"71","endLine":30,"endColumn":24},{"ruleId":"68","severity":1,"message":"74","line":30,"column":26,"nodeType":"70","messageId":"71","endLine":30,"endColumn":43},{"ruleId":"68","severity":1,"message":"75","line":31,"column":10,"nodeType":"70","messageId":"71","endLine":31,"endColumn":26},{"ruleId":"68","severity":1,"message":"76","line":31,"column":28,"nodeType":"70","messageId":"71","endLine":31,"endColumn":47},{"ruleId":"64","replacedBy":"77"},{"ruleId":"66","replacedBy":"78"},"no-native-reassign",["79"],"no-negated-in-lhs",["80"],"@typescript-eslint/no-unused-vars","'msnry' is assigned a value but never used.","Identifier","unusedVar","'TelegramOutlinedSvg' is assigned a value but never used.","'nowPlayingSong' is assigned a value but never used.","'setNowPlayingSong' is assigned a value but never used.","'nowPlayingArtist' is assigned a value but never used.","'setNowPlayingArtist' is assigned a value but never used.",["79"],["80"],"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","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts":"10","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx":"11","C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx":"12"},{"size":579,"mtime":1609726036012,"results":"13","hashOfConfig":"14"},{"size":440,"mtime":1609726036016,"results":"15","hashOfConfig":"14"},{"size":384,"mtime":1609726035985,"results":"16","hashOfConfig":"14"},{"size":1395,"mtime":1609726035988,"results":"17","hashOfConfig":"14"},{"size":235,"mtime":1609726035991,"results":"18","hashOfConfig":"14"},{"size":440,"mtime":1609726035998,"results":"19","hashOfConfig":"14"},{"size":142,"mtime":1609726035985,"results":"20","hashOfConfig":"14"},{"size":132,"mtime":1609726035991,"results":"21","hashOfConfig":"14"},{"size":9607,"mtime":1609727699395,"results":"22","hashOfConfig":"14"},{"size":1072,"mtime":1609462531624,"results":"23","hashOfConfig":"14"},{"size":1241,"mtime":1609726035990,"results":"24","hashOfConfig":"14"},{"size":5418,"mtime":1609726035984,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"lcbj9u",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":"51","usedDeprecatedRules":"28"},"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\index.tsx",[],["52","53"],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\reportWebVitals.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\App.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Header.tsx",[],"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",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\cusotmHooks.ts",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\Footer.tsx",[],"C:\\Users\\jdc10\\Documents\\GitHub\\PersonalWebsite_Static\\src\\components\\AboutMe.tsx",["54","55","56","57","58"],"import \"./AboutMe.scss\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { Tooltip } from \"antd\";\r\nimport { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\n\r\nconst TelegramOutlinedSvg = () => {\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst LastFmLi = () => {\r\n const [nowPlayingSong, setNowPlayingSong] = useState(\"nothing\");\r\n const [nowPlayingArtist, setNowPlayingArtist] = useState(\"no-one\");\r\n\r\n const updateNowPlaying = async () => {\r\n try {\r\n const songData = await axios.get(\r\n \"https://jsonplaceholder.typicode.com/posts\"\r\n );\r\n\r\n console.log(songData.data);\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n updateNowPlaying();\r\n\r\n const interval = setInterval(updateNowPlaying, 10000);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []);\r\n return
  • listening to ____ by ____
    • ;\r\n};\r\n\r\nconst Age = () => {\r\n const [age, setAge] = useState(\r\n Math.round((new Date().getTime() - 1021004428000) / 1000)\r\n );\r\n\r\n const UpdateAge = () => {\r\n setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));\r\n };\r\n\r\n useEffect(() => {\r\n UpdateAge();\r\n\r\n const interval = setInterval(UpdateAge, 1000);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, []);\r\n\r\n return (\r\n
  • \r\n {age} seconds old{\" \"}\r\n
    • \r\n );\r\n};\r\n\r\nexport const AboutMe = () => {\r\n const EmailHandler = () => {\r\n const email = \"Y29udGFjdEBqYWtlY292ZXIubWU=\";\r\n window.prompt(\"Thanks for being a human! Here's my email:\", atob(email));\r\n };\r\n\r\n return (\r\n
    \r\n
    \r\n

    Hi! I'm Jake!

    \r\n\r\n
    \r\n
    \r\n

    A bit about me:

    \r\n\r\n
      \r\n
    • \r\n Name: Jake Cover\r\n
      • \r\n
    • Occupation: Student
      • \r\n
    • Location: Southern California
      • \r\n
    • \r\n Projects:{\" \"}\r\n \r\n document.getElementById(\"project-header\")?.scrollIntoView({\r\n behavior: \"smooth\",\r\n block: \"start\",\r\n })\r\n }\r\n >\r\n Down there\r\n \r\n
      • \r\n
    • \r\n Resume: Over here\r\n
      • \r\n
    • \r\n Find Me:\r\n
        \r\n
      • \r\n Email: \r\n
        • \r\n
      • \r\n Twitter:{\" \"}\r\n \r\n \r\n @cobular_\r\n \r\n \r\n
        • \r\n
      • \r\n GitHub:{\" \"}\r\n \r\n JakeCover\r\n \r\n
        • \r\n
      • \r\n Telegram:{\" \"}\r\n \r\n @cobular\r\n \r\n
        • \r\n
      • Elsewhere: Probably @cobular
        • \r\n
      \r\n
      • \r\n
    \r\n
    \r\n
    \r\n

    I'm:

    \r\n
      \r\n \r\n \r\n
    • \r\n doing (general stuff - in class, projects, sleeping, games)\r\n
      • \r\n
    \r\n
    \r\n
    \r\n
    \r\n
    \r\n );\r\n};\r\n",{"ruleId":"59","replacedBy":"60"},{"ruleId":"61","replacedBy":"62"},{"ruleId":"63","severity":1,"message":"64","line":7,"column":7,"nodeType":"65","messageId":"66","endLine":7,"endColumn":26},{"ruleId":"63","severity":1,"message":"67","line":30,"column":10,"nodeType":"65","messageId":"66","endLine":30,"endColumn":24},{"ruleId":"63","severity":1,"message":"68","line":30,"column":26,"nodeType":"65","messageId":"66","endLine":30,"endColumn":43},{"ruleId":"63","severity":1,"message":"69","line":31,"column":10,"nodeType":"65","messageId":"66","endLine":31,"endColumn":26},{"ruleId":"63","severity":1,"message":"70","line":31,"column":28,"nodeType":"65","messageId":"66","endLine":31,"endColumn":47},"no-native-reassign",["71"],"no-negated-in-lhs",["72"],"@typescript-eslint/no-unused-vars","'TelegramOutlinedSvg' is assigned a value but never used.","Identifier","unusedVar","'nowPlayingSong' is assigned a value but never used.","'setNowPlayingSong' is assigned a value but never used.","'nowPlayingArtist' is assigned a value but never used.","'setNowPlayingArtist' is assigned a value but never used.","no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c70f1b3..675a836 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2262,6 +2262,14 @@ "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==" }, + "@types/imagesloaded": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@types/imagesloaded/-/imagesloaded-4.1.2.tgz", + "integrity": "sha512-QxpoYhaYgv1qXwwPd6EnQFLkzrRZaecIafPsY51fnrsr+qIh0wrPVaOQirBaFl+FjFHk5BMfpf+6QHy0lRrcNw==", + "requires": { + "@types/jquery": "*" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -7965,6 +7973,14 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==" }, + "imagesloaded": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz", + "integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==", + "requires": { + "ev-emitter": "^1.0.0" + } + }, "immer": { "version": "7.0.9", "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz", diff --git a/package.json b/package.json index 89fcc94..6f7fa74 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", + "@types/imagesloaded": "^4.1.2", "@types/jest": "^26.0.19", "@types/masonry-layout": "^4.2.2", "@types/node": "^12.19.11", @@ -14,6 +15,9 @@ "@types/react-dom": "^16.9.10", "@types/react-router-dom": "^5.1.7", "antd": "^4.9.4", + "axios": "^0.21.1", + "gh-pages": "^3.1.0", + "imagesloaded": "^4.1.4", "include-media": "^1.4.9", "masonry-layout": "^4.2.2", "node-sass": "^4.14.1", @@ -23,9 +27,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.1", "typescript": "^4.1.3", - "web-vitals": "^0.2.4", - "axios": "^0.21.1", - "gh-pages": "^3.1.0" + "web-vitals": "^0.2.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx index bd31c5f..6554f0d 100644 --- a/src/components/ProjectGrid.tsx +++ b/src/components/ProjectGrid.tsx @@ -10,6 +10,8 @@ import "./ProjectGrid.scss"; import Masonry from "masonry-layout"; +import ImagesLoaded from "imagesloaded"; + import { useEffect } from "react"; import {LinkOutlined} from "@ant-design/icons"; import CodeDaySD from "../images/SanDiego.svg"; @@ -154,13 +156,18 @@ export const ProjectGrid = () => { useEffect(() => { var elem = document.querySelector("#project-grid"); - // @ts-ignore - var msnry = new Masonry(elem, { - itemSelector: ".GridElement", - gutter: 0, - columnWidth: ".GridSizer", - percentPosition: true, - }); + if (elem) { + const msnry = new Masonry(elem, { + itemSelector: ".GridElement", + gutter: 0, + columnWidth: ".GridSizer", + percentPosition: true, + }); + + ImagesLoaded(elem).on("progress", () => { + msnry.layout?.(); + }) + } }); return (