Skip to content

Commit

Permalink
Merge pull request #3 from jgettings/skills
Browse files Browse the repository at this point in the history
Skills section
  • Loading branch information
jgettings authored Oct 2, 2024
2 parents 39893d1 + 02d0893 commit b24d122
Show file tree
Hide file tree
Showing 27 changed files with 1,188 additions and 104 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
11 changes: 0 additions & 11 deletions src/App.test.tsx

This file was deleted.

2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Footer from 'components/Footer';
import Basics from 'pages/Basics';
import ScrollPages from 'components/ScrollPages';
import ResumeTimeline from 'pages/ResumeTimeline';
import Skills from 'pages/Skills';
import theme from './flowbite-theme';

const App: React.FC = () => (
Expand All @@ -15,6 +16,7 @@ const App: React.FC = () => (
<ScrollPages>
<Basics />
<ResumeTimeline />
<Skills />
</ScrollPages>
</main>
<Footer />
Expand Down
41 changes: 41 additions & 0 deletions src/components/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
@@ -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;
70 changes: 37 additions & 33 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
</>
);
};

Expand Down
21 changes: 21 additions & 0 deletions src/components/LoadingSkeleton.tsx
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion src/components/ScrollPages/Heading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const ScrollPageHeading: React.FC<HeadingProps> = ({ children }) => {

return (
// height is 0 to not overlap the page header
<div className="top-11 z-30 mx-auto mb-20 mt-10 flex h-0 w-full justify-center md:sticky">
<div className="top-11 z-30 mx-auto mb-32 mt-10 flex h-0 w-full justify-center md:sticky">
<Parallax
// Make it so that it is smaller when it's over the page header so we don't cover buttons
scaleX={[1, 0]}
Expand Down
82 changes: 55 additions & 27 deletions src/data/resume.json
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,8 @@
"JS",
"React",
"ReactJS",
"Redux",
"Reakit",
"Yarn",
"NPM",
"Storybook",
Expand All @@ -431,14 +433,17 @@
"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",
"Builder.io"
]
},
{
Expand All @@ -449,6 +454,7 @@
"CSS",
"JavaScript",
"JS",
"Twitter Bootstrap",
"PHP",
"React",
"AngularJS",
Expand All @@ -470,14 +476,10 @@
"React",
"React Testing Library",
"eslint/jsx-a11y",
"WCAG"
"WCAG",
"VoiceOver"
]
},
{
"name": "Agile",
"level": "Proficient",
"keywords": ["Jira", "Scrum", ""]
},
{
"name": "Automated Testing",
"level": "Master",
Expand All @@ -493,16 +495,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",
Expand All @@ -512,42 +515,56 @@
"GCP",
"Firebase",
"Kubernetes",
"Docker"
],
"dev environment?": [
"Docker",
"Git",
"Github",
"Bitbucket",
"Webpack",
"Babel",
"Create React App",
"NextJS",
"Gulp",
"Grunt",
"Gradle",
"Capistrano"
],
"other tools?": [
"Capistrano",
"Git",
"Mercurial",
"Maven",
"Artifactory",
"Pendo",
"Google Analytics",
"Launch Darkly",
"FullStory",
"Sentry",
"Segment",
"Maven",
"Artifactory"
"Vite",
"Launch Darkly"
]
},
{
"name": "Third Party APIs",
"level": "Competent",
"keywords": ["Google Maps", "Shopify", "definitely more things here"]
"keywords": [
"Google Maps",
"Shopify",
"Slackbot",
"OAuth",
"Firebase Authentication",
"Firebase Remote Config",
"Launch Darkly"
]
},
{
"name": "Cloud",
"name": "Cloud Native",
"level": "Competent",
"keywords": [
"Azure Functions",
"Azure Table Storage",
"Azure Blob Storage",
"Azure ServiceBus Queue"
"Azure ServiceBus Queue",
"Azure Storage Queue",
"event-driven data processing",
"message queue"
]
},
{
Expand All @@ -565,13 +582,24 @@
"JSP",
"Kotlin",
"Python",
"Django"
"Django",
"Swagger",
"REST",
"GraphQL",
"Apollo GraphQL"
]
},
{
"name": "Mobile Development",
"level": "Competent",
"keywords": ["Android Native", "Java", "React Native"]
"keywords": [
"Android Native",
"Java",
"React Native",
"Gradle",
"Google Play Store",
"Google Maps API"
]
}
],
"projects": [
Expand Down
3 changes: 3 additions & 0 deletions src/data/skills/API_Development.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
While I've been focused on the frontend at my last couple of roles, I still have had a hand in designing the API contracts needed to get various features working. In this capacity I've worked with both RESTful and GraphQL APIs and I've also helped make minor adjustments to them as needed in Python and Kotlin.

In full stack roles I've worked extensively with REST APIs and APIs that return a custom set of data tailored to the frontend without following a standard like REST. Most of this has been in C# and Java. I've also worked with many webapps that were pure MVC or a mix of MVC with some javascript on the frontend for interactivity.
1 change: 1 addition & 0 deletions src/data/skills/Automated_Testing.md
Original file line number Diff line number Diff line change
@@ -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.
1 change: 1 addition & 0 deletions src/data/skills/Cloud_Native.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
In my time at _Campus Labs_, we were constantly trying to move things to more scalable infrastructure. We leveraged some cloud services in Microsoft Azure for things like scheduled mailings that needed to go to many people, processing data asynchronously, etc. Pretty much anything that could be done asynchronously outside of the main webapp got moved to Azure Functions (similar to AWS Lambda) and some of these used Azure Tables or Blob Storage for persistence. Many of these services also used Azure Storage Queues or Azure Service Bus.
3 changes: 3 additions & 0 deletions src/data/skills/Devops.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
The majority of my deployed devops experience has been in my time at _Campus Labs_ working with Azure. I was very hands on with spinning up new webapps (APIs and/or frontends), scaling existing apps, and monitoring everything. There I also owned a lot of the build and deploy pipelines in Azure DevOps for our team.

I'm also always a big proponent of investing a little bit of extra time making dev processes and scripts easier and more straightforward. This usually comes in the form of iterative improvements to local testing and how we run apps locally. I also really like tools like Storybook to help run and test components in isolation while also documenting them for future devs.
7 changes: 7 additions & 0 deletions src/data/skills/Mobile_Development.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
As the relative Java expert in my time at _Studio_, I did a small amount of maintenance on the Central Park Android App in 2015. Learning the basics of mobile development was very interesting but I haven't had a chance to apply those skills elsewhere professionally. In my own time I have tinkered a little bit with React Native but nothing worth showcasing.

Since most of my work has been in webapps I have created many responsive components, apps, and pages. Usually this has involved a component library or css framework but I've also created plenty of responsive UIs from scratch with media queries.

#### Public Projects

- [Central Park Android App](https://play.google.com/store/apps/details?id=com.centralpark.mobile&hl=en_US)
Loading

0 comments on commit b24d122

Please sign in to comment.