Update readme, fix one style bug and added one exp

Mariovido · Oct 20, 2023 · ad7350b · ad7350b
1 parent 0ce053d
commit ad7350b
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,110 @@
-# React + TypeScript + Vite
+# PORTFOLIO FRONTEND
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
 
-Currently, two official plugins are available:
+## About The Project
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+This repository will be the repository containing the the frontend of the Portfolio.
 
-## Expanding the ESLint configuration
+The main functionality of this app is to make a visual page that retrieves the data from a backend or from a data file.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### Built With
 
-- Configure the top-level `parserOptions` property like this:
+The frameworks/libraries used to complete this project are:
 
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
+- [React](https://react.dev)
+- [Yarn](https://yarnpkg.com)
+- [Vite](https://vitejs.dev)
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+<p align="right">(<a href="#portfolio-frontend">Back to top</a>)</p>
+
+## Getting Started
+
+To get a local copy up and running follow these simple example steps.
+
+### Prerequisites
+
+Before installing the software you must have installed the npm package. You can do it using the next command.
+
+- npm
+  ```bash
+  npm install --global yarn
+  ```
+
+### Installation
+
+_The steps to get working the project are the following ones:_
+
+1. Clone the repo
+    ```bash
+    git clone https://github.com/Mariovido/portfolio-frontend.git
+    ```
+2. Run the following command.
+    ```bash
+    yarn install
+    ```
+3. Create an .env file called `.env` on the root directory and fill the fields with your data.
+    ```env
+    VITE_REACT_APP_USE_SERVER="ENTER IF YOU'RE USING AN API"
+    VITE_REACT_APP_WEB_TITLE="ENTER YOUR TITLE OF THE PAGE"
+    VITE_REACT_APP_BASE_URL="ENTER YOUR BASE URL"
+    ```
+
+<p align="right">(<a href="#portfolio-frontend">Back to top</a>)</p>
+
+## Usage
+_To start using the app you need to run the following steps:_
+
+1. Open a terminal on the root folder
+2. If you want to use it in dev purpose run the following command
+    ```bash
+    $ yarn dev
+3. If you want to use it to run the tests run the following commands
+    ```bash
+    # unit tests
+    $ yarn test
+
+    # test coverage
+    $ yarn test:cov
+    ```
+4. If you want to test if your build is working run the following commands
+    ```bash
+    # build the app
+    $ yarn build
+
+    # runs the built app
+    $ yarn preview
+    ```
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<p align="right">(<a href="#portfolio-frontend">Back to top</a>)</p>
+
+## Contact
+Your Name - [@mariovido](https://github.com/Mariovido) - mario.vidaldom@gmail.com
+
+Project Link: [https://github.com/Mariovido/portfolio-frontend](https://github.com/Mariovido/portfolio-frontend)
+
+<p align="right">(<a href="#portfolio-frontend">Back to top</a>)</p>
diff --git a/data/portfolio/experience.ts b/data/portfolio/experience.ts
@@ -4,9 +4,66 @@ export const experience: Experiences = {
   experiences: [
     {
       id: '1',
+      role: 'Software engineer',
+      company: 'eDreams ODIGEO',
+      date: 'Jan 2023 - Ongoing',
+      description: [
+        {
+          id: '1',
+          description:
+            'Working with Java 11, JAX-RX, Oracle and other technologies to develop a robust backend on a modern microservices platform',
+        },
+        {
+          id: '2',
+          description:
+            'Collaborating in a high-performing, customer-centric product development team of 7-10 members, focusing on innovative solutions',
+        },
+        {
+          id: '3',
+          description:
+            'Actively contributing to daily deployments, emphasizing clean code, SOLID principles, and TDD',
+        },
+        {
+          id: '4',
+          description:
+            'Utilizing powerful monitoring tools like Datadog, BigQuery, and Graphana to ensure platform performance',
+        },
+        {
+          id: '5',
+          description:
+            'Engaging with top-tier development tools, such as Google Cloud, Jira, Git, and more, for efficient software development and monitoring',
+        },
+      ],
+      links: undefined,
+      companyLink: 'https://www.edreamsodigeo.com',
+      tags: [
+        {
+          id: '1',
+          name: 'Java',
+        },
+        {
+          id: '2',
+          name: 'GCP',
+        },
+        {
+          id: '3',
+          name: 'CI/CD',
+        },
+        {
+          id: '4',
+          name: 'Docker',
+        },
+        {
+          id: '5',
+          name: 'Apache Kafka',
+        },
+      ],
+    },
+    {
+      id: '2',
       role: 'Back-end developer',
       company: 'Minsait',
-      date: 'Jan 2023 - Ongoing',
+      date: 'Jan 2023 - Oct 2023',
       description: [
         {
           id: '1',
@@ -69,7 +126,7 @@ export const experience: Experiences = {
       ],
     },
     {
-      id: '2',
+      id: '3',
       role: 'Consultant',
       company: 'KPMG',
       date: 'Mar 2022 - Dec 2022',
@@ -125,7 +182,7 @@ export const experience: Experiences = {
       ],
     },
     {
-      id: '3',
+      id: '4',
       role: 'Software engineering intern',
       company: 'AINIA',
       date: 'Feb 2021 - Jun 2021',

diff --git a/data/portfolio/skill.ts b/data/portfolio/skill.ts
@@ -14,7 +14,7 @@ export const skill: Skills = {
     },
     {
       id: '3',
-      name: 'GIT',
+      name: 'Git',
       progress: 95,
     },
     {

diff --git a/src/assets/doc/CV.pdf b/src/assets/doc/CV.pdf
diff --git a/src/components/shared/Lists/SkillList.tsx b/src/components/shared/Lists/SkillList.tsx
@@ -10,7 +10,6 @@ function SkillList(props: SkillListProps) {
     <ul className="skill-list">
       {skillListProps.map((skillProp) => (
         <li className="skill" key={skillProp.id}>
-          {/* TODO - MAKE IT A LINK? */}
           <ProgressBar name={skillProp.name} progress={skillProp.progress} />
         </li>
       ))}

diff --git a/src/components/shared/Lists/styles/SkillList.scss b/src/components/shared/Lists/styles/SkillList.scss
@@ -8,4 +8,5 @@
 
 .skill {
   margin-bottom: 0.5rem;
+  align-self: self-end;
 }