Done!

.babelrc

@@ -1,6 +1,13 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "10"
+        }
+      }
+    ],
     "@babel/preset-react"
   ]
 }

data.json

@@ -36,6 +36,13 @@
         "endDate": "Decenber 2015",
         "institution": "Harvard",
         "startDate": "Jan 2017"
+      },
+      {
+        "degree": "Software 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"
       }
     ],
     "experience": [
@@ -86,6 +93,10 @@
       {
         "name": "English",
         "percentage": "50%"
+      },
+      {
+        "name": "Japones",
+        "percentage": "10%"
       }
     ],
     "social": [

package.json

@@ -21,17 +21,24 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.8.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-regular-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "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.6.3",
+    "jest-fetch-mock": "^3.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-i18next": "^11.7.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-eslint": "^10.0.3",
@@ -62,4 +69,4 @@
       "<rootDir>/src/__test__/setupTest.js"
     ]
   }
-}
+}

src/__test__/components/About.test.js

@@ -16,5 +16,4 @@ describe('<About />', () => {
   test('About haves 3 items', () => {
     expect(about.find('.About-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Academic.test.js

@@ -16,5 +16,4 @@ describe('<Academic />', () => {
   test('Academic has 3 items', () => {
     expect(academic.find('.Academic-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Experience.test.js

@@ -16,5 +16,4 @@ describe('<Experience />', () => {
   test('Experience haves 3 items', () => {
     expect(experience.find('.Experience-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Header.test.js

@@ -12,5 +12,4 @@ describe('<Header />', () => {
   test('Header title', () => {
     expect(header.find('.Header-title').length).toEqual(1);
   });
-
 });

src/__test__/components/Interest.test.js

@@ -16,5 +16,4 @@ describe('<Interest />', () => {
   test('Interest has 3 items', () => {
     expect(interest.find('.Interest-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Languages.test.js

@@ -16,5 +16,4 @@ describe('<Languages />', () => {
   test('Languages has 3 items', () => {
     expect(languages.find('.Languages-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Profile.test.js

@@ -16,5 +16,4 @@ describe('<Profile />', () => {
   test('Profile have a description', () => {
     expect(profile.find('.Profile-desc').length).toEqual(1);
   });
-
 });

src/__test__/components/Skills.test.js

@@ -16,5 +16,4 @@ describe('<Skills />', () => {
   test('Skills has 3 items', () => {
     expect(skills.find('.Skills-item').length).toBeGreaterThan(2);
   });
-
 });

src/components/About.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faPhone,
+  faEnvelope,
+  faGlobe,
+} from '@fortawesome/free-solid-svg-icons';
+
+const About = ({ profession, phone, email, website, address }) => {
+  return (
+    <div className="About">
+      <h2 className="About-title">{profession}</h2>
+      <ul>
+        <li className="About-item">
+          <FontAwesomeIcon icon={faPhone} />
+          {phone}
+        </li>
+        <li className="About-item">
+          <FontAwesomeIcon icon={faEnvelope} />
+          {email}
+        </li>
+        <li className="About-item">
+          <FontAwesomeIcon icon={faGlobe} />
+          {website}
+        </li>
+      </ul>
+
+      <p>{address}</p>
+    </div>
+  );
+};
+
+export default About;

src/components/Academic.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Academic = ({ academic, theme }) => {
+  const { t, i18n } = useTranslation('common');
+
+  const profileAcademic =
+    academic ||
+    Array(3).fill({
+      degree: 'Master',
+      endDate: 'Jan 2017',
+      startDate: 'Jan 2018',
+      description: 'lorem ipsum',
+      institution: 'IMT',
+    });
+
+  const academicList = profileAcademic.map((aca, index) => (
+    <div key={`${aca.degree}-${index}`} className="Academic-item">
+      <div className="small">
+        {aca.startDate} - {aca.endDate}
+      </div>
+      <div className="Academic-item-head">
+        <div className="Academic-item-title">
+          <h3>{aca.degree}</h3>
+        </div>
+        <span className={`vertical-line line-${theme}`}></span>
+        <div className="Academic-item-subtitle">
+          <h3>{aca.institution}</h3>
+        </div>
+      </div>
+      <p>{aca.description}</p>
+    </div>
+  ));
+
+  return (
+    <section>
+      <div className="container">
+        <div className="Academic">
+          <h2 className="Academic-title">{t('academic.title')}</h2>
+          <span className={`horizontal-line line-${theme}`}></span>
+          <div className="Academic-items">{academicList}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Academic;

src/components/ButtonCircle.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+
+const ButtonCircle = ({ changeTheme, theme }) => {
+  const getIcon = () => {
+    if (theme === 'dark') return faSun;
+    return faMoon;
+  };
+
+  return (
+    <button onClick={changeTheme} className={`Button-circle btn-${theme}`}>
+      <FontAwesomeIcon icon={getIcon()} />
+    </button>
+  );
+};
+
+export default ButtonCircle;

src/components/Experience.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Experience = ({ experience, theme }) => {
+
+  const { t, i18n } = useTranslation('common');
+
+  const profileExpirience =
+    experience ||
+    Array(3).fill({
+      company: 'A company',
+      endDate: 'Jan 2017',
+      startDate: 'Jan 2018',
+      jobDescription: 'lorem ipsum',
+      jobTitle: 'title',
+    });
+
+  const experienceList = profileExpirience.map((exp, index) => (
+    <div key={`${exp.company}-${index}`} className="Experience-item">
+      <div className="small">
+        {exp.startDate} - {exp.endDate}
+      </div>
+      <div className="Experience-item-head">
+        <div className="Experience-item-title"><h3>{exp.jobTitle}</h3></div>
+        <span className="vertical-line"></span>
+        <div className="Experience-item-subtitle"><h3>{exp.company}</h3></div>
+      </div>
+      <p>{exp.jobDescription}</p>
+    </div>
+  ));
+
+  return (
+    <section>
+      <div className="container">
+        <div className="Experience">
+          <h2 className="Experience-title">{t('experience.title')}</h2>
+          <span className={`horizontal-line line-${theme}`}></span>
+          <div className="Experience-items">{experienceList}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Experience;

src/components/Header.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Header = ({ name, avatar, children }) => {
+  const [t, i18n] = useTranslation('common');
+
+  return (
+    <header>
+      <div className="container">
+        <div className="Header">
+          <div className="Header-img">
+            <img src={avatar} alt={name} />
+          </div>
+          <div className="Header-details">
+            <div className="Header-head">
+              <h1 className="Header-title">{name}</h1>
+              {i18n.language === 'en' ? (
+                <button className="lang-btn" onClick={() => i18n.changeLanguage('es')}>🇺🇸</button>
+              ) : (
+                <button className="lang-btn" onClick={() => i18n.changeLanguage('en')}>🇲🇽</button>
+              )}
+            </div>
+            {children}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Interest.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Interest = ({ interests, theme }) => {
+  const { t, i18n } = useTranslation('common');
+  const profileInterests = interests || Array(3).fill('javascript');
+
+  const interestsList = profileInterests.map((interest, index) => (
+    <li key={`${interest}-${index}`} className="Interest-item">
+      {interest}
+    </li>
+  ));
+
+  return (
+    <section>
+      <div className="container">
+        <div className="Interest">
+          <h2 className="Interest-title">{t('interest.title')}</h2>
+          <span className={`horizontal-line line-${theme}`}></span>
+          <ul>{interestsList}</ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Interest;

src/components/Languages.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Languages = ({ languages, theme }) => {
+  const { t, i18n } = useTranslation('common');
+  const profileLangs =
+    languages || Array(3).fill({ name: 'test', percentage: '100%' });
+
+  const languagesList = profileLangs.map((language, index) => (
+    <li key={`${language.name}-${index}`} className="Languages-item">
+      {language.name}: <span>{language.percentage}</span>
+    </li>
+  ));
+
+  return (
+    <section>
+      <div className="container">
+        <div className="Languages">
+          <h2 className="Languages-title">{t('language.title')}</h2>
+          <span className={`horizontal-line line-${theme}`}></span>
+          <ul>{languagesList}</ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Languages;

src/components/Profile.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Profile = ({ desc, theme }) => {
+  const { t, i18n } = useTranslation('common');
+
+  return (
+    <section>
+      <div className="container">
+        <div className="Profile">
+          <h2 className="Profile-title">
+            {t('profile.title')}
+          </h2>
+          <span className={`horizontal-line line-${theme}`}></span>
+          <p className="Profile-desc">{desc}</p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Profile;