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..923185e5 100644
--- a/data.json
+++ b/data.json
@@ -1,13 +1,11 @@
 {
   "data": {
-    "name": "Melissa Walsh",
-    "profession": "FrontEnd Developer",
-    "address": "Bogotá, Colombia.",
-    "email": "melissa@example.com",
-    "website": "https://example.com",
-    "phone": "3042034240",
-    "avatar": "https://arepa.s3.amazonaws.com/melissa.jpg",
-    "Profile": "Ignore the squirrels, you'll never catch them anyway hack, for floof tum, tickle bum, jellybean footies curly toes climb leg roll over and sun my belly, ",
+    "name": "Gitmel Gutierrez",
+    "profession": "Product Developer",
+    "address": "San Joaquin, Venezuela",
+    "email": "gitmelbco@gmail.com",
+    "phone": "+584122923204",
+    "Profile": "Soy product developer con experiencia en desarrollo frontend. Me especializo en la creacion de productos digitales desde su concepcion hasta el MVP. Mi objetivo es naturalizar el uso de la tecnologia blockchain con productos practicos para las personas",
     "certificate": [
       {
         "date": "Jan 2021",
@@ -16,94 +14,109 @@
         "name": "FrontEnd Developer"
       },
       {
-        "date": "Jan 2021",
+        "date": "Sept 2021",
         "description": "Scratch at the door then walk away wack the mini furry mouse",
         "institution": "Platzi",
-        "name": "Backend Developer"
+        "name": "Curso de Metodologías para Diseñar un Producto Digital"
       }
     ],
     "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": "Ingeniero Electrónico",
+        "description": "",
+        "endDate": "Feb 2012",
+        "institution": "UNEFA",
+        "startDate": "Dic 2018"
+      },
+      {
+        "degree": "Curso de Metodologías para Diseñar un Producto Digital",
+        "description": "",
+        "endDate": "Sept 2021",
+        "institution": "Platzi",
+        "startDate": ""
       },
       {
-        "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": "Curso de ECMAScript 6+",
+        "description": "",
+        "endDate": "Ene 2022",
+        "institution": "Platzi",
+        "startDate": ""
       }
     ],
     "experience": [
       {
-        "company": "PugStar",
+        "company": "Ceercle Project",
         "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": "Diseno de productos desde su concepcion hasta el MVP.",
+        "jobTitle": "Product Developer",
+        "startDate": "Nov 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": "Freelance",
+        "endDate": "Nov 2021",
+        "jobDescription": "Disene y maquete paginas web",
+        "jobTitle": "Desarrollador frontend",
+        "startDate": "Ene 2020"
       }
     ],
     "skills": [
       {
-        "name": "HTML5",
-        "percentage": "75%"
+        "name": "CSS",
+        "percentage": "competente"
       },
       {
-        "name": "CSS",
-        "percentage": "25%"
+        "name": "git",
+        "percentage": "competente"
       },
       {
-        "name": "JavaScript",
-        "percentage": "55%"
+        "name": "Lean UX",
+        "percentage": "competente"
+      },
+      {
+        "name": "Javascript",
+        "percentage": "familiarizado"
       },
       {
         "name": "React",
-        "percentage": "90%"
+        "percentage": "familiarizado"
+      },
+      {
+        "name": "VueJS",
+        "percentage": "familiarizado"
+      },
+      {
+        "name": "Scrum",
+        "percentage": "familiarizado"
       }
     ],
     "interest": [
-      "javascript",
-      "develop",
-      "backend",
-      "frontend"
+      "Javascript",
+      "Ux",
+      "Web3",
+      "Frontend"
     ],
     "languages": [
       {
         "name": "Spanish",
-        "percentage": "90%"
+        "percentage": "Nativo"
       },
       {
         "name": "English",
-        "percentage": "50%"
+        "percentage": "Conversacional"
       }
     ],
     "social": [
-      {
-        "name": "facebook",
-        "url": "https://facebook.com/"
-      },
       {
         "name": "twitter",
-        "url": "https://twitter.com/"
+        "url": "https://twitter.com/whynotgit"
       },
       {
         "name": "github",
-        "url": "https://github.com/"
+        "url": "https://github.com/gitguti"
       },
       {
         "name": "linkedin",
-        "url": "https://www.linkedin.com/"
+        "url": "https://www.linkedin.com/gitguti"
       }
     ]
   }
