Welcome!👏🏻 In this repository you can find the files generated in the creation of my personal Portfolio.

The main objective was to create a responsive website where you can know a little more about me and my work. Additionally, it has helped me to practice and play with Angular, typescript and different design tools.

NOTE: Direct link to the project by clicking on the following link

Welcome to my personal Portfolio! If you are interested in knowing a little more about me and my work, you are in the right place.

In this repository we present you a simple web, intuitive and adapted to any kind of device (mobile, tablet and PC) so you can take a look at it anytime, anywhere. Based on my own design, the web will help you to know some of the aspects of my life.

This project uses ngx-translate for content internationalization, allowing dynamic translation of the user interface (ES-EN). In order to improve the user experience, a system has been implemented to change the theme of the web, you can choose between "light-mode"🌞​ and "dark-mode"🌚​​.

Additionally, it uses Jasmine and Karma for unit and integration testing, ensuring code quality and reliability.

├───interfaces/
│   ├───project.ts
│   └───skills.ts
├───modules/
│   ├───components/
│   │   └───card-project/
│   └───pages/
│       ├───about-me/
│       ├───home/
│       ├───projects/
│       ├───skills/
│       ├───modules-routing.module.ts
│       └───modules.module.ts
├───prime-ng/
│   └───prime-ng.module.ts
├───services/
│   └───theme.service.ts
├───shared/
│   ├───footer/
│   ├───nav-bar/
│   └───shared.module.ts
├───assets/
│   ├───i18n/
│   ├───icon/
│   └───img-project/
└───themes/
    ├───default/
        ├───fonts/
        ├───modules/
        ├───partials/
        └───core.thme.scss
    ├───default.theme.scss
    └───variables.scss

The following tools have been used when solving the project:

• HTML
• CSS/Sass
  • Variables, mixins and functions
  • Flexbox and Box model
  • Media queries
• Component library
  • PrimeNg
  • PrimeFLex
  • PrimeIcon
  • Bootstrap
• TypeScript
• Angular
  • Interfaces
  • Modules
  • Components
  • Imports
  • Injections
  • Services: To change theme mode
  • Directives - ngIf and ngFor
• GIT version control
• Testing: Jasmine y Karma
• JSON: To change the language (ES - EN)
• Design
  • Canva
  • Excalidraw

NOTE: This project was generated with Angular CLI version 16.0.0.

First of all, in order to have the repository on your computer:

1. Click on the top right corner > Fork.
2. It will ask you to choose which GitHub user you want to fork it to. Choose your user.
3. Go to github.com/your-user/name-of-project, clone it and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
4. Finally and for everything to work properly, you must disable GitHub Pages and re-enable it so that GitHub generates the new URL correctly.

Once you have done the fork:

1. Open it in your code editor.
2. Open a terminal and install the local dependencies by executing in the command terminal. Here are the ones I used to start my project:

npm install or yarn
npm install or yarn add primeng
npm install or yarn add primeicons
npm install or yarn add primeflex
npm install or yarn add @ngx-translate/core @ngx-translate/http-loader 

The project has to be started every time we start programming, to do this we will execute the command:

npm or yarn start

After running npm/yarn start we can start editing all the files inside the src/ folder and program comfortably 💫

Designed & Developed By Elena Arocena

Any input is most welcome. Thank you very much!