From 431c8fac79c25e4c8e9b91071603f3e6e1a2fc9b Mon Sep 17 00:00:00 2001 From: Alexander Hinestroza Date: Sat, 16 Jul 2022 09:37:24 -0500 Subject: [PATCH 1/4] Se agregan todo el desarrollo --- data.json | 190 ++++++++++++++++++----- package-lock.json | 132 ++++++---------- package.json | 1 + src/components/About.js | 20 +++ src/components/Academic.js | 22 +++ src/components/Certifications.js | 20 +++ src/components/Experience.js | 22 +++ src/components/Header.js | 22 +++ src/components/Interest.js | 20 +++ src/components/Languages.js | 25 +++ src/components/Profile.js | 13 ++ src/components/Skills.js | 26 ++++ src/components/Social.js | 27 ++++ src/containers/App.jsx | 58 +++++-- src/index.js | 11 +- src/styles/components/About.css | 4 + src/styles/components/Academic.css | 4 + src/styles/components/App.styl | 30 +++- src/styles/components/Certifications.css | 11 ++ src/styles/components/Experience.css | 13 ++ src/styles/components/Header.css | 29 ++++ src/styles/components/Interest.css | 10 ++ src/styles/components/Language.css | 11 ++ src/styles/components/Profile.css | 3 + src/styles/components/Skills.css | 17 ++ src/styles/components/Social.css | 26 ++++ src/utils/getData.js | 7 + 27 files changed, 629 insertions(+), 145 deletions(-) create mode 100644 src/components/About.js create mode 100644 src/components/Academic.js create mode 100644 src/components/Certifications.js create mode 100644 src/components/Experience.js create mode 100644 src/components/Header.js create mode 100644 src/components/Interest.js create mode 100644 src/components/Languages.js create mode 100644 src/components/Profile.js create mode 100644 src/components/Skills.js create mode 100644 src/components/Social.js create mode 100644 src/styles/components/About.css create mode 100644 src/styles/components/Academic.css create mode 100644 src/styles/components/Certifications.css create mode 100644 src/styles/components/Experience.css create mode 100644 src/styles/components/Header.css create mode 100644 src/styles/components/Interest.css create mode 100644 src/styles/components/Language.css create mode 100644 src/styles/components/Profile.css create mode 100644 src/styles/components/Skills.css create mode 100644 src/styles/components/Social.css diff --git a/data.json b/data.json index 94dbaad5..21be0474 100644 --- a/data.json +++ b/data.json @@ -1,57 +1,114 @@ { "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, ", + "headInfo":{ + "name": "Alexander Hinestroza Palacios", + "avatar": "https://pbs.twimg.com/profile_images/901812008730980352/HuwDBYZn_400x400.jpg", + "profession": "Computer Science Engineer - Specialist Architect", + "email": "ahinestroza1116@gmail.com", + "website": "https://example.com", + "phone": "3042034240", + "address": "Medellín, Colombia.", + "profile": "I am a systems engineer with high capacity for analysis, problem solving and adaptability to technology, with experience in analysis, design and implementation of SOA services. Also with experience in blockchain technologies, both private (hyperledger) and public. I am a person willing to learn and implement projects that impact the environment in which we live." + }, "certificate": [ { - "date": "Jan 2021", - "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ", + "date": "Jul 2022", + "description": "Online Learning Strategies Course", "institution": "Platzi", - "name": "FrontEnd Developer" + "name": "Online Learning Strategies Course" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", + "date": "Jul 2022", + "description": "Personal brand", "institution": "Platzi", - "name": "Backend Developer" + "name": "Personal brand" + }, + { + "date": "Jul 2022", + "description": "Software Engineering Fundamentals", + "institution": "Platzi", + "name": "Software Engineering Fundamentals" + }, + { + "date": "Jun 2022", + "description": "Basic Javascript Course", + "institution": "Platzi", + "name": "Basic Javascript Course" + }, + { + "date": "Jun 2022", + "description": "Javascript practical course", + "institution": "Platzi", + "name": "Javascript practical course" + }, + { + "date": "Jun 2022", + "description": "Next.js Course", + "institution": "Platzi", + "name": "Next.js Course" + }, + { + "date": "Jun 2022", + "description": "Object Oriented Programming Course: OOP", + "institution": "Platzi", + "name": "Object Oriented Programming Course: OOP" + }, + { + "date": "Sep 2020", + "description": "Docker, from Beginner to Expert", + "institution": "Udemy", + "name": "Docker, from Beginner to Expert" + }, + { + "date": "Jun 2022", + "description": "Curso Profesional de Git y GitHub", + "institution": "Platzi", + "name": "Git and GitHub Professional Course" } ], - "Academic": [ + "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": "Software Engineering Specialist", + "description": "A Software Engineering Specialist can support the national and international software industry sector. In this sense, the impact and relevance will be linked to the aforementioned industry, which has a large component of knowledge that requires a high level of technological development and training of people capable of producing knowledge and solutions in accordance with the needs of the medium.", + "endDate": "2019", + "institution": "Universidad de Medellín", + "startDate": "2018" }, { - "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": "Computer Science Engineer", + "description": "I am prepared to face the new challenges of the Fourth Industrial Revolution that include new technologies such as Blockchain, Artificial Intelligence / Machine Learning, and the Internet of Things. They are also prepared to solve problems through software development with modern methodologies and tools, the integration and implementation of business applications, the application of the DevOps culture in organizations, the adoption of good engineering practices in project development, in other aspects.", + "endDate": "2012", + "institution": "Universidad de Antioquia", + "startDate": "2007" } ], "experience": [ { - "company": "PugStar", + "company": "Bancolombia", "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": "I belong to the area of ​​innovation, where I develop in private blockchain projects with HyperLedger Fabric and I find myself venturing and learning about public blockchains in Ethereum mainly.", + "jobTitle": "Specialist Architect", + "startDate": "Jul 2021" + },{ + "company": "Bancolombia", + "endDate": "Jun 2021", + "jobDescription": "Design and implementation of SOA integration services under IBM Datapower, IIB, ApiConnect, MQ (Message Queue) technologies.Lead team development of integration services using SOA service-oriented architecture.", + "jobTitle": "Software Engineer", + "startDate": "Dec 2016" }, { - "company": "CatStore", + "company": "PersonalSoft S.A.S.", "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "jobDescription": "Outsourcing GANA: Analysis and taking of requirements, development of standalone applications, web services and consumption of REST services in java. Outsourcing Bancolombia: Design and implementation of SOA integration services under IBM Datapower, IIB, ApiConnect, MQ (Message Queue) technologies. SOA - Datapower", + "jobTitle": "Software Engineering Analyst", + "startDate": "Jul 2015" + }, + { + "company": "Fuziona S.A.S.", + "endDate": "Jul 2015", + "jobDescription": "OutSourcing Alcaldía de Medellín: Development and support of web applications in .NET and PHP, Development of PL/SQL procedures in Oracle, administration of servers in Microsoft's ISS. Introduction to SAP Development.", + "jobTitle": ".NET Consultant", + "startDate": "Oct 2012" } ], "skills": [ @@ -69,14 +126,57 @@ }, { "name": "React", - "percentage": "90%" + "percentage": "30%" + }, + { + "name": "IBM Datapower", + "percentage": "80%" + }, + { + "name": "HyperLedger Fabic", + "percentage": "70%" + }, + { + "name": "Service-Oriented Architecture (SOA)", + "percentage": "70%" + }, + { + "name": "SQL", + "percentage": "60%" + }, + { + "name": "NodeJs", + "percentage": "40%" + }, + { + "name": "Web3", + "percentage": "30%" + }, + { + "name": "Ethereum", + "percentage": "30%" + }, + { + "name": "Golang", + "percentage": "30%" + }, + { + "name": "Elixir", + "percentage": "20%" + }, + { + "name": "AWS", + "percentage": "60%" } ], "interest": [ - "javascript", - "develop", - "backend", - "frontend" + "Public Blockchains", + "Crypto", + "Crypto currency", + "Ethereum Development", + "Bitcoin Development", + "International projects", + "Better employment opportunities" ], "languages": [ { @@ -85,25 +185,29 @@ }, { "name": "English", - "percentage": "50%" + "percentage": "55%" } ], "social": [ { "name": "facebook", - "url": "https://facebook.com/" + "url": "https://www.facebook.com/Xtyletto", + "icon": "https://images.rawpixel.com/image_1300/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA2L3Y5ODItZDEtMDIteC5qcGc.jpg" }, { "name": "twitter", - "url": "https://twitter.com/" + "url": "https://twitter.com/alextyle8", + "icon": "https://e7.pngegg.com/pngimages/202/248/png-clipart-twitter-logo-computer-icons-encapsulated-postscript-tweeter-blue-logo-thumbnail.png" }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/Alextyle8", + "icon": "https://cdn-icons-png.flaticon.com/512/1051/1051377.png" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://www.linkedin.com/in/alexander-hinestroza-palacios-aba93a64/", + "icon": "https://brandlogos.net/wp-content/uploads/2016/06/linkedin-logo.png" } ] } diff --git a/package-lock.json b/package-lock.json index 75c4a203..5b307980 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-tinder-card": "^1.4.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" @@ -3269,19 +3270,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 +5663,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", @@ -10301,6 +10276,11 @@ "node": ">=8" } }, + "node_modules/p-sleep": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-sleep/-/p-sleep-1.1.0.tgz", + "integrity": "sha512-bwP3GKZirBUYMtiUuBrheLUQdRXVeE/pmHOaLpNJzNfAD4b5AjDn6l823brXcQFade4G/g7GMNQ3KV86E8EaEw==" + }, "node_modules/p-try": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", @@ -10996,6 +10976,24 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-tinder-card": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.4.5.tgz", + "integrity": "sha512-VUdAZQiWoFClTe6Evua4sjYy3L3bSYvoWgEMNroiRoK0h5AsfqDXCfhaizUczN6gEUe0mvVDd4bZcQ1qR4sI7Q==", + "dependencies": { + "p-sleep": "^1.1.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.0.0 || ^17.0.0", + "react-spring": "^8.0.0" + }, + "peerDependenciesMeta": { + "react-spring": { + "optional": true + } + } + }, "node_modules/readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -12426,20 +12424,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 +15650,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 +15663,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 +15684,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 +15730,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 +17470,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 +17644,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 +18480,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 +19463,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", @@ -20898,6 +20860,11 @@ "retry": "^0.13.1" } }, + "p-sleep": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/p-sleep/-/p-sleep-1.1.0.tgz", + "integrity": "sha512-bwP3GKZirBUYMtiUuBrheLUQdRXVeE/pmHOaLpNJzNfAD4b5AjDn6l823brXcQFade4G/g7GMNQ3KV86E8EaEw==" + }, "p-try": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", @@ -21129,8 +21096,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", @@ -21418,6 +21384,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-tinder-card": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.4.5.tgz", + "integrity": "sha512-VUdAZQiWoFClTe6Evua4sjYy3L3bSYvoWgEMNroiRoK0h5AsfqDXCfhaizUczN6gEUe0mvVDd4bZcQ1qR4sI7Q==", + "requires": { + "p-sleep": "^1.1.0" + } + }, "readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -22210,8 +22184,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 +22475,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 +22734,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 +22930,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/package.json b/package.json index d56de193..027f556d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-tinder-card": "^1.4.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" diff --git a/src/components/About.js b/src/components/About.js new file mode 100644 index 00000000..011c3863 --- /dev/null +++ b/src/components/About.js @@ -0,0 +1,20 @@ +import React from 'react'; +import '../styles/components/About.css'; + +const About = (props) => { + const { info } = props; + return ( +
+

About

+

+ E-mail: {info?.email} +

+

+ Website: {info?.website} +

+

{info?.address}

+
+ ); +}; + +export default About; \ No newline at end of file diff --git a/src/components/Academic.js b/src/components/Academic.js new file mode 100644 index 00000000..026f4987 --- /dev/null +++ b/src/components/Academic.js @@ -0,0 +1,22 @@ +import React from 'react'; +import '../styles/components/Academic.css'; + +const Academic = (props) => { + const { academics } = props; + return ( +
+

Academic

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

+
  • {academic.degree}
    • +

    +

    {academic.institution}

    +

    {academic.endDate}

    +
    + ))} +
    + ); +}; + +export default Academic; \ No newline at end of file diff --git a/src/components/Certifications.js b/src/components/Certifications.js new file mode 100644 index 00000000..db838544 --- /dev/null +++ b/src/components/Certifications.js @@ -0,0 +1,20 @@ +import React from 'react'; +import '../styles/components/Certifications.css'; + +const Certification = (props) => { + const { certifications } = props; + return ( +
    +

    Certifications

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

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

    +
    + ))} +
    +
    + ); +}; + +export default Certification; \ No newline at end of file diff --git a/src/components/Experience.js b/src/components/Experience.js new file mode 100644 index 00000000..c820e317 --- /dev/null +++ b/src/components/Experience.js @@ -0,0 +1,22 @@ +import React from 'react'; +import '../styles/components/Experience.css'; +const Experience = (props) => { + const { experiences } = props; + return ( +
    +

    Experience

    +
    + {experiences.map((experience) => ( +
    +

    {experience.company}

    +

    {experience.jobTitle}

    +

    {experience.startDate} - {experience.endDate}

    +

    {experience.jobDescription}

    +
    + ))} +
    +
    + ); +}; + +export default Experience; \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..97e376ac --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,22 @@ +import React from 'react'; +import '../styles/components/Header.css'; + +const Header = (props) => { + const { info } = props; + return ( +
    +
    + avatar +
    +
    +

    {info?.name}

    +

    {info?.profession}

    +

    {info?.email}

    +

    {info?.website}

    +

    {info?.address}

    +
    +
    + ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Interest.js b/src/components/Interest.js new file mode 100644 index 00000000..cb32217e --- /dev/null +++ b/src/components/Interest.js @@ -0,0 +1,20 @@ +import React from 'react'; +import '../styles/components/Interest.css'; + +const Interest = (props) => { + const { interests } = props; + return ( +
    +

    Interests

    +
    + {interests.map((interest, index) => ( +
    +

    {interest}

    +
    + ))} +
    +
    + ); +}; + +export default Interest; \ No newline at end of file diff --git a/src/components/Languages.js b/src/components/Languages.js new file mode 100644 index 00000000..f45c1a8b --- /dev/null +++ b/src/components/Languages.js @@ -0,0 +1,25 @@ +import React from 'react'; +import '../styles/components/Language.css'; +const Languages = (props) => { + const { languages } = props; + return ( +
    +

    Languages

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

    {language.name}

    +
    +
    + {language.percentage} +
    +
    +
    + ))} +
    + ); +}; + +export default Languages; \ No newline at end of file diff --git a/src/components/Profile.js b/src/components/Profile.js new file mode 100644 index 00000000..42088a58 --- /dev/null +++ b/src/components/Profile.js @@ -0,0 +1,13 @@ +import React from 'react'; +import '../styles/components/Profile.css'; + +function Profile(props) { + return ( +
    +

    Profile

    +

    {props.profile}

    +
    + ); +} + +export default Profile; \ No newline at end of file diff --git a/src/components/Skills.js b/src/components/Skills.js new file mode 100644 index 00000000..07623a5a --- /dev/null +++ b/src/components/Skills.js @@ -0,0 +1,26 @@ +import React from 'react'; +import '../styles/components/Skills.css'; + +const Skills = (props) => { + const { skills } = props; + return ( +
    +

    Skills

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

    {skill.name}

    +
    + {skill.percentage} +
    +
    + ))} +
    +
    + ); +}; + +export default Skills; \ No newline at end of file diff --git a/src/components/Social.js b/src/components/Social.js new file mode 100644 index 00000000..23f06cff --- /dev/null +++ b/src/components/Social.js @@ -0,0 +1,27 @@ +import React from 'react'; +import '../styles/components/Social.css'; + +function Social(props) { + const { socialNetworks } = props; + + function openUrl(url) { + window.open(url, '_blank', 'noopener,noreferrer'); + } + + return ( +
    +

    Social Networks

    +
    + {socialNetworks.map((socialNetwork, index) => ( +
    +

    {socialNetwork.name}

    + icon openUrl(socialNetwork.url)} /> +
    + ))} +
    +
    +
    + ); +} + +export default Social; \ No newline at end of file diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..b4c57337 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,28 +1,58 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import '../styles/components/App.styl'; import Header from '../components/Header'; -import About from '../components/About'; +import Social from '../components/Social'; import Profile from '../components/Profile'; import Experience from '../components/Experience'; +import Certification from '../components/Certifications'; import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; -const App = () => { - return ( +//New imports +import getData from '../utils/getData'; + +function App(){ + + const [cvData, setCvData] = React.useState(null); + + useEffect(() => { + // getData('https://raw.githubusercontent.com/Alextyle8/react-eth-challenge/main/data.json') + getData('./data.json') + .then((json) => { + setCvData(json.data); + }) + .catch((err) => { + console.log(err); + }); + }, []); + + return cvData ?( <> -
    - -
    - - - - - - +
    +
    + +
    + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + - ) + ) : ( +
    Loading...
    + ); }; export default App; diff --git a/src/index.js b/src/index.js index 9077e5ff..b3a18ed7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,12 @@ 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')); +// ReactDOM.render(, document.getElementById('app')); + +const root = ReactDOM.createRoot(document.getElementById('app')); +root.render( + // + + // +); diff --git a/src/styles/components/About.css b/src/styles/components/About.css new file mode 100644 index 00000000..60ce6e15 --- /dev/null +++ b/src/styles/components/About.css @@ -0,0 +1,4 @@ +.About-box { + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/src/styles/components/Academic.css b/src/styles/components/Academic.css new file mode 100644 index 00000000..3d58b24f --- /dev/null +++ b/src/styles/components/Academic.css @@ -0,0 +1,4 @@ +.Academic-item { + padding-bottom: 1rem; + margin: 0%; +} \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..b93f6dea 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,28 @@ -body - background-color blue \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap'); + +body { + font-family: 'Roboto Mono', monospace; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 70%; + margin: auto auto; +} + +h1 { + color: rgb(77, 75, 75); + font-size: 2em; +} + +.Skills-box, +.Interests-box { + display: grid; + grid-template-columns: repeat(2, 1fr); + text-align: center; +} + +@media screen and (max-width: 768px) { + .Skills-box, + .Interests-box { + grid-template-columns: repeat(1, 1fr); + } +} \ No newline at end of file diff --git a/src/styles/components/Certifications.css b/src/styles/components/Certifications.css new file mode 100644 index 00000000..0572f922 --- /dev/null +++ b/src/styles/components/Certifications.css @@ -0,0 +1,11 @@ +.certification-box { + margin: 0 auto; + } + + .certification-title { + text-align: center; + } + + .certification-item { + grid-column: auto; + } \ No newline at end of file diff --git a/src/styles/components/Experience.css b/src/styles/components/Experience.css new file mode 100644 index 00000000..4e7b0601 --- /dev/null +++ b/src/styles/components/Experience.css @@ -0,0 +1,13 @@ +.Experience-title { + text-align: center; + } + + .Experience-box { + display: grid; + grid-template-columns: repeat(3, 2fr); + } + + .Experience-item { + grid-column: auto; + text-align: left; + } \ No newline at end of file diff --git a/src/styles/components/Header.css b/src/styles/components/Header.css new file mode 100644 index 00000000..b2200a2b --- /dev/null +++ b/src/styles/components/Header.css @@ -0,0 +1,29 @@ +.Header { + align-items: center; + grid-auto-columns: min-content; + padding: 0.5rem 1rem; + background-color: #fff; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(1, 1fr); + grid-column-gap: 0px; + grid-row-gap: 0px; +} + +.Header-avatar { + grid-column: 1 / 1; + grid-template-columns: 100px 1fr; + text-align: center; +} +.Header-box { + grid-column: 2 / 4; + text-align: center; +} + +.avatar { + border-radius: 50%; + flex-wrap: wrap; + padding: 2rem; + width: 200px; + height: 200px; +} \ No newline at end of file diff --git a/src/styles/components/Interest.css b/src/styles/components/Interest.css new file mode 100644 index 00000000..00debcc3 --- /dev/null +++ b/src/styles/components/Interest.css @@ -0,0 +1,10 @@ +.interest-box { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + + @media screen and (max-width: 768px) { + .interest-box { + grid-template-columns: repeat(2, 1fr); + } + } \ No newline at end of file diff --git a/src/styles/components/Language.css b/src/styles/components/Language.css new file mode 100644 index 00000000..c35057d7 --- /dev/null +++ b/src/styles/components/Language.css @@ -0,0 +1,11 @@ +.language-box { + width: 50%; + margin: 0 auto; +} + +.language-indicator { + background-color: green; + color: white; + font-weight: bold; + text-align: center; +} \ No newline at end of file diff --git a/src/styles/components/Profile.css b/src/styles/components/Profile.css new file mode 100644 index 00000000..35c758d8 --- /dev/null +++ b/src/styles/components/Profile.css @@ -0,0 +1,3 @@ +.Profile-title { + text-align: center; +} \ No newline at end of file diff --git a/src/styles/components/Skills.css b/src/styles/components/Skills.css new file mode 100644 index 00000000..5fc67703 --- /dev/null +++ b/src/styles/components/Skills.css @@ -0,0 +1,17 @@ +.Skills-title { + text-align: center; +} +.skill-box { + display: grid; + grid-template-columns: repeat(6, 1fr); +} +.Skills-item { + padding: 1rem; +} + +.skill-indicator { + background-color: green; + grid-column: auto; + color: white; + font-weight: bold; +} diff --git a/src/styles/components/Social.css b/src/styles/components/Social.css new file mode 100644 index 00000000..dccfe0bc --- /dev/null +++ b/src/styles/components/Social.css @@ -0,0 +1,26 @@ +.social-title { + text-align: center; +} +.social-box { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.social-item { + text-align: center; +} + +.social-icon { + width: 50px; + height: 50px; + margin: 0 auto; + cursor: pointer; +} + +.social-icon:hover { + -webkit-transform: scale(1.05); + -moz-transform: scale(1.05); + -ms-transform: scale(1.05); + -o-transform: scale(1.05); + transform: scale(1.05); +} \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..4802ab1e 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,7 @@ +const getData = async (url) => { + const response = await fetch(url); + const json = response.json(); + return json; +}; + +export default getData; \ No newline at end of file From 2bd895b503c8e73ead56c01a207521f4eef6e25d Mon Sep 17 00:00:00 2001 From: Alexander Hinestroza Date: Sat, 16 Jul 2022 10:20:04 -0500 Subject: [PATCH 2/4] Se modifican las pruebas --- src/__test__/components/About.test.js | 4 ++-- src/__test__/components/Academic.test.js | 9 +++++---- src/__test__/components/Experience.test.js | 5 +++-- src/__test__/components/Header.test.js | 4 ++-- src/__test__/components/Interest.test.js | 5 +++-- src/__test__/components/Languages.test.js | 9 +++++---- src/__test__/components/Profile.test.js | 4 ++-- src/__test__/components/Skills.test.js | 5 +++-- src/components/Experience.js | 2 +- src/containers/App.jsx | 12 ++++++------ src/styles/components/Header.css | 3 +++ src/styles/components/Language.css | 2 +- src/styles/components/Skills.css | 2 +- 13 files changed, 37 insertions(+), 29 deletions(-) diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..2fb74860 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); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..716a5a26 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Academic from '../../components/Academic'; +import json from '../../../data.json'; describe('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); @@ -13,8 +14,8 @@ describe('', () => { expect(academic.find('.Academic-title').length).toEqual(1); }); - test('Academic has 3 items', () => { - expect(academic.find('.Academic-item').length).toBeGreaterThan(2); + test('Academic has 2 items', () => { + expect(academic.find('.Academic-item').length).toEqual(2); }); }); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..3d9e778b 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Experience from '../../components/Experience'; +import json from '../../../data.json'; 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..51864583 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); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..68790083 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Interest from '../../components/Interest'; +import json from '../../../data.json'; 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..f0a4784c 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Languages from '../../components/Languages'; +import json from '../../../data.json'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); @@ -13,8 +14,8 @@ describe('', () => { expect(languages.find('.Languages-title').length).toEqual(1); }); - test('Languages has 3 items', () => { - expect(languages.find('.Languages-item').length).toBeGreaterThan(2); + test('Languages has 2 items', () => { + expect(languages.find('.Languages-item').length).toEqual(2); }); }); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..28b1781a 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); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..c88c019d 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,9 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Skills from '../../components/Skills'; +import json from '../../../data.json'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); diff --git a/src/components/Experience.js b/src/components/Experience.js index c820e317..ec682b5e 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -7,7 +7,7 @@ const Experience = (props) => {

    Experience

    {experiences.map((experience) => ( -
    +

    {experience.company}

    {experience.jobTitle}

    {experience.startDate} - {experience.endDate}

    diff --git a/src/containers/App.jsx b/src/containers/App.jsx index b4c57337..b3700c1f 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -31,23 +31,23 @@ function App(){ return cvData ?( <>
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    ) : ( diff --git a/src/styles/components/Header.css b/src/styles/components/Header.css index b2200a2b..f0a7e55c 100644 --- a/src/styles/components/Header.css +++ b/src/styles/components/Header.css @@ -9,6 +9,9 @@ grid-column-gap: 0px; grid-row-gap: 0px; } +.Header-title{ + color: blue; +} .Header-avatar { grid-column: 1 / 1; diff --git a/src/styles/components/Language.css b/src/styles/components/Language.css index c35057d7..f32417e3 100644 --- a/src/styles/components/Language.css +++ b/src/styles/components/Language.css @@ -4,7 +4,7 @@ } .language-indicator { - background-color: green; + background-color: blue; color: white; font-weight: bold; text-align: center; diff --git a/src/styles/components/Skills.css b/src/styles/components/Skills.css index 5fc67703..7ad711e6 100644 --- a/src/styles/components/Skills.css +++ b/src/styles/components/Skills.css @@ -10,7 +10,7 @@ } .skill-indicator { - background-color: green; + background-color:blue; grid-column: auto; color: white; font-weight: bold; From efd73dc0c672665d43ea204d400d2ad54f3ebc16 Mon Sep 17 00:00:00 2001 From: Alexander Hinestroza Date: Sat, 16 Jul 2022 10:28:00 -0500 Subject: [PATCH 3/4] Modificacion archivo para el PR --- PULL_REQUEST_TEMPLATE.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 67105c53..940eab61 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,16 +1,16 @@ ## DESCRIPTION -Solución al reto: +Solución al reto: react-eth-challenge - Se solucionan los restos propuestos -Nombre: -Usuario Platzi: +Nombre: Alexander Hinestroza Palacios +Usuario Platzi: alextyle ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema -- [ ] Sexto Problema -- [ ] Septimo Problema +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema +- [x] Cuarto Problema +- [x] Quinto Problema +- [x] Sexto Problema +- [x] Septimo Problema From 3ac661a21ccf319119c0e861b97d11e5dfebc702 Mon Sep 17 00:00:00 2001 From: Alexander Hinestroza Date: Sat, 16 Jul 2022 10:39:52 -0500 Subject: [PATCH 4/4] Modificacion ruta archivo data.json --- src/containers/App.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index b3700c1f..d74d7603 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -18,8 +18,7 @@ function App(){ const [cvData, setCvData] = React.useState(null); useEffect(() => { - // getData('https://raw.githubusercontent.com/Alextyle8/react-eth-challenge/main/data.json') - getData('./data.json') + getData('https://raw.githubusercontent.com/Alextyle8/react-eth-challenge/main/data.json') .then((json) => { setCvData(json.data); })