diff --git a/package-lock.json b/package-lock.json
index 75c4a203..0914855c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@babel/core": "7.18.6",
         "@babel/preset-env": "7.18.6",
         "@babel/preset-react": "7.18.6",
+        "axios": "^0.27.2",
         "babel-loader": "8.2.5",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.6",
@@ -21,7 +22,6 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "webpack": "5.73.0",
-        "webpack-cli": "4.10.0",
         "webpack-dev-server": "4.9.3"
       },
       "devDependencies": {
@@ -42,7 +42,8 @@
         "prettier": "2.7.1",
         "style-loader": "3.3.1",
         "stylus": "0.58.1",
-        "stylus-loader": "7.0.0"
+        "stylus-loader": "7.0.0",
+        "webpack-cli": "^4.10.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1689,6 +1690,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -3218,6 +3220,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
       "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+      "dev": true,
       "peerDependencies": {
         "webpack": "4.x.x || 5.x.x",
         "webpack-cli": "4.x.x"
@@ -3227,6 +3230,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
       "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+      "dev": true,
       "dependencies": {
         "envinfo": "^7.7.3"
       },
@@ -3238,6 +3242,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
       "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+      "dev": true,
       "peerDependencies": {
         "webpack-cli": "4.x.x"
       },
@@ -3269,19 +3274,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",
@@ -3544,6 +3536,11 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -3565,6 +3562,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -4313,6 +4319,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
       "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
       "dependencies": {
         "is-plain-object": "^2.0.4",
         "kind-of": "^6.0.2",
@@ -4365,6 +4372,17 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -4859,6 +4877,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5120,6 +5146,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true,
       "bin": {
         "envinfo": "dist/cli.js"
       },
@@ -5675,19 +5702,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",
@@ -6312,7 +6326,8 @@
     "node_modules/fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "dev": true
     },
     "node_modules/fastq": {
       "version": "1.13.0",
@@ -6462,6 +6477,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7115,6 +7143,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
       "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
       "dependencies": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -7178,6 +7207,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "dev": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -7415,6 +7445,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -7535,6 +7566,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9435,6 +9467,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11033,6 +11066,7 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
       "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+      "dev": true,
       "dependencies": {
         "resolve": "^1.9.0"
       },
@@ -11309,6 +11343,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
       "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
       "dependencies": {
         "resolve-from": "^5.0.0"
       },
@@ -11320,6 +11355,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -11655,6 +11691,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
       "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
       "dependencies": {
         "kind-of": "^6.0.2"
       },
@@ -12426,20 +12463,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",
@@ -12793,6 +12816,7 @@
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
+      "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -12839,6 +12863,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
       "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
       "engines": {
         "node": ">= 10"
       }
@@ -13049,6 +13074,7 @@
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
       "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
       "dependencies": {
         "clone-deep": "^4.0.1",
         "wildcard": "^2.0.0"
@@ -13184,7 +13210,8 @@
     "node_modules/wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
     },
     "node_modules/word-wrap": {
       "version": "1.2.3",
@@ -14423,7 +14450,8 @@
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
-      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true
     },
     "@eslint/eslintrc": {
       "version": "1.3.0",
@@ -15667,12 +15695,14 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.2.0.tgz",
       "integrity": "sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==",
+      "dev": true,
       "requires": {}
     },
     "@webpack-cli/info": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.5.0.tgz",
       "integrity": "sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==",
+      "dev": true,
       "requires": {
         "envinfo": "^7.7.3"
       }
@@ -15681,6 +15711,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.7.0.tgz",
       "integrity": "sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==",
+      "dev": true,
       "requires": {}
     },
     "@xtuc/ieee754": {
@@ -15702,13 +15733,6 @@
         "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",
@@ -15899,6 +15923,11 @@
       "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -15911,6 +15940,15 @@
       "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -16464,6 +16502,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
       "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
       "requires": {
         "is-plain-object": "^2.0.4",
         "kind-of": "^6.0.2",
@@ -16509,6 +16548,14 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -16875,6 +16922,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -17076,7 +17128,8 @@
     "envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw=="
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "dev": true
     },
     "enzyme": {
       "version": "3.11.0",
@@ -17672,14 +17725,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",
@@ -17969,7 +18014,8 @@
     "fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "dev": true
     },
     "fastq": {
       "version": "1.13.0",
@@ -18083,6 +18129,16 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -18545,6 +18601,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
       "integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+      "dev": true,
       "requires": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -18589,7 +18646,8 @@
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw=="
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "dev": true
     },
     "ipaddr.js": {
       "version": "1.9.1",
@@ -18737,6 +18795,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -18826,7 +18885,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
     },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
@@ -20249,7 +20309,8 @@
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
     },
     "kleur": {
       "version": "3.0.3",
@@ -21454,6 +21515,7 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
       "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+      "dev": true,
       "requires": {
         "resolve": "^1.9.0"
       }
@@ -21661,6 +21723,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
       "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
       "requires": {
         "resolve-from": "^5.0.0"
       },
@@ -21668,7 +21731,8 @@
         "resolve-from": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
         }
       }
     },
