Documentación en español | Documentation in English
- Acerca de mí
- Acerca de este Repositorio
- Instrucciones de Instalación
- ¿Cómo Contribuir?
- Licencia
- Créditos
- ¡Gracias por visitarme!
¡Hola!, mi nombre es Hararec y soy un desarrollador full stack con experiencia en javascript y python, y en tecnologías como React, Angular, Express y Django. También tengo conocimientos en diseño de interfaz de usuario y trabajando en equipo bajo metodologías ágiles. Mi formación en matemáticas me brinda una visión analítica y lógica para abordar problemas técnicos. Además soy un apasionado por el mundo digital, y siempre estoy buscando nuevos desafíos para mejorar mis habilidades y ampliar mi conocimiento. Para mí será un gusto aportar valor a cualquier equipo de trabajo con soluciones innovadoras.
Este repositorio alberga el código fuente de mi sitio web personal, el cual usa la versión 15.2.4 de Angular con yarn, usa las librerías de diseño @angular/cdk, PrimeNg, Bootstrap, Bootstrap-icons, tiene las configuraciones necesarias de Docker y PrimeNg-Icons, y sigue el flujo de trabajo de Gitflow. Además, utilizo la notación de Conventional Commits para mis commits, lo cual me permite mantener un control y una buena documentación del código. Este proyecto también ha sido inspirado en diseños mostrados en el canal de Youtube Online Tutorials, por lo que quiero expresar mi más sincero agradecimiento por compartir su conocimiento y por ser una fuente de inspiración para mí. Mi portafolio incluye una selección de proyectos que he realizado a lo largo de mi carrera como desarrollador. Cada uno de ellos refleja mis habilidades y mi pasión por el desarrollo de software de calidad. ¡Si quieres conocer más sobre mi trabajo o colaborar juntos, no dudes en ponerte en contacto conmigo! Estoy seguro de que juntos podemos alcanzar grandes objetivos.
Proyectos incluidos
A continuación, encontrarás una lista de algunos de los proyectos que he realizado y que he incluido en mi portafolio:
- [Nombre del proyecto]: [descripción de lo que hace la aplicación].
A continuación, se detallan las instrucciones para clonar y/o descargar, y ejecutar el proyecto en tu equipo.
Prerequisitos
Antes de comenzar, asegúrate de tener instalado en tu equipo:(Opcional) Descargar el zip
Para descargar el archivo zip del repositorio, sigue estos pasos:
- Haz clic en el botón "Code" que se encuentra en la esquina superior derecha de la página.
- En la página de código, haz clic en el botón "Download ZIP" que se encuentra debajo del nombre del repositorio.
- Se te pedirá que eligas una ubicación para guardar el archivo zip. Selecciona la ubicación deseada y haz clic en "Guardar".
Es importante tener en cuenta que el archivo zip descargado no incluye la carpeta ".git" ni el historial de commits del repositorio. Si deseas acceder a esta información, debes clonar el repositorio utilizando la línea de comandos, esto descargará el repositorio completo en la ubicación actual del terminal.
Clonar el Repositorio
Para clonar el repositorio de este proyecto, abre una terminal y escribe lo siguiente:
git clone https://github.com/hararecmg/hararec-website.git
Esto creará una copia del repositorio en tu máquina local.
Instalar Dependencias
Una vez que hayas descargado o clonado el repositorio, necesitarás instalar las dependencias del proyecto. Para hacerlo, abre una terminal y navega hasta la carpeta del proyecto:
cd hararec-website
Luego, instala las dependencias del proyecto con yarn:
yarn
# o
yarn install
# o
yarn install --frozen-lockfile
Esto descargará todas las dependencias del proyecto y las instalará en la carpeta node_modules.
Configuración de Variables de Entorno
Esta aplicación utiliza las dependencias para desarrollo @ngx-env/builder y @types/node para habilitar el uso de variables de entorno en todo el proyecto. Esto significa que las claves de API y otras configuraciones sensibles se deben almacenar en un archivo .env que se encuentra en la raíz del proyecto. Así la aplicación requiere que se configuren las siguientes variables de entorno antes de ejecutarse:
NG_OPENAI_API_KEY: la clave de API de OpenAI (obtenida de https://platform.openai.com/account/api-keys).NG_OPENAI_ORGANIZATION_ID: el identificador de OpenAI de tu organización (obtenida de https://platform.openai.com/account/org-settings).NG_SECONDS_IN_WHICH_MODAL_SALE_IS_DISPLAYED: la cantidad de segundos que quieres que se muestre la ventana modal de 'frases filosóficas' generadas con la api de OpenAI, antes de que se cierre de forma automática.NG_PEXEL_API_KEY: la clave de API de Pexels (obtenida de https://www.pexels.com/api/).DOCKER_DEV_USERNAME: El nombre de usuario para crear la imagen de DockerDOCKER_DEV_IMAGENAME: El nombre de deseado para crear la imagen de DockerDOCKER_DEV_TAG: El tag deseado para crear la imagen de Docker
Para configurar estas variables de entorno en diferentes sistemas operativos, siga las instrucciones a continuación:
Ejecute el siguiente comando en la terminal:
cp .env.example .envLuego, reemplace los valores de las variables NG_OPENAI_API_KEY y NG_PEXEL_API_KEY con sus propias claves de API.
Ejecute el siguiente comando en la consola de comandos:
copy .env.example .envLuego, reemplace los valores de las variables NG_OPENAI_API_KEY y NG_PEXEL_API_KEY con sus propias claves de API.
Recuerde no compartir su archivo .env con otros y mantenerlo en el archivo .gitignore para que no se suba a su repositorio.
Ejecutar la Aplicación
Una vez que hayas instalado las dependencias del proyecto, puedes ejecutar la aplicación con el siguiente comando:
yarn dev
Esto iniciará un servidor de desarrollo local en el puerto 8080 y abrirá la aplicación en tu navegador predeterminado. Cualquier cambio que realices en el código se reflejará automáticamente en el navegador.
Crear tu Versión de Producción
Para crear una versión de producción de tu aplicación, ejecuta el siguiente comando:
yarn build:prod
Esto creará una versión optimizada de tu aplicación en la carpeta docs. Puedes utilizar esta versión para implementar la aplicación en un servidor de producción. ¡Espero que disfrutes trabajando con este proyecto de Angular!
Crear imagen de Docker para Producción
Si tienes Docker instalado en tu equipo y el motor de Docker está inicializado, se puede crear de forma automátizada la aplicación en un servidor Nginx para producción. Solo ejecuta el siguiente comando:
yarn build:docker
Esto creará la imagen de la aplicación usando Nginx y las variables de entorno configuradas. Además correra el contenedor de la imagen en el puerto 3000
¡Gracias por tu interés en contribuir a mis proyectos! Hay varias formas en las que puedes hacerlo:
- Si encuentras algún error o bug en la aplicación, ¡ayúdanos a mejorarla reportándolo en la sección de "Issues" de GitHub!
- ¿Tienes una idea para una nueva funcionalidad o mejora? ¡Compártela con nosotros enviando una "Pull request" con tus cambios siguiendo la notación de Conventional Commits!
- Si quieres colaborar de otras formas o simplemente discutir posibilidades, no dudes en ponerte en contacto conmigo a través de LinkedIn o enviándome un correo electrónico. ¡Me gustaría conocer tus ideas y formas de mejorar las aplicaciones!
Este repositorio está licenciado bajo la licencia MIT, ya que personalmente prefiero y valoro el código open source. Esto significa que tienes permiso para utilizar y modificar el código incluido en este repositorio de acuerdo con los términos especificados en la licencia. Si utilizas este código en tus propios proyectos, debes incluir una copia de la licencia y dar crédito al autor original (yo).
Si tienes alguna pregunta o necesitas más información sobre cómo utilizar el código incluido en este repositorio, no dudes en ponerte en contacto conmigo a través de LinkedIn o enviándome un correo electrónico. ¡Estaré encantado de ayudarte!
En este repositorio se utiliza código de los siguientes proyectos con licencia MIT:
- css-cards-effects: Es un proyecto para crear efectos de tarjetas útiles CSS: transiciones, transformaciones y animaciones, el cual está protegido por derechos de autor y se distribuye bajo la licencia MIT. El archivo de este proyecto en el que se está utilizando dicho código de terceros, es el componente "LogoComponent". Para más información, consulta el archivo de licencia aquí.
- ParallaxScrolling: Es un proyecto para aplicar el efecto de desplazamiento de paralaje, el cual está protegido por derechos de autor y se distribuye bajo la licencia MIT. El archivo de este proyecto en el que se está utilizando dicho código de terceros, es el componente "ScrollingParallaxComponent". Para más información, consulta el archivo de licencia aquí.
- splash-transition : Es un proyecto para crear una animación llamativa, simplemente usando rutas SVG y transiciones CSS, el cual está protegido por derechos de autor y se distribuye bajo la licencia MIT. El archivo de este proyecto en el que se está utilizando dicho código de terceros, es el componente "WelcomeComponent". Para más información, consulta el archivo de licencia aquí.
Espero que hayas disfrutado explorando mis proyectos y que hayas encontrado algo de interés. Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto conmigo. ¡Me encantaría conocer tu opinión o colaborar contigo en futuros proyectos!
- About Me
- About This Repository
- Installation Instructions
- How to Contribute?
- License
- Credits
- Thank You for Visiting!
Hi! I'm Hararec, a full-stack dev with experience in Javascript and Python, as well as techs like React, Angular, Express and Django. I've got a background in UI design and teamwork using agile methodologies, and my mathematical background provides me with an analytical and logical approach to solving tech problems. I'm passionate about the digital world and always looking for new challenges to enhance my skills and knowledge. I'd be thrilled to bring innovative solutions to any work team.
This repo holds the source code for my personal website, using Angular v15.2.4 with yarn, and the design libs @angular/cdk, PrimeNg, Bootstrap, Bootstrap-icons, you have the necessary configurations of Docker and PrimeNg-Icons. It follows the Gitflow workflow and I use Conventional Commits notation for my commits, ensuring proper code control and documentation. The project's also inspired by designs shown on the Online Tutorials Youtube channel, and I'm grateful for their sharing of knowledge and being an inspiration. My portfolio showcases selected projects I've completed throughout my dev career, each reflecting my skills and passion for delivering quality software. If you want to learn more about my work or collaborate, don't hesitate to reach out! I'm confident we can achieve great things together.
Included Projects
Below, you will find a list of some of the projects that I have completed and included in my portfolio:
- [Project Name]: [description of what the application does].
Below are the instructions for cloning and/or downloading and running the project on your computer.
Prerequisites
Before starting, make sure you have installed on your computer:
(Optional) Download the zip
To download the zip file of the repository, follow these steps:
- Click on the "Code" button located in the top right corner of the page.
- On the code page, click on the "Download ZIP" button located below the name of the repository.
- You will be asked to choose a location to save the zip file. Select the desired location and click "Save".
It is important to note that the downloaded zip file does not include the ".git" folder or the repository's commit history. If you want to access this information, you must clone the repository using the command line, which will download the complete repository to the current location of the terminal.
Clone the Repository
To clone the repository of this project, open a terminal and type the following:
git clone https://github.com/hararecmg/hararec-website.git
This will create a copy of the repository on your local machine.
Install Dependencies
Once you have downloaded or cloned the repository, you will need to install the project dependencies. To do this, open a terminal and navigate to the project folder:
cd hararec-website
Then, install the project dependencies with yarn:
yarn
# or
yarn install
# or
yarn install --frozen-lockfile
This will download all the project dependencies and install them in the node_modules folder.
Setting Environment Variables
This application uses development dependencies @ngx-env/builder and @types/node to enable the use of environment variables throughout the project. This means that API keys and other sensitive configurations should be stored in a .env file located at the root of the project. Therefore, the application requires the following environment variables to be configured before running:
NG_OPENAI_API_KEY: OpenAI API key (obtained from https://openai.com/api/).NG_OPENAI_ORGANIZATION_ID: - Your organization's OpenAI identifier (obtained from https://platform.openai.com/account/org-settings).NG_SECONDS_IN_WHICH_MODAL_SALE_IS_DISPLAYED: the number of seconds you want the 'philosophical phrases' modal window generated with the OpenAI api to display, before it closes automatically.NG_PEXEL_API_KEY: Pexels API key (obtained from https://www.pexels.com/api/).DOCKER_DEV_USERNAME: The username to create the Docker imageDOCKER_DEV_IMAGENAME: The desired name to create the Docker imageDOCKER_DEV_TAG: The desired tag to create the Docker image
To configure these environment variables on different operating systems, follow the instructions below:
Run the following command in the terminal:
cp .env.example .envThen, replace the values of the NG_OPENAI_API_KEY and NG_PEXEL_API_KEY variables with your own API keys.
Run the following command in the command prompt:
copy .env.example .envThen, replace the values of the NG_OPENAI_API_KEY and NG_PEXEL_API_KEY variables with your own API keys.
Remember not to share your .env file with others and keep it in the .gitignore file so it's not uploaded to your repository.
Run the Application
Once you have installed the project dependencies, you can run the application with the following command:
yarn dev
This will start a local development server on port 8080 and open the application in your default browser. Any changes you make to the code will be automatically reflected in the browser.
Create your Production Version
To create a production version of your application, run the following command:
yarn build:prod
This will create an optimized version of your application in the docs folder. The build artifacts will be stored in the docs directory.
Build Docker Image for Production
If you have Docker installed on your computer and the Docker engine is initialized, the application can be built automatically on a Nginx server for production. Just run the following command:
yarn build:docker
This will create the application image using Nginx and the configured environment variables. It will also run the image container on port 3000
Thank you for your interest in contributing to my projects! There are several ways you can do so:
- If you find any errors or bugs in the application, help us improve it by reporting it in the "Issues" section of GitHub!
- Do you have an idea for a new functionality or improvement? Share it with us by sending a "Pull request" with your changes following the notation of Conventional Commits!
- If you want to collaborate in other ways or just discuss possibilities, don't hesitate to get in contact with me through LinkedIn or by sending me an email. I would love to hear your ideas and ways to improve the applications!
This repository is licensed under the MIT license, as I personally prefer and value open source code. This means that you are permitted to use and modify the code included in this repository according to the terms specified in the license. If you use this code in your own projects, you must include a copy of the license and give credit to the original author (me).
If you have any questions or need more information about how to use the code included in this repository, don't hesitate to get in contact with me through LinkedIn or by sending me an email. I will be happy to help!
This project uses code from the following MIT licensed projects:
-
css-cards-effects: It's a project to create useful CSS card effects such as transitions, transformations, and animations, which is protected by copyright and distributed under the MIT license. The file in this project that uses third-party code is the "LogoComponent" component. For more information, see the license file here.
-
ParallaxScrolling: It's a project to apply the parallax scrolling effect, which is protected by copyright and distributed under the MIT license. The file in this project that uses third-party code is the "ScrollingParallaxComponent" component. For more information, see the license file here.
-
splash-transition: It's a project to create an eye-catching animation simply using SVG paths and CSS transitions, which is protected by copyright and distributed under the MIT license. The file in this project that uses third-party code is the "WelcomeComponent" component. For more information, see the license file here.
I hope you have enjoyed exploring my projects and that you have found something of interest. If you have any questions or suggestions, feel free to contact me. I would love to hear your thoughts or collaborate with you on future projects!