Code Splitting (#91)

* update resume typography, convert skills to mapped style JSX, update wording from PDF * export features as default exports * add vite configs for splitting teh codebase for smaller initial bundle size * using the 6.4 > API from react-router-dom * remove old unnecessary test, update package versions * update tested version in GH actions workflow
dpgraham-com · Sep 30, 2023 · a8f684e · a8f684e
1 parent b306b8f
commit a8f684e
Show file tree

Hide file tree

Showing 21 changed files with 940 additions and 1,064 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
   },
   rules: {
     "@typescript-eslint/no-shadow": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
     "import/no-unresolved": "off",
     "import/named": "off",
   },

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [ 18 ]
+        node-version: [ 20 ]
 
     steps:
       - name: Checkout

diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+tsconfig.tsbuildinfo
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,38 +15,38 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "5.14.3",
-    "@mui/material": "5.14.5",
-    "axios": "^1.4.0",
+    "@mui/icons-material": "5.14.11",
+    "@mui/material": "5.14.11",
+    "axios": "^1.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "6.15.0"
+    "react-markdown": "^9.0.0",
+    "react-router-dom": "6.16.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "eslint": "^8.47.0",
-    "eslint-plugin-import": "^2.28.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.8.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.50.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
-    "prettier": "3.0.2",
-    "typescript": "^5.1.6",
+    "prettier": "3.0.3",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.34.1",
-    "web-vitals": "^3.4.0"
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.6",
+    "web-vitals": "^3.5.0"
   },
   "browserslist": {
     "production": [

diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,52 +2,57 @@ import { CssBaseline, ThemeProvider, useMediaQuery } from "@mui/material";
 import { AppContext } from "components/appContext";
 import { customTheme } from "components/customTheme";
 import { DpgPageError, FallbackError } from "components/DpgError";
-import { AppHeader } from "components/Nav";
-import { NavDrawer } from "components/Nav/NavDrawer";
-import { AboutMe } from "features/AboutMe";
-import { Articles } from "features/Articles";
-import { Home } from "features/Home";
-import { Resume } from "features/Resume/Resume";
+import { Root } from "components/Layout";
 import React, { useMemo, useState } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { RouterProvider, createBrowserRouter } from "react-router-dom";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    children: [
+      {
+        path: "",
+        lazy: () => import("./features/Home"),
+      },
+      {
+        path: "resume",
+        lazy: () => import("./features/Resume"),
+      },
+      {
+        path: "about",
+        lazy: () => import("./features/AboutMe"),
+      },
+      {
+        path: "about",
+        lazy: () => import("./features/Articles"),
+      },
+      {
+        path: "*",
+        element: <DpgPageError statusCode={404} message={"page not found"} />,
+      },
+    ],
+  },
+]);
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
   const prefersDarkMode: boolean = useMediaQuery(
-    "(prefers-color-scheme: dark)"
+    "(prefers-color-scheme: dark)",
   );
   const [darkMode, setDarkMode] = useState<boolean>(prefersDarkMode);
 
   const theme = useMemo(() => customTheme(darkMode), [darkMode]);
 
   return (
     <>
-      <AppContext.Provider value={{ showMenu, darkMode }}>
+      <AppContext.Provider
+        value={{ showMenu, setShowMenu, darkMode, setDarkMode }}
+      >
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <FallbackError>
-            <BrowserRouter>
-              <AppHeader
-                showMenu={showMenu}
-                setShowMenu={setShowMenu}
-                darkMode={darkMode}
-                setDarkMode={setDarkMode}
-              />
-              <NavDrawer setShowMenu={setShowMenu} showMenu={showMenu} />
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/articles/*" element={<Articles />} />
-                <Route path="/about" element={<AboutMe />} />
-                <Route path="/resume" element={<Resume />} />
-                <Route
-                  path="*"
-                  element={
-                    <DpgPageError statusCode={404} message={"page not found"} />
-                  }
-                />
-              </Routes>
-              {/*</Box>*/}
-            </BrowserRouter>
+            <RouterProvider router={router} />
           </FallbackError>
         </ThemeProvider>
       </AppContext.Provider>

diff --git a/src/components/CloudChallengeResume/CloudChallengeResume.tsx b/src/components/CloudChallengeResume/CloudChallengeResume.tsx
@@ -9,6 +9,37 @@ import { Container, Link } from "@mui/material";
 import React from "react";
 import styles from "./resume.module.css";
 
+const softSkills = [
+  "Public Speaking",
+  "Problem Analysis",
+  "Project Management",
+  "Customer Service",
+  "Conflict Resolution",
+];
+
+const hardSkills = [
+  "Devops",
+  "CI/CD",
+  "Linux",
+  "Containerization",
+  "Cloud Computing",
+  "Python",
+  "JavaScript/TypeScript",
+  "SQL",
+  "Go",
+  "Bash/shell scripting",
+  "Git",
+  "Docker",
+  "Kubernetes",
+  "Django",
+  "React.js",
+  "HTML/CSS",
+  "GitHub Actions",
+  "Terraform",
+  "Web Design",
+  "Technical/Policy Writing",
+];
+
 /**
  * This Resume is, primarily in HTML and css as part of the cloud resume challenge.
  * @constructor
@@ -26,9 +57,9 @@ export function CloudChallengeResume() {
           <div className={styles.summary}>
             {/* Summary ToDo: update*/}
             <span>
-              Full-stack developer versed in cloud infrastructure and proficient
-              at developing cost-effective solutions. Seeking a work environment
-              with diverse ideas and opportunities for continued growth.
+              Web developer with 3 years of experience using back end and
+              front-end technology, a year of experience managing cost-effective
+              cloud solutions, and a background in environmental science.
             </span>
           </div>
           {/* Contact info */}
