Adding Platzi Master Frontend by Irving Juárez

.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
   ]
 }

.eslintrc

@@ -2,7 +2,7 @@
   "env": {
     "browser": true,
     "es6": true,
-    "node": true,
+    "node": true
   },
   "extends": [
     "airbnb"

README.md

@@ -6,6 +6,15 @@ Crear tu curriculum vitae en React, analiza la estructura propuesta e inspirate
 
 ![react-cv](https://github.com/PlatziMaster/frontend/blob/main/screenshot.png?raw=true)
 
+## Proposed Design
+
+### Mobile
+![Mobile simple mockup](./design/images/MobileMockup.png)
+![Mobile mouckup with menu](./design/images/MobileMockup.png)
+
+### Desktop
+![Desktop design](./design/images/Desktop.png)
+
 ### 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)
@@ -14,27 +23,67 @@ Crear tu curriculum vitae en React, analiza la estructura propuesta e inspirate
 5. [Personalizar API](https://github.com/platzimaster/frontend/issues/5)
 6. [Documentar](https://github.com/platzimaster/frontend/issues/6)
 
-### Instalación
+## Understanding the project
+The project is based in components and those components build pages. All the pages include the Header and ProfileIntro components by default.
+The router is in the App component and actually, it is the router (App) the one that call the 'fake API'. I did it so because for me it was more comfortable having the API call along with the pages that will use that data. I know that's not the case for all the projects, but in this project I think that was the best option
+
+### Why I didn't use hooks?
+I am starting with React and before to use hook, I would like to master classes. At least I understand how classes work and I would like to tackle some problems with these classes before knowing what are the advantages to use hooks in my projects.
+
+### Issues I could not solve
+There is something strange happening in the project in relation with the 'key' prop that all the lists need to have, because there is a warning telling me that in my component Home there is no the 'key' prop, but I already added to all lists that prop. It is something I can't help with, I don't know why it keeps showing up
+
+As well I could't run the `test` script. This due the incompatibility with the React version. I tried with an Unofficial enzyme adapter for React v-17 but event thought, I could't figure out what I was doing wrong, I did all according to the documentation
+
+### Quick start
+We need to run two commands to start working. I recommend to open two consoles to run the 2 processes simultaneously
+```
+npm run server
+
+npm run start
+```
+
+### Installation
+The installation is something pretty important for me because my computer's memory. Therefore I had to get rid of some stuff I considered as 'not strictly necessary', among these items were:
+- Stylus preprocessor
+- Prettier
+- Husky
+
+I know prettier help us with the code, but it is not a big deal for the app to work properly, so...
+
 ```
 npm install
 ```
 
-### Ejecución
+### Execution
+I have worked in some React projects before and I have some experience with components, pages and router. The way how the project is organized is pretty straight forward. Among the essential directories we have:
+- assets: Only icons were used in this project
+- components: The Layout works as a template. It is useful to gather all the components that will be in all the pages. In this case, the Header and the ProfileIntro are included in all the pages
+- containers: We only have App, which works as the router
+- pages: All the pages for this project, included the NotFound one, althought the latest doesn't have any special design
+- styles: Separated into two sections, one for components and other for pages. All was done with plain css
+
 ```
 npm run start
 ```
 
 ### Server
+It was no any major problem with this 'fake API', it works nice and my app renders all the data just fine. I wanted to add a loader, but I think it was no so-necessary because the page mantains statics almost always...
+
 ```
 npm run server
 ```
 
 ### Compilar
+No problem at all
+
 ```
 npm run build
 ```
 
-### Pruebas Unitarias
+### Unit testing
+Above I explain why I could't run this command
+
 ```
 npm run test
 ```

data.json

@@ -1,110 +1,119 @@
 {
   "data": {
-    "name": "Melissa Walsh",
-    "profession": "FrontEnd Developer",
-    "address": "Bogotá, Colombia.",
-    "email": "[email protected]",
-    "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, ",
-    "certificate": [
-      {
-        "date": "Jan 2021",
-        "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ",
-        "institution": "Platzi",
-        "name": "FrontEnd Developer"
-      },
-      {
-        "date": "Jan 2021",
-        "description": "Scratch at the door then walk away wack the mini furry mouse",
-        "institution": "Platzi",
-        "name": "Backend Developer"
-      }
-    ],
-    "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": "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"
-      }
-    ],
-    "experience": [
-      {
-        "company": "PugStar",
-        "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"
-      },
-      {
-        "company": "CatStore",
-        "endDate": "Jan 2016",
-        "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.",
-        "jobTitle": "Backend",
-        "startDate": "Sept 2019"
-      }
-    ],
-    "skills": [
-      {
-        "name": "HTML5",
-        "percentage": "75%"
-      },
-      {
-        "name": "CSS",
-        "percentage": "25%"
-      },
-      {
-        "name": "JavaScript",
-        "percentage": "55%"
-      },
-      {
-        "name": "React",
-        "percentage": "90%"
+    "profileIntro": {
+      "img": "https://static.platzi.com/media/avatars/avatars/irvingjuarez_1649ddef-c66f-44e4-9f92-3d32fa08a901.jpg",
+      "jobTitle": "Frontend Engineer",
+      "name": "Irving Vladimir Juárez",
+      "links": {
+        "linkedin": "https://www.linkedin.com/in/irving-juarez-36a973187/",
+        "github": "https://github.com/IrvingJuarez/",
+        "email": "[email protected]",
+        "twitter": "https://twitter.com/juarez1_irving/"
       }
-    ],
-    "interest": [
-      "javascript",
-      "develop",
-      "backend",
-      "frontend"
-    ],
-    "languages": [
-      {
-        "name": "Spanish",
-        "percentage": "90%"
-      },
-      {
-        "name": "English",
-        "percentage": "50%"
-      }
-    ],
-    "social": [
-      {
-        "name": "facebook",
-        "url": "https://facebook.com/"
-      },
-      {
-        "name": "twitter",
-        "url": "https://twitter.com/"
+    },
+    "home": {
+      "personalProfile": {
+        "title": "Personal Profile",
+        "content": "I am a front-end web developer with knowledge about Git, Github and the terminal. Besides that, I have a high level of mastery in html, css and JavaScript. Currently I develop all my projects with React.js"
       },
-      {
-        "name": "github",
-        "url": "https://github.com/"
+      "skills": {
+        "title": "Skills",
+        "content": [
+          {"id": "s1", "item": "Prompt"},
+          {"id": "s2", "item": "Git & GitHub"},
+          {"id": "s3", "item": "Html"},
+          {"id": "s4", "item": "Css"},
+          {"id": "s5", "item": "Vanilla JavaScript"},
+          {"id": "s6", "item": "Webpack"},
+          {"id": "s7", "item": "React js"},
+          {"id": "s8", "item": "React Router"}
+        ]
       },
-      {
-        "name": "linkedin",
-        "url": "https://www.linkedin.com/"
+      "experience": {
+        "title": "Experience",
+        "content": [
+          {
+            "id": "ep1",
+            "projectTitle": "Pacman-Remastered",
+            "projectDescription": "The classic Arcade game made with plain JavaScript",
+            "projectContent": [
+              {"id": "fp1", "content": "Creation of 'smart' characters in order to make the game tricky"},
+              {"id": "fp2", "content": "Interaction between two or more characters in the same space"},
+              {"id": "fp3", "content": "Advanced JavaScript applications"},
+              {"id": "fp4", "content": "Movement effects with css"}
+            ]
+          },
+          {
+            "id": "ep2",
+            "projectTitle": "equation-solver",
+            "projectDescription": "A program able to solve linear equations",
+            "projectContent": [
+              {"id": "sp1", "content": "Use of React library"},
+              {"id": "sp2", "content": "Use of Regular Expresions (RegExp)"},
+              {"id": "sp3", "content": "Raising of the state"},
+              {"id": "sp4", "content": "Algorithms at the moment to get the equation solved"}
+            ]
+          },
+          {
+            "id": "ep3",
+            "projectTitle": "weatherApp",
+            "projectDescription": "Real time weather status all around the world",
+            "projectContent": [
+              {"id": "tp1", "content": "Use of mapbox to render interactive maps"},
+              {"id": "tp2", "content": "Use of third parties' API's to get real time data"},
+              {"id": "tp3", "content": "Shifting data from one component to other components and pages"}
+            ]
+          }
+        ]
       }
-    ]
+    },
+    "education": {
+      "title": "Education",
+      "content": [
+        {"id": "e1", "content": "Web development school at Platzi (currently)"},
+        {"id": "e2", "content": "Escuelas Profesionales de Computacion / EPC (2019-2020)"},
+        {"id": "e3", "content": "TOEFL test - C1 level (August, 2020)"}
+      ]
+    },
+    "hobbies": {
+      "title": "Hobbies",
+      "content": [
+        {"id": "h1", "content": "Reading - In 2020 I read 31 books and I am aiming to 50 this year"},
+        {"id": "h2", "content": "Duolingo - French"},
+        {"id": "h3", "content": "Running - In December 2020 I won the 'Christmas race' at my aunt's company. The prize was a 10kg turkey"}
+      ]
+    },
+    "additionalInfo": {
+      "title": "Additional Information",
+      "content": [
+        {
+          "id": "ai1",
+          "contentTitle": "Additional Skills",
+          "contentContent": [
+            {"id": "as1", "content": "Figma"},
+            {"id": "as2", "content": "Illustrator"},
+            {"id": "as3", "content": "Photoshop"}
+          ]
+        },
+        {
+          "id": "ai2",
+          "contentTitle": "Learning new skills",
+          "contentContent": [
+            {"id": "lns1", "content": "Economics"},
+            {"id": "lns2", "content": "Data bases (relational db's)"},
+            {"id": "lns3", "content": "Marketing (SEO)"}
+          ]
+        },
+        {
+          "id": "ai3",
+          "contentTitle": "Personal Information",
+          "contentContent": [
+            {"id": "pi1", "content": "Age: 20"},
+            {"id": "pi2", "content": "Birthday: August 21th, 2001"},
+            {"id": "pi3", "content": "Location: Toluca, Mex"}
+          ]
+        }
+      ]
+    }
   }
 }