Challenge done

data.json

@@ -1,13 +1,13 @@
 {
   "data": {
-    "name": "Melissa Walsh",
-    "profession": "FrontEnd Developer",
-    "address": "Bogotá, Colombia.",
+    "name": "Walter Miguel Díaz Jaramillo",
+    "profession": "Desarrollador Web",
+    "address": "Toluca, Mexico",
     "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, ",
+    "avatar": "https://www.w3schools.com/howto/img_avatar.png",
+    "Profile": "Ingeniero en sistemas computacionales, apacionado por la tecnologia y el nunca parar de aprender",
     "certificate": [
       {
         "date": "Jan 2021",

package.json

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

src/components/About.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import '../styles/components/About.styl';
+
+const About = () => {
+  return (
+    <>
+      <hr />
+      <i className='text-muted'>Proyecto desarrollado con react</i>
+    </>
+  );
+};
+
+export default About;

src/components/Academic.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import '../styles/components/Academic.styl';
+
+const Academic = props => {
+  return (
+    <div>
+      <h2 className="Academic-title">Academic</h2>
+      {props.academic.map(ac => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{ac.institution}</h3>
+          <h4 className="Academic__degree">{ac.degree}</h4>
+          <span className="Academic__desc">{ac.description}</span>
+          <br />
+          <span className="Academic__start">{ac.startDate}</span> -
+          <span className="Academic__end">{ac.endDate}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Academic;

src/components/Certificate.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import '../styles/components/Academic.styl';
+
+const Certificate = props => {
+  return (
+    <div>
+      <h2 className="Academic-title">Certicates</h2>
+      {props.certificate.map(c => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{c.institution}</h3>
+          <h4 className="Academic__degree">{c.name}</h4>
+          <span className="Academic__desc">{c.description}</span>
+          <br />
+          <span className="Academic__start">{c.date}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Certificate;

src/components/Experience.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Experience = (props) => {
+  return (
+    <div>
+      <h2 className="Academic-title">Experience</h2>
+      {props.experience.map(ac => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{ac.company}</h3>
+          <h4 className="Academic__degree">{ac.jobTitle}</h4>
+          <span className="Academic__desc">{ac.jobDescription}</span>
+          <br />
+          <span className="Academic__start">{ac.startDate}</span> -
+          <span className="Academic__end">{ac.endDate}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Experience;

src/components/Header.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import '../styles/components/Header.styl';
+
+const Header = (props) => {
+  return (
+    <div>
+      <nav>
+        <ul className="menu">
+          <li className="logo">
+            <a href="#">React Curriculum vitae</a>
+          </li>
+          <li className="item">
+            <a href="#">Inicio</a>
+          </li>
+          <li className="item">
+            <a href="#">Acerca de</a>
+          </li>
+        </ul>
+      </nav>
+      <section className="Header">
+        <img className="Header-img" src={props.avatar} />
+        <div className="Header__card">
+          <h2 className="Header-title">{props.name}</h2>
+          <h3 className="Header-job-title">{props.profession}</h3>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Header;

src/components/Interest.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Interest = (props) => {
+  return (
+    <div>
+      <h2 className="Academic-title">Interest</h2>
+      {props.interest.map(interest => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{interest}</h3>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Interest;

src/components/Languages.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Languages = (props) => {
+  return (
+    <div>
+      <h2 className="Academic-title">Languages</h2>
+      {props.languages.map(sk => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{sk.name}</h3>
+          <h4 className="Academic__degree">{sk.percentage}</h4>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Languages;

src/components/Profile.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles/components/Profile.styl';
+
+const Profile = (props) => {
+  return (
+    <div className="Profile">
+      <h2 className="Profile-title">Profile</h2>
+      <p className="Profile-desc">
+        {props.profile}
+      </p>
+    </div>
+  );
+};
+
+export default Profile;

src/components/Skills.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Skills = (props) => {
+  return (
+    <div>
+      <h2 className="Academic-title">Skills</h2>
+      {props.skills.map(sk => (
+        <div className="Academic__card">
+          <h3 className="Academic__institution">{sk.name}</h3>
+          <h4 className="Academic__degree">{sk.percentage}</h4>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Skills;

src/components/Social.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import '../styles/components/Social.styl';
+
+const Social = props => {
+  return (
+    <div>
+      <h2 className="Academic-title">Social Media</h2>
+      <div className="social">
+        {props.social.map(s => (
+          <div className="social__box">
+            <a className="social__link" href={s.url}>
+              {s.name}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Social;

src/containers/App.jsx

@@ -1,28 +1,49 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import '../styles/components/App.styl';
 import Header from '../components/Header';
 import About from '../components/About';
 import Profile from '../components/Profile';
 import Experience from '../components/Experience';
 import Academic from '../components/Academic';
 import Skills from '../components/Skills';
+import Social from '../components/Social';
 import Interest from '../components/Interest';
+import Certificate from '../components/Certificate';
 import Languages from '../components/Languages';
+import getData from '../utils/getData';
 
 const App = () => {
-  return (
+  const API = 'http://localhost:3000/data';
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    getData(API).then(data => setData(data));
+  }, []);
+
+  return data.length === 0 ? (
+    <h1>Loading...</h1>
+  ) : (
     <>
-      <Header>
+      <Header
+        name={data.name}
+        profession={data.profession}
+        avatar={data.avatar}
+      />
+      <Profile profile={data.Profile} />
+      <div className="container">
+        <Academic academic={data.Academic} />
+        <Experience experience={data.experience} />
+        <div className="divider">
+          <Skills skills={data.skills} />
+          <Languages languages={data.languages} />
+          <Interest interest={data.interest} />
+        </div>
+        <Certificate certificate={data.certificate} />
+        <Social social={data.social} />
         <About />
-      </Header>
-      <Profile />
-      <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
+      </div>
     </>
-  )
+  );
 };
 
 export default App;

src/styles/components/About.styl

@@ -0,0 +1,6 @@
+.text-muted {
+    display: flex;
+    justify-self: center;
+    left: 50%;
+    color: #00416d;
+}

src/styles/components/Academic.styl

@@ -0,0 +1,29 @@
+.Academic {
+    &__card {
+        background-color: #E3DFC8;
+        margin: 9px;
+        padding: 16px;
+        border-radius: 5px;
+    }
+
+    &__degree {
+        color: grey;
+    }
+
+    &__start {
+        color: red;
+        font-weight: bold;
+    }
+    &__end {
+        color: red;
+        font-weight: bold;
+    }
+}
+
+.Academic-title {
+    color: #00416d;
+}
+
+.Academic-desc {
+    margin-top: 16px;
+}

src/styles/components/App.styl

@@ -1,2 +1,17 @@
-body
-  background-color blue
+body {
+  background-color: #f5f1da;
+  font-family: sans-serif;
+}
+
+.container {
+  padding: 32px;
+}
+
+.divider {
+  width: 100%
+  display: flex;
+  justify-content: space-evenly;
+  margin: 8px;
+  background-color: #F8BD7F;
+  padding: 8px;
+}