diff --git a/.eslintrc b/.eslintrc index 316d5e03..02138c2a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,7 +19,7 @@ "expect": true, "sinon": true }, - "parser": "babel-eslint", + "parser": "@babel/eslint-parser", "plugins": [ "react", "jsx-a11y", @@ -27,6 +27,7 @@ ], "rules": { "react/jsx-filename-extension": 0, + "react/no-array-index-key": false, "array-bracket-spacing": 2, "arrow-body-style": 0, "block-scoped-var": 2, @@ -241,7 +242,7 @@ ], "radix": 2, "jsx-quotes": [ - 2, + "error", "prefer-single" ], "jsx-a11y/click-events-have-key-events": 0, diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000..e99eafa0 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,20 @@ +name: Build and Deploy +on: [push] +permissions: + contents: write +jobs: + build-and-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v3 + + - name: Install and Build + run: | + npm ci --force + npm run build + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@v4 + with: + branch: gh-pages + folder: dist # The folder the action should deploy. diff --git a/.gitignore b/.gitignore index 67045665..eb293710 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,9 @@ npm-debug.log* yarn-debug.log* yarn-error.log* lerna-debug.log* +package-lock.json +build/ +dist/ # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 67105c53..0789685d 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -7,10 +7,10 @@ Usuario Platzi: ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema -- [ ] Sexto Problema +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema +- [x] Cuarto Problema +- [x] Quinto Problema +- [x] Sexto Problema - [ ] Septimo Problema diff --git a/data.json b/data.json index 94dbaad5..3005534b 100644 --- a/data.json +++ b/data.json @@ -1,110 +1,125 @@ { "data": { - "name": "Melissa Walsh", + "name": "Anghel Melanie Trillo Hernández", "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, ", + "address": "Lima, Perú", + "email": "amelanietrillo27@gmail.com", + "website": "https://www.linkedin.com/in/angheltrillo/", + "phone": "999999999", + "avatar": "https://media-exp1.licdn.com/dms/image/C4D03AQH05RUDJ2KmAw/profile-displayphoto-shrink_400_400/0/1636944769917?e=1664409600&v=beta&t=LFfBR9Ejahvl9mkzXyijUA4M_H2Ezt574SyxrQggwAc", + "Profile": "Web developer specialised in Frontend, with 2 years of experience in the accounting and finance sector, I am proficient in agile methodologies (SCRUM), javascript, node, Firebase, SQL, HTML, CSS. Committed to the development of an inclusive society. Interested in the design of interactive software, based on the use of web technologies.", "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": "Nov 2021", + "description": "Specialisation in frontend development", + "institution": "Laboratoria", + "name": "Frontend Developer" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", - "institution": "Platzi", - "name": "Backend Developer" + "date": "May 2021", + "description": "SCRUM master specialisation", + "institution": "Projectum Institute", + "name": "SCRUM Master" } ], "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": "Frontend Developer", + "description": "The Laboratoria bootcamp allows you to develop as a Frontend Developer. Throughout the bootcamp, soft and technical skills are acquired, and agile methodologies with the SCRUM framework are used in all the projects developed.", + "endDate": "Nov 2021", + "institution": "Laboratoria", + "startDate": "May 2021" }, { - "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": "Software engineering", + "description": "Student", + "endDate": "Present", + "institution": "Universidad Peruana de Ciencias Aplicadas", + "startDate": "2019" + }, + { + "degree": "Web application development", + "description": "Technical course provided by SENATI together with PRONABEC, with the MI VOCACIÓN TÉCNICA grant.", + "endDate": "Dec 2018", + "institution": "SENATI", + "startDate": "Jul 2017" } ], "experience": [ { - "company": "PugStar", + "company": "Kambista", "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": "Web development - Front end development - Agile methodologies - Web applications - JavaScript - Scrum", + "jobTitle": "Frontend Web Developer", + "startDate": "Dec 2021" + }, + { + "company": "Laboratoria", + "endDate": "Nov 2021", + "jobDescription": "Web development - Front end development - Agile methodologies - Web applications - JavaScript - Continuous integration and continuous delivery (CI/CD) - Scrum - Customer-driven design", + "jobTitle": "Frontend Web Developer", + "startDate": "May 2021" }, { - "company": "CatStore", - "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "company": "Laesystems", + "endDate": "Nov 2021", + "jobDescription": "Web development - Web applications - JavaScript - ERP software - WordPress - Technical support service - Customer-oriented design - Tax accounting - Video production - Video editing - Video post-production", + "jobTitle": "Programming Analyst", + "startDate": "Mar 2020" } ], "skills": [ { "name": "HTML5", - "percentage": "75%" + "percentage": "100%" }, { "name": "CSS", - "percentage": "25%" + "percentage": "100%" }, { "name": "JavaScript", - "percentage": "55%" + "percentage": "100%" }, { "name": "React", - "percentage": "90%" + "percentage": "100%" + }, + { + "name": "Vue", + "percentage": "100%" } ], - "interest": [ - "javascript", - "develop", - "backend", - "frontend" - ], + "interest": ["javascript", "develop", "backend", "frontend"], "languages": [ { "name": "Spanish", - "percentage": "90%" + "percentage": "100%", + "level": "Native" }, { "name": "English", - "percentage": "50%" + "percentage": "75%", + "level": "B2" } ], "social": [ { "name": "facebook", - "url": "https://facebook.com/" + "url": "https://www.facebook.com/am27th/" }, { "name": "twitter", - "url": "https://twitter.com/" + "url": "https://twitter.com/am27th" }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/AM27TH" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://www.linkedin.com/in/angheltrillo/?locale=en_US" } ] } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 75c4a203..8ffcdcf7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.18.9", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", @@ -105,6 +105,46 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/eslint-parser": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", + "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", + "dev": true, + "dependencies": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || >=14.0.0" + }, + "peerDependencies": { + "@babel/core": ">=7.11.0", + "eslint": "^7.5.0 || ^8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/@babel/eslint-parser/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, "node_modules/@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -3571,27 +3611,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, "node_modules/babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -5748,7 +5767,7 @@ "eslint": ">=5" } }, - "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { + "node_modules/eslint-visitor-keys": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", @@ -5757,15 +5776,6 @@ "node": ">=10" } }, - "node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/eslint/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -13360,6 +13370,35 @@ "semver": "^6.3.0" } }, + "@babel/eslint-parser": { + "version": "7.18.9", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", + "integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", + "dev": true, + "requires": { + "eslint-scope": "^5.1.1", + "eslint-visitor-keys": "^2.1.0", + "semver": "^6.3.0" + }, + "dependencies": { + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true + } + } + }, "@babel/generator": { "version": "7.18.7", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.7.tgz", @@ -15917,20 +15956,6 @@ "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", "dev": true }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - } - }, "babel-jest": { "version": "28.1.2", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-28.1.2.tgz", @@ -17697,20 +17722,12 @@ "dev": true, "requires": { "eslint-visitor-keys": "^2.0.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", - "dev": true - } } }, "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", + "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", "dev": true }, "espree": { diff --git a/package.json b/package.json index d56de193..577b3c7a 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "react", "webpack" ], - "author": "Oscar Barajas ", + "author": "Anghel Melanie Trillo Hernandez", "license": "MIT", "dependencies": { "@babel/core": "7.18.6", @@ -34,7 +34,7 @@ "webpack-dev-server": "4.9.3" }, "devDependencies": { - "babel-eslint": "10.1.0", + "@babel/eslint-parser": "^7.18.9", "css-loader": "6.7.1", "eslint": "8.19.0", "eslint-config-airbnb": "19.0.4", diff --git a/public/about.txt b/public/about.txt new file mode 100644 index 00000000..7e036924 --- /dev/null +++ b/public/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following font: + +- Font Title: Roboto +- Font Author: Copyright 2011 Google Inc. All Rights Reserved. +- Font Source: http://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtvAx05IsDqlA.ttf +- Font License: Apache License, version 2.0 (http://www.apache.org/licenses/LICENSE-2.0.html)) diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 00000000..be3df292 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 00000000..bfdbc592 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 00000000..dab61595 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 00000000..73753ffb Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 00000000..bca85905 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..b2a8a75c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index b76b4f47..f622a82a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,10 +1,21 @@ - - - React Base - - -
- - + + + + Anghel Melanie Trillo Hernández + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 00000000..45dc8a20 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..44eed891 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 { shallow } from 'enzyme'; import About from '../../components/About'; describe('', () => { - const about = mount(); + const about = shallow(); test('About render', () => { expect(about.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('About haves 3 items', () => { expect(about.find('.About-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..ee38154e 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 { shallow } from 'enzyme'; import Academic from '../../components/Academic'; describe('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Academic has 3 items', () => { expect(academic.find('.Academic-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..0e4b4e8e 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 { shallow } from 'enzyme'; import Experience from '../../components/Experience'; describe('', () => { - const experience = mount(); + const experience = shallow(); test('Experience render', () => { expect(experience.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Experience haves 3 items', () => { expect(experience.find('.Experience-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index 894ec0ab..61c3922b 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 { shallow } from 'enzyme'; import Header from '../../components/Header'; describe('
', () => { - const header = mount(
); + const header = shallow(
); test('Header render', () => { expect(header.length).toEqual(1); @@ -12,5 +12,4 @@ describe('
', () => { test('Header title', () => { expect(header.find('.Header-title').length).toEqual(1); }); - }); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..4ef2cc4b 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 { shallow } from 'enzyme'; import Interest from '../../components/Interest'; describe('', () => { - const interest = mount(); + const interest = shallow(); test('Interest render', () => { expect(interest.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Interest has 3 items', () => { expect(interest.find('.Interest-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 1d10e137..a1084256 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 { shallow } from 'enzyme'; import Languages from '../../components/Languages'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Languages has 3 items', () => { expect(languages.find('.Languages-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..fb478b7e 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 { shallow } from 'enzyme'; import Profile from '../../components/Profile'; describe('', () => { - const profile = mount(); + const profile = shallow(); test('Profile render', () => { expect(profile.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Profile have a description', () => { expect(profile.find('.Profile-desc').length).toEqual(1); }); - }); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..4a39fd89 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 { shallow } from 'enzyme'; import Skills from '../../components/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); @@ -16,5 +16,4 @@ describe('', () => { test('Skills has 3 items', () => { expect(skills.find('.Skills-item').length).toBeGreaterThan(2); }); - }); diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..689a4021 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +function About(props) { + const { data } = props; + + return ( +
+

About

+

+ Email: + {' '} + {data?.email} +

+

+ Website: + {' '} + {data?.website} +

+

+ Country: + {' '} + {data?.address} +

+
+ ); +} + +export default About; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..abb691c1 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,35 @@ +import React from 'react'; + +function Academic(props) { + const { academic = new Array(3).fill({ + degree: 'No education', + description: '', + endDate: '', + institution: '', + startDate: '', + }) } = props; + return ( +
+

Academic

+
+ {academic.map((item, index) => ( +
    +

    +
  • + {item.degree} + {' '} + • + {' '} + {item?.institution} +
    • +

    +

    {`${item.startDate} - ${item.endDate}`}

    +

    {item.description}

    +
+ ))} +
+
+ ); +} + +export default Academic; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx new file mode 100644 index 00000000..174a98b2 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,44 @@ +import React from 'react'; + +function Experience(props) { + const { + experience = new Array(3).fill({ + jobDescription: 'No experience yet', + company: '', + jobTitle: 'No experience yet', + startDate: '', + endDate: '', + }), + } = props; + return ( +
+

Experience

+
+ {experience.map((item, index) => ( +
    +

    +
  • + {item?.jobTitle} + {' '} + • + {' '} + {`${item?.startDate} - ${item?.endDate}`} +
    • +

    +

    {item?.company}

    +

    + Stack: + {' '} + {item?.jobDescription} +

    +
+ ))} +
+
+ ); +} + +export default Experience; diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..83050cbb --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +function Header(props) { + const { data, children } = props; + + return ( +
+
+ avatar +
+
+

{data?.name}

+

{data?.profession}

+ {children} +
+
+ ); +} + +export default Header; diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..04811800 --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +function Interest(props) { + const { interest = new Array(3).fill('No interests submitted') } = props; + return ( +
+

Interests

+
    + {interest.map((item, index) => ( +
  • + {item} +
    • + ))} +
+
+ ); +} + +export default Interest; diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..484bdb39 --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,25 @@ +import React from 'react'; + +function Languages(props) { + const { + languages = new Array(3).fill({ + name: 'No languages yet', + percentage: '0%', + }), + } = props; + + return ( +
+

Languages

+
+ {languages.map((item, index) => ( +
+ {item.name} {item.level && ({item.level})} +
+ ))} +
+
+ ); +} + +export default Languages; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..4101018b --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +function Profile(props) { + const { data } = props; + + return ( +
+

Profile

+
{data?.Profile}
+
+ ); +} + +export default Profile; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..6ff7d0a7 --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,22 @@ +import React from 'react'; + +function Skills(props) { + const { skills = new Array(3).fill({ + name: 'No skills yet', + percentage: '0%', + }) } = props; + return ( +
+

Skills

+
+ {skills.map((item, index) => ( +
+ {item.name} +
+ ))} +
+
+ ); +} + +export default Skills; diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..f95d2376 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -8,21 +8,26 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; +import useGetData from '../hooks/useGetData'; + +const API = 'https://raw.githubusercontent.com/AM27TH/react-eth-challenge/main/data.json'; + +const App = function () { + const data = useGetData(API); -const App = () => { return ( <> -
- +
+
- - - - - - + + + + + + - ) + ); }; export default App; diff --git a/src/hooks/useGetData.js b/src/hooks/useGetData.js new file mode 100644 index 00000000..38c9a828 --- /dev/null +++ b/src/hooks/useGetData.js @@ -0,0 +1,17 @@ +import { useEffect, useState } from 'react'; +import getData from '../utils/getData'; + +const useGetData = (API) => { + const [data, setData] = useState({}); + + useEffect(() => { + (async () => { + const response = await getData(API); + setData(response.data); + })(); + }, []); + + return data; +}; + +export default useGetData; diff --git a/src/index.js b/src/index.js index 9077e5ff..8845186e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; import App from './containers/App'; -ReactDOM.render(, document.getElementById('app')); +const root = ReactDOM.createRoot(document.getElementById('app')); +root.render(); diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..4cd0e647 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,88 @@ +* + font-family Roboto, Arial, Helvetica, sans-serif; + box-sizing border-box + padding 0 + margin 0 + body - background-color blue \ No newline at end of file + font-size 16px + background-color #D9AFD9 + background-image linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%) + +h1 + font-size 2rem + +h2 + font-size 1.5rem + +h4 + font-size 1.1rem + margin-bottom 4px + +ul + list-style-type none + +#app + padding-left 2rem + padding-right 2rem + +#app section, .Experience-item, .Academic-item + margin-top 1rem + margin-bottom 1rem + +.Header-box, .Profile, .Experience, .Academic, .Skills, .Interest, .Languages + background rgba(255, 255, 255, .85); + padding 1rem + border-radius 20px + +#app section h2 + margin-bottom 0.2rem + +.Header + display flex + flex-wrap wrap + gap 2rem + justify-content center + +.Header-box + width 100% + +.avatar + width 200px + height 200px + object-fit cover + border-radius 50% + +.Header-job-title + font-size 1.2rem + +.Header-title, .Header-job-title + text-align center + +.Skills-items, .Interest-items, .Languages-items + display flex + flex-wrap wrap + gap 0.5rem + margin-top 1rem + margin-bottom 1rem + +.Skills-item, .Interest-item, .Languages-level + background rgb(151, 217, 225); + color #17494f + padding 0.5rem + border-radius 20px + +.job-company, .academic-dates + margin-bottom 4px + +.job-description, .academic-descr + margin-left 8px + +@media (min-width: 640px) { + .Header-box { + flex 1 + } + .Header-title, .Header-job-title { + text-align left + } + } \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..dbeb5ffa 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,18 @@ +/** + * Fetch data + * @param {string} url to fetch + * @returns {object} cv data + */ + +const getData = async (url) => { + try { + const response = await fetch(url); + const data = await response.json(); + return data; + } catch (err) { + console.info('An error ocurred using the API'); + console.error(err.message); + } +}; + +export default getData;