more skills descriptions

.eslintrc.cjs

@@ -59,6 +59,7 @@ module.exports = {
     'react/no-unescaped-entities': 'off',
     'react/jsx-one-expression-per-line': 'off',
     'react/jsx-wrap-multilines': 'off',
+    'react/require-default-props': 'off',
     // turned off because they were conflicting with prettier
     'no-confusing-arrow': 'off',
     'implicit-arrow-linebreak': 'off',

package.json

@@ -22,11 +22,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-markdown": "^9.0.1",
     "react-scroll-parallax": "^3.4.5",
     "react-simple-maps": "^3.0.0",
+    "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2",
     "usehooks-ts": "^3.1.0",
     "vite": "^5.4.6",
+    "vite-plugin-markdown": "^2.2.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/App.tsx

@@ -5,8 +5,8 @@ import Footer from 'components/Footer';
 import Basics from 'pages/Basics';
 import ScrollPages from 'components/ScrollPages';
 import ResumeTimeline from 'pages/ResumeTimeline';
-import theme from './flowbite-theme';
 import Skills from 'pages/Skills';
+import theme from './flowbite-theme';
 
 const App: React.FC = () => (
   <Flowbite theme={{ theme }}>

src/components/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-console */
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  showErrorMessage?: boolean;
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  public static getDerivedStateFromError(): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError && this.props.showErrorMessage) {
+      return <h1>Sorry.. there was an error</h1>;
+    }
+    if (this.state.hasError) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/Footer.tsx

@@ -5,39 +5,43 @@ const Footer: React.FC = () => {
   const isDesktop = useMediaQuery('(min-width: 768px)');
 
   return (
-    <footer className="p-8 text-center md:fixed md:bottom-8 md:left-8 md:z-30 md:p-0 md:text-left">
-      <figure>
-        <Popover
-          placement={isDesktop ? 'right' : 'top'}
-          trigger="click"
-          arrow={false}
-          content={
-            <figcaption>
-              <Card className="m-0 min-w-96 [&>*]:gap-2 [&>*]:p-4">
-                <p className="my-2 text-xs">
-                  {isDesktop ? 'Left: ' : 'Below: '}
-                  Jen at Hálsanefshellir Cave, Iceland
-                </p>
-                <p className="my-2 text-xs">
-                  <em>Background:</em> Niagara Gorge, downstream of Niagara
-                  Falls near the Whirlpool Rapids on the US side
-                </p>
-              </Card>
-            </figcaption>
-          }
-        >
-          <button type="button" title="click for photo info">
-            <Avatar
-              tabIndex={0}
-              img="images/avatar.jpg"
-              rounded
-              size="xl"
-              alt="Jen - close up of face, in a cave on a black sand beach in Iceland"
-            />
-          </button>
-        </Popover>
-      </figure>
-    </footer>
+    <>
+      <footer className="p-8 text-center md:fixed md:bottom-8 md:left-8 md:z-30 md:p-0 md:text-left">
+        <figure>
+          <Popover
+            placement={isDesktop ? 'right' : 'top'}
+            trigger="click"
+            arrow={false}
+            content={
+              <figcaption>
+                <Card className="m-0 min-w-96 [&>*]:gap-2 [&>*]:p-4">
+                  <p className="my-2 text-xs">
+                    {isDesktop ? 'Left: ' : 'Below: '}
+                    Jen at Hálsanefshellir Cave, Iceland
+                  </p>
+                  <p className="my-2 text-xs">
+                    <em>Background:</em> Niagara Gorge, downstream of Niagara
+                    Falls near the Whirlpool Rapids on the US side
+                  </p>
+                </Card>
+              </figcaption>
+            }
+          >
+            <button type="button" title="click for photo info">
+              <Avatar
+                tabIndex={0}
+                img="images/avatar.jpg"
+                rounded
+                size="xl"
+                alt="Jen - close up of face, in a cave on a black sand beach in Iceland"
+              />
+            </button>
+          </Popover>
+        </figure>
+      </footer>
+      {/* Add space so you can always scroll to see bottom content */}
+      <div className="md:h-72" />
+    </>
   );
 };
 

src/components/LoadingSkeleton.tsx

@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge';
+
+type LoadingSkeletonProps = {
+  className?: string;
+};
+
+/**
+ *  https://flowbite.com/docs/components/skeleton/
+ */
+const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({ className }) => (
+  <div role="status" className={twMerge('max-w-sm animate-pulse', className)}>
+    <div className="mb-2.5 h-2 max-w-[360px] rounded-full bg-gray-200 dark:bg-gray-700" />
+    <div className="mb-2.5 h-2 rounded-full bg-gray-200 dark:bg-gray-700" />
+    <div className="mb-2.5 h-2 max-w-[330px] rounded-full bg-gray-200 dark:bg-gray-700" />
+    <div className="mb-2.5 h-2 max-w-[300px] rounded-full bg-gray-200 dark:bg-gray-700" />
+    <div className="h-2 max-w-[360px] rounded-full bg-gray-200 dark:bg-gray-700" />
+    <span className="sr-only">Loading</span>
+  </div>
+);
+
+export default LoadingSkeleton;

src/data/resume.json

@@ -422,6 +422,8 @@
         "JS",
         "React",
         "ReactJS",
+        "Redux",
+        "Reakit",
         "Yarn",
         "NPM",
         "Storybook",
@@ -431,14 +433,16 @@
         "GraphQL",
         "Apollo GraphQL",
         "Recoil",
-        "Storybook",
         "Webpack",
         "Babel.js",
-        "eslint",
-        "prettier",
+        "ESLint",
+        "Prettier",
         "CSS Modules",
-        "styled components",
-        "Material UI"
+        "Styled Components",
+        "Material UI",
+        "Formik",
+        "Yup",
+        "React Hook Form"
       ]
     },
     {
@@ -449,6 +453,7 @@
         "CSS",
         "JavaScript",
         "JS",
+        "Twitter Bootstrap",
         "PHP",
         "React",
         "AngularJS",
@@ -470,14 +475,10 @@
         "React",
         "React Testing Library",
         "eslint/jsx-a11y",
-        "WCAG"
+        "WCAG",
+        "VoiceOver"
       ]
     },