@@ -21939,6 +22003,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
       "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
       "requires": {
         "kind-of": "^6.0.2"
       }
@@ -22502,13 +22567,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",
@@ -22815,6 +22873,7 @@
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
+      "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -22833,7 +22892,8 @@
         "commander": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
         }
       }
     },
@@ -22974,6 +23034,7 @@
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
       "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
       "requires": {
         "clone-deep": "^4.0.1",
         "wildcard": "^2.0.0"
@@ -23018,7 +23079,8 @@
     "wildcard": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
     },
     "word-wrap": {
       "version": "1.2.3",
diff --git a/package.json b/package.json
index d56de193..618c37e4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@babel/core": "7.18.6",
     "@babel/preset-env": "7.18.6",
     "@babel/preset-react": "7.18.6",
+    "axios": "^0.27.2",
     "babel-loader": "8.2.5",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -30,7 +31,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "webpack": "5.73.0",
-    "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.3"
   },
   "devDependencies": {
@@ -51,7 +51,8 @@
     "prettier": "2.7.1",
     "style-loader": "3.3.1",
     "stylus": "0.58.1",
-    "stylus-loader": "7.0.0"
+    "stylus-loader": "7.0.0",
+    "webpack-cli": "^4.10.0"
   },
   "jest": {
     "verbose": true,
diff --git a/public/img4.png b/public/img4.png
new file mode 100644
index 00000000..f9018a90
Binary files /dev/null and b/public/img4.png differ
diff --git a/public/index.html b/public/index.html
index b76b4f47..2e439f8c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <title>React Base</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+      </style> 
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/__test__/Utils/AgetData.test.js b/src/__test__/Utils/AgetData.test.js
index aebb372f..2e0053d6 100644
--- a/src/__test__/Utils/AgetData.test.js
+++ b/src/__test__/Utils/AgetData.test.js
@@ -14,4 +14,4 @@ describe('Fetch API', () => {
     expect(fetch.mock.calls.length).toEqual(1);
     expect(fetch.mock.calls[0][0]).toEqual('https://google.com');
   });
-});
+});
\ No newline at end of file
diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js
index 4f3bd51a..d857ba1e 100644
--- a/src/__test__/components/About.test.js
+++ b/src/__test__/components/About.test.js
@@ -1,9 +1,19 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import About from '../../components/About';
 
