Paula Daniela Velosa Romero Frontend challenge

.gitignore

@@ -102,3 +102,7 @@ dist
 
 # TernJS port file
 .tern-port
+
+#images
+src/img
+.img

README.md

@@ -1,54 +1,101 @@
-# frontend
+# React Curriculum Vitae 
+This is a challenge for Platzi Master application. The goal: Make your CV in React.
+This was the final result 
+<details>
+  <summary>Screenshot of CV</summary>
+  <img src="./cv-react.png">
+</details>
 
-## React Curriculum vitae
+**Tools:** 
+ - React JS  
+ - Stylus
 
-Crear tu curriculum vitae en React, analiza la estructura propuesta e inspirate para mostrar tu información.
+## stages of the Challenge
 
-![react-cv](https://github.com/PlatziMaster/frontend/blob/main/screenshot.png?raw=true)
+the challenge here was broken down into the following:
+1.  [Create components](#creating-components)
+2.  [Add styles](##Adding-styles)
+4.  [Create function getData.js](#creating-getData.js)
+5.  [Integrate  API](#Integrate-API)
+6.  [Personalize API](#Personalize-API)
+7.  [Document the project](#Documenting)
 
-### Retos
-1. [Crear los componentes del proyecto](https://github.com/platzimaster/frontend/issues/1)
-2. [Añadir estilos](https://github.com/platzimaster/frontend/issues/2)
-3. [Crear función getData.js](https://github.com/platzimaster/frontend/issues/3)
-4. [Integrar API](https://github.com/platzimaster/frontend/issues/4)
-5. [Personalizar API](https://github.com/platzimaster/frontend/issues/5)
-6. [Documentar](https://github.com/platzimaster/frontend/issues/6)
+### Installation
 
-### Instalación
 ```
+
 npm install
+
 ```
 
-### Ejecución
+
+
+### Execution
+
 ```
+
 npm run start
+
 ```
 
+
+
 ### Server
+
 ```
+
 npm run server
-```
 
-### Compilar
-```
-npm run build
 ```
 
-### Pruebas Unitarias
-```
-npm run test
-```
+##  Creating Components 
+  This  template was given as guidance
+  <details>
+  <summary>CV guidance</summary>
+  <img src="./screenshot.png">
+</details>
 
-### ESlint
-```
-npm run lint
-```
+I made a low-fidelity wireframe inspired by it. 
+
+ The first challenge was a bit confusing to me due to About component location. I thought it was the child of the Header, so I decided to move the About section inside the Header component. This way it will be easier to design. 
+
+## Adding styles
+
+Because I didn't have the complete info yet,  I make just a few changes at First, mainly creating a stylus file for each component. 
+
+After adding my info (5th step) I started adding better styles to my components. I wanted a retro- groovy style, so I went for a palette with nude and beige as my main colors and red and green for the animation (accent) colors. I created a Palette.styl file to be coherent through all my components. 
+- tip: As some elements are repeated continuously,  (in my case, there were for example bullet points and titles). I styled them in the main App.styl file, so I can use them in every component.
+
+Furthermore, I added some animations to make the links and main objects stand out. I wasn't comfortable adding percentages of master to my skills, mainly because since I don't know what I don't know, evaluating the level of mastery was just so difficult for me. That's why I decided to set to 0 the opacity of  the percentage at 0 for then to be revealed while hovering each skill. 
+
+
+## Creating  getData.js
+
+This was by far the most complicated part of the process. Just because I didn't know how to use the server, I wasted 4 hours just to read the documentation of the challenge and type "npm run server" to have a clue on how to do this part 
+- (read the documentation).
+
+First, I added this function to my Header.js file, but there I just wasn't able to use async, await method. So I used .then and later, I transformed it into an async function in getData.js
+
+## Integrate API
+
+As I told you, in the components files I was not able to use Async, Await. so, i just created a fetch data function with .then method. It called getData.js to set  the state of each component with this data.
+
+ - I was having trouble in here, but I found that initializing the data I was going to use solved the problem.
+
+	    state = {
+
+		data: {
+
+			'languages': {
+				 'name':  '',
+				'percentage':  '' }],
+		},
+		}
 
-### Enviar solución de reto
-Debes de crear un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia tu repositorio.
+## Personalize API
+I created another json file: db.json and later upload package.json 
 
-### Contribuir
-Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: [frontend](https://github.com/platzimaster/frontend/)
+    "server": "json-server --watch db.json"
 
-### Licencia
-frontend se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT).
+## Documenting 
+thank you!  <3

db.json

@@ -0,0 +1,132 @@
+{
+  "data": {
+    "name": "Paula Daniela Velosa Romero",
+    "profession": "FrontEnd Developer",
+    "address": "Bogotá, Colombia.",
+    "email": "[email protected]",
+    "website": "https://pvelosa.netlify.com",
+    "phone": "(+57)3224368742",
+    "avatar": "https://lh3.googleusercontent.com/_OIdKT2VvjH-Ag3sR_3092OtoLpwGAu0AWaKJ9M5hLT4clk1zgWsGrgwBTD4N-XWRi5hm2UNUHoOv23W-BOp2fI5nByn8ihV2hZI1Mt77ZhINFp0rTqoiGv7mhuRSu2b_KAHxpSa8Nk=w2400",
+    "Profile": "I'm an upcoming engineer, passionate about data science, web development, and illustration. My dream is to tackle current problems using a variety of perspectives while growing within the tech/artistic field.",
+    "certificate": [
+      {
+        "date": "2021",
+        "description": " Methodologies and stages of digital product development",
+        "institution": "Platzi",
+        "name": "Metodologías para Diseñar un Producto Digital"
+      },
+      {
+        "date": "2021",
+        "description": "How to code JavaScript, Ecmascript",
+        "institution": "Platzi",
+        "name": "Road to Code 3.0"
+      }
+    ],
+    "Academic": [
+      {
+        "degree": "Systems engineering",
+        "description": " High level and low level programming",
+        "endDate": "Present",
+        "institution": "Universidad Nacional de Colombia",
+        "startDate": "2020"
+      },
+      {
+        "degree": "High-school",
+        "description": "",
+        "endDate": "2018",
+        "institution": "Instituto Tomás de Iriarte",
+        "startDate": ""
+      }
+    ],
+    "experience": [
+      {
+        "company": "Personal Project",
+        "endDate": "Present",
+        "jobDescription": "Figma & Photoshop.",
+        "jobTitle": "Ecommerce website design",
+        "startDate": "2021"
+      },
+      {
+        "company": "Personal Project",
+        "endDate": "-",
+        "jobDescription": "React js.",
+        "jobTitle": "Platzi conf page",
+        "startDate": "2020"
+      }
+    ],
+    "skills": [
+      {
+        "name": "HTML5",
+        "percentage": "85%"
+      },
+      {
+        "name": "CSS",
+        "percentage": "75%"
+      },
+
+      {
+        "name": "React",
+        "percentage": "70%"
+      },
+      {
+        "name": "Photoshop",
+        "percentage": "70%"
+      },
+      {
+        "name": "Procreate",
+        "percentage": "80%"
+      },
+      {
+        "name": "Python",
+        "percentage": "80%"
+      }
+      ,
+      {
+        "name": "Illustrator",
+        "percentage": "70%"
+      },
+      {
+        "name": "Figma",
+        "percentage": "80%"
+      }
+    ],
+    "interest": [
+      "Art",
+      "Frontend",
+      "Design",
+      "Data analysis"
+    ],
+    "languages": [
+      {
+        "name": "French ",
+        "percentage": "80%"
+      },
+      {
+        "name": "English ",
+        "percentage": "90%"
+      }
+    ],
+    "social": [
+      {
+        "name": "Behance.net/paulavelosa",
+        "url": "https://www.behance.net/paulavelosa",
+        "icon": "https://cdn-icons-png.flaticon.com/512/48/48975.png"
+      },
+      {
+        "name": "twitter.com/pvelosar",
+        "url": "https://twitter.com/pvelosar",
+        "icon": "https://image.similarpng.com/very-thumbnail/2020/06/Black-icon-Twitter-logo-transparent-PNG.png"
+      },
+      {
+        "name": "github.com/pvelosa",
+        "url": "https://github.com/pvelosa",
+        "icon": "https://cdn-icons-png.flaticon.com/512/25/25231.png"
+      },
+      {
+        "name": "linkedin.com",
+        "url": "https://www.linkedin.com/in/paula-daniela-velosa-romero-4392821ab/",
+        "icon": "https://cdn-icons-png.flaticon.com/512/61/61109.png"
+      }
+    ]
+  }
+}