From 71b4e2f5ac64a631cd4de5d478f79152c19ae75c Mon Sep 17 00:00:00 2001 From: Brayan Cardozo Date: Thu, 21 Jul 2022 22:29:55 -0500 Subject: [PATCH] eth react challenge --- .gitignore | 1 + data.json | 109 ++++++----- package-lock.json | 206 ++++++++++++++++++++- package.json | 2 + src/__test__/components/About.test.js | 4 +- src/__test__/components/Academic.test.js | 4 +- src/__test__/components/Experience.test.js | 4 +- src/__test__/components/Header.test.js | 4 +- src/__test__/components/Interest.test.js | 4 +- src/__test__/components/Languages.test.js | 4 +- src/__test__/components/Profile.test.js | 4 +- src/__test__/components/Skills.test.js | 4 +- src/components/About.jsx | 18 ++ src/components/Aboutstyles.js | 9 + src/components/Academic.jsx | 26 +++ src/components/Avatar.jsx | 9 + src/components/Avatarstyle.js | 7 + src/components/Card.jsx | 9 + src/components/Experience.jsx | 40 ++++ src/components/Header.jsx | 21 +++ src/components/Headerstyle.js | 13 ++ src/components/Interest.jsx | 19 ++ src/components/Languages.jsx | 23 +++ src/components/Profile.jsx | 14 ++ src/components/Profilestyles.js | 8 + src/components/Skills.jsx | 21 +++ src/components/cardstyle.js | 15 ++ src/containers/App.jsx | 82 ++++++-- src/containers/Appstyle.js | 8 + src/index.js | 2 +- src/styles/components/App.styl | 2 +- src/styles/components/Avatar.styl | 4 + src/utils/getData.js | 8 + vercel.json | 22 +++ 34 files changed, 643 insertions(+), 87 deletions(-) create mode 100644 src/components/About.jsx create mode 100644 src/components/Aboutstyles.js create mode 100644 src/components/Academic.jsx create mode 100644 src/components/Avatar.jsx create mode 100644 src/components/Avatarstyle.js create mode 100644 src/components/Card.jsx create mode 100644 src/components/Experience.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Headerstyle.js create mode 100644 src/components/Interest.jsx create mode 100644 src/components/Languages.jsx create mode 100644 src/components/Profile.jsx create mode 100644 src/components/Profilestyles.js create mode 100644 src/components/Skills.jsx create mode 100644 src/components/cardstyle.js create mode 100644 src/containers/Appstyle.js create mode 100644 src/styles/components/Avatar.styl create mode 100644 vercel.json 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/data.json b/data.json index 94dbaad5..ed35c38b 100644 --- a/data.json +++ b/data.json @@ -1,13 +1,13 @@ { "data": { - "name": "Melissa Walsh", - "profession": "FrontEnd Developer", + "name": "Brayan Alexander Cardozo Salcedo", + "profession": "Software 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, ", + "email": "brayanalexander95@hotmail.com", + "website": "https://github.com/Brayan-CS", + "phone": "3102555374", + "avatar": "https://media-exp2.licdn.com/dms/image/C5603AQFRQ-VrGJNt9w/profile-displayphoto-shrink_200_200/0/1626213058696?e=2147483647&v=beta&t=uR6S4aa3amL1QwIIAaK-RlDLGXcojwU4X4_tiSVQerI", + "Profile": "Engineer and developer of web solutions, with strengths in the Front-End and the development of Geographic Information Systems, with knowledge and experience in the management of spatial data and its integration with applications in the cloud, as well as the management and treatment of these for the construction of machine learning models focused on the management of natural resources", "certificate": [ { "date": "Jan 2021", @@ -24,86 +24,95 @@ ], "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": "Forest Engineering", + "description": "Degree", + "endDate": "Apr 2021", + "institution": "Universidad Distrital", + "startDate": "Jan 2014" }, { - "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": "GIS Implementatation", + "description": "Technological Specialization", + "endDate": "Oct 2020", + "institution": "SENA", + "startDate": "Jan 2020" } ], "experience": [ { - "company": "PugStar", - "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" + "company": "Mercado Criollo", + "endDate": "Sep 2020", + "jobDescription": "Develop and maintain the company website, also the database management (MySQL), and CMS control (Prestashop, Wordpress).", + "jobTitle": "Web Developer", + "startDate": "Mar 2020" }, { - "company": "CatStore", - "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "company": "Tecnoprocesos", + "endDate": "Jul 2021", + "jobDescription": "Development of a GIS for the analysis and monitoring of events in the framework of risk management in through of ArcGIS API for JavaScript, also develop the web interface with ElectronJS", + "jobTitle": "GIS Developer/Front-End Developer", + "startDate": "May 2021" + }, + { + "company": "Bancolombia", + "endDate": "Present", + "jobDescription": "Development of web solutions keeping in mind the cycle life of the software development, mainly focussed in the Front-End with Angular as Framework, design and devlopment of unit testing with Jasminen and Jest, also develop e2e automatized testing using Serenity framework, manage of deployments and DevOps strategys trougth pipelines like CI an CD practices, manage of some cloud infraestrcuture with AWS", + "jobTitle": "Software Developer", + "startDate": "Jul 2021" } ], "skills": [ - { - "name": "HTML5", - "percentage": "75%" - }, { "name": "CSS", - "percentage": "25%" + "percentage": "65%" }, { "name": "JavaScript", - "percentage": "55%" + "percentage": "75%" + }, + { + "name": "Angular", + "percentage": "85%" }, { "name": "React", - "percentage": "90%" + "percentage": "40%" + }, + { + "name": "Python (NumPy/Pandas/SciKit-Learn)", + "percentage": "50%" + }, + { + "name": "Java/Node", + "percentage": "40%" } ], "interest": [ - "javascript", - "develop", - "backend", - "frontend" + + "Angular", + "BlockChain", + "GIS Development", + "CSS Animations and Code Art" + ], "languages": [ { "name": "Spanish", - "percentage": "90%" + "percentage": "100%" }, { "name": "English", - "percentage": "50%" + "percentage": "60%" } ], "social": [ - { - "name": "facebook", - "url": "https://facebook.com/" - }, - { - "name": "twitter", - "url": "https://twitter.com/" - }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/Brayan-CS" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://co.linkedin.com/in/brayan-cardozo" } ] } diff --git a/package-lock.json b/package-lock.json index 75c4a203..e40109d6 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", + "styled-components": "^5.3.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" @@ -1693,6 +1694,29 @@ "node": ">=10.0.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -3776,6 +3800,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-preset-current-node-syntax": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", @@ -4167,6 +4211,11 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "node_modules/caniuse-lite": { "version": "1.0.30001363", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz", @@ -4667,6 +4716,14 @@ "source-map-resolve": "^0.6.0" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-loader": { "version": "6.7.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz", @@ -4723,6 +4780,16 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -6793,6 +6860,14 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -10684,8 +10759,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prepend-http": { "version": "2.0.0", @@ -11662,6 +11736,11 @@ "node": ">=8" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -12009,6 +12088,36 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "hasInstallScript": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylus": { "version": "0.58.1", "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.58.1.tgz", @@ -14425,6 +14534,29 @@ "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==" }, + "@emotion/is-prop-valid": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz", + "integrity": "sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -16068,6 +16200,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-preset-current-node-syntax": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz", @@ -16363,6 +16512,11 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "caniuse-lite": { "version": "1.0.30001363", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz", @@ -16744,6 +16898,11 @@ "source-map-resolve": "^0.6.0" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-loader": { "version": "6.7.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz", @@ -16783,6 +16942,16 @@ "nth-check": "^2.0.1" } }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -18314,6 +18483,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -21174,8 +21351,7 @@ "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "prepend-http": { "version": "2.0.0", @@ -21943,6 +22119,11 @@ "kind-of": "^6.0.2" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -22213,6 +22394,23 @@ "dev": true, "requires": {} }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylus": { "version": "0.58.1", "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.58.1.tgz", diff --git a/package.json b/package.json index d56de193..a4e47d37 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "React Eth Challenge", "main": "index.js", "scripts": { + "vercel-build": "npm-run-build", "build": "webpack --mode production", "start": "webpack-dev-server --open --mode development", "server": "json-server data.json", @@ -29,6 +30,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "styled-components": "^5.3.5", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" 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..f18c9c21 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 { mount, shallow } from 'enzyme'; import Academic from '../../components/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..4b6ae820 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 { mount, shallow } from 'enzyme'; import Experience from '../../components/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..3bd5e9a9 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 { mount, 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..90b480c7 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 { mount, shallow } from 'enzyme'; import Interest from '../../components/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..05390657 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 { mount, shallow } from 'enzyme'; import Languages from '../../components/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..082c6b42 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 { mount, 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..1d50e5db 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 { mount, shallow } from 'enzyme'; import Skills from '../../components/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..88ed13ef --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Titulo } from './Aboutstyles'; + +const About = ({ address, email, phone, profession, website }) => { + return ( +
+ {profession} +
    +
  • Mobile Phone: +57 {phone}
    • +
  • Email: {email}
    • +
  • {website}
    • +
  • {address}
    • +
+
+ ); +}; + +export default About; \ No newline at end of file diff --git a/src/components/Aboutstyles.js b/src/components/Aboutstyles.js new file mode 100644 index 00000000..f444b78b --- /dev/null +++ b/src/components/Aboutstyles.js @@ -0,0 +1,9 @@ +import styled from 'styled-components' + +export const Titulo = styled.a` +&:hover{ + color: pink; +} + + +` \ No newline at end of file diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..a55b0e62 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Card from './Card'; + +const Academic = ({ + academic = Array(3).fill({ degree: '', description: '', institution: '' }), +}) => { + return ( + +

Academic

+
    + {academic?.map(({ degree, description, institution }, index) => ( +
  • +

    {degree}

    +

    {description}

    +

    {institution}

    +
    • + ))} +
+ + ); +}; + +export default Academic; \ No newline at end of file diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx new file mode 100644 index 00000000..d79cc123 --- /dev/null +++ b/src/components/Avatar.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { Imagen } from './Avatarstyle'; + + +const Avatar = ({ avatar }) => { + return ; +}; + +export default Avatar; \ No newline at end of file diff --git a/src/components/Avatarstyle.js b/src/components/Avatarstyle.js new file mode 100644 index 00000000..291dce92 --- /dev/null +++ b/src/components/Avatarstyle.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export const Imagen = styled.img` +border-radius:50%; + + +` \ No newline at end of file diff --git a/src/components/Card.jsx b/src/components/Card.jsx new file mode 100644 index 00000000..51953886 --- /dev/null +++ b/src/components/Card.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { Test } from './cardstyle'; + + +const Card = ({ children }) => { + return {children}; +}; + +export default Card; \ No newline at end of file diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx new file mode 100644 index 00000000..661e85c0 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import Card from './Card'; + +const Experience = ({ + experience = Array(3).fill({ + company: '', + endDate: '', + jobDescription: '', + jobTitle: '', + startDate: '', + }), +}) => { + return ( + +

Experience

+
    + {experience.map( + ( + { company, endDate, jobDescription, jobTitle, startDate }, + index + ) => ( +
  • +

    Company: {company}

    +

    {jobTitle}

    +

    {jobDescription}

    +

    + {startDate} - {endDate} +

    +
    • + ) + )} +
+ + ); +}; + +export default Experience; \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..ebe314f2 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import Avatar from './Avatar'; +import Card from './Card'; +import { Contenedor } from './Headerstyle'; + + +const Header = ({ avatar, children, name }) => { + return ( + + + +
+

{name}

+ {children} +
+ + + ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Headerstyle.js b/src/components/Headerstyle.js new file mode 100644 index 00000000..130adcad --- /dev/null +++ b/src/components/Headerstyle.js @@ -0,0 +1,13 @@ +import styled from 'styled-components' + +export const Contenedor = styled.div` +display:flex; +flex-direction:column; +align-items:center; + +@media only screen and (max-width: 600px) { + flex-direction:row; +} + + +`; \ No newline at end of file diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..311eaa5d --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Card from './Card'; + +const Interest = ({ interest = Array(3).fill('') }) => { + return ( + +

Interest

+
    + {interest.map((individualinterest, index) => ( +
  • +

    {individualinterest}

    +
    • + ))} +
+ + ); +}; + +export default Interest; \ No newline at end of file diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..1946c0f7 --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Card from './Card'; + +const Languages = ({ + languages = Array(3).fill({ name: '', percentage: '' }), +}) => { + return ( + +

Languages

+
    + {languages.map(({ name, percentage }, index) => ( +
  • +

    + {name} - {percentage} +

    +
    • + ))} +
+ + ); +}; + +export default Languages; \ No newline at end of file diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..819470ec --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Card from './Card'; +import { Description } from './Profilestyles'; + +const Profile = ({ profile }) => { + return ( + +

Profile

+ {profile} + + ); +}; + +export default Profile; \ No newline at end of file diff --git a/src/components/Profilestyles.js b/src/components/Profilestyles.js new file mode 100644 index 00000000..61a5d15f --- /dev/null +++ b/src/components/Profilestyles.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const Description = styled.p` + text-align: justify center; + + + +` \ No newline at end of file diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..1494c82a --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import Card from './Card'; + +const Skills = ({ skills = Array(3).fill('') }) => { + console.log(skills) + return ( + +

Skills

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

    {skill.name}

    +

    {skill.percentage}

    +
    • + ))} +
+ + ); +}; + +export default Skills; \ No newline at end of file diff --git a/src/components/cardstyle.js b/src/components/cardstyle.js new file mode 100644 index 00000000..3a029920 --- /dev/null +++ b/src/components/cardstyle.js @@ -0,0 +1,15 @@ +import styled from 'styled-components' + +export const Test = styled.article` + background-color: #29292b; + border-radius: 14px; + webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(255,255,255,0); + box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(255,255,255,0); + height: -webkit-fill-available; + padding: 12px 20px; + width: -webkit-fill-available; + margin-bottom :20px; + color: white; + font-family: sans-serif + +`; \ No newline at end of file diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..8be9b490 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,5 +1,5 @@ -import React from 'react'; -import '../styles/components/App.styl'; +import React, { useEffect, useState } from 'react'; +import { Body } from './appstyle'; import Header from '../components/Header'; import About from '../components/About'; import Profile from '../components/Profile'; @@ -8,21 +8,73 @@ 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 App = () => { + const [user, setUser] = useState(null); + + useEffect(() => { + getUserData(); + }, []); + + + const getUserData = async () => { + const data = await getData('http://localhost:3000/data'); + setUser(data); + }; + + + + + + + if (!user) return null; + + const { + Academic: academic, + address, + avatar, + email, + experience, + interest, + languages, + name, + phone, + profession, + Profile: profile, + skills, + website, + } = user; + return ( - <> -
- -
- - - - - - - - ) + +
+
+ +
+ + +
+ + +
+
+ + +
+
+
+
+ + ); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/containers/Appstyle.js b/src/containers/Appstyle.js new file mode 100644 index 00000000..c71b069d --- /dev/null +++ b/src/containers/Appstyle.js @@ -0,0 +1,8 @@ +import styled from 'styled-components' + +export const Body = styled.div` +background-color: #f6cd2e; +margin: 0px; + + +`; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9077e5ff..1918aa81 100644 --- a/src/index.js +++ b/src/index.js @@ -2,4 +2,4 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/App'; -ReactDOM.render(, document.getElementById('app')); +ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..7398e858 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,2 @@ body - background-color blue \ No newline at end of file + background-color #ffd438 \ No newline at end of file diff --git a/src/styles/components/Avatar.styl b/src/styles/components/Avatar.styl new file mode 100644 index 00000000..30a937d4 --- /dev/null +++ b/src/styles/components/Avatar.styl @@ -0,0 +1,4 @@ +.Avatar + width: 200px + border-radius 50% + box-shadow 0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04); \ No newline at end of file diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..083a7bcf 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,8 @@ +const getData = URL => { + return fetch(URL) + .then(res => res.json()) + .then(data => data) + .catch(e => console.error(e)) +}; + +export default getData; \ No newline at end of file diff --git a/vercel.json b/vercel.json new file mode 100644 index 00000000..28dca21a --- /dev/null +++ b/vercel.json @@ -0,0 +1,22 @@ +{ + "version":2, + "name": "ethprogram", + "builds":[ + { + "use": "@now/static-build", + "src": "package.json" + } + ], + "routes": [ + { + "src":"(.*).js", "dest": "/$1.js" + }, + { + "src":"(.*).json", "dest": "/$1.json" + }, + { + "src": "/.*", "dest": "/index.html" + } + + ] +} \ No newline at end of file