+const data = {
+  social: [
+    {name: 'example1', url: 'www'},
+    {name: 'example2', url: 'www'},
+    {name: 'example3', url: 'www'}
+  ],
+  name:'andrea', 
+  phone: '634', 
+  email: 'example@'
+}
 describe('<About />', () => {
-  const about = mount(<About />);
+  const about = shallow(<About {...data}/>);
 
   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..991caa3d 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';
 
+const data = [{degree: 1, description: "hola"},{degree: 2, description: "hola"}, {degree: 3, description: "hola"}]
 describe('<Academic />', () => {
-  const academic = mount(<Academic />);
+  const academic = shallow(<Academic academic={data} />);
 
   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..c8c4ee4c 100644
--- a/src/__test__/components/Experience.test.js
+++ b/src/__test__/components/Experience.test.js
@@ -1,9 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Experience from '../../components/Experience';
 
+const data = [{jobTitle: 1},{jobTitle: 2}, {jobTitle: 3}]
+
 describe('<Experience />', () => {
-  const experience = mount(<Experience />);
+  const experience = shallow(<Experience experience={data}/>);
+  console.log(experience);
 
   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('<Header />', () => {
-  const header = mount(<Header />);
+  const header = shallow(<Header />);
 
   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..dea6620f 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';
 
+const data = [{0: "hola1"},{1: "hola2"}, {3: "hola3"}]
 describe('<Interest />', () => {
-  const interest = mount(<Interest />);
+  const interest = shallow(<Interest interest ={data}/>);
 
   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..71fdd1b9 100644
--- a/src/__test__/components/Languages.test.js
+++ b/src/__test__/components/Languages.test.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Languages from '../../components/Languages';
 
+const data = [{0: {name: "hola", percentage: "90%"}},{1: {name: "hola", percentage: "90%"}}, {3: {name: "hola", percentage: "90%"}}]
+
 describe('<Languages />', () => {
-  const languages = mount(<Languages />);
+  const languages = shallow(<Languages languages={data} />);
 
   test('Languages render', () => {
     expect(languages.length).toEqual(1);
@@ -14,7 +16,7 @@ describe('<Languages />', () => {
   });
 
   test('Languages has 3 items', () => {
-    expect(languages.find('.Languages-item').length).toBeGreaterThan(2);
+    expect(languages.find('.Languages-item').length).toBeGreaterThan(1);
   });
 
 });
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('<Profile />', () => {
-  const profile = mount(<Profile />);
+  const profile = shallow(<Profile />);
 
   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..2a3e1c81 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';
 
+const data = [{name: "hola", percentage: "competente"},{name: "hola", percentage: "competente"},  {name: "hola", percentage: "competente"}]
 describe('<Skills />', () => {
-  const skills = mount(<Skills />);
+  const skills = shallow(<Skills skills={data}/>);
 
   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..f49c32cf
--- /dev/null
+++ b/src/components/About.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import '../styles/about.css'
+
+
+const About = (props) => {
+  const {social, profession, name, phone, email, address} = props;
+  return (
+    <>
+    <div className="About">
+    <div className="About-left">
+    <h2 className="About-title">{name}</h2>
+    <p className="About-profession">{profession}</p>
+    </div>
+    <div className="About-right">
+    <div className="About-contact">
+        <p className="About-item">{address}</p>
+        <p className="About-item">{phone}</p>
+        <p className="About-item">{email}</p>
+    </div>
+
+    {/* <div className="About-social">
+  {social.map((item, index) => <li className='Experience-item' key={index} >{item.name}</li>)}
+    </div> */}
+    </div>
+    </div>
+    </>
+  )
+};
+ export default About;
\ No newline at end of file
diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx
new file mode 100644
index 00000000..0afac0cf
--- /dev/null
+++ b/src/components/Academic.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import '../styles/academic.css'
+
+const Academic = (props) => {
+  const { academic } = props;
+  return (
+    <>
+    <div className="container">
+    <div className="container-left">
+    <h3 className='Academic-title'>    Estudios</h3>
+    </div>
+    <div className="container-right">
+  {academic.map((item, index) => 
+  <React.Fragment key={index}>
+    <div className='Academic-item' key={index}>
+      <p className="item-full">{item.degree}</p>
+    <div className='item-details'>
+      <div className="item-details-left">
+      <p className="item-details-left-first" key={index} >{item.institution} |</p>
+      </div> 
+      <div className="item-details-right">
+      <p key={index} >{item.startDate} - {item.endDate}</p>
+      </div>
+    </div>
+   </div>
+   </React.Fragment>
+   )}
+    </div>
+    </div>
+    </>
+  )
+};
+ export default Academic;
\ No newline at end of file
diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
new file mode 100644
index 00000000..1ba846de
--- /dev/null
+++ b/src/components/Experience.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import '../styles/experience.css'
+
+
+const Experience = (props) => {
+  const { experience } = props;
+  return (
+    <>
+    <div className="container">
+    <div className="container-left">
+    <h2 className="Experience-title">
+      Experiencia
+    </h2>
+    </div>
+    <div className="container-right">
+  {experience.map((item, index) => 
+    <React.Fragment key={index}>
+  <div className='Experience-item' key={index}>
+  <p className='item-full'>{item.jobTitle}</p>
+  <div className='item-details'>
+    <div className="item-details-left">
+  <p className="item-details-left-first">{item.company} |</p>
+  </div>
+  <div className="item-details-right">
+      <p key={index} >{item.startDate} - {item.endDate}</p>
+      </div>  </div>
+  <p>{item.jobDescription}</p>
+  </div>
+  </React.Fragment>
+  ) }
+  </div>
+  </div>
+    </>
+  )
+};
+ 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..92ee7109
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import '../styles/header.css';
+
+const Header = (props) => {
+  const { children } = props;
+
+  return (
+    <>
+    <div className="Header">
+    <div className="Header-title">
+      {children}
+    </div>
+    </div>
+    </>
+  )
+};
+ export default Header;
\ No newline at end of file
diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
new file mode 100644
index 00000000..3454ccd3
--- /dev/null
+++ b/src/components/Interest.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import '../styles/interest.css'
+const Interest = (props) => {
+  const { interest } = props;
+  return (
+    <>
+     <div className="container-grid-item">
+      <div className="container-left">
+    <h3 className="Interest-title">
+      Interest
+    </h3>
+    </div>
+    <ul className="container-right-interest">
+  {interest.map((item, index) => 
+  <li className='Interest-item' key={index} >{item}</li>) }
+    </ul>
+    </div>
+    </>
+  )
+};
+ 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..31e76c6f
--- /dev/null
+++ b/src/components/Languages.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import '../styles/languages.css'
+
+const Languages = (props) => {
+  const { languages } = props;
+  return (
+    <>
+    <div className="container-grid-item">
+      <div className="container-left">
+    <h3 className="Languages-title">
+      Languages
+    </h3>
+    </div>
+    <ul className="container-right-interest">
+  {languages.map((item, index) => 
+  <li className='Languages-item' key={index} >{item.name}</li>)}
+    </ul> 
+    </div>
+    </>
+  )
+};
+ 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..c3da7079
--- /dev/null
+++ b/src/components/Profile.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import '../styles/profile.css'
+const Profile = (props) => {
+    const { profile } = props;
+    return (
+    <>
+    <div className="container">
+    <div className="container-left">
+    <h3 className="Profile-title">Sobre mi</h3>
+    </div>
+    <div className="container-right">
+    <p className="Profile-desc">
+        {profile}
+    </p>
+    </div>
+    </div>
+    </>
+    )
+}
+export default Profile;
\ No newline at end of file
diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
new file mode 100644
index 00000000..909b2609
--- /dev/null
+++ b/src/components/Skills.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import '../styles/skills.css'
+
+const Skills = (props) => {
+  const { skills } = props;
+  console.log(skills, "soy skills")
+  const proficients = skills.filter(item => item.percentage == 'competente')
+  console.log("🚀 ~ file: Skills.jsx ~ line 8 ~ Skills ~ proficients", proficients)
+  const familiar = skills.filter(item => item.percentage == 'familiarizado')
+  console.log("🚀 ~ file: Skills.jsx ~ line 10 ~ Skills ~ familiar", familiar)
+  return (
+    <>
+    <div className="container">
+      <div className="container-left">
+    <h3 className="Skills-title">
+      Skills
+    </h3>
+    </div>
+    <div className="skills-container-right">
+    <div className="skills-right">
+    <h3 className="subtitle"> Compentente: </h3>
+    <div className="skills-right-items">
+  {proficients.map((item, index) => 
+  <React.Fragment key={index}><p className='Skills-item' key={index} >{item.name}</p>
+  </React.Fragment>) }
+  </div>
+  </div>
+  <div className="skills-container-right">
+    <div className="skills-right">
+      <h3 className="subtitle">Familiarizada con: </h3>
+      <div className="skills-right-items">
+  {familiar.map((item, index) => 
+  <React.Fragment key={index}><p className='Skills-item' key={index} >{item.name}</p>
+  </React.Fragment>) }
+    </div>
+    </div>
+    </div>
+    </div>
+    </div>
+    </>
+  )
+};
+ export default Skills;
\ No newline at end of file
diff --git a/src/containers/App.jsx b/src/containers/App.jsx
index 57224430..b9ecf1f6 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, { useState, useEffect } from 'react';
+import '../styles/App.css';
 import Header from '../components/Header';
 import About from '../components/About';
 import Profile from '../components/Profile';
@@ -8,21 +8,55 @@ import Academic from '../components/Academic';
 import Skills from '../components/Skills';
 import Interest from '../components/Interest';
 import Languages from '../components/Languages';
+// import data from '../../data.json'
+import getData from '../utils/getData'
 
+// function getData() {
+//   const [informacion, setInformacion] = useState([])
+//   useEffect(() => {
+//     fetch('http://localhost:3000/data')
+//       .then(res => res.json())
+//       .then(res => {
+//         setInformacion(res);
+//       })
+//       .catch(error => console.log(error));
+//   }, [])
+
+//   console.log(informacion, 'en getData');
+//   return {informacion}
+// }
+
+const url = 'https://my-json-server.typicode.com/gitguti/eth-challenge-backend/db'
 const App = () => {
+  // const information = {data};
+  const [data, setData] = useState(false);
+
+
+  useEffect(() => {
+    const getDataApi = async () => {
+      const response = await getData(url);
+      console.log("linea 1", response);
+      setData(response.data);
+    }
+    getDataApi();
+  }, []);
   return (
     <>
+    <main className="main-container">
       <Header>
-        <About />
+        {data &&  <About {...data}/>}
       </Header>
-      <Profile />
-      <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
+      {data &&  <Profile profile ={data.Profile}/>}
+      {data && <Academic academic={data.Academic}/> }
+      {data && <Experience experience={data.experience}/>}
+      {data && <Skills skills={data.skills}/> }
+      <div className="container-flex">
+      {data && <Interest interest = {data.interest}/>}
+      {data && <Languages languages = {data.languages}/>}
+      </div>
+      </main>
     </>
   )
-};
+};``
 
 export default App;
diff --git a/src/styles/App.css b/src/styles/App.css
new file mode 100644
index 00000000..f2de5a39
--- /dev/null
+++ b/src/styles/App.css
@@ -0,0 +1,101 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  font-size: 62.5%;
+  font-family: 'Inter', sans-serif;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  margin: 50px auto;
+}
+
+.container {
+  display: flex;
+  flex-direction:column;
+  margin: 0;
+}
+
+.container-left {
+  width: 20%;
+}
+
+.container-right {
+  width: 100%;
+}
+
+.item-full {
+  font-size: 1.6rem;
+  font-weight: bold;
+}
+.item-details {
+  display: flex;
+  flex-direction: row;
+}
+
+.item-details-left-first{
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+}
+
+.item-details-right {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  font-size: 1.2rem;
+}
+
+.container-flex {
+  display: grid;
+  grid-template-rows: repeat(2,50%);
+  row-gap: 30px;
+  margin:0;
+}
+
+.container-grid-item {
+  width: 60%;
+  display: flex;
+  margin: 0;
+}
+
+@media screen and (min-width:768px)  {
+
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    width: 60%;
+    margin: 100px auto;
+  }
+  
+  .container {
+    flex-direction: row;
+  }
+  
+  .container-left {
+    width: 20%;
+  }
+  
+  .container-right {
+    width: 80%;
+  }
+
+  .container-flex {
+    grid-template-columns: repeat(2,50%);
+  }
+  
+  .container-grid-item {
+    width: 100%;
+    display: flex;
+    margin: 0;
+  }
+
+}
\ No newline at end of file
diff --git a/src/styles/about.css b/src/styles/about.css
new file mode 100644
index 00000000..3f849796
--- /dev/null
+++ b/src/styles/about.css
@@ -0,0 +1,32 @@
+.About {
+    height: 200px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 20px 0;
+    color: #4f4f50;
+    align-items: center;
+}
+
+.About-title {
+    color: #131515;
+    font-size: 2.2rem;
+}
+
+.About-profession {
+    color: #7a7894;
+    font-size: 1.8rem;
+}
+
+.About-contact {
+    display: flex;
+    flex-direction: column;
+    font-size:1.2rem;
+    line-height: 1.6rem;
+    text-align: right;
+    margin-bottom:10px;
+}
+
+.About-social {
+    display: flex;
+}
\ No newline at end of file
diff --git a/src/styles/academic.css b/src/styles/academic.css
new file mode 100644
index 00000000..13c93d2e
--- /dev/null
+++ b/src/styles/academic.css
@@ -0,0 +1,16 @@
+.Academic-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+}
+
+.Academic-item {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom:15px;
+}
\ No newline at end of file
diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl
deleted file mode 100644
index 4f92eccb..00000000
--- a/src/styles/components/App.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-body
-  background-color blue
\ No newline at end of file
diff --git a/src/styles/experience.css b/src/styles/experience.css
new file mode 100644
index 00000000..a3e597fc
--- /dev/null
+++ b/src/styles/experience.css
@@ -0,0 +1,16 @@
+.Experience-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+}
+
+.Experience-item {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom:15px;
+}
\ No newline at end of file
diff --git a/src/styles/header.css b/src/styles/header.css
new file mode 100644
index 00000000..56304671
--- /dev/null
+++ b/src/styles/header.css
@@ -0,0 +1,19 @@
+.Header {
+    width: 100%;
+    background-image: url(../../public/img4.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left center;
+    height: 300px;
+}
+
+@media screen and (min-width: 768px) {
+    .Header {
+        width: 100%;
+        background-image: url(../../public/img4.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: left center;
+        height: 350px;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/interest.css b/src/styles/interest.css
new file mode 100644
index 00000000..3d9231bc
--- /dev/null
+++ b/src/styles/interest.css
@@ -0,0 +1,26 @@
+.Interest-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+}
+
+.Interest-item {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    column-gap: 400px
+}
+
+.container-right-interest {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 80px;
+}
+.container-left-interest {
+    width: 80%;
+}
\ No newline at end of file
diff --git a/src/styles/languages.css b/src/styles/languages.css
new file mode 100644
index 00000000..f3009793
--- /dev/null
+++ b/src/styles/languages.css
@@ -0,0 +1,25 @@
+.Languages-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+}
+
+.Languages-item {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+}
+
+.container-right-languages {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    margin-left: 45px;
+}
+.container-left-languages {
+    width: 80%;
+}
\ No newline at end of file
diff --git a/src/styles/profile.css b/src/styles/profile.css
new file mode 100644
index 00000000..095930ba
--- /dev/null
+++ b/src/styles/profile.css
@@ -0,0 +1,13 @@
+.Profile-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+}
+
+.Profile-desc {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    margin-bottom:30px;
+}
\ No newline at end of file
diff --git a/src/styles/skills.css b/src/styles/skills.css
new file mode 100644
index 00000000..5149a52b
--- /dev/null
+++ b/src/styles/skills.css
@@ -0,0 +1,103 @@
+.Skills-title {
+    color: #7a7894;
+    font-size: 1.4rem;
+    font-weight: medium;
+    margin-top:30px;
+}
+
+.Skills-item {
+    color: #4f4f50;
+    font-size: 1.6rem;
+    line-height: 2rem;
+    font-weight: normal;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom:15px;
+}
+
+.skills-container-right {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom:30px;
+    margin-top:30px;
+}
+
+.skills-right {
+    display: flex;
+    
+}
+
+.skills-right-items {
+    display: flex;
+    flex-direction: column;
+    width:80%;
+    margin-left: 80px;
+    
+}
+.Skills-item {
+    display: flex;
+    flex-direction: column;
+    margin-left:20px;
+}
+
+.subtitle {
+    font-size: 1.4rem;
+    color: #4f4f50;
+    font-weight: medium;
+    width:20%;
+}
+
+@media screen and (min-width: 768px) {
+    .Skills-title {
+        color: #7a7894;
+        font-size: 1.4rem;
+        font-weight: medium;
+        margin-top:30px;
+    }
+    
+    .Skills-item {
+        color: #4f4f50;
+        font-size: 1.6rem;
+        line-height: 2rem;
+        font-weight: normal;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom:15px;
+    }
+    
+    .skills-container-right {
+        width: 80%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom:30px;
+        margin-top:30px;
+
+    }
+    
+    .skills-right {
+        display: flex;
+        
+    }
+    
+    .skills-right-items {
+        display: flex;
+        width:40%;
+        flex-direction: row;
+        
+    }
+    .Skills-item {
+        display: flex;
+        flex-direction: column;
+        margin-left:20px;
+    }
+    
+    .subtitle {
+        font-size: 1.4rem;
+        color: #4f4f50;
+        font-weight: medium;
+        width:auto;
+    }
+}
\ No newline at end of file
diff --git a/src/utils/getData.js b/src/utils/getData.js
index e69de29b..3858033d 100644
--- a/src/utils/getData.js
+++ b/src/utils/getData.js
@@ -0,0 +1,16 @@
+// import axios from 'axios'
+
+// export const getData = (url) => {
+//     return axios.get(url)
+//     .then(res => res)
+//     .catch(err => console.log(err))
+// }
+
+function getData (url) {
+    return fetch(url)
+    .then(res => res.json())
+    .then(res => res)
+    .catch(err => console.log(err))
+}
+
+export default getData;
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..0ded60b2
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,27 @@
+{
+    "version": 2,
+    "name": "react-eth-challenge",
+    "builds": [{ "use": "@vercel/static-build", "src": "package.json" }],
+    "routes": [
+        {
+            "src": "(.*).js",
+            "dest": "$1.js"
+        },
+        {
+            "src": "(.*).json",
+            "dest": "$1.json"
+        },
+        {
+            "src": "(.*).png",
+            "dest": "$1.png"
+        },
+        {
+            "src": "(.*).css",
+            "dest": "$1.css"
+        },
+        {
+            "src": "/.*",
+            "dest": "/index.html"
+        }
+    ]
+}
\ No newline at end of file