-    {
-      "name": "Agile",
-      "level": "Proficient",
-      "keywords": ["Jira", "Scrum", ""]
-    },
     {
       "name": "Automated Testing",
       "level": "Master",
@@ -493,16 +494,17 @@
         "Mocha",
         "jUnit",
         "Mockito",
-        "what is the c# one called?",
         "Selenium",
         "Cucumber",
         "SpecFlow",
         "Storyshots",
-        "Snapshot testing"
+        "Snapshot testing",
+        "NUnit",
+        "XUnit"
       ]
     },
     {
-      "name": "Devops - should I call this something else?",
+      "name": "Devops",
       "level": "Competent",
       "keywords": [
         "Azure",
@@ -512,7 +514,10 @@
         "GCP",
         "Firebase",
         "Kubernetes",
-        "Docker"
+        "Docker",
+        "Git",
+        "Github",
+        "Bitbucket"
       ],
       "dev environment?": [
         "Webpack",
@@ -522,26 +527,33 @@
         "Gulp",
         "Grunt",
         "Gradle",
-        "Capistrano"
+        "Capistrano",
+        "Git",
+        "Mercurial",
+        "Maven",
+        "Artifactory"
       ],
       "other tools?": [
         "Pendo",
         "Google Analytics",
         "Launch Darkly",
         "FullStory",
         "Sentry",
-        "Segment",
-        "Maven",
-        "Artifactory"
+        "Segment"
       ]
     },
     {
       "name": "Third Party APIs",
       "level": "Competent",
-      "keywords": ["Google Maps", "Shopify", "definitely more things here"]
+      "keywords": [
+        "Google Maps",
+        "Shopify",
+        "Slackbot",
+        "definitely more things here"
+      ]
     },
     {
-      "name": "Cloud",
+      "name": "Cloud Native",
       "level": "Competent",
       "keywords": [
         "Azure Functions",
@@ -565,7 +577,11 @@
         "JSP",
         "Kotlin",
         "Python",
-        "Django"
+        "Django",
+        "Swagger",
+        "REST",
+        "GraphQL",
+        "Apollo GraphQL"
       ]
     },
     {

src/data/skills/API_Development.md

@@ -0,0 +1 @@
+apiapiapiapiapi

src/data/skills/Automated_Testing.md

@@ -0,0 +1 @@
+I tend to wind up being the person on the team who is always pushing for more meaningful tests. I don't just want code coverage metrics though, I want tests that will ensure that specific issues do not reoccur and tests that make development easier. A lot of times this means adding end-to-end tests or figuring out how to write a test around a clunky piece of legacy code that no one wants to touch. I've also found a lot of value in writing scripts to create test data in the dev database on a few different occasions, which has helped me in developing a feature but also helps the team maintain that feature and others as the test data is expanded to more use cases.

src/data/skills/Cloud_Native.md

@@ -0,0 +1 @@
+fluffy clouds

src/data/skills/Devops.md

@@ -0,0 +1,3 @@
+- I always try to fix any local setup things or automations that will make my life easier and hopefully help others as well
+- Campus labs azure
+- Being at startups for the past 4 years I've also wound up having some ownership over other tooling as well...

src/data/skills/Mobile_Development.md

@@ -0,0 +1 @@
+get off your damn phone

src/data/skills/React.md

@@ -0,0 +1,3 @@
+I started using React in 2016 when the team I was on at Campus Labs decided to switch. I began the migration alone, with some guidance from other teams that had already made the switch, and later taught others how to use React. From there I went on to fully frontend roles at Crisp and Wagmo, both using React nearly 100% of the time.
+
+I've worked with class components and _Redux_ for state management but I've also worked a lot with functional components, hooks, and context for global state. For most of the apps I've worked on it's made more sense to persist everything on the backend and use _React Query_ or _Apollo GraphQL_ to access that data.

src/data/skills/Third_Party_APIs.md

@@ -0,0 +1 @@
+hello

src/data/skills/Web_Accessibility.md

@@ -0,0 +1 @@
+When I worked at Campus Labs, our design team was constantly trying to improve the accessibility of our platform and I learned a lot of basics from working with them on fixes. When I moved on to smaller startups, I became the voice for improving accessibility as the relative expert and learned even more in trying to teach these practices to others. I think it is most important to add some static checking like `eslint/jsx-a11y` to catch some basic issues. And using something like _React Testing Library_ as it is documented gets you very far in making accessible components. I've also learned the basics of using VoiceOver on Mac to test accessibility more completely.

src/data/skills/Web_Development.md

@@ -0,0 +1 @@
+I learned HTML and JavaScript in high school and tinkered with websites throughout college. Professionally, I've almost always worked on webapps - either MVC backend with a lightweight frontend or a RESTful/GraphQL backend with a full frontend framework. I've been through all of the browser compatibility issues of the early 2000's and working with plain javascript without a framework enough to understand the fundamentals very well.

src/flowbite-theme.ts

@@ -12,7 +12,7 @@ const theme: CustomFlowbiteTheme = {
         base: 'aspect-square object-cover border-2 border-white',
       },
       size: {
-        xl: 'w-60',
+        xl: 'w-60 md:w-40 xl:w-60',
       },
     },
   },
@@ -38,7 +38,7 @@ const theme: CustomFlowbiteTheme = {
     },
     title: {
       base: 'flex w-full items-center justify-between p-5 text-left font-medium text-gray-500 first:rounded-t-lg last:rounded-b-lg dark:text-gray-400',
-
+      heading: 'flex w-full gap-2 justify-between',
       flush: {
         off: 'hover:bg-gray-100 dark:hover:bg-gray-800',
       },