From e6a2e00cae373ea6242983295521e1fe6d73d41c Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Sun, 7 Aug 2022 22:19:09 -0400 Subject: [PATCH 01/10] [ADD] Create the project components --- src/__test__/components/About.test.js | 4 ++-- src/__test__/components/Academic.test.js | 4 ++-- src/__test__/components/Experience.test.js | 4 ++-- src/__test__/components/Header.test.js | 4 ++-- src/__test__/components/Interest.test.js | 4 ++-- src/__test__/components/Languages.test.js | 4 ++-- src/__test__/components/Profile.test.js | 4 ++-- src/__test__/components/Skills.test.js | 4 ++-- src/components/About.jsx | 14 ++++++++++++++ src/components/Academic.jsx | 14 ++++++++++++++ src/components/Experience.jsx | 14 ++++++++++++++ src/components/Header.jsx | 12 ++++++++++++ src/components/Interest.jsx | 14 ++++++++++++++ src/components/Languages.jsx | 14 ++++++++++++++ src/components/Profile.jsx | 14 ++++++++++++++ src/components/Skills.jsx | 14 ++++++++++++++ 16 files changed, 126 insertions(+), 16 deletions(-) create mode 100644 src/components/About.jsx create mode 100644 src/components/Academic.jsx create mode 100644 src/components/Experience.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/Interest.jsx create mode 100644 src/components/Languages.jsx create mode 100644 src/components/Profile.jsx create mode 100644 src/components/Skills.jsx diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..2fb74860 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import About from '../../components/About'; describe('', () => { - const about = mount(); + const about = shallow(); 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..fd929310 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Academic from '../../components/Academic'; describe('', () => { - const academic = mount(); + const academic = shallow(); 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..2f4f4bda 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Experience from '../../components/Experience'; describe('', () => { - const experience = mount(); + const experience = shallow(); 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('
', () => { - const header = mount(
); + const header = shallow(
); 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..ce24af5f 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Interest from '../../components/Interest'; describe('', () => { - const interest = mount(); + const interest = shallow(); 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..d43e5621 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Languages from '../../components/Languages'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(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('', () => { - const profile = mount(); + const profile = shallow(); 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..872b1ca3 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Skills from '../../components/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); 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..fdcc8223 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const About = () => { + return ( + <> +
+
+
+
+ + ) +}; + +export default About; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..6ec9cec2 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Academic = () => { + return ( + <> +
+
+
+
+ + ) +}; + +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..7bfa8589 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Experience = () => { + return ( + <> +
+
+
+
+ + ) +}; + +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..8df0b5b2 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Header = () => { + return ( + <> +
+
+ + ) +}; + +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..9ddaefc1 --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Interest = () => { + return ( + <> +
+
+
+
+ + ) +}; + +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..f98e5a93 --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Languages = () => { + return ( + <> +
+
+
+
+ + ) +}; + +export default Languages; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..21995a78 --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Profile = () => { + return ( + <> +
+
+
+
+ + ) +}; + +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..accd3ae6 --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + +const Skills = () => { + return ( + <> +
+
+
+
+ + ) +}; + +export default Skills; \ No newline at end of file From 1696826ae2b43b2ffa7dfa19b3c425872173b2ce Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:14:44 -0400 Subject: [PATCH 02/10] [EDIT] Project components --- src/components/About.jsx | 51 ++++++++++++++++++++++++++++++----- src/components/Academic.jsx | 33 +++++++++++++++++------ src/components/Experience.jsx | 33 +++++++++++++++++------ src/components/Header.jsx | 19 ++++++++----- src/components/Interest.jsx | 30 +++++++++++++++------ src/components/Languages.jsx | 27 ++++++++++++++----- src/components/Profile.jsx | 16 ++++++----- src/components/Skills.jsx | 29 +++++++++++++++----- 8 files changed, 180 insertions(+), 58 deletions(-) diff --git a/src/components/About.jsx b/src/components/About.jsx index fdcc8223..245fe500 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -1,13 +1,50 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import '../styles/components/About.styl'; +import AppContext from '../context/AppContext'; +import { BsGithub, BsLinkedin, BsTwitter, BsFacebook } from 'react-icons/bs'; const About = () => { + const data = useContext(AppContext); return ( - <> -
-
-
-
- +
+

Contact Information

+ +
    +
  • +

    {data.phone}

    +
    • +
  • +

    {data.email}

    +
    • +
  • +

    {data.website}

    +
    • +
  • +

    {data.address}

    +
    • +
+
) }; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index 6ec9cec2..e38e6f74 100644 --- a/src/components/Academic.jsx +++ b/src/components/Academic.jsx @@ -1,14 +1,31 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; +import '../styles/components/Academic.styl'; const Academic = () => { + const data = useContext(AppContext); + const academics = data.Academic ? data.Academic : [0,1,2]; return ( - <> -
-
-
-
- +
+
+

Academic Information

+
    + { + academics.map((academic,i) => { + return ( +
  • +

    {academic.degree}

    +

    {academic.startDate} - {academic.endDate}

    +

    {academic.description}

    +

    {academic.institution}

    +
    • + ) + }) + } +
+
+
) }; -export default Academic; \ No newline at end of file +export default Academic; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 7bfa8589..a7216e79 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -1,14 +1,31 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; +import '../styles/components/Experience.styl'; const Experience = () => { + const data = useContext(AppContext); + const experiences = data.experience ? data.experience : [0,1,2]; return ( - <> -
-
-
-
- +
+
+

Experience

+
    + { + experiences.map((experience,i) => { + return( +
  • +

    {experience.company}

    +

    {experience.startDate} - {experience.endDate}

    +

    {experience.jobTitle}

    +

    {experience.jobDescription}

    +
    • + ) + }) + } +
+
+
) }; -export default Experience; \ No newline at end of file +export default Experience; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 8df0b5b2..753b4369 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,12 +1,17 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import '../styles/components/Header.styl'; +import AppContext from '../context/AppContext'; -const Header = () => { +const Header = ({ children }) => { + const data = useContext(AppContext); return ( - <> -
-
- +
+ profile photo +

{data.name}

+

{data.profession}

+ {children} +
) }; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index 9ddaefc1..0bb7497e 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -1,14 +1,28 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; +import '../styles/components/Interest.styl'; const Interest = () => { + const data = useContext(AppContext); + const interests = data.interest ? data.interest : [0,1,2]; return ( - <> -
-
-
-
- +
+
+

Interest

+
    + { + interests.map((interest,i) => { + return ( +
  • +

    {interest}

    +
    • + ) + }) + } +
+
+
) }; -export default Interest; \ No newline at end of file +export default Interest; diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index f98e5a93..4b429add 100644 --- a/src/components/Languages.jsx +++ b/src/components/Languages.jsx @@ -1,13 +1,28 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; +import '../styles/components/Languages.styl'; const Languages = () => { + const data = useContext(AppContext); + const languages = data.languages ? data.languages : [0,1,2]; return ( - <> -
+
+
+

Languages

+
    + { + languages.map((language,i) => { + return ( +
  • +

    {language.name}

    +

    {language.percentage}

    +
    • + ) + }) + } +
-
-
- +
) }; diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index 21995a78..5c35c6f0 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -1,14 +1,16 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; const Profile = () => { + const data = useContext(AppContext); return ( - <> -
+
+
+

Profile

+

{data.Profile}

-
-
- +
) }; -export default Profile; \ No newline at end of file +export default Profile; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index accd3ae6..8c6b0e42 100644 --- a/src/components/Skills.jsx +++ b/src/components/Skills.jsx @@ -1,14 +1,29 @@ -import React from 'react'; +import React, { useContext } from 'react'; +import AppContext from '../context/AppContext'; +import '../styles/components/Skills.styl'; const Skills = () => { + const data = useContext(AppContext); + const skills = data.skills ? data.skills : [0,1,2]; return ( - <> -
+
+
+

Skills

+
    + { + skills.map((skill,i) => { + return ( +
  • +

    {skill.name}

    +

    {skill.percentage}

    +
    • + ) + }) + } +
-
-
- +
) }; -export default Skills; \ No newline at end of file +export default Skills; From 90d08a368414dbcf788695161467046abaf39871 Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:16:22 -0400 Subject: [PATCH 03/10] [ADD] Create project styles --- src/styles/components/About.styl | 12 ++++++++++++ src/styles/components/Academic.styl | 19 +++++++++++++++++++ src/styles/components/Experience.styl | 18 ++++++++++++++++++ src/styles/components/Header.styl | 26 ++++++++++++++++++++++++++ src/styles/components/Interest.styl | 16 ++++++++++++++++ src/styles/components/Languages.styl | 16 ++++++++++++++++ src/styles/components/Skills.styl | 15 +++++++++++++++ 7 files changed, 122 insertions(+) create mode 100644 src/styles/components/About.styl create mode 100644 src/styles/components/Academic.styl create mode 100644 src/styles/components/Experience.styl create mode 100644 src/styles/components/Header.styl create mode 100644 src/styles/components/Interest.styl create mode 100644 src/styles/components/Languages.styl create mode 100644 src/styles/components/Skills.styl diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl new file mode 100644 index 00000000..c50aab3b --- /dev/null +++ b/src/styles/components/About.styl @@ -0,0 +1,12 @@ +.rrss + grid-column-start: 2 + grid-row-start: 1 + margin-top: 150px + +.rrss > .Social-links > li + display: inline-block + margin-left: 10px + +.Contact + color: white + diff --git a/src/styles/components/Academic.styl b/src/styles/components/Academic.styl new file mode 100644 index 00000000..acbb39a3 --- /dev/null +++ b/src/styles/components/Academic.styl @@ -0,0 +1,19 @@ +.Academic-content > ul + display: grid + grid-template-columns: 1fr 1fr; + grid-gap: 50px + +.Academic + background-color: #004d90d9 + border-radius: 30px + +.Academic-content + margin: 20px 20px 20px 20px + padding: 50px 50px 50px 50px + +.Academic-item > p + color: white + font-size: 1.3 em + + + diff --git a/src/styles/components/Experience.styl b/src/styles/components/Experience.styl new file mode 100644 index 00000000..42b32510 --- /dev/null +++ b/src/styles/components/Experience.styl @@ -0,0 +1,18 @@ +.Experience-content > ul + display: grid + grid-template-columns: 1fr 1fr; + grid-gap: 70px + +.Experience + background-color: #004d90d9 + border-radius: 30px + +.Experience-content + margin: 20px 20px 20px 20px + padding: 50px 50px 50px 50px + +.Experience-item > p + color: white + font-size: 1.3 em + + diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl new file mode 100644 index 00000000..d6bd6aef --- /dev/null +++ b/src/styles/components/Header.styl @@ -0,0 +1,26 @@ +header + display: grid + grid-template-columns: 1fr 1fr 1fr + grid-auto-flow: dense + background-color: #004d90d9 + border-radius: 30px + +header > img + grid-row-start: 1 + justify-items: center + align-items: center + border-radius: 50% + margin: 50px 50px 50px 50px + +.Header-title + grid-column-start: 2 + grid-row-start: 1 + margin-top: 50px + +.Header-job-title + grid-column-start: 2 + grid-row-start: 1 + margin-top: 100px + +.Header > h1,h2 + color: white diff --git a/src/styles/components/Interest.styl b/src/styles/components/Interest.styl new file mode 100644 index 00000000..bc4d5531 --- /dev/null +++ b/src/styles/components/Interest.styl @@ -0,0 +1,16 @@ +.Interest-content > ul + display: grid + grid-template-columns: 1fr 1fr 1fr 1fr + +.Interest + background-color: #004d90d9 + border-radius: 30px + +.Interest-content + margin: 20px 20px 20px 20px + padding: 50px 50px 50px 50px + +.Interest-item > p + color: white + font-size: 1.3 em + diff --git a/src/styles/components/Languages.styl b/src/styles/components/Languages.styl new file mode 100644 index 00000000..7a799dfa --- /dev/null +++ b/src/styles/components/Languages.styl @@ -0,0 +1,16 @@ +.Languages-content > ul + display: grid + grid-template-columns: 1fr 1fr 1fr 1fr + +.Languages + background-color: #004d90d9 + border-radius: 30px + +.Languages-content + margin: 20px 20px 20px 20px + padding: 50px 50px 50px 50px + +.Languages-item > p + color: white + font-size: 1.3 em + diff --git a/src/styles/components/Skills.styl b/src/styles/components/Skills.styl new file mode 100644 index 00000000..13acfb79 --- /dev/null +++ b/src/styles/components/Skills.styl @@ -0,0 +1,15 @@ +.Skills-content > ul + display: grid + grid-template-columns: 1fr 1fr 1fr 1fr + +.Skills + background-color: #004d90d9 + border-radius: 30px + +.Skills-content + margin: 20px 20px 20px 20px + padding: 50px 50px 50px 50px + +.Skills-item > p + color: white + font-size: 1.3 em From 72da04aa7e087f5ef17fd3c76303db6c335a90d9 Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:17:38 -0400 Subject: [PATCH 04/10] [EDIT] App component --- src/containers/App.jsx | 35 +++++++++++++++++++++------------- src/styles/components/App.styl | 26 ++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..95291bbf 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -8,21 +8,30 @@ import Academic from '../components/Academic'; import Skills from '../components/Skills'; import Interest from '../components/Interest'; import Languages from '../components/Languages'; +import AppContext from '../context/AppContext'; +import useDataHook from '../hooks/useDataHook'; const App = () => { - return ( - <> -
- -
- - - - - - - - ) + const cvData = useDataHook(); + const render = () => ( +
+ +
+ +
+ + +
+ + + + +
+ +
+ ); + + return <>{render()} }; export default App; diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..b44b53f2 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,26 @@ body - background-color blue \ No newline at end of file + background-color white + margin 50px 200px 50px 200px + +ul + list-style-type: none; + margin: 0 + padding: 0 + +.grid + display: grid + grid-template-columns: 1fr 1fr + grid-gap: 20px + +.Profile + background-color: #004d90d9 + border-radius: 30px + +.Profile > .Profile-content + padding: 50px 50px 50px 50px + margin: 20px 20px 20px 20px + +.Profile-content > p + color: white + font-size: 1.3 em + From d3dc2392fe8e8de04dbfc915d71baa3b9e2573fa Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:19:13 -0400 Subject: [PATCH 05/10] [ADD] Create function getData.js --- src/utils/getData.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..3d05e2b8 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,8 @@ +const getData = (resource) => { + return fetch(resource) + .then((res) => res.json()) + .then((data) => data) + .catch((err) => console.error(err)); +}; + +export default getData; From 465ed4937e9370b3cda94c3c118056cfa5fe5428 Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:21:20 -0400 Subject: [PATCH 06/10] [ADD] Integrate API --- src/context/AppContext.js | 5 +++++ src/hooks/useDataHook.jsx | 18 ++++++++++++++++++ src/index.js | 5 +++-- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 src/context/AppContext.js create mode 100644 src/hooks/useDataHook.jsx diff --git a/src/context/AppContext.js b/src/context/AppContext.js new file mode 100644 index 00000000..2e52c76c --- /dev/null +++ b/src/context/AppContext.js @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const AppContext = createContext({}); + +export default AppContext; diff --git a/src/hooks/useDataHook.jsx b/src/hooks/useDataHook.jsx new file mode 100644 index 00000000..b9ed390b --- /dev/null +++ b/src/hooks/useDataHook.jsx @@ -0,0 +1,18 @@ +import { useEffect, useState } from 'react'; +import getData from '../utils/getData'; + +const API = "https://raw.githubusercontent.com/sass3r/react-eth-challenge/main/data.json"; + +const useDataHook = () => { + const [cvData, setCvData] = useState([]); + + useEffect(() => { + getData(API) + .then((res) => { + setCvData(res.data); + }); + },[setCvData]); + return cvData +} + +export default useDataHook; diff --git a/src/index.js b/src/index.js index 9077e5ff..14f63c3f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import * as ReactDOM from 'react-dom/client'; import App from './containers/App'; -ReactDOM.render(, document.getElementById('app')); +const root = ReactDOM.createRoot(document.getElementById('app')); +root.render(); From e64efcb12838ca1fff2b68d805e2e43ad767b0ae Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Fri, 12 Aug 2022 00:22:26 -0400 Subject: [PATCH 07/10] [EDIT] Customize API --- data.json | 76 +++++++++++++++++++++++++++---------------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/data.json b/data.json index 94dbaad5..7057bdcf 100644 --- a/data.json +++ b/data.json @@ -1,57 +1,57 @@ { "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": "Rafael Ramirez", + "profession": "FullStack Developer", + "address": "Cochabamba, Bolivia", + "email": "rafael@cryptostore.com.bo", + "website": "https://cryptostore.com.bo", + "phone": "+591 75992745", + "avatar": "https://pbs.twimg.com/profile_images/1549482647449210880/8KfHw-oh_400x400.jpg", + "Profile": "FullStack Developer with +7 years of experience developing web applications using JavaScript, Python, PHP, Java, Angular, Nodejs, Ruby on Rails, and Flutter.", "certificate": [ { - "date": "Jan 2021", - "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ", + "date": "Feb 2022", + "description": "Learn the essentials of Ruby, the ideal language to start programming that many startups use as the basis of their platforms.", "institution": "Platzi", - "name": "FrontEnd Developer" + "name": "Ruby Course" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", + "date": "Mar 2022", + "description": "Learn React.js, the most popular JavaScript library for building interactive web applications!", "institution": "Platzi", - "name": "Backend Developer" + "name": "Introduction to React.js Course" } ], "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": "Bachelor of Computer Engineering", + "description": "Computer Engineering involves the design and development of systems based on computers and complex digital logic devices. These systems find use in such diverse tasks as computation, communication, entertainment, information processing, artificial intelligence, and control.", + "endDate": "Jul 2022", + "institution": "UMSS", + "startDate": "Feb 2011" }, { - "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": "FullStack Blockchain Developer", + "description": "Open program supported by the Ethereum Foundation and Road to Devcon.", + "endDate": "Present", + "institution": "Platzi", + "startDate": "Jun 2022" } ], "experience": [ { - "company": "PugStar", + "company": "Sawers Technology", "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": "Development and maintenance of Ecommerce systems. Implementation of payment methods.", + "jobTitle": "FullStack Developer", + "startDate": "Jan 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": "Freelancer", + "endDate": "Jan 2021", + "jobDescription": "Fullstack development of general purpose information systems for local companies: Sales and inventory systems.", + "jobTitle": "Ruby on Rails Full Stack Web Development", + "startDate": "may 2016" } ], "skills": [ @@ -91,20 +91,20 @@ "social": [ { "name": "facebook", - "url": "https://facebook.com/" + "url": "https://facebook.com/rrafalinux" }, { "name": "twitter", - "url": "https://twitter.com/" + "url": "https://twitter.com/sass3r" }, { "name": "github", - "url": "https://github.com/" + "url": "https://github.com/sass3r" }, { "name": "linkedin", - "url": "https://www.linkedin.com/" + "url": "https://www.linkedin.com/in/rudyrafaelrc" } ] } -} \ No newline at end of file +} From 8ae5ac894ba2c8e08d69b27df73075b781fd0d3f Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Sat, 13 Aug 2022 00:02:04 -0400 Subject: [PATCH 08/10] [EDIT] Pull request template and documentation --- PULL_REQUEST_TEMPLATE.md | 101 +++++++++++++++++++++++++++++++++++---- 1 file changed, 91 insertions(+), 10 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 67105c53..d34fcffe 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,16 +1,97 @@ ## DESCRIPTION -Solución al reto: +Solución al reto: React Eth Challenge -Nombre: -Usuario Platzi: +Deploy: https://sass3r.github.io/react-eth-challenge + +Nombre: Rafael Ramirez + +Usuario Platzi: rafael116 + +Correo Electronico: rafael@cryptostore.com.bo ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema -- [ ] Sexto Problema -- [ ] Septimo Problema +- [ :heavy_check_mark: ] Primer problema +- [ :heavy_check_mark: ] Segundo problema +- [ :heavy_check_mark: ] Tercer problema +- [ :heavy_check_mark: ] Cuarto Problema +- [ :heavy_check_mark: ] Quinto Problema +- [ :heavy_check_mark: ] Sexto Problema +- [ :heavy_check_mark: ] Septimo Problema + +## Documentacion: + +### Tests +En cada test se reemplazo la llamada a la funcion mount por shallow +de la biblioteca de pruebas 'enzyme' + +~~~~javascript +import { shallow } from 'enzyme';¬ +~~~~ + +### Componentes + +App.- + +El componente App es el principal y esta estructurado de la siguiente manera: + +~~~~javascript +
+ +
+ +
+ + +
+ + + + +
+ +
+~~~~ + +Header: + +El componente header contiene informacion del nombre, profesion y foto. + +About: + +El componente about contiene informacion de los datos de contactos y redes sociales. + +Profile: + +El componente profile contiene informacion sobre la prensetacion del perfil. + +Experience: + +El componente Experience contiene informacion de la experiencia de trabajo. + +Academic: + +El componente Academic contiene informacion de la formacion academica. + +Skills: + +El componente Skills contiene informacion de las habilidades tecnicas. + +Interest: + +El componente Interest contiene informacion de los intereses. + +Languages: + +El componente Languages contiene informacion de los idiomas. + +## Api + +Se implemento la funcion getData.js que por medio de la funcion fetch se obtienen los datos necesarios. + +Mediante AppContext y el hook useDataHook se provee la informacion requerida a todos los componentes. + +## Estilos + +Se utilizo stylus y css grid para los estilos de los componentes. From 3e620d3e1e27287cd0c5cd93a3471328dced728c Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Sat, 13 Aug 2022 00:04:31 -0400 Subject: [PATCH 09/10] [ADD] React icons --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index d56de193..0a822997 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "jest-fetch-mock": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", + "react-icons": "^4.4.0", "webpack": "5.73.0", "webpack-cli": "4.10.0", "webpack-dev-server": "4.9.3" @@ -46,6 +47,9 @@ "eslint-plugin-react": "7.30.1", "husky": "8.0.1", "jest": "28.1.2", + "jest-environment-jsdom": "28.1.3", + "jsdom": "20.0.0", + "jsdom-global": "3.0.2", "json-server": "^0.17.0", "mini-css-extract-plugin": "2.6.1", "prettier": "2.7.1", From ff48110f3ac85908cca16b492ed08cf48bf826d7 Mon Sep 17 00:00:00 2001 From: Rafael Ramirez Date: Sat, 13 Aug 2022 00:21:27 -0400 Subject: [PATCH 10/10] [ADD] Deploy github pages --- package.json | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0a822997..a6edc65c 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,9 @@ "server": "json-server data.json", "format": "prettier --write '{*.js,src/**/*.{js,jsx}}'", "lint": "eslint src/ --fix", - "test": "jest" + "test": "jest", + "predeploy": "npm run build", + "deploy": "gh-pages -d dist" }, "keywords": [ "react", @@ -45,6 +47,7 @@ "eslint-plugin-jsx-a11y": "6.6.0", "eslint-plugin-prettier": "3.1.2", "eslint-plugin-react": "7.30.1", + "gh-pages": "^4.0.0", "husky": "8.0.1", "jest": "28.1.2", "jest-environment-jsdom": "28.1.3", @@ -65,5 +68,7 @@ "setupFilesAfterEnv": [ "/src/__test__/setupTest.js" ] - } + }, + "homepage": "https://sass3r.github.io/react-eth-challenge" + }