PlatziMaster · josealbertocortes · Mar 4, 2023 · Mar 4, 2023 · Mar 4, 2023
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# frontend
+# frontend realizado por jose alberto cortes ayala 
 
 ## React Curriculum vitae
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="es">
   <head>
     <meta charset="utf-8" />
+     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <title>React Base</title>
   </head>
   <body>

diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <>
+      <div className='col-3'>
+        <img className='img-profile ' src='https://media.licdn.com/dms/image/C4E03AQFkccad2NlFeA/profile-displayphoto-shrink_200_200/0/1630707728621?e=1683158400&v=beta&t=Fjsxcoqdn5INIVNUR6zLre2ErbEcpeHxF-USeLdnVso' alt='profile' />
+      </div>
+      <div className='col-9'>
+        <h2 className='Header-title About-title'>Jose Alberto Cortes Ayala </h2>
+        <p className='Header-job-title'>Desarrollador javascript/python</p>
+        <div>
+          <span className='Header-phone About-item'>55-41-17-38-26</span>
+          {' '}
+          <span className='Header-email About-item'>[email protected]</span>
+          {' '}
+          <span className='Header-website About-item'>N/A</span>
+        </div>
+        <div className='Header-adress'>
+          Ciudad de México
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default About;
diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Academic = () => {
+  return (
+    <div className='col-6 '>
+      <h3 className='Academic-title'>Educación</h3>
+      <p className='Academic-item'>Bootcamp desarrollo web  </p>
+      <p className='Academic-item'>Maestria en ingenieria de procesos</p>
+      <p className='Academic-item'>Licenciatura en ingenieria quimica </p>
+    </div>
+
+  );
+};
+
+export default Academic;
diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Experience = () => {
+  return (
+    <div className='col-6'>
+      <h3 className='Experience-title'>Experience</h3>
+      <p className='Experience-item col-6'>Desarrollador front-end react-litelement</p>
+      <p className='Experience-item col-6'>Desarrollador fullstack react/python</p>
+      <p className='Experience-item col-6'>Desarrollador fullstack python</p>
+    </div>
+  );
+};
+
+export default Experience;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header = ({ children }) => {
+  return (
+    <div className='row Header-title mt-2'>
+      {children}
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Interest = () => {
+  return (
+    <div className='w-50'>
+      <h3 className='Interest-title'>Interest</h3>
+      <p className='Interest-item'>WEB3.0</p>
+      <p className='Interest-item'>Arquitectura de sowtware</p>
+      <p className='Interest-item'>Cloud</p>
+
+    </div>
+  );
+};
+
+export default Interest;
diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Languages = () => {
+  return (
+    <div className='col-6'>
+      <h3 className='Languages-title'>Languages</h3>
+      <p className='Languages-item'>Español</p>
+      <p className='Languages-item'>Ingles</p>
+      <p className='Languages-item'>Japones</p>
+
+    </div>
+  );
+};
+
+export default Languages;
diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Profile = () => {
+  return (
+    <div className=''>
+      <h3 className='Profile-title'>Profile</h3>
+      <p className='Profile-desc'>Desarrollador en busca de nuevos retos para crecer profesionalmente y personal </p>
+    </div>
+  );
+};
+
+export default Profile;
diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Skills = () => {
+  return (
+    <div className='col-6'>
+      <h3 className='Skills-title'>Skills</h3>
+      <p className='Skills-item'>javascript - React</p>
+      <p className='Skills-item'>python - django/fastApi</p>
+      <p className='Skills-item'>java</p>
+      <p className='Skills-item'>Docker</p>
+      <p className='Skills-item'>SQL/NOSQL</p>
+      <p className='Skills-item'>AWS</p>
+    </div>
+  );
+};
+
+export default Skills;
diff --git a/src/containers/App.jsx b/src/containers/App.jsx
@@ -11,18 +11,25 @@ import Languages from '../components/Languages';
 
 const App = () => {
   return (
-    <>
+    <div className='container mt-4'>
       <Header>
         <About />
       </Header>
       <Profile />
       <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
-    </>
-  )
+      <div className='row'>
+        <Academic />
+        <Skills />
+
+      </div>
+      <div className='row'>
+        <Interest />
+        <Languages />
+
+      </div>
+
+    </div>
+  );
 };
 
 export default App;
diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl
@@ -1,2 +1,6 @@
 body
-  background-color blue
+  background-color #e2e2e2
+
+.img-profile
+  heigth 100px
+  border-radius 50%
diff --git a/src/utils/getData.js b/src/utils/getData.js
@@ -0,0 +1,7 @@
+const getData = async (url) => {
+  const res = await fetch(url);
+  const data = await res.json();
+  return data;
+};
+
+export default getData;