@@ -99,7 +130,7 @@ export function CloudChallengeResume() {
               <div className={styles.sectionListItem}>
                 <div className={styles.left}>
                   <div className={styles.subSectionTitle}>
-                    Full-Stack Developer
+                    Full-Stack Developer and Environmental Policy Writer
                   </div>
                   <div className={styles.subSectionDescription}>
                     United States Environmental Protection Agency (EPA)
@@ -110,13 +141,9 @@ export function CloudChallengeResume() {
                 </div>
                 <ul className={styles.subSectionBullet}>
                   <li>
-                    Implemented new data analysis methods to group related
-                    hazardous waste sites and automated outreach to exceed
-                    hazardous waste generator registration targets.{" "}
-                  </li>
-                  <li>
-                    Interfaced with stakeholder to collect, triage, and analyze
-                    e-Manifest data-quality issues.
+                    Automated generator outreach through data analysis to group
+                    hazardous waste sites by company and notify them of orphaned
+                    sites to exceed annual registration targets by 350%.
                   </li>
                   <li>
                     Designed, developed, and published an open-source web
@@ -130,6 +157,13 @@ export function CloudChallengeResume() {
                     expanded documentation and guidance for stakeholders seeking
                     to use e-Manifest.
                   </li>
+                  <li>
+                    Promulgated national policies that established the legal
+                    framework for system users to meet their regulatory
+                    requirements; co-wrote the e-Manifest Third Rule which
+                    established requirements for reports to be submitted
+                    digitally.
+                  </li>
                 </ul>
               </div>
               {/* Teaching Assistant */}
@@ -280,44 +314,25 @@ export function CloudChallengeResume() {
               <div className={styles.left}>
                 <div className={styles.name}>Hard</div>
               </div>
-              <div className={styles.skillsRow}>
-                <div className={styles.skill}>Devops</div>
-                <div className={styles.skill}>CI/CD</div>
-                <div className={styles.skill}>Linux</div>
-                <div className={styles.skill}>Containerization</div>
-                <div className={styles.skill}>Cloud Infrastructure</div>
-              </div>
-            </div>
-            <div>
               <div className={styles.skillsSection}>
-                <div className={styles.left}>
-                  <div className={styles.name}>Tools and Languages</div>
-                </div>
                 <div className={styles.skillsRow}>
-                  <div className={styles.skill}>Python</div>
-                  <div className={styles.skill}>JavaScript/TypeScript</div>
-                  <div className={styles.skill}>SQL</div>
-                  <div className={styles.skill}>Go</div>
-                  <div className={styles.skill}>Bash/shell scripting</div>
-                  <div className={styles.skill}>Git</div>
-                  <div className={styles.skill}>Docker</div>
-                  <div className={styles.skill}>Kubernetes</div>
-                  <div className={styles.skill}>Django</div>
-                  <div className={styles.skill}>React.js</div>
-                  <div className={styles.skill}>GitHub Actions</div>
-                  <div className={styles.skill}>Terraform</div>
+                  {hardSkills.map((skill) => (
+                    <div key={`${skill}-skill`} className={styles.skill}>
+                      {skill}
+                    </div>
+                  ))}
                 </div>
               </div>
               <div className={styles.skillsSection}>
                 <div className={styles.left}>
                   <div className={styles.name}>Soft</div>
                 </div>
                 <div className={styles.skillsRow}>
-                  <div className={styles.skill}>Public Speaking</div>
-                  <div className={styles.skill}>Problem Analysis</div>
-                  <div className={styles.skill}>Project Management</div>
-                  <div className={styles.skill}>Customer Service</div>
-                  <div className={styles.skill}>Attention to Detail</div>
+                  {softSkills.map((skill) => (
+                    <div key={`${skill}-skill`} className={styles.skill}>
+                      {skill}
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>

diff --git a/src/components/CloudChallengeResume/resume.module.css b/src/components/CloudChallengeResume/resume.module.css
@@ -27,6 +27,12 @@
     margin-bottom: 5px;
 }
 
+@media (max-width: 568px) {
+    .fullName {
+        font-size: 30px;
+    }
+}
+
 .firstName {
     font-weight: 700;
 }
@@ -52,6 +58,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    overflow-x: auto;
 }
 
 .contactInfoColumn {
@@ -79,7 +86,7 @@
     color: var(--primary-color);
 }
 
-.email ,
+.email,
 .phone {
     color: #999;
     font-weight: 300;
@@ -94,7 +101,7 @@
 
 .position {
     font-size: x-large;
-    color: gray;
+    color: rgb(128, 128, 128);
     display: inline-block;
 }
 
@@ -137,6 +144,7 @@
 
 .subSectionBullet {
     margin-top: 0;
+    overflow-x: auto;
 }
 
 .sectionListItem {
@@ -155,7 +163,7 @@
     margin-bottom: 0;
 }
 
-.left ,
+.left,
 .right {
     vertical-align: top;
     display: inline-block;

diff --git a/src/components/Nav/AppHeader.tsx → src/components/Layout/AppHeader.tsx b/src/components/Nav/AppHeader.tsx → src/components/Layout/AppHeader.tsx
diff --git a/src/components/Nav/NavDrawer.tsx → src/components/Layout/NavDrawer.tsx b/src/components/Nav/NavDrawer.tsx → src/components/Layout/NavDrawer.tsx
@@ -8,7 +8,7 @@ import {
   ListItemIcon,
   ListItemText,
 } from "@mui/material";
-import { routes } from "components/Nav/routes";
+import { routes } from "components/Layout/routes";
 import React, { Dispatch, SetStateAction } from "react";
 import { useNavigate } from "react-router-dom";