[UPDATE] Challenge done

data.json

@@ -1,13 +1,13 @@
 {
   "data": {
-    "name": "Melissa Walsh",
+    "name": "Juan Daniel Rios Ramirez",
     "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, ",
+    "email": "mrdaniel19996@gmail.com",
+    "website": "https://github.com/Mrdaniel01",
+    "phone": "3112766237",
+    "avatar": "https://res.cloudinary.com/djcsouoma/image/upload/w_100/v1597717195/IMG_5496_hgcywh.jpg",
+    "Profile": "Administrador de empresas, MBA, Master en Comercio, Tecnólogo en banca y finanzas, FrontEnd",
     "certificate": [
       {
         "date": "Jan 2021",
@@ -57,19 +57,19 @@
     "skills": [
       {
         "name": "HTML5",
-        "percentage": "75%"
+        "percentage": "85%"
       },
       {
         "name": "CSS",
-        "percentage": "25%"
+        "percentage": "85%"
       },
       {
         "name": "JavaScript",
         "percentage": "55%"
       },
       {
         "name": "React",
-        "percentage": "90%"
+        "percentage": "50%"
       }
     ],
     "interest": [
@@ -85,7 +85,7 @@
       },
       {
         "name": "English",
-        "percentage": "50%"
+        "percentage": "70%"
       }
     ],
     "social": [

package.json

@@ -62,4 +62,4 @@
       "<rootDir>/src/__test__/setupTest.js"
     ]
   }
-}
+}

src/components/About.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/components/About.styl';
+
+const About = () => {
+  return (
+    <>
+      <h2 className='About-title'>About</h2>
+      <p className='About-item'>Platzi Master</p>
+      <p className='About-item'>24 years old</p>
+      <p className='About-item'>Student for ever and ever</p>
+    </>
+  );
+};
+
+export default About;

src/components/Academic.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../styles/components/Academic.styl';
+
+const Academic = () => {
+  return (
+    <div className='Academic-container'>
+      <h2 className='Academic-title'>Academic</h2>
+      <p className='Academic-item'>MBA - Master in Business Administration</p>
+      <p className='Academic-item'>Master in International Commerce</p>
+      <p className='Academic-item'>Business Administration</p>
+      <p className='Academic-item'>Web Development</p>
+      <p className='Academic-item'>Photography</p>
+    </div>
+  );
+};
+
+export default Academic;

src/components/Experience.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/components/Experience.styl';
+
+const Experience = () => {
+  return (
+    <div className='Experience-container'>
+      <h2 className='Experience-title'>Experience</h2>
+      <p className='Experience-item'>Financial Analist</p>
+      <p className='Experience-item'>Photographer</p>
+      <p className='Experience-item'>Volunteer</p>
+    </div>
+  );
+};
+
+export default Experience;

src/components/Header.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import '../styles/components/Header.styl';
+
+const Header = () => {
+  return (
+    <div className='Header-container'>
+      <img src='https://res.cloudinary.com/djcsouoma/image/upload/w_100/v1597717195/IMG_5496_hgcywh.jpg' alt='profile phot Juan Rios' />
+      <section>
+        <h1 className='Header-title'>Juan Daniel Rios Ramirez</h1>
+        <h3 className='Header-job-title'>MBA and FrontEnd Developer</h3>
+        <p className='Header-phone'>Phone +57 3112766237</p>
+        <p className='Header-email'>E-mail: mrdaniel19996@gmail.com</p>
+        <p className='Header-website'>https://github.com/Mrdaniel01</p>
+        <p className='Header-adress'>Bogota - Colombia</p>
+      </section>
+    </div>
+  );
+};
+
+export default Header;

src/components/Interest.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import '../styles/components/Interest.styl';
+
+const Interest = () => {
+  return (
+    <div className='Interest-container'>
+      <h2 className='Interest-title'>Interest</h2>
+      <p className='Interest-item'>Traveling</p>
+      <p className='Interest-item'>Music</p>
+      <p className='Interest-item'>Motocycles</p>
+      <p className='Interest-item'>Video Games</p>
+    </div>
+  );
+};
+
+export default Interest;

