From 4f22afd05a120afe9c7cc4cec22d1681c6992605 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 11 Jul 2022 10:29:01 -0500 Subject: [PATCH 1/8] Issue1: Creating project components. --- .eslintrc | 2 +- generate-react-cli.json | 15 ++++ package-lock.json | 95 +++------------------- src/__test__/components/About.test.js | 6 +- src/__test__/components/Academic.test.js | 6 +- src/__test__/components/Experience.test.js | 6 +- src/__test__/components/Header.test.js | 6 +- src/__test__/components/Interest.test.js | 6 +- src/__test__/components/Languages.test.js | 6 +- src/__test__/components/Profile.test.js | 6 +- src/__test__/components/Skills.test.js | 6 +- src/components/About/About.js | 20 +++++ src/components/Academic/Academic.js | 18 ++++ src/components/Experience/Experience.js | 18 ++++ src/components/Header/Header.js | 19 +++++ src/components/Interest/Interest.js | 18 ++++ src/components/Languages/Languages.js | 18 ++++ src/components/Profile/Profile.js | 12 +++ src/components/Skills/Skills.js | 18 ++++ src/containers/App.jsx | 20 ++--- 20 files changed, 202 insertions(+), 119 deletions(-) create mode 100644 generate-react-cli.json create mode 100644 src/components/About/About.js create mode 100644 src/components/Academic/Academic.js create mode 100644 src/components/Experience/Experience.js create mode 100644 src/components/Header/Header.js create mode 100644 src/components/Interest/Interest.js create mode 100644 src/components/Languages/Languages.js create mode 100644 src/components/Profile/Profile.js create mode 100644 src/components/Skills/Skills.js diff --git a/.eslintrc b/.eslintrc index 316d5e03..a8b6cb14 100644 --- a/.eslintrc +++ b/.eslintrc @@ -274,7 +274,7 @@ "react/jsx-sort-props": 0, "react/jsx-uses-react": 2, "react/jsx-uses-vars": 2, - "react/no-did-mount-set-state": 2, + "react/no-did-shallow-set-state": 2, "react/no-did-update-set-state": 2, "react/no-multi-comp": 0, "react/no-unknown-property": 2, diff --git a/generate-react-cli.json b/generate-react-cli.json new file mode 100644 index 00000000..cc6799cc --- /dev/null +++ b/generate-react-cli.json @@ -0,0 +1,15 @@ +{ + "usesTypeScript": true, + "usesCssModule": true, + "cssPreprocessor": "styl", + "testLibrary": "Enzyme", + "component": { + "default": { + "path": "src/components", + "withStyle": true, + "withTest": false, + "withStory": true, + "withLazy": false + } + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 75c4a203..2553a7d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3269,19 +3269,6 @@ "node": ">= 0.6" } }, - "node_modules/acorn": { - "version": "6.4.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", - "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==", - "dev": true, - "peer": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", @@ -5675,19 +5662,6 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, - "node_modules/eslint-plugin-react-hooks": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "dev": true, - "peer": true, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" - } - }, "node_modules/eslint-plugin-react/node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -12426,20 +12400,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true, - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -15666,8 +15626,7 @@ "@webpack-cli/configtest": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz", - "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==", - "requires": {} + "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==" }, "@webpack-cli/info": { "version": "1.5.0", @@ -15680,8 +15639,7 @@ "@webpack-cli/serve": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz", - "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==", - "requires": {} + "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==" }, "@xtuc/ieee754": { "version": "1.2.0", @@ -15702,19 +15660,11 @@ "negotiator": "0.6.3" } }, - "acorn": { - "version": "6.4.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", - "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==", - "dev": true, - "peer": true - }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "ajv": { "version": "6.12.6", @@ -15756,8 +15706,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "ansi-align": { "version": "3.0.1", @@ -17497,8 +17446,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true, - "requires": {} + "dev": true }, "eslint-import-resolver-node": { "version": "0.3.6", @@ -17672,14 +17620,6 @@ } } }, - "eslint-plugin-react-hooks": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", - "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", - "dev": true, - "peer": true, - "requires": {} - }, "eslint-scope": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz", @@ -18516,8 +18456,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "requires": {} + "dev": true }, "ignore": { "version": "5.2.0", @@ -19500,8 +19439,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "dev": true, - "requires": {} + "dev": true }, "jest-regex-util": { "version": "28.0.2", @@ -21129,8 +21067,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -22210,8 +22147,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", - "dev": true, - "requires": {} + "dev": true }, "stylus": { "version": "0.58.1", @@ -22502,13 +22438,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", - "dev": true, - "peer": true - }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -22768,8 +22697,7 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "requires": {} + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" }, "enhanced-resolve": { "version": "5.10.0", @@ -22965,8 +22893,7 @@ "ws": { "version": "8.8.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz", - "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==", - "requires": {} + "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==" } } }, diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..73d60b24 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import About from '../../components/About'; +import { shallow } from 'enzyme'; +import About from '../../components/About/About'; describe('', () => { - const about = mount(); + const about = shallow(); test('About render', () => { expect(about.length).toEqual(1); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..a4d41287 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Academic from '../../components/Academic'; +import { shallow } from 'enzyme'; +import Academic from '../../components/Academic/Academic'; describe('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..ceab8cb4 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Experience from '../../components/Experience'; +import { shallow } from 'enzyme'; +import Experience from '../../components/Experience/Experience'; describe('', () => { - const experience = mount(); + const experience = shallow(); test('Experience render', () => { expect(experience.length).toEqual(1); diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index 894ec0ab..c5bf9044 100644 --- a/src/__test__/components/Header.test.js +++ b/src/__test__/components/Header.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Header from '../../components/Header'; +import { shallow } from 'enzyme'; +import Header from '../../components/Header/Header'; describe('
', () => { - const header = mount(
); + const header = shallow(
); test('Header render', () => { expect(header.length).toEqual(1); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..b7393a60 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Interest from '../../components/Interest'; +import { shallow } from 'enzyme'; +import Interest from '../../components/Interest/Interest'; describe('', () => { - const interest = mount(); + const interest = shallow(); test('Interest render', () => { expect(interest.length).toEqual(1); diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 1d10e137..3d0dabbe 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Languages from '../../components/Languages'; +import { shallow } from 'enzyme'; +import Languages from '../../components/Languages/Languages'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..6798725f 100644 --- a/src/__test__/components/Profile.test.js +++ b/src/__test__/components/Profile.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Profile from '../../components/Profile'; +import { shallow } from 'enzyme'; +import Profile from '../../components/Profile/Profile'; describe('', () => { - const profile = mount(); + const profile = shallow(); test('Profile render', () => { expect(profile.length).toEqual(1); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..c46d2eeb 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; -import Skills from '../../components/Skills'; +import { shallow } from 'enzyme'; +import Skills from '../../components/Skills/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); diff --git a/src/components/About/About.js b/src/components/About/About.js new file mode 100644 index 00000000..da55aa91 --- /dev/null +++ b/src/components/About/About.js @@ -0,0 +1,20 @@ +import React from 'react'; + +function About(props) { + return ( +
+

+ {props.text} +

+
+
    +
  • About 1
    • +
  • About 1
    • +
  • About 1
    • +
+
+
+ ); +} + +export default About; \ No newline at end of file diff --git a/src/components/Academic/Academic.js b/src/components/Academic/Academic.js new file mode 100644 index 00000000..9803662f --- /dev/null +++ b/src/components/Academic/Academic.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Academic() { + return ( +
+

Academic

+
+
    +
  • University
    • +
  • Technical Institution
    • +
  • Highschool
    • +
+
+
+ ); +} + +export default Academic; \ No newline at end of file diff --git a/src/components/Experience/Experience.js b/src/components/Experience/Experience.js new file mode 100644 index 00000000..40b047ef --- /dev/null +++ b/src/components/Experience/Experience.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Experience() { + return ( +
+

Experience

+
+
    +
  • experience 1
    • +
  • experience 2
    • +
  • experience 3
    • +
+
+
+ ); +} + +export default Experience; \ No newline at end of file diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 00000000..b116e001 --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,19 @@ +import React from 'react'; + +function Header(props) { + return ( +
+

Eimer Castro

+

job

+

phone

+

email

+

website

+

address

+
+ {props.children} +
+
+ ); +} + +export default Header; \ No newline at end of file diff --git a/src/components/Interest/Interest.js b/src/components/Interest/Interest.js new file mode 100644 index 00000000..0a30479b --- /dev/null +++ b/src/components/Interest/Interest.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Interest() { + return ( +
+

Interest

+
+
    +
  • Reading
    • +
  • Riding motorcycle
    • +
  • Traveling
    • +
+
+
+ ); +} + +export default Interest; \ No newline at end of file diff --git a/src/components/Languages/Languages.js b/src/components/Languages/Languages.js new file mode 100644 index 00000000..1fc3ab4c --- /dev/null +++ b/src/components/Languages/Languages.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Languages() { + return ( +
+

titulo lenguaje

+
+
    +
  • Spanish
    • +
  • English
    • +
  • French
    • +
+
+
+ ); +} + +export default Languages; \ No newline at end of file diff --git a/src/components/Profile/Profile.js b/src/components/Profile/Profile.js new file mode 100644 index 00000000..2fd9ddaa --- /dev/null +++ b/src/components/Profile/Profile.js @@ -0,0 +1,12 @@ +import React from 'react'; + +function Profile() { + return ( +
+

Profile

+

descripcion

+
+ ); +} + +export default Profile; \ No newline at end of file diff --git a/src/components/Skills/Skills.js b/src/components/Skills/Skills.js new file mode 100644 index 00000000..cbed752c --- /dev/null +++ b/src/components/Skills/Skills.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Skills() { + return ( +
+

Skills

+
+
    +
  • Java
    • +
  • Spring
    • +
  • JavaScript
    • +
+
+
+ ); +} + +export default Skills; \ No newline at end of file diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..317e3591 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,17 +1,17 @@ import React from 'react'; import '../styles/components/App.styl'; -import Header from '../components/Header'; -import About from '../components/About'; -import Profile from '../components/Profile'; -import Experience from '../components/Experience'; -import Academic from '../components/Academic'; -import Skills from '../components/Skills'; -import Interest from '../components/Interest'; -import Languages from '../components/Languages'; +import Header from '../components/Header/Header'; +import About from '../components/About/About'; +import Profile from '../components/Profile/Profile'; +import Experience from '../components/Experience/Experience'; +import Academic from '../components/Academic/Academic'; +import Skills from '../components/Skills/Skills'; +import Interest from '../components/Interest/Interest'; +import Languages from '../components/Language/Languages'; const App = () => { return ( - <> +
@@ -21,7 +21,7 @@ const App = () => { - + ) }; From c7f01ea1f7483259ff872b07d458c2c5e0f1c6b4 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 11 Jul 2022 17:35:07 -0500 Subject: [PATCH 2/8] Issue3: Creating getData.js function to consume an API. --- PULL_REQUEST_TEMPLATE.md | 4 +- public/index.html | 4 +- src/components/About/About.js | 2 +- src/components/Academic/Academic.js | 8 +- src/components/Experience/Experience.js | 8 +- src/components/Header/Header.js | 2 +- src/components/Skills/Skills.js | 2 +- src/containers/App.jsx | 2 +- src/css/main.css | 186 ++++++++++++++++++++++++ src/styles/components/App.styl | 134 ++++++++++++++++- src/utils/getData.js | 8 + 11 files changed, 343 insertions(+), 17 deletions(-) create mode 100644 src/css/main.css diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 67105c53..f78449c8 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -7,9 +7,9 @@ Usuario Platzi: ## Reto: -- [ ] Primer problema +- [X] Primer problema - [ ] Segundo problema -- [ ] Tercer problema +- [X] Tercer problema - [ ] Cuarto Problema - [ ] Quinto Problema - [ ] Sexto Problema diff --git a/public/index.html b/public/index.html index b76b4f47..ad75c67d 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,9 @@ - React Base + Resume - Eimer Castro + +
diff --git a/src/components/About/About.js b/src/components/About/About.js index da55aa91..a6dad238 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -2,7 +2,7 @@ import React from 'react'; function About(props) { return ( -
+

{props.text}

diff --git a/src/components/Academic/Academic.js b/src/components/Academic/Academic.js index 9803662f..99fd6185 100644 --- a/src/components/Academic/Academic.js +++ b/src/components/Academic/Academic.js @@ -2,13 +2,13 @@ import React from 'react'; function Academic() { return ( -
+

Academic

    -
  • University
    • -
  • Technical Institution
    • -
  • Highschool
    • +
  • University
    • +
  • Technical Institution
    • +
  • Highschool
diff --git a/src/components/Experience/Experience.js b/src/components/Experience/Experience.js index 40b047ef..0019a6c9 100644 --- a/src/components/Experience/Experience.js +++ b/src/components/Experience/Experience.js @@ -2,13 +2,13 @@ import React from 'react'; function Experience() { return ( -
+

Experience

    -
  • experience 1
    • -
  • experience 2
    • -
  • experience 3
    • +
  • experience 1
    • +
  • experience 2
    • +
  • experience 3
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index b116e001..ed600b9e 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -2,7 +2,7 @@ import React from 'react'; function Header(props) { return ( -
+

Eimer Castro

job

phone

diff --git a/src/components/Skills/Skills.js b/src/components/Skills/Skills.js index cbed752c..af29b45f 100644 --- a/src/components/Skills/Skills.js +++ b/src/components/Skills/Skills.js @@ -2,7 +2,7 @@ import React from 'react'; function Skills() { return ( -
+

Skills

    diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 317e3591..53a37999 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -7,7 +7,7 @@ import Experience from '../components/Experience/Experience'; import Academic from '../components/Academic/Academic'; import Skills from '../components/Skills/Skills'; import Interest from '../components/Interest/Interest'; -import Languages from '../components/Language/Languages'; +import Languages from '../components/Languages/Languages'; const App = () => { return ( diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 00000000..348a0153 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,186 @@ +/* Buttons */ +/* Inputs */ +/* Timeline custom component */ +.timeline { + border-left: 2px solid #E6E9ED; + padding: 1rem 0; +} + +.timeline-card { + position: relative; + margin-left: 31px; + border-left: 2px solid; + margin-bottom: 2rem; +} + +.timeline-card:last-child { + margin-bottom: 1rem; +} + +.timeline-card:before { + content: ''; + display: inline-block; + position: absolute; + background-color: #fff; + border-radius: 10px; + width: 12px; + height: 12px; + top: 20px; + left: -41px; + border: 2px solid; + z-index: 2; +} + +.timeline-card:after { + content: ''; + display: inline-block; + position: absolute; + background-color: currentColor; + width: 29px; + height: 2px; + top: 25px; + left: -29px; + z-index: 1; +} + +.timeline-card-primary { + border-left-color: #4A89DC; +} + +.timeline-card-primary:before { + border-color: #4A89DC; +} + +.timeline-card-primary:after { + background-color: #4A89DC; +} + +.timeline-card-success { + border-left-color: #37BC9B; +} + +.timeline-card-success:before { + border-color: #37BC9B; +} + +.timeline-card-success:after { + background-color: #37BC9B; +} + +html { + scroll-behavior: smooth; +} + +.site-title { + font-size: 1.25rem; + line-height: 2.5rem; +} + +.nav-link { + padding: 0; + font-size: 1.25rem; + line-height: 2.5rem; + color: rgba(0, 0, 0, 0.5); +} + +.nav-link:hover, +.nav-link:focus, +.active .nav-link { + color: rgba(0, 0, 0, 0.8); +} + +.nav-item+.nav-item { + margin-left: 1rem; +} + +.cover { + border-radius: 10px; +} + +.cover-bg { + background-color: #4A89DC; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + border-radius: 10px 10px 0 0; +} + +.avatar { + max-width: 216px; + max-height: 216px; + margin-top: 20px; + text-align: center; + margin-left: auto; + margin-right: auto; +} + +.avatar img { + /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); +} + +footer a:not(.nav-link) { + color: inherit; + border-bottom: 1px dashed; + text-decoration: none; + cursor: pointer; +} + +@media (min-width: 48em) { + .site-title { + float: left; + } + + .site-nav { + float: right; + } + + .avatar { + margin-bottom: -80px; + margin-left: 0; + } +} + +@media print { + body { + background-color: #fff; + } + + .container { + width: auto; + max-width: 100%; + padding: 0; + } + + .cover, + .cover-bg { + border-radius: 0; + } + + .cover.shadow-lg { + box-shadow: none !important; + } + + .cover-bg { + padding: 5rem !important; + padding-bottom: 10px !important; + } + + .avatar { + margin-top: -10px; + } + + .about-section { + padding: 6.5rem 5rem 2rem !important; + } + + .skills-section, + .work-experience-section, + .education-section, + .contant-section { + padding: 1.5rem 5rem 2rem !important; + } + + .page-break { + padding-top: 5rem; + page-break-before: always; + } +} \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..03319915 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,132 @@ -body - background-color blue \ No newline at end of file +.timeline + border-left 2px solid #E6E9ED + padding 1rem 0 + +.timeline-card + position relative + margin-left 31px + border-left 2px solid + margin-bottom 2rem + &:last-child + margin-bottom 1rem + &:before + content '' + display inline-block + position absolute + background-color #fff + border-radius 10px + width 12px + height 12px + top 20px + left -41px + border 2px solid + z-index 2 + &:after + content '' + display inline-block + position absolute + background-color currentColor + width 29px + height 2px + top 25px + left -29px + z-index 1 + +.timeline-card-primary + border-left-color #4A89DC + &:before + border-color #4A89DC + &:after + background-color #4A89DC + +.timeline-card-success + border-left-color #37BC9B + &:before + border-color #37BC9B + &:after + background-color #37BC9B + +html + scroll-behavior smooth + +.site-title + font-size 1.25rem + line-height 2.5rem + +.nav-link + padding 0 + font-size 1.25rem + line-height 2.5rem + color rgba(0, 0, 0, 0.5) + +.nav-link:hover, +.nav-link:focus, +.active .nav-link + color rgba(0, 0, 0, 0.8) + +.nav-item + & + .nav-item + margin-left 1rem + +.cover + border-radius 10px + +.cover-bg + background-color #4A89DC + background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") + border-radius 10px 10px 0 0 + +.avatar + max-width 216px + max-height 216px + margin-top 20px + text-align center + margin-left auto + margin-right auto + img + filter grayscale(100%) + +footer + a + &:not(.nav-link) + color inherit + border-bottom 1px dashed + text-decoration none + cursor pointer + +@media (min-width: 48em) + .site-title + float left + .site-nav + float right + .avatar + margin-bottom -80px + margin-left 0 + +@media print + body + background-color #fff + .container + width auto + max-width 100% + padding 0 + .cover + &.shadow-lg + box-shadow none !important + .cover-bg + padding 5rem !important + padding-bottom 10px !important + .avatar + margin-top -10px + .about-section + padding 6.5rem 5rem 2rem !important + .page-break + padding-top 5rem + page-break-before always + +@media print + .cover, .cover-bg + border-radius 0 + +.skills-section, .work-experience-section, .education-section, .contant-section + padding 1.5rem 5rem 2rem !important \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..41d51e00 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,8 @@ +const getData = (url) => { + return fetch(url) + .then((response) => response.json()) + .then((data) => data) + .catch((error) => error); + }; + + export default getData; \ No newline at end of file From 5f6c9a1e701dec967f321f376aef4fc7b68659a3 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Fri, 15 Jul 2022 19:12:59 -0500 Subject: [PATCH 3/8] Fixing components structure, implementing styles and fixing tests. --- data.json | 228 ++++++++++++++---- package.json | 2 +- src/__test__/components/About.test.js | 24 +- src/__test__/components/Academic.test.js | 25 +- src/__test__/components/Experience.test.js | 25 +- src/__test__/components/Header.test.js | 18 +- src/__test__/components/Interest.test.js | 25 +- src/__test__/components/Languages.test.js | 25 +- src/__test__/components/Profile.test.js | 24 +- src/__test__/components/Skills.test.js | 25 +- src/components/About/About.js | 20 -- src/components/About/index.jsx | 22 ++ src/components/Academic/Academic.js | 18 -- src/components/Academic/index.jsx | 20 ++ src/components/Certificate/index.jsx | 21 ++ src/components/Experience/Experience.js | 18 -- src/components/Experience/index.jsx | 23 ++ src/components/Header/Header.js | 19 -- src/components/Header/index.jsx | 18 ++ src/components/Interest/Interest.js | 18 -- src/components/Interest/index.jsx | 20 ++ src/components/Languages/Languages.js | 18 -- src/components/Languages/index.jsx | 20 ++ .../Profile/{Profile.js => index.jsx} | 6 +- src/components/Skills/Skills.js | 18 -- src/components/Skills/index.jsx | 20 ++ src/containers/App.jsx | 73 ++++-- src/css/main.css | 191 +-------------- src/index.js | 6 +- src/styles/components/App.styl | 145 ++--------- src/utils/getData.js | 24 +- 31 files changed, 541 insertions(+), 618 deletions(-) delete mode 100644 src/components/About/About.js create mode 100644 src/components/About/index.jsx delete mode 100644 src/components/Academic/Academic.js create mode 100644 src/components/Academic/index.jsx create mode 100644 src/components/Certificate/index.jsx delete mode 100644 src/components/Experience/Experience.js create mode 100644 src/components/Experience/index.jsx delete mode 100644 src/components/Header/Header.js create mode 100644 src/components/Header/index.jsx delete mode 100644 src/components/Interest/Interest.js create mode 100644 src/components/Interest/index.jsx delete mode 100644 src/components/Languages/Languages.js create mode 100644 src/components/Languages/index.jsx rename src/components/Profile/{Profile.js => index.jsx} (61%) delete mode 100644 src/components/Skills/Skills.js create mode 100644 src/components/Skills/index.jsx diff --git a/data.json b/data.json index 94dbaad5..d92d4921 100644 --- a/data.json +++ b/data.json @@ -1,109 +1,241 @@ { "data": { - "name": "Melissa Walsh", - "profession": "FrontEnd Developer", - "address": "Bogotá, Colombia.", - "email": "melissa@example.com", - "website": "https://example.com", - "phone": "3042034240", - "avatar": "https://arepa.s3.amazonaws.com/melissa.jpg", - "Profile": "Ignore the squirrels, you'll never catch them anyway hack, for floof tum, tickle bum, jellybean footies curly toes climb leg roll over and sun my belly, ", + "name": "Eimer Castro", + "profession": "FullStack Developer", + "address": "Medellín, Colombia.", + "email": "ewcastroh10@gmail.com", + "website": "https://ewcastroh.com", + "phone": "3005492196", + "avatar": "https://avatars.githubusercontent.com/ewcastroh", + "Profile": "I am a Software Engineer with over five years of experience as a Full Stack Developer. I have developed web applications using Full Stack technologies like Java in Backend. HTML, JavaScript, CSS, and Angular in Frontend and working CI/CD. With knowledge in Web Automation Testing. I have worked in teams with Scrum and Kanban methodologies. I am a responsible, agile, and autodidactic developer analyzing and proposing quality solutions. I am committed to my work with a sense of belonging. I like to update my knowledge continually with cutting-edge technologies in software development. I enjoy coding and improving my skills with clean and extensible good practices.", "certificate": [ { - "date": "Jan 2021", - "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ", - "institution": "Platzi", - "name": "FrontEnd Developer" + "date": "Jun 2022", + "description": "This credential helps organizations identify and develop talent with critical skills for implementing cloud initiatives. Earning AWS Certified Solutions Architect - Associate validates the ability to design and implement distributed systems on AWS.", + "institution": "Amazon Web Services (AWS)", + "name": "AWS Certified Solutions Architect – Associate" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", - "institution": "Platzi", - "name": "Backend Developer" + "date": "Dec 2021", + "description": "This credential helps organizations identify and develop talent with critical skills for implementing cloud initiatives. Earning AWS Certified Developer – Associate validates the ability to write and deploy cloud-based applications.", + "institution": "Amazon Web Services (AWS)", + "name": "AWS Certified Developer – Associate" + }, + { + "date": "Sept 2014 2021", + "description": " The Certified Scrum Developer® course is designed for product developers who are working in a Scrum environment. The goal is to expose students to the most important tools and techniques needed to build good products in the iterative and incremental fashion that Scrum requires. These ideas are central to the entire field of agile product development.", + "institution": "Ceiba Software House S.A.S.", + "name": "Certified Scrum Developer" + }, + { + "date": "Sept 2014 2021", + "description": "Candidates for this exam are developers with at least one year of experience developing with HTML in an object-based, event-driven programming model, and programming essential business logic for a variety of application types, hardware, and software platforms using JavaScript.", + "institution": "Microsoft", + "name": "Exam 480: Programming in HTML5 with JavaScript and CSS3" } ], "Academic": [ { - "degree": "Atomic Master", - "description": " I’m so hungry i’m so hungry but ew not for that pelt around the house and up and down stairs chasing phantoms", - "endDate": "Jan 2017", - "institution": "MIT", - "startDate": "Jan 2018" + "degree": "Grade: Systems and Computer Engineering", + "description": "The curricular program of Systems Engineering and Informatics aims to train upstanding and suitable professionals who can adopt, apply and innovate knowledge in the field of systems and informatics. Also, that they are capable of contributing with their organization, structuring, management, planning, modeling, development, processing, validation, transfer and communication. Information technology is applied in numerous and diverse sectors, and today, computers are present in almost all daily tasks.", + "endDate": "Apr 2014", + "institution": "Universidad Nacional de Colombia", + "startDate": "Jan 2008" }, { - "degree": "Space Engineering", - "description": "Meow in empty rooms. Find empty spot in cupboard and sleep all day check cat door for ambush 10 times before coming in for hack. ", - "endDate": "Decenber 2015", - "institution": "Harvard", - "startDate": "Jan 2017" + "degree": "High School ", + "description": "Preparation for high education.", + "endDate": "Dec 2007", + "institution": "Hernan Villa Baena High School", + "startDate": "Jan 2002" } ], "experience": [ { - "company": "PugStar", + "company": "EPAM Systems", "endDate": "Present", - "jobDescription": "scratch the furniture. Good now the other hand, too lay on arms while you're using the keyboard.", - "jobTitle": "Frontend", - "startDate": "Jan 2020" + "jobDescription": "Analysis and software development, maintenance, and support of existing custom applications in Backend using agile methodology Scrum with continuous integration.", + "jobTitle": "Software Engineer", + "startDate": "Jul 2021" + }, + { + "company": "Globant", + "endDate": "Jan 2021", + "jobDescription": "Analysis and software development in Backend using agile methodology Scrum with continuous integration.", + "jobTitle": "Java Developer", + "startDate": "Mar 2019" + }, + { + "company": "Ceiba Software", + "endDate": "Mar 2019", + "jobDescription": "Analysis, designing and software development as Full Stack developer, using agile methodology Scrum and Kanban with continuous integration and continuous delivery.", + "jobTitle": "Developer Architect", + "startDate": "Aug 2017" + }, + { + "company": "TODO1 Services Inc.", + "endDate": "Jul 2017", + "jobDescription": "Analysis, designing and software development as Full Stack developer, using agile methodology Scrum and Kanban with continuous integration and continuous delivery.", + "jobTitle": "Developer Engineer", + "startDate": "Oct 2016" + }, + { + "company": "Analyst Developer", + "endDate": "Mar 2016", + "jobDescription": "I. Survey of analysis and requirements. II. Design of custom solutions. III. Development of custom applications. IV. Maintenance and support for custom applications.", + "jobTitle": "Clínica Las Américas", + "startDate": "Aug 2015" + }, + { + "company": "TM Solutions", + "endDate": "Jul 2015", + "jobDescription": "I. Survey of analysis and requirements. II. Design of custom solutions. III. Development of custom applications. IV. Maintenance and support for custom applications.", + "jobTitle": "Systems Engineer", + "startDate": "Mar 2015" + }, + { + "company": "Softcaribbean ", + "endDate": "Feb 2015", + "jobDescription": "I. Survey of analysis and requirements. II. Design of custom solutions. III. Development of custom applications. IV. Maintenance and support for custom applications.", + "jobTitle": "Systems Engineer", + "startDate": "Oct 2014" }, { - "company": "CatStore", - "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "company": "Mitsubishi Electric de Colombia", + "endDate": "Jun 2014", + "jobDescription": "I. Helpdesk service line attention. II. Monitoring of communications equipment (backup equipment, servers, switches) and verify correct operation. III. Support in the company's technology projects.", + "jobTitle": "Systems Engineer", + "startDate": "Jun 2013" + }, + { + "company": "Universidad Nacional de Colombia", + "endDate": "Jun 2012", + "jobDescription": "Implementation of a system based on web services, oriented towards the remote operation of robots capable of executing basic soccer moves.", + "jobTitle": "Student Researcher SINTELWEB group", + "startDate": "Nov 2011" } ], "skills": [ + { + "name": "Java SE", + "percentage": "70%" + }, + { + "name": "Java EE", + "percentage": "60%" + }, + { + "name": "Spring Framework", + "percentage": "60%" + }, { "name": "HTML5", - "percentage": "75%" + "percentage": "70%" }, { "name": "CSS", - "percentage": "25%" + "percentage": "50%" }, { "name": "JavaScript", "percentage": "55%" }, + { + "name": "Angular", + "percentage": "40%" + }, { "name": "React", - "percentage": "90%" + "percentage": "30%" + }, + { + "name": "MySQL", + "percentage": "75%" + }, + { + "name": "PostgreSQL", + "percentage": "70%" + }, + { + "name": "Oracle DB", + "percentage": "50%" + }, + { + "name": "PL/SQL", + "percentage": "40%" + }, + { + "name": "Git", + "percentage": "55%" + }, + { + "name": "Scrum", + "percentage": "95%" + }, + { + "name": "JUnit", + "percentage": "50%" + }, + { + "name": "Maven", + "percentage": "70%" + }, + { + "name": "Gradle", + "percentage": "50%" + }, + { + "name": "Docker", + "percentage": "50%" + }, + { + "name": "Kubernetes", + "percentage": "40%" + }, + { + "name": "AWS", + "percentage": "60%" } ], "interest": [ - "javascript", - "develop", - "backend", - "frontend" + "Java", + "Javascript", + "Solidity", + "Blockchain", + "Software Development", + "Backend", + "Frontend" ], "languages": [ { "name": "Spanish", - "percentage": "90%" + "percentage": "100%" }, { "name": "English", - "percentage": "50%" + "percentage": "70%" + }, + { + "name": "French", + "percentage": "1%" } ], "social": [ { "name": "facebook", - "url": "https://facebook.com/" + "url": "https://facebook.com/ewcastroh" }, { "name": "twitter", - "url": "https://twitter.com/" + "url": "https://twitter.com/ewcastroh" }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/ewcastroh" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://www.linkedin.com/in/ewcastroh" } ] } diff --git a/package.json b/package.json index d56de193..21bbec11 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "react", "webpack" ], - "author": "Oscar Barajas ", + "author": "Eimer Castro ", "license": "MIT", "dependencies": { "@babel/core": "7.18.6", diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 73d60b24..cb026cf4 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -1,20 +1,20 @@ import React from 'react'; import { shallow } from 'enzyme'; -import About from '../../components/About/About'; +import { About } from '../../components/About'; describe('', () => { - const about = shallow(); + const about = shallow( < About / > ); - test('About render', () => { - expect(about.length).toEqual(1); - }); + test('About render', () => { + expect(about.length).toEqual(1); + }); - test('About title', () => { - expect(about.find('.About-title').length).toEqual(1); - }); + test('About title', () => { + expect(about.find('.About-title').length).toEqual(1); + }); - test('About haves 3 items', () => { - expect(about.find('.About-item').length).toBeGreaterThan(2); - }); + test('About haves 3 items', () => { + expect(about.find('.About-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index a4d41287..ccf1a456 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,20 +1,21 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Academic from '../../components/Academic/Academic'; +import { Academic } from '../../components/Academic'; describe('', () => { - const academic = shallow(); + const mockInterests = ['Universidad Nacional de Colombia', 'MIT', 'Stanford']; + const academic = shallow( < Academic academic={ mockInterests } / > ); - test('Academic render', () => { - expect(academic.length).toEqual(1); - }); + test('Academic render', () => { + expect(academic.length).toEqual(1); + }); - test('Academic title', () => { - expect(academic.find('.Academic-title').length).toEqual(1); - }); + test('Academic title', () => { + expect(academic.find('.Academic-title').length).toEqual(1); + }); - test('Academic has 3 items', () => { - expect(academic.find('.Academic-item').length).toBeGreaterThan(2); - }); + test('Academic has 3 items', () => { + expect(academic.find('.Academic-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index ceab8cb4..4a1c0358 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,20 +1,21 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Experience from '../../components/Experience/Experience'; +import { Experience } from '../../components/Experience'; describe('', () => { - const experience = shallow(); + const mockExperiences = ['EPAM', 'Globant', 'Ceiba', 'Todo1']; + const experience = shallow( < Experience experiences={ mockExperiences }/ > ); - test('Experience render', () => { - expect(experience.length).toEqual(1); - }); + test('Experience render', () => { + expect(experience.length).toEqual(1); + }); - test('Experience title', () => { - expect(experience.find('.Experience-title').length).toEqual(1); - }); + test('Experience title', () => { + expect(experience.find('.Experience-title').length).toEqual(1); + }); - test('Experience haves 3 items', () => { - expect(experience.find('.Experience-item').length).toBeGreaterThan(2); - }); + test('Experience haves 3 items', () => { + expect(experience.find('.Experience-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index c5bf9044..d507f2ec 100644 --- a/src/__test__/components/Header.test.js +++ b/src/__test__/components/Header.test.js @@ -1,16 +1,16 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Header from '../../components/Header/Header'; +import { Header } from '../../components/Header'; describe('
    ', () => { - const header = shallow(
    ); + const header = shallow( < Header / > ); - test('Header render', () => { - expect(header.length).toEqual(1); - }); + test('Header render', () => { + expect(header.length).toEqual(1); + }); - test('Header title', () => { - expect(header.find('.Header-title').length).toEqual(1); - }); + test('Header title', () => { + expect(header.find('.Header-title').length).toEqual(1); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index b7393a60..53776f30 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,20 +1,21 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Interest from '../../components/Interest/Interest'; +import { Interest } from '../../components/Interest'; describe('', () => { - const interest = shallow(); + const mockInterests = ['Java', 'Solidity', 'Blockchain']; + const interest = shallow( < Interest interests={ mockInterests } / > ); - test('Interest render', () => { - expect(interest.length).toEqual(1); - }); + test('Interest render', () => { + expect(interest.length).toEqual(1); + }); - test('Interest title', () => { - expect(interest.find('.Interest-title').length).toEqual(1); - }); + test('Interest title', () => { + expect(interest.find('.Interest-title').length).toEqual(1); + }); - test('Interest has 3 items', () => { - expect(interest.find('.Interest-item').length).toBeGreaterThan(2); - }); + test('Interest has 3 items', () => { + expect(interest.find('.Interest-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 3d0dabbe..2e75a28a 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,20 +1,21 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Languages from '../../components/Languages/Languages'; +import { Languages } from '../../components/Languages'; describe('', () => { - const languages = shallow(); + const mockLanguages = ['Spanish', 'English', 'French']; + const languages = shallow( < Languages languages={ mockLanguages } / > ); - test('Languages render', () => { - expect(languages.length).toEqual(1); - }); + test('Languages render', () => { + expect(languages.length).toEqual(1); + }); - test('Languages title', () => { - expect(languages.find('.Languages-title').length).toEqual(1); - }); + test('Languages title', () => { + expect(languages.find('.Languages-title').length).toEqual(1); + }); - test('Languages has 3 items', () => { - expect(languages.find('.Languages-item').length).toBeGreaterThan(2); - }); + test('Languages has 3 items', () => { + expect(languages.find('.Languages-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index 6798725f..64e3a09c 100644 --- a/src/__test__/components/Profile.test.js +++ b/src/__test__/components/Profile.test.js @@ -1,20 +1,20 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Profile from '../../components/Profile/Profile'; +import { Profile } from '../../components/Profile'; describe('', () => { - const profile = shallow(); + const profile = shallow( < Profile / > ); - test('Profile render', () => { - expect(profile.length).toEqual(1); - }); + test('Profile render', () => { + expect(profile.length).toEqual(1); + }); - test('Profile title', () => { - expect(profile.find('.Profile-title').length).toEqual(1); - }); + test('Profile title', () => { + expect(profile.find('.Profile-title').length).toEqual(1); + }); - test('Profile have a description', () => { - expect(profile.find('.Profile-desc').length).toEqual(1); - }); + test('Profile have a description', () => { + expect(profile.find('.Profile-desc').length).toEqual(1); + }); -}); +}); \ No newline at end of file diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index c46d2eeb..9b12856e 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,20 +1,21 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Skills from '../../components/Skills/Skills'; +import { Skills } from '../../components/Skills'; describe('', () => { - const skills = shallow(); + const mockSkills = ['Java', 'Spring Boot', 'React', 'AWS']; + const skills = shallow( < Skills skills={ mockSkills }/ > ); - test('Skills render', () => { - expect(skills.length).toEqual(1); - }); + test('Skills render', () => { + expect(skills.length).toEqual(1); + }); - test('Skills title', () => { - expect(skills.find('.Skills-title').length).toEqual(1); - }); + test('Skills title', () => { + expect(skills.find('.Skills-title').length).toEqual(1); + }); - test('Skills has 3 items', () => { - expect(skills.find('.Skills-item').length).toBeGreaterThan(2); - }); + test('Skills has 3 items', () => { + expect(skills.find('.Skills-item').length).toBeGreaterThan(2); + }); -}); +}); \ No newline at end of file diff --git a/src/components/About/About.js b/src/components/About/About.js deleted file mode 100644 index a6dad238..00000000 --- a/src/components/About/About.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -function About(props) { - return ( -
    -

    - {props.text} -

    -
    -
      -
    • About 1
      • -
    • About 1
      • -
    • About 1
      • -
    -
    -
    - ); -} - -export default About; \ No newline at end of file diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx new file mode 100644 index 00000000..4aefba8f --- /dev/null +++ b/src/components/About/index.jsx @@ -0,0 +1,22 @@ +import React from 'react'; + +export const About = ({social}) => { + return ( +
    +

    + More About Me +

    +
    +
      + { + social?.map((socialNet, index) => ( +
    • + {socialNet.name} - {socialNet.url} +
      • + )) + } +
    +
    +
    + ); +} diff --git a/src/components/Academic/Academic.js b/src/components/Academic/Academic.js deleted file mode 100644 index 99fd6185..00000000 --- a/src/components/Academic/Academic.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -function Academic() { - return ( -
    -

    Academic

    -
    -
      -
    • University
      • -
    • Technical Institution
      • -
    • Highschool
      • -
    -
    -
    - ); -} - -export default Academic; \ No newline at end of file diff --git a/src/components/Academic/index.jsx b/src/components/Academic/index.jsx new file mode 100644 index 00000000..5a72c090 --- /dev/null +++ b/src/components/Academic/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export const Academic = ({academic}) => { + return ( +
    +

    Academic

    +
      + { + academic?.map((place, index) => ( +
    • +

      {place.degree}

      +

      {place.description}

      +

      {place.institution}

      +
      • + )) + } +
    +
    + ); + }; diff --git a/src/components/Certificate/index.jsx b/src/components/Certificate/index.jsx new file mode 100644 index 00000000..9d1ba8be --- /dev/null +++ b/src/components/Certificate/index.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +export const Certificate = ({ certificates }) => { + return ( +
    +

    Certificate

    +
      + { + certificates?.map((certification, index) => ( +
    • +

      {certification.date}

      +

      {certification.name}

      +

      {certification.description}

      +

      {certification.institution}

      +
      • + )) + } +
    +
    + ); +}; diff --git a/src/components/Experience/Experience.js b/src/components/Experience/Experience.js deleted file mode 100644 index 0019a6c9..00000000 --- a/src/components/Experience/Experience.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -function Experience() { - return ( -
    -

    Experience

    -
    -
      -
    • experience 1
      • -
    • experience 2
      • -
    • experience 3
      • -
    -
    -
    - ); -} - -export default Experience; \ No newline at end of file diff --git a/src/components/Experience/index.jsx b/src/components/Experience/index.jsx new file mode 100644 index 00000000..28790853 --- /dev/null +++ b/src/components/Experience/index.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export const Experience = ({ experiences }) => { + return ( +
    +

    Experience

    +
    +
      + { + experiences?.map((experience, index) => ( +
    • +

      {experience.company}

      +
      {experience.startDate} - {experience.endDate}
      +

      {experience.jobTitle}

      +

      {experience.jobDescription}

      +
      • + )) + } +
    +
    +
    + ); +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js deleted file mode 100644 index ed600b9e..00000000 --- a/src/components/Header/Header.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -function Header(props) { - return ( -
    -

    Eimer Castro

    -

    job

    -

    phone

    -

    email

    -

    website

    -

    address

    -
    - {props.children} -
    -
    - ); -} - -export default Header; \ No newline at end of file diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx new file mode 100644 index 00000000..eb325b78 --- /dev/null +++ b/src/components/Header/index.jsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export const Header = ({name, avatar, profession, phone, email, website, address, children} ) => { + return ( +
    +

    {name}

    +
    + +
    +

    {profession}

    +

    {phone}

    +

    {email}

    +

    {website}

    +

    {address}

    + {children} +
    + ); +} diff --git a/src/components/Interest/Interest.js b/src/components/Interest/Interest.js deleted file mode 100644 index 0a30479b..00000000 --- a/src/components/Interest/Interest.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -function Interest() { - return ( -
    -

    Interest

    -
    -
      -
    • Reading
      • -
    • Riding motorcycle
      • -
    • Traveling
      • -
    -
    -
    - ); -} - -export default Interest; \ No newline at end of file diff --git a/src/components/Interest/index.jsx b/src/components/Interest/index.jsx new file mode 100644 index 00000000..45535272 --- /dev/null +++ b/src/components/Interest/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export const Interest = ({interests}) => { + return ( +
    +

    Interest

    +
    +
      + { + interests?.map((interest, index) => ( +
    • + {interest} +
      • + )) + } +
    +
    +
    + ); +} diff --git a/src/components/Languages/Languages.js b/src/components/Languages/Languages.js deleted file mode 100644 index 1fc3ab4c..00000000 --- a/src/components/Languages/Languages.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -function Languages() { - return ( -
    -

    titulo lenguaje

    -
    -
      -
    • Spanish
      • -
    • English
      • -
    • French
      • -
    -
    -
    - ); -} - -export default Languages; \ No newline at end of file diff --git a/src/components/Languages/index.jsx b/src/components/Languages/index.jsx new file mode 100644 index 00000000..eedb342c --- /dev/null +++ b/src/components/Languages/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export const Languages = ({languages}) => { + return ( +
    +

    titulo lenguaje

    +
    +
      + { + languages?.map((language, index) => ( +
    • +

      {language.name}: {language.percentage}

      +
      • + )) + } +
    +
    +
    + ); +} diff --git a/src/components/Profile/Profile.js b/src/components/Profile/index.jsx similarity index 61% rename from src/components/Profile/Profile.js rename to src/components/Profile/index.jsx index 2fd9ddaa..daec4bf3 100644 --- a/src/components/Profile/Profile.js +++ b/src/components/Profile/index.jsx @@ -1,12 +1,10 @@ import React from 'react'; -function Profile() { +export const Profile = ({profile}) => { return (

    Profile

    -

    descripcion

    +

    {profile}

    ); } - -export default Profile; \ No newline at end of file diff --git a/src/components/Skills/Skills.js b/src/components/Skills/Skills.js deleted file mode 100644 index af29b45f..00000000 --- a/src/components/Skills/Skills.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -function Skills() { - return ( -
    -

    Skills

    -
    -
      -
    • Java
      • -
    • Spring
      • -
    • JavaScript
      • -
    -
    -
    - ); -} - -export default Skills; \ No newline at end of file diff --git a/src/components/Skills/index.jsx b/src/components/Skills/index.jsx new file mode 100644 index 00000000..d7e77189 --- /dev/null +++ b/src/components/Skills/index.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export const Skills = ({ skills }) => { + return ( +
    +

    Skills

    +
    +
      + { + skills?.map((skill, index) => ( +
    • +

      {skill.name}: {skill.percentage}

      +
      • + )) + } +
    +
    +
    + ); +} diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 53a37999..2c37f0d0 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,28 +1,61 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import '../styles/components/App.styl'; -import Header from '../components/Header/Header'; -import About from '../components/About/About'; -import Profile from '../components/Profile/Profile'; -import Experience from '../components/Experience/Experience'; -import Academic from '../components/Academic/Academic'; -import Skills from '../components/Skills/Skills'; -import Interest from '../components/Interest/Interest'; -import Languages from '../components/Languages/Languages'; +import { Header } from '../components/Header'; +import { About } from '../components/About'; +import { Profile } from '../components/Profile'; +import { Experience } from '../components/Experience'; +import { Certificate } from '../components/Certificate'; +import { Academic } from '../components/Academic'; +import { Skills } from '../components/Skills'; +import { Interest } from '../components/Interest'; +import { Languages } from '../components/Languages'; +import getData from '../utils/getData'; + +const url = 'http://localhost:3000/data' + +const getUserData = () => { + const [data, setData] = useState([]); + + useEffect(() => { + getData(url) + .then(response => setData(response)); + }, []); + return data; +} + +export const App = () => { + const data = getUserData(); + + const { + name, + profession, + phone, + email, + website, + address, + avatar, + Profile: profile, + certificate: certificates, + Academic: academic, + experience: experiences, + skills, + interest: interests, + languages, + social, + } = data; -const App = () => { return ( -
    - +
    +
    - - - - - - + + + + + + + ) }; - -export default App; diff --git a/src/css/main.css b/src/css/main.css index 348a0153..0a157a65 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,186 +1,7 @@ -/* Buttons */ -/* Inputs */ -/* Timeline custom component */ -.timeline { - border-left: 2px solid #E6E9ED; - padding: 1rem 0; -} - -.timeline-card { - position: relative; - margin-left: 31px; - border-left: 2px solid; - margin-bottom: 2rem; -} - -.timeline-card:last-child { - margin-bottom: 1rem; -} - -.timeline-card:before { - content: ''; - display: inline-block; - position: absolute; - background-color: #fff; - border-radius: 10px; - width: 12px; - height: 12px; - top: 20px; - left: -41px; - border: 2px solid; - z-index: 2; -} - -.timeline-card:after { - content: ''; - display: inline-block; - position: absolute; - background-color: currentColor; - width: 29px; - height: 2px; - top: 25px; - left: -29px; - z-index: 1; -} - -.timeline-card-primary { - border-left-color: #4A89DC; -} - -.timeline-card-primary:before { - border-color: #4A89DC; -} - -.timeline-card-primary:after { - background-color: #4A89DC; -} - -.timeline-card-success { - border-left-color: #37BC9B; -} - -.timeline-card-success:before { - border-color: #37BC9B; -} - -.timeline-card-success:after { - background-color: #37BC9B; -} - -html { - scroll-behavior: smooth; -} - -.site-title { - font-size: 1.25rem; - line-height: 2.5rem; -} - -.nav-link { - padding: 0; - font-size: 1.25rem; - line-height: 2.5rem; - color: rgba(0, 0, 0, 0.5); -} - -.nav-link:hover, -.nav-link:focus, -.active .nav-link { - color: rgba(0, 0, 0, 0.8); -} - -.nav-item+.nav-item { - margin-left: 1rem; -} - -.cover { - border-radius: 10px; -} - -.cover-bg { - background-color: #4A89DC; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - border-radius: 10px 10px 0 0; -} - -.avatar { - max-width: 216px; - max-height: 216px; - margin-top: 20px; - text-align: center; - margin-left: auto; - margin-right: auto; -} - -.avatar img { - /* Safari 6.0 - 9.0 */ - filter: grayscale(100%); -} - -footer a:not(.nav-link) { - color: inherit; - border-bottom: 1px dashed; - text-decoration: none; - cursor: pointer; -} - -@media (min-width: 48em) { - .site-title { - float: left; - } - - .site-nav { - float: right; - } - - .avatar { - margin-bottom: -80px; - margin-left: 0; - } -} - -@media print { - body { - background-color: #fff; - } - - .container { - width: auto; - max-width: 100%; - padding: 0; - } - - .cover, - .cover-bg { - border-radius: 0; - } - - .cover.shadow-lg { - box-shadow: none !important; - } - - .cover-bg { - padding: 5rem !important; - padding-bottom: 10px !important; - } - - .avatar { - margin-top: -10px; - } - - .about-section { - padding: 6.5rem 5rem 2rem !important; - } - - .skills-section, - .work-experience-section, - .education-section, - .contant-section { - padding: 1.5rem 5rem 2rem !important; - } - - .page-break { - padding-top: 5rem; - page-break-before: always; - } +html, body { + background-color: #21232A; + color: white; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.3rem; + padding: 70px; } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9077e5ff..83ff5c8c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './containers/App'; +import { App } from './containers/App'; -ReactDOM.render(, document.getElementById('app')); +ReactDOM.createRoot(document.getElementById('app')).render( + +); \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 03319915..815dc6cf 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,132 +1,19 @@ -.timeline - border-left 2px solid #E6E9ED - padding 1rem 0 +html, body + background-color #21232A + color white + font-family Arial, Helvetica, sans-serif + font-size 1.1em + padding 10px -.timeline-card - position relative - margin-left 31px - border-left 2px solid - margin-bottom 2rem - &:last-child - margin-bottom 1rem - &:before - content '' - display inline-block - position absolute - background-color #fff - border-radius 10px - width 12px - height 12px - top 20px - left -41px - border 2px solid - z-index 2 - &:after - content '' - display inline-block - position absolute - background-color currentColor - width 29px - height 2px - top 25px - left -29px - z-index 1 - -.timeline-card-primary - border-left-color #4A89DC - &:before - border-color #4A89DC - &:after - background-color #4A89DC - -.timeline-card-success - border-left-color #37BC9B - &:before - border-color #37BC9B - &:after - background-color #37BC9B - -html - scroll-behavior smooth - -.site-title - font-size 1.25rem - line-height 2.5rem - -.nav-link - padding 0 - font-size 1.25rem - line-height 2.5rem - color rgba(0, 0, 0, 0.5) - -.nav-link:hover, -.nav-link:focus, -.active .nav-link - color rgba(0, 0, 0, 0.8) - -.nav-item - & + .nav-item - margin-left 1rem - -.cover - border-radius 10px - -.cover-bg - background-color #4A89DC - background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") - border-radius 10px 10px 0 0 +.academic-section, .certificate-section, .interest-section, .language-section, .skills-section, .work-experience-section + padding 1.5rem 5rem 2rem !important .avatar - max-width 216px - max-height 216px - margin-top 20px - text-align center - margin-left auto - margin-right auto - img - filter grayscale(100%) - -footer - a - &:not(.nav-link) - color inherit - border-bottom 1px dashed - text-decoration none - cursor pointer - -@media (min-width: 48em) - .site-title - float left - .site-nav - float right - .avatar - margin-bottom -80px - margin-left 0 - -@media print - body - background-color #fff - .container - width auto - max-width 100% - padding 0 - .cover - &.shadow-lg - box-shadow none !important - .cover-bg - padding 5rem !important - padding-bottom 10px !important - .avatar - margin-top -10px - .about-section - padding 6.5rem 5rem 2rem !important - .page-break - padding-top 5rem - page-break-before always - -@media print - .cover, .cover-bg - border-radius 0 - -.skills-section, .work-experience-section, .education-section, .contant-section - padding 1.5rem 5rem 2rem !important \ No newline at end of file + width 250px + height 250px + border-top-left-radius 50% 50% + border-top-right-radius 50% 50% + border-bottom-right-radius 50% 50% + border-bottom-left-radius 50% 50% + border 2px solid #CCC + margin-bottom 2px diff --git a/src/utils/getData.js b/src/utils/getData.js index 41d51e00..12f546af 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -1,8 +1,18 @@ const getData = (url) => { - return fetch(url) - .then((response) => response.json()) - .then((data) => data) - .catch((error) => error); - }; - - export default getData; \ No newline at end of file + return fetch(url) + .then((response) => response.json()) + .then((data) => data) + .catch((error) => error); +}; +export default getData; + +/* const getData = async(url) => { + try { + const response = await fetch(url); + const data = await response.json(); + return data; + } catch (error) { + console.error(error); + } +}; +export default getData; */ \ No newline at end of file From 57608601aa16776f62a19fc91a948741f145172f Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 18 Jul 2022 18:14:42 -0500 Subject: [PATCH 4/8] Fixing styles. --- data.json | 58 ++++++++++++++------------- src/__test__/components/About.test.js | 3 +- src/components/About/index.jsx | 6 ++- src/components/Academic/index.jsx | 8 ++-- src/components/Certificate/index.jsx | 12 +++--- src/components/Experience/index.jsx | 10 +++-- src/components/Header/index.jsx | 12 +++--- src/components/Interest/index.jsx | 2 +- src/components/Languages/index.jsx | 4 +- src/components/Skills/index.jsx | 2 +- src/containers/App.jsx | 2 +- src/css/main.css | 5 ++- src/index.js | 2 +- src/styles/components/App.styl | 1 + 14 files changed, 72 insertions(+), 55 deletions(-) diff --git a/data.json b/data.json index d92d4921..813e5e44 100644 --- a/data.json +++ b/data.json @@ -118,83 +118,83 @@ "skills": [ { "name": "Java SE", - "percentage": "70%" + "percentage": "70" }, { "name": "Java EE", - "percentage": "60%" + "percentage": "60" }, { "name": "Spring Framework", - "percentage": "60%" + "percentage": "60" }, { "name": "HTML5", - "percentage": "70%" + "percentage": "70" }, { "name": "CSS", - "percentage": "50%" + "percentage": "50" }, { "name": "JavaScript", - "percentage": "55%" + "percentage": "55" }, { "name": "Angular", - "percentage": "40%" + "percentage": "40" }, { "name": "React", - "percentage": "30%" + "percentage": "30" }, { "name": "MySQL", - "percentage": "75%" + "percentage": "75" }, { "name": "PostgreSQL", - "percentage": "70%" + "percentage": "70" }, { "name": "Oracle DB", - "percentage": "50%" + "percentage": "50" }, { "name": "PL/SQL", - "percentage": "40%" + "percentage": "40" }, { "name": "Git", - "percentage": "55%" + "percentage": "55" }, { "name": "Scrum", - "percentage": "95%" + "percentage": "95" }, { "name": "JUnit", - "percentage": "50%" + "percentage": "50" }, { "name": "Maven", - "percentage": "70%" + "percentage": "70" }, { "name": "Gradle", - "percentage": "50%" + "percentage": "50" }, { "name": "Docker", - "percentage": "50%" + "percentage": "50" }, { "name": "Kubernetes", - "percentage": "40%" + "percentage": "40" }, { "name": "AWS", - "percentage": "60%" + "percentage": "60" } ], "interest": [ @@ -209,33 +209,37 @@ "languages": [ { "name": "Spanish", - "percentage": "100%" + "percentage": "100" }, { "name": "English", - "percentage": "70%" + "percentage": "70" }, { "name": "French", - "percentage": "1%" + "percentage": "1" } ], "social": [ { "name": "facebook", - "url": "https://facebook.com/ewcastroh" + "url": "https://facebook.com/ewcastroh", + "badge": "https://img.shields.io/badge/Facebook-0077B5?style=for-the-badge&logo=facebook&logoColor=white" }, { "name": "twitter", - "url": "https://twitter.com/ewcastroh" + "url": "https://twitter.com/ewcastroh", + "badge": "https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" }, { "name": "github", - "url": "https://github.com/ewcastroh" + "url": "https://github.com/ewcastroh", + "badge": "https://img.shields.io/badge/Github-0077B5?style=for-the-badge&logo=github&logoColor=white" }, { "name": "linkedin", - "url": "https://www.linkedin.com/in/ewcastroh" + "url": "https://www.linkedin.com/in/ewcastroh", + "badge": "https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" } ] } diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index cb026cf4..a4ab0ec0 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -3,7 +3,8 @@ import { shallow } from 'enzyme'; import { About } from '../../components/About'; describe('', () => { - const about = shallow( < About / > ); + const mockAbout = ['LinkedIn', 'Twitter', 'Facebook']; + const about = shallow( < About social={ mockAbout } / > ); test('About render', () => { expect(about.length).toEqual(1); diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx index 4aefba8f..9abe6d4f 100644 --- a/src/components/About/index.jsx +++ b/src/components/About/index.jsx @@ -10,8 +10,10 @@ export const About = ({social}) => {
      { social?.map((socialNet, index) => ( -
    • - {socialNet.name} - {socialNet.url} +
    • + + +
      • )) } diff --git a/src/components/Academic/index.jsx b/src/components/Academic/index.jsx index 5a72c090..2376cfdd 100644 --- a/src/components/Academic/index.jsx +++ b/src/components/Academic/index.jsx @@ -8,9 +8,11 @@ export const Academic = ({academic}) => { { academic?.map((place, index) => (
    • -

      {place.degree}

      -

      {place.description}

      -

      {place.institution}

      +

      +

      {place.degree}
      +
      {place.description}
      +
      {place.institution}
      +

      • )) } diff --git a/src/components/Certificate/index.jsx b/src/components/Certificate/index.jsx index 9d1ba8be..c9029b72 100644 --- a/src/components/Certificate/index.jsx +++ b/src/components/Certificate/index.jsx @@ -3,15 +3,17 @@ import React from 'react'; export const Certificate = ({ certificates }) => { return (
      -

      Certificate

      +

      Certificates

        { certificates?.map((certification, index) => (
      • -

        {certification.date}

        -

        {certification.name}

        -

        {certification.description}

        -

        {certification.institution}

        +

        +

        {certification.name}
        +
        {certification.date}
        +
        {certification.description}
        +
        {certification.institution}
        +

        • )) } diff --git a/src/components/Experience/index.jsx b/src/components/Experience/index.jsx index 28790853..eb607d9d 100644 --- a/src/components/Experience/index.jsx +++ b/src/components/Experience/index.jsx @@ -9,10 +9,12 @@ export const Experience = ({ experiences }) => { { experiences?.map((experience, index) => (
      • -

        {experience.company}

        -
        {experience.startDate} - {experience.endDate}
        -

        {experience.jobTitle}

        -

        {experience.jobDescription}

        +

        +

        {experience.company}
        +
        {experience.startDate} - {experience.endDate}
        +
        {experience.jobTitle}
        +
        {experience.jobDescription}
        +

        • )) } diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index eb325b78..1e707b11 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -7,11 +7,13 @@ export const Header = ({name, avatar, profession, phone, email, website, address
        -

        {profession}

        -

        {phone}

        -

        {email}

        -

        {website}

        -

        {address}

        +

        +

        {profession}
        +
        Phone: {phone}
        +
        Email: {email}
        +
        Website: {website}
        +
        Location: {address}
        +

        {children}
    ); diff --git a/src/components/Interest/index.jsx b/src/components/Interest/index.jsx index 45535272..4223fe22 100644 --- a/src/components/Interest/index.jsx +++ b/src/components/Interest/index.jsx @@ -8,7 +8,7 @@ export const Interest = ({interests}) => {
      { interests?.map((interest, index) => ( -
    • +
    • {interest}
      • )) diff --git a/src/components/Languages/index.jsx b/src/components/Languages/index.jsx index eedb342c..14b9548f 100644 --- a/src/components/Languages/index.jsx +++ b/src/components/Languages/index.jsx @@ -3,13 +3,13 @@ import React from 'react'; export const Languages = ({languages}) => { return (
      -

      titulo lenguaje

      +

      Languages

        { languages?.map((language, index) => (
      • -

        {language.name}: {language.percentage}

        + {language.name}: {language.percentage}%
        • )) } diff --git a/src/components/Skills/index.jsx b/src/components/Skills/index.jsx index d7e77189..9120a465 100644 --- a/src/components/Skills/index.jsx +++ b/src/components/Skills/index.jsx @@ -9,7 +9,7 @@ export const Skills = ({ skills }) => { { skills?.map((skill, index) => (
      • -

        {skill.name}: {skill.percentage}

        + {skill.name}: {skill.percentage}%
        • )) } diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 2c37f0d0..1e240a10 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -46,7 +46,7 @@ export const App = () => { return ( -
        +
        diff --git a/src/css/main.css b/src/css/main.css index 0a157a65..df74a123 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,7 +1,8 @@ -html, body { +html, +body { background-color: #21232A; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; padding: 70px; -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 83ff5c8c..6741c9b5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; import { App } from './containers/App'; ReactDOM.createRoot(document.getElementById('app')).render( diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 815dc6cf..28fdc506 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -17,3 +17,4 @@ html, body border-bottom-left-radius 50% 50% border 2px solid #CCC margin-bottom 2px + From 05d6c0d9dd56e5870c7279d63483f86f98bab5e8 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 18 Jul 2022 18:32:37 -0500 Subject: [PATCH 5/8] Fixing html structure. --- src/components/Academic/index.jsx | 5 +++-- src/components/Certificate/index.jsx | 5 +++-- src/components/Experience/index.jsx | 5 +++-- src/components/Header/index.jsx | 4 ++-- src/components/Skills/index.jsx | 5 +++-- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/Academic/index.jsx b/src/components/Academic/index.jsx index 2376cfdd..ba91a765 100644 --- a/src/components/Academic/index.jsx +++ b/src/components/Academic/index.jsx @@ -8,11 +8,12 @@ export const Academic = ({academic}) => { { academic?.map((place, index) => (
      • -

        +

        {place.degree}
        {place.description}
        {place.institution}
        -

        +
        +
        • )) } diff --git a/src/components/Certificate/index.jsx b/src/components/Certificate/index.jsx index c9029b72..e10f7f36 100644 --- a/src/components/Certificate/index.jsx +++ b/src/components/Certificate/index.jsx @@ -8,12 +8,13 @@ export const Certificate = ({ certificates }) => { { certificates?.map((certification, index) => (
      • -

        +

        {certification.name}
        {certification.date}
        {certification.description}
        {certification.institution}
        -

        +
        +
        • )) } diff --git a/src/components/Experience/index.jsx b/src/components/Experience/index.jsx index eb607d9d..c9fbecc1 100644 --- a/src/components/Experience/index.jsx +++ b/src/components/Experience/index.jsx @@ -9,12 +9,13 @@ export const Experience = ({ experiences }) => { { experiences?.map((experience, index) => (
      • -

        +

        {experience.company}
        {experience.startDate} - {experience.endDate}
        {experience.jobTitle}
        {experience.jobDescription}
        -

        +
        +
        • )) } diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 1e707b11..60460b4d 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -7,13 +7,13 @@ export const Header = ({name, avatar, profession, phone, email, website, address
        -

        +

        {profession}
        Phone: {phone}
        Email: {email}
        Website: {website}
        Location: {address}
        -

        +
        {children}
        ); diff --git a/src/components/Skills/index.jsx b/src/components/Skills/index.jsx index 9120a465..aea1a49e 100644 --- a/src/components/Skills/index.jsx +++ b/src/components/Skills/index.jsx @@ -8,8 +8,9 @@ export const Skills = ({ skills }) => {
          { skills?.map((skill, index) => ( -
        • - {skill.name}: {skill.percentage}% +
        • + + {skill.percentage}%
          • )) } From 79141e70efa9b52049c649c3f904c5b147d8c553 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 18 Jul 2022 18:43:00 -0500 Subject: [PATCH 6/8] Checking missing challenges. --- PULL_REQUEST_TEMPLATE.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index f78449c8..bccba9e8 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -2,15 +2,15 @@ Solución al reto: -Nombre: -Usuario Platzi: +Nombre: Eimer Castro +Usuario Platzi: ewcastroh ## Reto: - [X] Primer problema -- [ ] Segundo problema +- [X] Segundo problema - [X] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema -- [ ] Sexto Problema -- [ ] Septimo Problema +- [X] Cuarto Problema +- [X] Quinto Problema +- [X] Sexto Problema +- [X] Septimo Problema From ab2051ff356f29c05990b088d0e2d0bf48a3b7ce Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 18 Jul 2022 19:20:06 -0500 Subject: [PATCH 7/8] Consuming API from Github Pages. --- src/containers/App.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 1e240a10..c42cf65f 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -11,14 +11,15 @@ import { Interest } from '../components/Interest'; import { Languages } from '../components/Languages'; import getData from '../utils/getData'; -const url = 'http://localhost:3000/data' +// const url = 'http://localhost:3000/data' +const url = 'https://ewcastroh.github.io/data.json' const getUserData = () => { const [data, setData] = useState([]); useEffect(() => { getData(url) - .then(response => setData(response)); + .then(response => setData(response.data)); }, []); return data; } @@ -43,6 +44,7 @@ export const App = () => { languages, social, } = data; + console.log(data); return ( From 9b94aa5e78049805e5a7644cc6a2b7a7f7c8e1a3 Mon Sep 17 00:00:00 2001 From: Eimer Castro Date: Mon, 18 Jul 2022 19:48:17 -0500 Subject: [PATCH 8/8] Updating Documentation --- .gitignore | 1 + PULL_REQUEST_TEMPLATE.md | 4 ++++ src/containers/App.jsx | 1 - 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 67045665..829fc0e0 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,4 @@ dist # TernJS port file .tern-port +.vercel diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index bccba9e8..648933ab 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -14,3 +14,7 @@ Usuario Platzi: ewcastroh - [X] Quinto Problema - [X] Sexto Problema - [X] Septimo Problema + +Deployments +API: https://ewcastroh.github.io/data.json +App: https://dist-ewcastroh.vercel.app/ diff --git a/src/containers/App.jsx b/src/containers/App.jsx index c42cf65f..f291dbc9 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -44,7 +44,6 @@ export const App = () => { languages, social, } = data; - console.log(data); return (