Reto 01 React Andres Alba

package.json

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

src/components/About.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function About() {
+  return (
+    <div className='About-title'>
+      <div className='About-item'>Quien es</div>
+      <div className='About-item'>Que hace</div>
+      <div className='About-item'>Que hara</div>
+    </div>
+  );
+}
+
+export default About;

src/components/Academic.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Academic() {
+  return (
+    <div className='Academic-title'>
+      <div className='Academic-item1'>Academic</div>
+      <div className='Academic-item'>PLATZI 2019</div>
+      <div className='Academic-item'>SENA 2013</div>
+      <div className='Academic-item'>U Sabana 2007</div>
+    </div>
+  );
+}
+
+export default Academic;

src/components/Experience.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Experience() {
+  return (
+    <div className='Experience-title'>
+      <div className='Experience-item1'>Experience</div>
+      <div className='Experience-item'>Colombian Army 2016</div>
+      <div className='Experience-item'>Eleven Producciones 2015</div>
+      <div className='Experience-item'>Press Start 2014</div>
+      <div className='Experience-item'>GGwoot 2013</div>
+    </div>
+  );
+}
+
+export default Experience;

src/components/Header.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../styles/components/App.styl';
+
+function Header() {
+  return (
+    <div className='Header-title'>
+      <div className='item1a'><img id='imagen' src='../public/img/paspi4.png' alt='' /></div>
+      <div className='item2a'>Andres Alba</div>
+      <div className='item3a'>Programmer</div>
+      <div className='item4a'>Phone: 3204897945</div>
+      <div className='item5a'>Email: tensinkusum@hotmail.com</div>
+      <div className='item6a'>Site: botnator.com</div>
+      <div className='item7a'>Direccion cll 00 00-00</div>
+    </div>
+  );
+}
+
+export default Header;

src/components/Interest.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Interest() {
+  return (
+    <div className='Interest-title'>
+      <div className='Interest-item1'>Interests</div>
+      <div className='Interest-item'>Video games</div>
+      <div className='Interest-item'>Programming</div>
+      <div className='Interest-item'>Psychology</div>
+      <div className='Interest-item'>Artificial intelligence</div>
+    </div>
+  );
+}
+
+export default Interest;

src/components/Languages.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Languages() {
+  return (
+    <div className='Languages-title'>
+      <div className='Languages-item1'>Languages</div>
+      <div className='Languages-item'>Spanish</div>
+      <div className='Languages-item'>English</div>
+      <div className='Languages-item'>Potuguese</div>
+    </div>
+  );
+}
+
+export default Languages;

src/components/Profile.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Profile() {
+  return (
+    <div className='Profile-title'>
+      <div className='Profile-sub'>Profile</div>
+      <div className='Profile-desc'>Videogames and fullstack programmer with an amazing portfolio, people skills, and nominations for excelent work</div>
+    </div>
+  );
+}
+
+export default Profile;

src/components/Skills.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Skills() {
+  return (
+    <div className='Skills-title'>
+      <div className='Skills-item1'>Skills</div>
+      <div className='Skills-item'>Computer programmer</div>
+      <div className='Skills-item'>Psychologist</div>
+      <div className='Skills-item'>English speaker</div>
+    </div>
+  );
+}
+
+export default Skills;

src/containers/App.jsx

@@ -11,18 +11,32 @@ import Languages from '../components/Languages';
 
 const App = () => {
   return (
-    <>
-      <Header>
-        <About />
-      </Header>
-      <Profile />
-      <Experience />
-      <Academic />
-      <Skills />
-      <Interest />
-      <Languages />
-    </>
-  )
+    <div className='main-grid'>
+      <div className='item1'>
+        <Header>
+          <About />
+        </Header>
+      </div>
+      <div className='item2'>
+        <Profile />
+      </div>
+      <div className='item3'>
+        <Experience />
+      </div>
+      <div className='item4'>
+        <Academic />
+      </div>
+      <div className='item5'>
+        <Skills />
+      </div>
+      <div className='item6'>
+        <Interest />
+      </div>
+      <div className='item7'>
+        <Languages />
+      </div>
+    </div>
+  );
 };
 
 export default App;

src/styles/components/App.styl

@@ -1,2 +1,165 @@
-body
-  background-color blue
+#imagen{
+	width: 100px;
+	height: 100px;
+}
+//---------------------------------------------------------------------------------------------------------
+.main-grid{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 125px 125px 125px 125px 125px 125px 125px;
+}
+.item1{
+  grid-column: 1 /3;
+  background: rgb(224,244,255);
+  color: grey;
+  border: 4px solid white;
+}
+.item2{
+  grid-column: 1 /3;
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+.item3{
+  grid-column: 1 /3;
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+.item4{
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+.item5{
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+.item6{
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+.item7{
+  background: rgb(189,241,212);
+  color: grey;
+  border: 4px solid white;
+}
+//---------------------------------------------------------------------------------------------------------
+.Header-title{
+  display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 26px 26px 26px 27px;
+  padding: 10px 10px 10px 10px; 
+}
+.item1a{
+  grid-row: 1 / 5;
+  padding-left: 80px; 
+}
+.item2a{
+  grid-column: 2 / 5;
+  font-size: 150%;
+}
+.item3a{
+  grid-column: 2 / 5;
+}
+.item4a{
+  grid-column: 2 / 3;
+}
+.item5a{
+  grid-column: 3 / 4;
+}
+.item6a{
+  grid-column: 4 / 5;
+}
+.item7a{
+  grid-column: 2 / 5;
+}
+//---------------------------------------------------------------------------------------------------------
+.Profile-title{
+  display: grid;
+  grid-template-rows: 50px 50px;
+  padding: 10px 10px 10px 10px;
+}
+.Profile-sub{
+  font-size: 150%;
+}
+.Profile-desc{
+}
+//---------------------------------------------------------------------------------------------------------
+.Experience-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.Experience-item1{
+  grid-column: 1 / 4;
+  font-size: 150%;
+}
+.Experience-item{
+}
+//---------------------------------------------------------------------------------------------------------
+.About-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.About-item{
+}
+//---------------------------------------------------------------------------------------------------------
+.Languages-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.Languages-item1{
+  grid-column: 1 / 4;
+  font-size: 150%;
+}
+.Languages-item{
+}
+//---------------------------------------------------------------------------------------------------------
+.Skills-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.Skills-item1{
+  grid-column: 1 / 4;
+  font-size: 150%;
+}
+.Skills-item{
+}
+//---------------------------------------------------------------------------------------------------------
+.Academic-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.Academic-item1{
+  grid-column: 1 / 4;
+  font-size: 150%;
+}
+.Academic-item{
+}
+//---------------------------------------------------------------------------------------------------------
+.Interest-title{
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-template-rows: 35px 35px 35px;  
+  padding: 10px 10px 10px 10px; 
+}
+.Interest-item1{
+  grid-column: 1 / 4;
+  font-size: 150%;
+}
+.Interest-item{
+}
+
+//---------------------------------------------------------------------------------------------------------

src/utils/getData.js

@@ -0,0 +1,13 @@
+
+function getData() {
+  return (
+    fetch('https://google.com')
+      .then(res => res.json())
+      .then((res) => {
+        console.log(res);
+      })
+      .catch(err => console.log(err))
+  );
+}
+
+export default getData;