reto terminado

.babelrc

@@ -1,6 +1,7 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
   ]
-}
+}

package.json

@@ -22,18 +22,25 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.8.3",
     "babel-loader": "^8.0.6",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "i18next": "^19.5.1",
+    "jest-fetch-mock": "^3.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-i18next": "^11.7.0",
+    "react-icons": "^3.10.0",
+    "styled-components": "^5.1.1",
+    "styled-theming": "^2.2.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.2",
-    "enzyme": "^3.11.0",
-    "jest-fetch-mock": "^3.0.1",
-    "enzyme-adapter-react-16": "^1.15.2"
+    "webpack-dev-server": "^3.10.2"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.1",
     "babel-eslint": "^10.0.3",
     "css-loader": "^3.4.2",
     "eslint": "^5.16.0",
@@ -49,6 +56,7 @@
     "json-server": "^0.15.1",
     "mini-css-extract-plugin": "^0.7.0",
     "prettier": "^1.19.1",
+    "regenerator-runtime": "^0.13.5",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2"
@@ -62,4 +70,4 @@
       "<rootDir>/src/__test__/setupTest.js"
     ]
   }
-}
+}

src/components/About.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { textColor } from '../utils/theme';
+
+const About = ({ phone, email, website, address, section }) => {
+  const A = styled.a`
+    color:${textColor};
+  `;
+  return (
+    <div className='About-color'>
+      <h3 className='About-title'>
+        {section}
+      </h3>
+      <div className='About-item-container'>
+        <div>
+          <A href={`tel:${phone}`} className='About-item Header-phone'>
+            {phone}
+          </A>
+          <A href={`mailto:${email}`} className='About-item Header-email'>
+            {email}
+          </A>
+        </div>
+
+        <div>
+          <A href={website} className='About-color About-item Header-website'>
+            {website}
+          </A>
+        </div>
+
+        <div>
+          <A href={`http://maps.google.com/?q=${address}`} className='About-item Header-address'>
+            {address}
+          </A>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default withTheme(About);

src/components/Academic.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Academic = ({ itemsArray, section }) => {
+
+  const items = itemsArray || Array(3).fill(1);
+
+  return (
+    <>
+      <section className='section Academic'>
+        <h3 className='Academic-title'>{section}</h3>
+        {items.map((item, index) => {
+          const i = index + 1;
+          return (
+            <article className='Academic-item' key={i}>
+              <h3>{item.degree}</h3>
+              <h4>{item.institution}</h4>
+              <p>{item.description}</p>
+              <span className='dates'>{`${item.endDate} - ${item.startDate}`}</span>
+            </article>
+          );
+        })}
+      </section>
+    </>
+  );
+};
+
+export default Academic;

src/components/Experience.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Experience = ({ itemsArray, section }) => {
+
+  const items = itemsArray || Array(3).fill(1);
+
+  return (
+    <>
+      <section className='section Experience'>
+        <h3 className='Experience-title'>{section}</h3>
+        {items.map((item, index) => {
+          const i = index + 1;
+          return (
+            <article className='Experience-item' key={i}>
+              <h3>{item.company}</h3>
+              <h4>{item.jobTitle}</h4>
+              <p>{item.jobDescription}</p>
+              <span>{`${item.endDate} - ${item.startDate}`}</span>
+            </article>
+          );
+        })}
+      </section>
+    </>
+  );
+};
+
+export default Experience;

src/components/Header.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Header = ({ children, name, profession, avatar }) => {
+  return (
+    <header className=' About'>
+      <figure className='About__image'>
+        <img src={avatar} alt='Avatar' />
+      </figure>
+      <div className='Header-title'>
+        <h1>{name}</h1>
+        <h3>{profession}</h3>
+        {children}
+      </div>
+    </header>
+  );
+};
+export default Header;

src/components/Interest.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Interest = ({ itemsArray, section }) => {
+  const items = itemsArray || Array(3).fill(1);
+
+  return (
+    <section className='section Interest'>
+      <h1 className='Interest-title'>{section}</h1>
+      <ul>
+        {items.map((item, index) => {
+          const i = index + 1;
+          return (
+            <li key={i} className='Interest-item'>{item}</li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+export default Interest;

src/components/Languages.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Language = ({ itemsArray, section }) => {
+
+  const items = itemsArray || Array(3).fill(1);
+
+  return (
+    <section className='section Language'>
+      <h1 className='Languages-title'>{section}</h1>
+      {items.map((item, index) => {
+        const i = index + 1;
+        return (
+          <article className='Languages-item' key={i}>
+            <p>{item.name}</p>
+          </article>
+        );
+      })}
+    </section>
+  );
+};
+
+export default Language;

src/components/Profile.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Profile = ({ profile, section }) => {
+
+  return (
+    <section className='section Profile'>
+      <div className='Profile-container'>
+        <h3 className='Profile-title'>{section}</h3>
+        <p className='Profile-desc'>{profile}</p>
+      </div>
+    </section>
+  );
+};
+
+export default Profile;

src/components/Skills.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const Skills = ({ itemsArray, section }) => {
+
+  const items = itemsArray || Array(3).fill(1);
+
+  return (
+    <section className='section Skills'>
+      <h1 className='Skills-title'>{section}</h1>
+      {items.map((items, index) => {
+        const i = index + 1;
+        return (
+          <div className='Skills-container' key={i}>
+            <article className='Skills-item'>
+              <p>
+                <span>
+                  {items.name}
+                </span>
+              </p>
+              <img src={items.percentage} alt='logo html' />
+            </article>
+          </div>
+        );
+      })}
+    </section>
+  );
+};
+
+export default Skills;