src/components/Languages.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/components/Languages.styl';
+
+const Languages = () => {
+  return (
+    <div className='Languages-container'>
+      <h2 className='Languages-title'>Languages</h2>
+      <p className='Languages-item'>Spanish</p>
+      <p className='Languages-item'>English</p>
+      <p className='Languages-item'>French</p>
+    </div>
+  );
+};
+
+export default Languages;

src/components/Profile.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import '../styles/components/Profile.styl';
+
+const Profile = () => {
+  return (
+    <div className='Profile-container'>
+      <h2 className='Profile-title'>Profile</h2>
+      <p className='Profile-desc'>Administrador de empresas, MBA, Master en Comercio, Tecnólogo en banca y finanzas, FrontEnd</p>
+    </div>
+  );
+};
+
+export default Profile;

src/components/Skills.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import '../styles/components/Skills.styl';
+
+const Skills = () => {
+  return (
+    <div className='Skills-container'>
+      <h2 className='Skills-title'>Skills</h2>
+      <p className='Skills-item'>Design</p>
+      <p className='Skills-item'>Web Development</p>
+      <p className='Skills-item'>Photography</p>
+      <p className='Skills-item'>Math</p>
+    </div>
+  );
+};
+
+export default Skills;

src/containers/App.jsx

@@ -15,14 +15,16 @@ const App = () => {
       <Header>
         <About />
       </Header>
-      <Profile />
-      <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
+      <div className='Home-container'>
+        <Profile />
+        <Experience />
+        <Academic />
+        <Skills />
+        <Interest />
+        <Languages />
+      </div>
     </>
-  )
+  );
 };
 
 export default App;

src/styles/components/Academic.styl

@@ -0,0 +1,10 @@
+.Academic-container
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius: 10px
+  break-inside avoid
+  page-break-inside avoid
+  p
+    margin-left: 10px 

src/styles/components/App.styl

@@ -1,2 +1,12 @@
+*
+  padding: 0
+  margin: 0
+  box-sizing: border-box
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
 body
-  background-color blue
+  background-color gray
+
+.Home-container
+  columns 2
+  height auto
+  margin-top 200px

src/styles/components/Experience.styl

@@ -0,0 +1,10 @@
+.Experience-container
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius: 10px
+  break-inside avoid
+  page-break-inside avoid
+  p
+    margin-left: 10px 

src/styles/components/Header.styl

@@ -0,0 +1,18 @@
+.Header-container
+  width: 80%
+  min-width 960px
+  margin: 0 auto
+  display flex
+  background: white
+  border-radius 0 0 20px 20px
+  img
+    margin: 20px
+    border-radius 10px
+  section 
+    margin: 0 20px
+    font-size: .8em
+    align-self: center
+
+.Header-title
+  font-size: 2.5em
+  margin: 0 0 10px 0

src/styles/components/Interest.styl

@@ -0,0 +1,10 @@
+.Interest-container  
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius: 10px
+  break-inside avoid
+  page-break-inside avoid
+  p
+    margin-left: 10px 

src/styles/components/Languages.styl

@@ -0,0 +1,8 @@
+.Languages-container
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius: 10px
+  p
+    margin-left: 10px 

src/styles/components/Profile.styl

@@ -0,0 +1,8 @@
+.Profile-container
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius: 10px
+  p
+    margin-left: 10px 

src/styles/components/Skills.styl

@@ -0,0 +1,10 @@
+.Skills-container
+  width: 100%
+  background: white
+  margin: 20px
+  padding: 20px
+  border-radius 10px
+  break-inside avoid
+  page-break-inside avoid
+  p
+    margin-left: 10px 

src/utils/getData.js

@@ -0,0 +1,10 @@
+const getData = (url) => {
+  const data = fetch(url)
+    .then(response => response.json())
+    .then(data => data)
+    .catch(error => error);
+
+  return data;
+};
+
+export default getData;