diff --git a/.eslintrc.js b/.eslintrc.js index 3aa7edfb0d..96f0659a3c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,38 +7,50 @@ module.exports = { node: true, }, extends: 'airbnb', - ignorePatterns: [ - 'node_modules/', - 'build/', - ], + ignorePatterns: ['node_modules/', 'build/'], parser: '@babel/eslint-parser', plugins: ['react'], rules: { - 'jsx-a11y/anchor-is-valid': ['error', { - aspects: ['noHref', 'invalidHref', 'preferButton'], - components: ['Link'], - specialLink: ['to', 'hrefLeft', 'hrefRight'], - }], + 'jsx-a11y/anchor-is-valid': [ + 'error', + { + aspects: ['noHref', 'invalidHref', 'preferButton'], + components: ['Link'], + specialLink: ['to', 'hrefLeft', 'hrefRight'], + }, + ], 'jsx-a11y/click-events-have-key-events': 0, 'jsx-a11y/href-no-hash': 'off', 'jsx-a11y/no-static-element-interactions': 0, 'linebreak-style': ['error', os.EOL === '\r\n' ? 'windows' : 'unix'], - 'no-console': ['error', { - allow: ['warn', 'error', 'info'], - }], + 'no-console': [ + 'error', + { + allow: ['warn', 'error', 'info'], + }, + ], 'no-underscore-dangle': 0, 'react/destructuring-assignment': 0, - 'react/function-component-definition': [2, { namedComponents: 'arrow-function' }], - 'react/jsx-filename-extension': [1, { - extensions: ['.js', '.jsx'], - }], + 'react/function-component-definition': [ + 2, + { namedComponents: 'arrow-function' }, + ], + 'react/jsx-filename-extension': [ + 1, + { + extensions: ['.js', '.jsx'], + }, + ], 'react/jsx-no-useless-fragment': 0, 'react/jsx-one-expression-per-line': 0, 'react/jsx-props-no-spreading': 0, - 'react/jsx-wrap-multilines': [1, { - assignment: true, - declaration: true, - return: true, - }], + 'react/jsx-wrap-multilines': [ + 1, + { + assignment: true, + declaration: true, + return: true, + }, + ], }, }; diff --git a/README.md b/README.md index aa4b8adaaa..184983afc9 100644 --- a/README.md +++ b/README.md @@ -24,29 +24,29 @@ Ensure you have [node](https://nodejs.org/) >= v16. Optionally, use [nvm](https: 1. Clone the repository: - ```bash - git clone git://github.com/mldangelo/personal-site.git - cd personal-site - ``` + ```bash + git clone git://github.com/mldangelo/personal-site.git + cd personal-site + ``` 2. (Optional) Ensure you're on Node v16 or higher: - ```bash - nvm install - node --version - ``` + ```bash + nvm install + node --version + ``` 3. Install dependencies: - ```bash - npm install - ``` + ```bash + npm install + ``` 4. Start the application: - ```bash - npm start - ``` + ```bash + npm start + ``` By default, the application should be available at [http://localhost:3000/](http://localhost:3000/). @@ -67,9 +67,9 @@ For a static export without deploying to GitHub Pages: - Remove or disable `.github/workflows/github-pages.yml`. - Execute: - ```bash - npm run predeploy - ``` + ```bash + npm run predeploy + ``` This will generate a static version in `personal-site/build/` which you can host or deploy to a CDN. diff --git a/docs/adapting-guide.md b/docs/adapting-guide.md index f250f70636..c50e5e4710 100644 --- a/docs/adapting-guide.md +++ b/docs/adapting-guide.md @@ -17,11 +17,11 @@ You may wish to fork this repository or remove my remote origin and add your own 1. Change `homepage` in `package.json` to reflect where you plan to host the site. This is important for static exporting via react-snap. This also changes your path when developing locally. For example, a homepage of `mldangelo.com` places the site at `localhost:3000` and a homepage of `https://mldangelo.github.io/personal-site/` places the site at `localhost:3000/personal-site/`. If you plan to host at on a path such as `https://[your-github-username].github.io/[your-repo-name]`, you should set this now so that your development environment mirrors your production environment. 1. Create a `.env` file. To do this, run: - ```bash - cp sample.env .env - ``` + ```bash + cp sample.env .env + ``` - and set values as appropriate. Most people will not need to modify this file. + and set values as appropriate. Most people will not need to modify this file. ### Adapt Content @@ -59,32 +59,32 @@ Here are answers to questions I've been asked at least twice. I've attempted to 1. My CSS isn't rendering, or I see a 404 instead of my site: - Make sure the `homepage` field of `package.json` points to where you plan to host your site index. Also, double check that you created a `CNAME` file (see deployment instructions above). If neither of these work, please open an issue or send me an [email](mailto:help@mldangelo.com). + Make sure the `homepage` field of `package.json` points to where you plan to host your site index. Also, double check that you created a `CNAME` file (see deployment instructions above). If neither of these work, please open an issue or send me an [email](mailto:help@mldangelo.com). 2. LF / CRLF issues with eslint. - This is a common Windows development pitfall. See @[FrozenFury](https://github.com/FrozenFury)'s [comment](https://github.com/mldangelo/personal-site/issues/263#issuecomment-759216299) for how to update your eslint config to resolve this issue. + This is a common Windows development pitfall. See @[FrozenFury](https://github.com/FrozenFury)'s [comment](https://github.com/mldangelo/personal-site/issues/263#issuecomment-759216299) for how to update your eslint config to resolve this issue. 3. master / main - Github decided to rename the default branch of all of their repositories from master to main, and so did I. See their reasoning [here](https://github.com/github/renaming). If you're trying to pull in recent changes, consider renaming your own branch, or just create a merge commit from my main. + Github decided to rename the default branch of all of their repositories from master to main, and so did I. See their reasoning [here](https://github.com/github/renaming). If you're trying to pull in recent changes, consider renaming your own branch, or just create a merge commit from my main. 4. Google Analytics Warnings when exporting. - Either set up Google Analytics or disable the `Analytics.js` component. Read more about [react-ga](https://github.com/react-ga/react-ga). + Either set up Google Analytics or disable the `Analytics.js` component. Read more about [react-ga](https://github.com/react-ga/react-ga). 5. How do I configure git? What is nano? - Read through [git-scm](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)'s excellent documentation. I recommend setting your default text editor to something you're comfortable with.I like to use vim for writing commit messages. + Read through [git-scm](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)'s excellent documentation. I recommend setting your default text editor to something you're comfortable with.I like to use vim for writing commit messages. 6. Can I host at [username.github.io]? - Sure, see github's documentation [here](https://pages.github.com/). + Sure, see github's documentation [here](https://pages.github.com/). 7. How do I disable eslint? - `echo "*\n" > .eslintignore` Although I really don't recommend it. Linters are good. They help prevent errors, enforce uniform style so that you can spend less time thinking about formatting and more time reading code, and eliminate easy nits for code reviews. If the rules aren't working for you, you should change them. See eslint's documentation [here](https://eslint.org/docs/about/) for more information. + `echo "*\n" > .eslintignore` Although I really don't recommend it. Linters are good. They help prevent errors, enforce uniform style so that you can spend less time thinking about formatting and more time reading code, and eliminate easy nits for code reviews. If the rules aren't working for you, you should change them. See eslint's documentation [here](https://eslint.org/docs/about/) for more information. 8. Why is my website rendering the readme file? - See 1. above and make sure that `.nojekyll` still exists in `public`. This file directs github to not attempt to render the website with Jekyll. + See 1. above and make sure that `.nojekyll` still exists in `public`. This file directs github to not attempt to render the website with Jekyll. diff --git a/docs/contributing.md b/docs/contributing.md index 907dcda18a..02e85ea576 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -13,9 +13,9 @@ Here are a few recommendations to land PRs quickly. ## Preparing a Pull Request 1. Write a good summary in your PR description. - - Concisely explain your changes. - - Justify why your changes are important. - - Explain how to test your change (if not obvious). + - Concisely explain your changes. + - Justify why your changes are important. + - Explain how to test your change (if not obvious). 1. Make sure everything runs. 1. Write tests (if appropriate). 1. Self review your branch. diff --git a/docs/design-goals.md b/docs/design-goals.md index 515e343777..eb8f2f9381 100644 --- a/docs/design-goals.md +++ b/docs/design-goals.md @@ -15,33 +15,33 @@ This projects attempts to follow these design principles. Feedback and discussio ## Good Developer Experience 1. Modular - - It should be relatively straight forward to replace the content in this repository or to add a new feature. - - Good separation of concerns. Components keep track of their own state. Props are not over-utilized. - - Limited vertical depth (changes should be relatively self encapsulated). - - Correct abstractions. - Webpack is complex, but developers don't need to understand how exactly webpack works to use this project. + - It should be relatively straight forward to replace the content in this repository or to add a new feature. + - Good separation of concerns. Components keep track of their own state. Props are not over-utilized. + - Limited vertical depth (changes should be relatively self encapsulated). + - Correct abstractions. - Webpack is complex, but developers don't need to understand how exactly webpack works to use this project. 1. Good Documentation - - Comments exist and have an appropriate level of detail. - - Code should be readable. + - Comments exist and have an appropriate level of detail. + - Code should be readable. 1. Lean - - Projects bloat over time. Actively prune for old and dead code. - - New features that affect the entire project should be carefully considered. - - Buy, don't build. Don't reinvent the wheel. Use popular npm libraries when possible. + - Projects bloat over time. Actively prune for old and dead code. + - New features that affect the entire project should be carefully considered. + - Buy, don't build. Don't reinvent the wheel. Use popular npm libraries when possible. 1. Limited horizontal fragmentation - - Linter to prevent easy PR nits & to prevent developers from wasting time thinking about code style. - - Preferred React Style - ie (functional components & proptypes). - - Consistent file structure based on current best practices. - - Similar features are built similarly. Code reads like an assembly line, not a layer cake. + - Linter to prevent easy PR nits & to prevent developers from wasting time thinking about code style. + - Preferred React Style - ie (functional components & proptypes). + - Consistent file structure based on current best practices. + - Similar features are built similarly. Code reads like an assembly line, not a layer cake. ## Stable -1. Use *Boring* technologies - - Javascript over reason or typescript. Limited ecmascript experimental features. - - Prefer popular and well maintained npm packages. +1. Use _Boring_ technologies + - Javascript over reason or typescript. Limited ecmascript experimental features. + - Prefer popular and well maintained npm packages. 1. Maintainable - - Easy setup. - - It should be easy to deploy any version of this site. - - Limited external dependencies (ie no missing headers for external libraries). - - Dependencies are kept up to date (currently uses dependabot). + - Easy setup. + - It should be easy to deploy any version of this site. + - Limited external dependencies (ie no missing headers for external libraries). + - Dependencies are kept up to date (currently uses dependabot). 1. Good tests. 1. Stable API - This project has been forked > 100 times. It should be easy for those forks adopt changes in main. diff --git a/public/images/favicon/manifest.json b/public/images/favicon/manifest.json index 30b4306af2..f7aeb7f5d9 100755 --- a/public/images/favicon/manifest.json +++ b/public/images/favicon/manifest.json @@ -1,41 +1,41 @@ { - "name": "mldangelo.com", - "icons": [ - { - "src": "/images/favicon/android-icon-36x36.png", - "sizes": "36x36", - "type": "image/png", - "density": "0.75" - }, - { - "src": "/images/favicon/android-icon-48x48.png", - "sizes": "48x48", - "type": "image/png", - "density": "1.0" - }, - { - "src": "/images/favicon/android-icon-72x72.png", - "sizes": "72x72", - "type": "image/png", - "density": "1.5" - }, - { - "src": "/images/favicon/android-icon-96x96.png", - "sizes": "96x96", - "type": "image/png", - "density": "2.0" - }, - { - "src": "/images/favicon/android-icon-144x144.png", - "sizes": "144x144", - "type": "image/png", - "density": "3.0" - }, - { - "src": "/images/favicon/android-icon-192x192.png", - "sizes": "192x192", - "type": "image/png", - "density": "4.0" - } - ] + "name": "mldangelo.com", + "icons": [ + { + "src": "/images/favicon/android-icon-36x36.png", + "sizes": "36x36", + "type": "image/png", + "density": "0.75" + }, + { + "src": "/images/favicon/android-icon-48x48.png", + "sizes": "48x48", + "type": "image/png", + "density": "1.0" + }, + { + "src": "/images/favicon/android-icon-72x72.png", + "sizes": "72x72", + "type": "image/png", + "density": "1.5" + }, + { + "src": "/images/favicon/android-icon-96x96.png", + "sizes": "96x96", + "type": "image/png", + "density": "2.0" + }, + { + "src": "/images/favicon/android-icon-144x144.png", + "sizes": "144x144", + "type": "image/png", + "density": "3.0" + }, + { + "src": "/images/favicon/android-icon-192x192.png", + "sizes": "192x192", + "type": "image/png", + "density": "4.0" + } + ] } diff --git a/public/index.html b/public/index.html index 0f48a8d60b..d616a278dd 100644 --- a/public/index.html +++ b/public/index.html @@ -1,32 +1,98 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - +
- - + diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js index 7bfc42b67d..f4a7a75791 100644 --- a/src/__tests__/App.test.js +++ b/src/__tests__/App.test.js @@ -46,7 +46,9 @@ describe('renders the app', () => { it('can navigate to /about', async () => { expect.assertions(7); - const aboutLink = document.querySelector('#header > nav > ul > li:nth-child(1) > a'); + const aboutLink = document.querySelector( + '#header > nav > ul > li:nth-child(1) > a', + ); expect(aboutLink).toBeInTheDocument(); await act(async () => { await aboutLink.click(); @@ -61,7 +63,9 @@ describe('renders the app', () => { it('can navigate to /resume', async () => { expect.assertions(3); - const contactLink = document.querySelector('#header > nav > ul > li:nth-child(2) > a'); + const contactLink = document.querySelector( + '#header > nav > ul > li:nth-child(2) > a', + ); expect(contactLink).toBeInTheDocument(); await act(async () => { await contactLink.click(); @@ -72,7 +76,9 @@ describe('renders the app', () => { it('can navigate to /projects', async () => { expect.assertions(3); - const contactLink = document.querySelector('#header > nav > ul > li:nth-child(3) > a'); + const contactLink = document.querySelector( + '#header > nav > ul > li:nth-child(3) > a', + ); expect(contactLink).toBeInTheDocument(); await act(async () => { await contactLink.click(); @@ -83,7 +89,9 @@ describe('renders the app', () => { it('can navigate to /stats', async () => { expect.assertions(5); - const contactLink = document.querySelector('#header > nav > ul > li:nth-child(4) > a'); + const contactLink = document.querySelector( + '#header > nav > ul > li:nth-child(4) > a', + ); expect(contactLink).toBeInTheDocument(); await act(async () => { await contactLink.click(); @@ -96,7 +104,9 @@ describe('renders the app', () => { it('can navigate to /contact', async () => { expect.assertions(3); - const contactLink = document.querySelector('#header > nav > ul > li:nth-child(5) > a'); + const contactLink = document.querySelector( + '#header > nav > ul > li:nth-child(5) > a', + ); expect(contactLink).toBeInTheDocument(); await act(async () => { await contactLink.click(); diff --git a/src/components/Contact/EmailLink.js b/src/components/Contact/EmailLink.js index 65c1cbcc4a..42f0defde7 100644 --- a/src/components/Contact/EmailLink.js +++ b/src/components/Contact/EmailLink.js @@ -54,33 +54,36 @@ const EmailLink = ({ loopMessage }) => { const [char, updateChar] = useState(0); // points to current char const [isActive, setIsActive] = useState(true); // disable when all messages are printed - useInterval(() => { - let newIdx = idx; - let newChar = char; - if (char - hold >= messages[idx].length) { - newIdx += 1; - newChar = 0; - } - if (newIdx === messages.length) { - if (loopMessage) { - updateIter(0); - updateChar(0); + useInterval( + () => { + let newIdx = idx; + let newChar = char; + if (char - hold >= messages[idx].length) { + newIdx += 1; + newChar = 0; + } + if (newIdx === messages.length) { + if (loopMessage) { + updateIter(0); + updateChar(0); + } else { + setIsActive(false); + } } else { - setIsActive(false); + updateMessage(messages[newIdx].slice(0, newChar)); + updateIter(newIdx); + updateChar(newChar + 1); } - } else { - updateMessage(messages[newIdx].slice(0, newChar)); - updateIter(newIdx); - updateChar(newChar + 1); - } - }, isActive ? delay : null); + }, + isActive ? delay : null, + ); return (
setIsActive(false)} - onMouseLeave={() => (idx < messages.length) && setIsActive(true)} + onMouseLeave={() => idx < messages.length && setIsActive(true)} > {message} diff --git a/src/components/Projects/Cell.js b/src/components/Projects/Cell.js index 55ed92b4b9..f4a6f575a7 100644 --- a/src/components/Projects/Cell.js +++ b/src/components/Projects/Cell.js @@ -6,8 +6,12 @@ const Cell = ({ data }) => (
-

{data.title}

- +

+ {data.title} +

+
{data.title} diff --git a/src/components/Resume/Courses.js b/src/components/Resume/Courses.js index 8c7991131a..47b4d09fba 100644 --- a/src/components/Resume/Courses.js +++ b/src/components/Resume/Courses.js @@ -3,20 +3,22 @@ import PropTypes from 'prop-types'; import Course from './Courses/Course'; -const getRows = (courses) => courses.sort((a, b) => { - let ret = 0; - if (a.university > b.university) ret = -1; - else if (a.university < b.university) ret = 1; - else if (a.number > b.number) ret = 1; - else if (a.number < b.number) ret = -1; - return ret; -}).map((course, idx) => ( - -)); +const getRows = (courses) => courses + .sort((a, b) => { + let ret = 0; + if (a.university > b.university) ret = -1; + else if (a.university < b.university) ret = 1; + else if (a.number > b.number) ret = 1; + else if (a.number < b.number) ret = -1; + return ret; + }) + .map((course, idx) => ( + + )); const Courses = ({ data }) => (
@@ -24,19 +26,19 @@ const Courses = ({ data }) => (

Selected Courses

-
    - {getRows(data)} -
+
    {getRows(data)}
); Courses.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - title: PropTypes.string, - number: PropTypes.string, - link: PropTypes.string, - university: PropTypes.string, - })), + data: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + number: PropTypes.string, + link: PropTypes.string, + university: PropTypes.string, + }), + ), }; Courses.defaultProps = { diff --git a/src/components/Resume/Courses/Course.js b/src/components/Resume/Courses/Course.js index 4d143a12cf..1f94614cc7 100644 --- a/src/components/Resume/Courses/Course.js +++ b/src/components/Resume/Courses/Course.js @@ -7,7 +7,11 @@ const Course = ({ data, last }) => (

{data.number}:

{data.title}

 - {!last &&

•

} + {!last && ( +
+

•

+
+ )} ); diff --git a/src/components/Resume/Education.js b/src/components/Resume/Education.js index b2ffe4951a..b99af8eda3 100644 --- a/src/components/Resume/Education.js +++ b/src/components/Resume/Education.js @@ -10,21 +10,20 @@ const Education = ({ data }) => (

Education

{data.map((degree) => ( - + ))}
); Education.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - school: PropTypes.string, - degree: PropTypes.string, - link: PropTypes.string, - year: PropTypes.number, - })), + data: PropTypes.arrayOf( + PropTypes.shape({ + school: PropTypes.string, + degree: PropTypes.string, + link: PropTypes.string, + year: PropTypes.number, + }), + ), }; Education.defaultProps = { diff --git a/src/components/Resume/Education/Degree.js b/src/components/Resume/Education/Degree.js index 7fa8f884ca..8e9eb74263 100644 --- a/src/components/Resume/Education/Degree.js +++ b/src/components/Resume/Education/Degree.js @@ -5,7 +5,9 @@ const Degree = ({ data }) => (

{data.degree}

-

{data.school}, {data.year}

+

+ {data.school}, {data.year} +

); diff --git a/src/components/Resume/Experience.js b/src/components/Resume/Experience.js index 9f698e39b8..b4456e6531 100644 --- a/src/components/Resume/Experience.js +++ b/src/components/Resume/Experience.js @@ -10,24 +10,23 @@ const Experience = ({ data }) => (

Experience

{data.map((job) => ( - + ))} ); Experience.propTypes = { - data: PropTypes.arrayOf(PropTypes.exact({ - name: PropTypes.string, - position: PropTypes.string, - url: PropTypes.string, - startDate: PropTypes.string, - endDate: PropTypes.string, - highlights: PropTypes.arrayOf(PropTypes.string), - summary: PropTypes.string, - })), + data: PropTypes.arrayOf( + PropTypes.exact({ + name: PropTypes.string, + position: PropTypes.string, + url: PropTypes.string, + startDate: PropTypes.string, + endDate: PropTypes.string, + highlights: PropTypes.arrayOf(PropTypes.string), + summary: PropTypes.string, + }), + ), }; Experience.defaultProps = { diff --git a/src/components/Resume/Experience/Job.js b/src/components/Resume/Experience/Job.js index 0fec429445..23e7270601 100644 --- a/src/components/Resume/Experience/Job.js +++ b/src/components/Resume/Experience/Job.js @@ -10,8 +10,14 @@ const Job = ({ }) => (
-

{name} - {position}

-

{dayjs(startDate).format('MMMM YYYY')} - {endDate ? dayjs(endDate).format('MMMM YYYY') : 'PRESENT'}

+

+ {name} - {position} +

+

+ {' '} + {dayjs(startDate).format('MMMM YYYY')} -{' '} + {endDate ? dayjs(endDate).format('MMMM YYYY') : 'PRESENT'} +

{summary ? ( { - const initialButtons = Object.fromEntries([['All', false]].concat(categories.map(({ name }) => [name, false]))); + const initialButtons = Object.fromEntries( + [['All', false]].concat(categories.map(({ name }) => [name, false])), + ); const [buttons, setButtons] = useState(initialButtons); const handleChildClick = (label) => { // Toggle button that was clicked. Turn all other buttons off. - const newButtons = Object.keys(buttons).reduce((obj, key) => ({ - ...obj, - [key]: (label === key) && !buttons[key], - }), {}); + const newButtons = Object.keys(buttons).reduce( + (obj, key) => ({ + ...obj, + [key]: label === key && !buttons[key], + }), + {}, + ); // Turn on 'All' button if other buttons are off newButtons.All = !Object.keys(buttons).some((key) => newButtons[key]); setButtons(newButtons); @@ -22,9 +27,10 @@ const Skills = ({ skills, categories }) => { const getRows = () => { // search for true active categories - const actCat = Object.keys(buttons).reduce((cat, key) => ( - buttons[key] ? key : cat - ), 'All'); + const actCat = Object.keys(buttons).reduce( + (cat, key) => (buttons[key] ? key : cat), + 'All', + ); const comparator = (a, b) => { let ret = 0; @@ -37,13 +43,11 @@ const Skills = ({ skills, categories }) => { return ret; }; - return skills.sort(comparator).filter((skill) => (actCat === 'All' || skill.category.includes(actCat))) + return skills + .sort(comparator) + .filter((skill) => actCat === 'All' || skill.category.includes(actCat)) .map((skill) => ( - + )); }; @@ -61,30 +65,31 @@ const Skills = ({ skills, categories }) => {

Skills

-

Note: I think these sections are silly, but everyone seems to have one. - Here is a *mostly* honest overview of my skills. +

+ Note: I think these sections are silly, but everyone seems to have + one. Here is a *mostly* honest overview of my skills.

-
- {getButtons()} -
-
- {getRows()} -
+
{getButtons()}
+
{getRows()}
); }; Skills.propTypes = { - skills: PropTypes.arrayOf(PropTypes.shape({ - title: PropTypes.string, - competency: PropTypes.number, - category: PropTypes.arrayOf(PropTypes.string), - })), - categories: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - color: PropTypes.string, - })), + skills: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + competency: PropTypes.number, + category: PropTypes.arrayOf(PropTypes.string), + }), + ), + categories: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string, + color: PropTypes.string, + }), + ), }; Skills.defaultProps = { diff --git a/src/components/Resume/Skills/SkillBar.js b/src/components/Resume/Skills/SkillBar.js index b9eca32307..6917974c0b 100644 --- a/src/components/Resume/Skills/SkillBar.js +++ b/src/components/Resume/Skills/SkillBar.js @@ -18,7 +18,9 @@ const SkillBar = ({ data, categories }) => { return (
-
{title}
+
+ {title} +
{competency} / 5
@@ -31,10 +33,12 @@ SkillBar.propTypes = { competency: PropTypes.number.isRequired, title: PropTypes.string.isRequired, }).isRequired, - categories: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - color: PropTypes.string, - })), + categories: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string, + color: PropTypes.string, + }), + ), }; SkillBar.defaultProps = { diff --git a/src/components/Stats/Table.js b/src/components/Stats/Table.js index a14fbe6e26..d2528519cf 100644 --- a/src/components/Stats/Table.js +++ b/src/components/Stats/Table.js @@ -20,16 +20,18 @@ const Table = ({ data }) => ( ); Table.propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - format: PropTypes.func, - label: PropTypes.string.isRequired, - link: PropTypes.string, - value: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.number, - PropTypes.string, - ]), - })).isRequired, + data: PropTypes.arrayOf( + PropTypes.shape({ + format: PropTypes.func, + label: PropTypes.string.isRequired, + link: PropTypes.string, + value: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.number, + PropTypes.string, + ]), + }), + ).isRequired, }; export default Table; diff --git a/src/components/Template/Hamburger.js b/src/components/Template/Hamburger.js index 01b344c6a5..16f67b1edc 100644 --- a/src/components/Template/Hamburger.js +++ b/src/components/Template/Hamburger.js @@ -14,11 +14,15 @@ const Hamburger = () => {
    {open ? (
  • -
    setOpen(!open)} className="menu-hover">✕
    +
    setOpen(!open)} className="menu-hover"> + ✕ +
    • ) : (
  • -
    setOpen(!open)} className="menu-hover">☰
    +
    setOpen(!open)} className="menu-hover"> + ☰ +
    • )}
diff --git a/src/components/Template/Navigation.js b/src/components/Template/Navigation.js index 2026d0cba0..e345f40980 100644 --- a/src/components/Template/Navigation.js +++ b/src/components/Template/Navigation.js @@ -8,17 +8,23 @@ import routes from '../../data/routes'; const Navigation = () => (